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

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

月光魔力鸭

2020-07-09 00:32 阅读 1253 喜欢 4 微信登录 扫码登录

最近一直琢磨着做一个第三方统一登录的这么一个小东西,虽然网上其实也挺多的.. 不过造轮子的感觉还是很爽的。 QQ /Github 比较简单,申请下就OK 了.. 微信真不是个东西,得花钱。

事情是这样的:

我有一个服务号,是认证过了的,为了实现微信支付,花了几百大洋也给过了.. 虽然中间经历了不少坎坷,也算成功了。 但是,当我以为我这个认证过了的服务号,去申请下微信登录的时候,发现,竟然还需要微信开放平台的开发者认证,而且认证得花钱...而且服务号的认证还不算...我就日了够了,怪不得微信这么赚呢,光TM(sorry,爆粗了..没忍住)这认证费就老多了,多少开发者啊。毒瘤!!

这样,既然我已经有了一个服务号了,而且服务号是可以支持不关注公众号获取微信用户信息的,我估摸着应该也能绕过去,无非就是不是辣么好看罢了,能实现就OK啦 ヾ(゚∀゚ゞ)

思路整理

大体思路就是这样,真实现起来.. 感觉也就微信公众号获取用户信息这段稍微麻烦点..毕竟得翻着API才能写.

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

至于代码.. 我感觉真没啥说的,我是用nodejs实现的,后端的接口:

大约就这么几个吧,简单写下关于微信公众号获取用户信息的代码吧。

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

nodejs - thinkjs - controller/wechat.js

/***
 * 微信模拟登录获取当前用户信息
 */
const Base = require('../base');
const axios = require('axios');

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);
    }
}

转载请注明出处: https://chrunlee.cn/article/wechat-scan-login.html


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
之前做了一段时间的上传相关的断点续传和秒传功能,这里整理下大体思路
最近有系统需要知道性能瓶颈,尝试使用jmeter对重要接口进行并发测试,确定能否支撑一定的用户数量。
本来是想做一个图床,然后在chrome扩展中添加上,但是发现chrome的扩展有点毫无头绪,只能从头练习,从头学了。
小程序需要用到用户的手机号码,看了下API 以及相关的demo,基本都是服务端进行解密的,问题是需要的参数并没有用到secret,只需要 session_key / iv /encryptedData 即可,那完全可以在客户端进行处理啊。
mysql数据库插入double类型确没有小数点
功能来源于客户需求。客户有需求想把班级内所有学生的错题本生成pdf文档下载下来... 目前没有做这个功能,只有页面,还好chrome浏览器有保存pdf的功能,但是一想到这么多的学生,这么多的学科、以及这么多的参数... 还好有puppeteer
上一章,我们学习和了解了websocket 是什么以及初始搭建,接下来,我们继续了解,如何进行广播以及对应的私聊呢。
前一阵子做了个图床,可以粘贴上传,查看服务器上的文件... 但是自己的服务器总是有问题..空间还小,就怕哪天没钱续费了。同事昨天想要一个七牛的图床,在网上找了下,只找到了 qiniu upload files插件,自己使用了下,挺好用,但是没有复制粘贴