集成qq互联过程记录-js sdk

集成qq互联过程记录-js sdk

月光魔力鸭

2020-03-09 16:54 阅读 760 喜欢 1 qq互联

登录方式现在非常多,不过像我这种小站让用户自己注册基本是不可能的了,只能依赖现有的第三方的登录来集成,之前有集成github,不过这个太过针对性,这里准备集成QQ互联登录,慢慢记录下。

资源

申请接入

在应用管理中创建应用,填写信息申请,要注意的是:网站名称和类别最好填写备案的时候的填写的信息,有可能会审核不通过的,像我这样懒的人..陆陆续续申请长达1个月.最终才通过的,可能前一阵子就通过了,我没查看吧。

ヾ(o◕∀◕)ノヾ

开始coding..


从写下开始coding..然后到这句话,经过了大约2个月..汗!我这拖更太严重了.. 主要还是目前博客用户量太少,懒得加功能,所以一直没做,下午的时候忽然想加入微信登录来着,一想,我擦,我QQ登录还没做完呢..赶紧加把火,赶紧把这文章给结了。

好,废话少说,这里面我先说一个问题,就是调试的问题。本来我以为QQ互联的网站回调域只能写一个来着..结果今天发现能写多个,这就解决了我一直比较惆的调试问题,毕竟,总不能写行代码都要去生产吧,会死的。

接下来,一步一步带领各位来实现QQ互联,先说明下,我的后端是nodejs,不过跟其他语言没啥区别就是语法不同而已,可以借鉴下嘛。

先放个入口

不管怎么样,都要有一个入口,或者图片,或者按钮或者链接,让用户点击后,跳转到授权页面去,这个我就随便截图就行啦,也可以看我网站的右上角登录尝试。

代码截图,这里就布放具体代码了,就是写个a也一样

点击“qq”后,会新打开一个窗口,然后跳转到我们自己后台地址,从后台地址,拿到appid以及redirecturi,然后进行302跳转。 下面是我的后端代码:

async qqloginAction(){
        //跳转
        let qq = think.service('qq',{
            appId : this.config('site').qqappid.value,
            appSecret : this.config('site').qqappkey.value
        });
        let redirectUrl = qq.getAuthUrl();
        return this.redirect(redirectUrl);
    }
//简单不.. 哈哈,其实就是重定向一个QQ的地址,可以参考oauth的官方文档。

核心代码,上边的都不算哈,基于thinkjs3.0的service

//qq service
const axios = require('axios');

module.exports = class extends think.Service{

    constructor(opts){
        super();
       
        this.opts = opts;
        this.url = {
            codeUrl : `https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=${opts.appId}&redirect_uri=http://demo.byyui.com/login/qq&state=123&scope=get_user_info`,
            tokenUrl : `https://graph.qq.com/oauth2.0/token`,
            openUrl : `https://graph.qq.com/oauth2.0/me`,
            infoUrl : `https://graph.qq.com/user/get_user_info`
        };
    }
    getAuthUrl(){
        return this.url.codeUrl;
    }
    tokenUrl(code,redirect){
        return this.url.tokenUrl+`?grant_type=authorization_code&client_id=${this.opts.appId}&client_secret=${this.opts.appSecret}&code=${code}&redirect_uri=${redirect}`;
    }
    openUrl(tokenValue){
        return this.url.openUrl+`?access_token=${tokenValue}`
    }
    infoUrl(tokenValue,openIdValue){
        return this.url.infoUrl+`?access_token=${tokenValue}&oauth_consumer_key=${this.opts.appId}&openid=${openIdValue}`;
    }
    //获取token
    async _getToken(code,redirect){
        let data = await axios.get(this.tokenUrl(code,redirect)).then(rs=>rs.data);
        let dataObj = {};
        data.split('&').forEach(item=>{
            dataObj[item.split('=')[0]] = item.split('=')[1]
        });
        return dataObj.access_token;
    }
    //获取openid
    async _getOpenId(tokenValue){
        let data = await axios.get(this.openUrl(tokenValue)).then(rs=>rs.data);
        //从callback中获取openId
        let openId = /openid":"(.*)"/.exec(data);
        openId = openId[1];
        return openId;
    }
    //获取用户信息
    async _getUserInfo(tokenValue,openId){
        let userInfo = await axios.get(this.infoUrl(tokenValue,openId)).then(rs=>rs.data);
        userInfo.openId =openId;
        return userInfo;
    }
    //qq互联登录--main函数
    async login(code,redirect){
        let tokenValue = await this._getToken(code,redirect);
        let openId = await this._getOpenId(tokenValue);
        return await this._getUserInfo(tokenValue,openId);
    }
}

首先,这里面没有一点技术含量,无非就是看文档,照着文档来做而已,至于刷新token之类的....我都没做,因为我只要能登录获取信息就完了,超时重新登录呗。

302跳转后

通过第一步,重定向后,会跳转到一个我们很常见的授权页面。

然后,点击头像登录后,会重新跳转到我们提供的redirecturl ,我这里是另外一个地址。然后会带伤code ,比如: http://chrunlee.cn/qq?code=123123123 ,code我们有用,拿来跟QQ换token,然后拿着token换openId,然后拿着token和 openId换用户信息...OVER。

核心代码中写的还算详细,直接看就行,没啥难度,有啥问题可以直接评论,我会在第一时间回复哦!

最后

授权成功,拿到用户信息了,就是存数据库了,不过也不会给什么关键信息,我需要的就是名字+头像就完了,其他的都不要。

历时2个多月的文章终于写完啦 哈哈哈 ヾ(。 ̄□ ̄)ツ゜゜゜ 接下来,我要搞微信登录啦。

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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
最近在做直播,是用的webrtc,然后找的免费的starrtc ,当然,可能由于种种原因吧.. 用起来并没有特别顺畅,后续还希望能够深入这部分,从现在开始学习..当然,websocket 是顺带的,可以用来发消息什么的肯定也是要用到的。
写到这里,基本上就完成了我之前一篇文章中写的,我要做一个自己的图床的小程序了。在最初我要做图床的时候,发现在谷歌扩展程序上一无所知,所以才开始学习的这个,到这一步,至少能勉强能跑通自己的小程序了。
之前看知乎相中了一个想法,给宝宝做一个站,上传生活的日常照片啊、视频之类的,存储肯定是在自己家里,然后做个穿透这样..开始做的时候又想着是时候接触下这些东西了,虽然公司都一点不用,但是自己没事接触下拓展下也是好的。
通过frp做穿透实现https 访问本地http项目。
扩展程序中会有需要请求外部接口获取数据的时候,如果直接在JS中写的话,会跨域,但是谷歌扩展程序支持这种情况,只需要配置一下即可。
反爬有很多手段,字体反爬就是其中之一。之前一直都是听过,但是却没怎么在实际爬虫中遇到过,最近在一个爬虫题目网站上看到了,试了试,发现还挺麻烦,当然自己从头研究字体肯定麻烦,简单的是模块多的是,选几个就过了。
chrome 如何查看placeholder样式以及其他伪类样式
最近一直琢磨着做一个第三方统一登录的这么一个小东西,虽然网上其实也挺多的.. 不过造轮子的感觉还是很爽的。 QQ /Github 比较简单,申请下就OK 了.. 微信真不是个东西,得花钱。