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://www.zeropaas.com/QQLogin"
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登录的区别
- 内嵌不同
微信登录可以内嵌网站登录页面，也可以打开微信登录授权页面，QQ登录不可以内嵌网站登录授权页面，必须打开QQ登录授权页面，如果是打开微信或QQ登录授权页面，则登录授权成功后必须关闭该页面。
- 回调地址要求不同
微信登录回调地址可以指定一级根目录或二级子目录，比如"http://zeropaas.com "或"http://zeropaas.com/wxLogin"，QQ登录回调地址必须指定二级子目录，比如"http://zeropaas.com/qqLogin"
