微信扫码登录PC网站实现思路

微信扫码登录PC网站实现思路

点点

2021-04-25 10:00 阅读 496 喜欢 1

思路整理

登录页面,当点击微信登录后,根据地址url生成一个二维码,让用户扫描。 在生成二维码的同时,我在数据库插入一条记录,然后将ID放在这个二维码中。 然后用户拿着微信去扫描这个二维码(地址),后面的就是公众号通过网页获取用户信息了.. 获取到用户信息后,根据地址中的ID,查找数据库,更新状态和用户信息 与此同时,在PC端二维码生成后,一直轮询向后台请求状态,根据状态获取对应的结果 大体思路就是这样,真实现起来.. 感觉也就微信公众号获取用户信息这段稍微麻烦点..毕竟得翻着API才能写.

需要感受完整功能的可以在 我的亿万店 随便找个商品,点击购买的时候,选择普通登录,就会跳转到我的第三方登录系统啦

代码是用nodejs实现的,后端的接口:

创建二维码 轮询状态 跳转到第三方地址(这个大家用的话,可能就是登录成功后跳转的地址了) 微信公众号跳转地址,用于获取code 微信公众号重定向地址,用户获取用户信息,并展示对应的信息 简单写下关于微信公众号获取用户信息的代码吧。

公众号获取用户信息代码部分

nodejs - thinkjs - controller/wechat.js

/***

module.exports = class extends Base{

/**
 * 微信扫描二维码进入该地址,附带地址信息。
 */
async indexAction(){
    let code = this.query('code');
    let redirectURI = this.config('site').domain.value+'/oauth/wechat/redirect';
    let appid = this.config('site').wechatappid.value;
    let scope = 'snsapi_userinfo';
    await this.model('lxxx').where({id : code}).update({
        status : 1//已扫描
    });
    let codeUrl =  `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectURI}&response_type=code&scope=${scope}&state=${code}#wechat_redirect`;
    return this.redirect(codeUrl);
}

/**
 * 重定向后的地址,换取access_token
 */
async redirectAction(){
    let code = this.query('code');
    let state = this.query('state');

    let appid = this.config('site').wechatappid.value;
    let secret = this.config('site').wechatappsecret.value;
    let tokenUrl = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=${secret}&code=${code}&grant_type=authorization_code`;

    let rs = await axios.get(tokenUrl).then(rs=>rs.data);
    console.log(rs);
    let access_token = rs.access_token;
    let openId = rs.openid;

    let userUrl = `https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openId}&lang=zh_CN`

    let userInfo = await axios.get(userUrl).then(rs=>rs.data);
    console.log(userInfo);
    let {nickname,headimgurl} = userInfo;
    //查找state
    let record = await this.model('xxx').where({id : state}).find();
    console.log(record);
    if(!think.isEmpty(record) && openId && userInfo && !userInfo.errmsg){
        //获取用户信息成功
        console.log('登录成功,更新信息')
        await this.model('xxx').where({id : state}).update({
            json : JSON.stringify(userInfo),
            code : think.uuid().replace(/-/g,''),
            name : nickname,
            openid : openId,
            avatar : headimgurl,
            status : 2
        });
        this.assign('suc',true);
    }else{
        console.log('登录失败')
        await this.model('xxx').where({id : state}).update({status : 4});
        this.assign('suc',false);
    }
    //此处需要将获得的state ,然后查找对应的记录,进行数据更新。并提示关闭当前页面。
    return this.display('wechat/logintip');

}

/**
 * 扫描成功后,进入该地址,根据session进行页面地址跳转
 */
async wechatAction(){
    let id = this.query('id');
    let record = await this.model('xxx').where({id : id}).find();
    //获取对应的appid
    let loginInfo = await this.session('loginInfo');
    let clientCode = record.code;
    return this.redirect(loginInfo.redirect_uri+'?code='+clientCode+'&state='+loginInfo.state);
}

}

转载请注明出处: http://sdxlp.cn/article/weixindengru.html


如果对你有用的话,请赏给作者一个馒头吧 ...或帮点下页面底部的广告,感谢!!

赞赏支持
提交评论
评论信息(请文明评论)
暂无评论,快来快来写想法...
推荐
小米手机很早已推出了门禁卡功能,目前后知后觉的华为手机也在内测版的“钱包”应用内,增加了“门钥匙”功能。使用该功能结合手机NFC,可以将华为手机秒变门钥匙,轻松开门禁。免去忘记带门禁卡,在小区门口漫长等待的烦恼。
生活中,小伙伴们有可能使用电脑后,直接热插拔,或者直接断电,基本会为了省事。那么这样就会造成电脑出现不安全的状态,下次就有可能开不起来啦!开不起蓝屏怎么办那?跟点点看一下。教您轻松解决,不用求人,费钱。
在当下的时代办公软件有好多,但现在钉钉是我们常用的办公软件之一,有小伙伴问怎么修改钉钉文件的默认保存位置,下面小编介绍一下。
在21世纪,网络已经是生活中必不可少的部分,许许多多的小伙伴们逐步踏入互联网行业,因而也催生了许多职业,比如说网页编辑与制作,网络客服,短视频编辑及制作等等。
电脑版微信是一款非常好用的沟通软件,目前很多小伙伴们的日常工作也会靠微信来进行各种各样的沟通等,因为使用它来进行日常办公的沟通和日常生活的沟通,两者互不耽误,又能巧妙的一起进行。
这几天电信发生的大面积网络不能使用的问题,很多小伙伴在正常能上网时上不去,网络对于手机来说是至关重要的,有些小伙伴在使用iPhone手机的时候偶尔遇到无法上网问题,不知道如何解决,接下来小编就给小伙伴们介绍一下具体的操作步骤。
随着科技的快速发展,人工智能(AI)已经在各个领域大放异彩。其中,AI换脸技术以其独特的魅力引起了广泛的关注。这项技术主要运用深度学习算法,通过分析人脸的几何结构,将生成的模型映射到另一张人脸图像上,实现人脸的巧妙转换。
智能手机成为我们生活中必不可少的生活用品,当我们在使用手机的时候,可以下载微信app来与好友取得联系,但是有时候微信会看不到,又遇到特别急的事情,那怎么在是好友状态不知道手机号的情况下,给其打电话。在微信内,一般用户都会绑定自己的手机号码,那么如何通过微信号来查询对应的手机号呢?接下来就由点点来告诉小伙伴们。