解决微信H5端用户注册登录

最新推荐文章于 2024-07-13 15:20:17 发布

tx10765

最新推荐文章于 2024-07-13 15:20:17 发布

阅读量748

点赞数

文章标签： node.js javascript html5

本文链接：https://blog.csdn.net/tx10765/article/details/118190285

版权

前端可主动或用户手动触发newregist()，引导用户登录或注册。

该演示为以snsapi_userinfo为scope发起的网页授权

前端页面发起登录请求：

Vue.prototype.newregist=function(){
	var appid_text=this.appid;//公众号appid
	var ourl="https://open.weixin.qq.com/connect/oauth2/authorize?";
	var appid='&appid='+ appid_text;
	var redirect_uri="&redirect_uri="+encodeURIComponent('https://www.example.cn/test/#/pages/middle/middle');
    //授权后重定向的回调链接地址，这里为middle中间页
	var response_type="&response_type=code";
	var scope="&scope=snsapi_userinfo";
	var wechat_redirect="#wechat_redirect";
	var url=ourl+appid+redirect_uri+response_type+scope+wechat_redirect;
	window.location.href=url; //拼接后的跳转链接
}

node后端通过API getopenid 获取并返回微信用户数据

exports.getopenid=function(req,res){
	var code=req.body.code;
	var froms=req.body.froms;
	var datas='';
	var appid='APPID';
	var secret="SECRET";
	var access_token_val="access_token";
	var openid="OPENID";
	var url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid="+appid+"&secret="+secret+"&code="+code+"&grant_type=authorization_code";  
    //获取access_token
	request(url, function (error, response, body) {
		if (!error && response.statusCode == 200) {
			datas=JSON.parse(body).openid;
			var access_token=JSON.parse(body).access_token;
			var urls='https://api.weixin.qq.com/sns/userinfo?access_token='+access_token+'&openid='+datas+'&lang=zh_CN';
            //获取用户信息
			request(urls, function (error, response, body) {
				if (!error && response.statusCode == 200) {
					var userinfo=JSON.parse(body);
					//已获取用户信息，进行相关操作，并将格式化的用户信息发回前端
                    res.send(userData);
				}
			});
		}
	});
}

在跳转中间页middle内执行函数login()

login(){
    var str=window.location.href;
			var that=this;
			var code=str.split("?")[1].split("&")[0].split("=")[1];
			uni.request({
				url:"https://www.example.cn/getopenid",
				method:'POST',
				data:{"code":that.code},
				success:(data)=> {
                    var userData=data;
                    //此处接收用户信息并跳转到目标页面
					location.href=uni.getStorageSync("originalurl");
				},
			});
}

中间页接收用户数据，做好存储，跳转至目标页面，完成登录/注册。

欢迎指正和共同探讨。