网站应用接入QQ登录（网站使用qq登录）

1.网站接入QQ登录的好处

QQ登录使网站可以免除注册的流程，并充分利用庞大的QQ用户群来实现快速传播；网站接入QQ登录后，用户只需要使用手机扫码就可登录，简化用户注册流程，更有效率的提高转化用户流量。

2.网站接入QQ登录之前需要申请

网站接入QQ登录之前，我们是以瓴码官网http://www.zeropaas.com申请并获得对应的appid与appkey，以保证后续流程中可正确对网站与用户进行验证与授权。

3.瓴码官网http://www.zeropaas.com前端增加相关代码

let nowUrl = location.href;
let result = /code=(\w*)&state=([0-9]*)/.exec(nowUrl);
if(result){
    window.parent.postMessage(nowUrl,'*');
}

4.网站前端打开QQ登录授权页面

!function () {
    const state = Number(new Date()).toString();
    window.sessionStorage.setItem('state', state)
    const appid = "101886199"
    const redirect_uri = "http%3A%2F%2Fwww.zeropaas.com%2FQQLogin"
    const url = "https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=" + appid + "&redirect_uri=" + redirect_uri + "&state=" + state;
    window.open(url, '', 'width=750,height=450')
}()

5.网站前端QQ登录授权成功之后的处理

window.onmessage = (e)=> {
    const codeObj = e.data
    let oldState = window.sessionStorage.getItem('state');
    let newState = codeObj.state;
    if(oldState === newState){
        thirdLogin(1,codeObj.code,1,$this.sessionID,0,null) //向云端发送第三登录事件,code是QQ登录码
        if ($lm_para.$result [0] === null) {
            $this.$router.push('/') //QQ登录成功，并且不要绑定手机号
        } else {
            $this.openID = result[0] //QQ登录成功，并且不要绑定手机号
            $this.compShow('bindingPhone')
        }
    }
    window.onmessage = null
},

6.网站云端获取QQopenid和access_token

function getOpenid_QQ(appid, appSecret,code, successCB, errorCB) {
const request = require(global.nodePath + "/node_modules/request");
const redirectURI = require('./qqConfig').getRedirectUrl();
let url_1 = " https://graph.qq.com/oauth2.0/token? grant_type=authorization_code&client_id=" + appid + "&client_secret=" + appSecret + "&redirect_uri=" + encodeURIComponent(redirectURI) + "&code=" + code;
request.get(
    {
        url: url1,
        method: "GET",
        json: true,
        headers: {
            "Content-type": "application/json",
        },
    }, function (error, response, body) {
        if (response.statusCode == 200) {
            let data = JSON.stringify(body, null, 4);
            let data1 = (JSON.parse(data));
            let access_token = data1.access_token;
            request.get({
                    url: "https://graph.qq.com/oauth2.0/me?access_token=" + access_token
                },
                function (error, response, body) {
                    if (response.statusCode == 200) {
                        var userinfo = JSON.parse(body);
                        let openid = userinfo.openid;
                        success(access_token,openid);
                    } else {
                        console.log('获取openid失败！', response.statusCode);
                    }
                }
            );
            let openid = data1.openid;
            successCB(access_token, openid);
        } else {
            errorCB(['获取access_token失败！状态码：'+ response.statusCode]);
        }
    }
);

7.微信登录和QQ登录的区别

1. 内嵌不同

微信登录可以内嵌网站登录页面，也可以打开微信登录授权页面，QQ登录不可以内嵌网站登录授权页面，必须打开QQ登录授权页面，如果是打开微信或QQ登录授权页面，则登录授权成功后必须关闭该页面。

1. 回调地址要求不同

微信登录回调地址可以指定一级根目录或二级子目录，比如"http%3a%2f%2fzeropaas.com "或"
http%3a%2f%2fzeropaas.com/wxLogin"，QQ登录回调地址必须指定二级子目录，比如"
http%3a%2f%2fzeropaas.com/qqLogin"