1.访问网站以获得QQ登录优惠。
通过QQ登录,网站可以免除注册过程,充分利用庞大的QQ用户基础,快速传播。网站连接QQ登录后,用户只需使用手机扫描码即可登录,简化用户注册流程,更有效地改善转换用户流量。
2.网站接入QQ登录之前需要申请
网站接入QQ登录之前,我们是以瓴码官网申请并获得对应的appid与appkey,以保证后续流程中可正确对网站与用户进行验证与授权。
3.瓴码官网前端增加相关代码
let nowUrl = loca;
let result = /code=(\w*)&State=([0-9]*)/.exec(nowUrl);
if(result){
window.(nowUrl,'*');
}
4.网站前端打开QQ登录授权页面
!function () {
const state = Number(new Date()).toString();
window.('state', state)
const appid = "101886199"
const redirect_uri = "http%3A%2F%2Fwww.zero;
const url = ";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.('state');
let newState = codeObj.state;
if(oldState === newState){
thirdLogin(1,codeObj.code,1,$) //向云端发送第三登录事件,code是QQ登录码
if ($lm_para.$result [0] === null) {
$this.$rou('/') //QQ登录成功,并且不要绑定手机号
} else {
$ = result[0] //QQ登录成功,并且不要绑定手机号
$('bindingPhone')
}
}
window.onmessage = null
},
6.网站云端获取QQopenid和access_token
function getOpenid_QQ(appid, appSecret,code, successCB, errorCB) {
const request = require + "/node_modules/request");
const redirectURI = require('./qqConfig').getRedirectUrl();
let url_1 = " grant_type=authorization_code&client_id=" + appid + "&client_secret=" + appSecret + "&redirect_uri=" + encodeURIComponent(redirectURI) + "&code=" + code;
reque(
{
url: url1,
method: "GET",
json: true,
headers: {
"Content-type": "application/JSON",
},
}, function (error, response, body) {
if == 200) {
let data = JSON.stringify(body, null, 4);
let data1 = (data));
let access_token = da;
reque({
url: "; + access_token
},
function (error, response, body) {
if == 200) {
var userinfo = JSON.parse(body);
let openid = u;
success(access_token,openid);
} else {
con('获取openid失败!', re);
}
}
);
let openid = da;
successCB(access_token, openid);
} else {
errorCB(['获取access_token失败!状态码:'+ re]);
}
}
);
7.微信登录和QQ登录的区别
- 内嵌不同
微信登录可以内嵌网站登录页面,也可以打开微信登录授权页面,QQ登录不可以内嵌网站登录授权页面,必须打开QQ登录授权页面,如果是打开微信或QQ登录授权页面,则登录授权成功后必须关闭该页面。
- 回调地址要求不同
微信登录回调地址可以指定一级根目录或二级子目录,比如"http%3a%2f%2 "或"http%3a%2f%2/wxLogin",QQ登录回调地址必须指定二级子目录,比如"http%3a%2f%2/qqLogin"