说明:
由于业务需要,所以这两天抽空看了一下第三方登录的API,从而实现了第三方的登录。
一、申请APPID
到QQ和新浪微博的开发平台申请APPID和SECRET ,这是一个百度的apistore,第三方登录;
二、QQ登录
1. 使用js
i. 先引入js(redirecturi是登录成功后的返回页面地址)
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="APPID" data-redirecturi="REDIRECTURI" charset="utf-8"></script>
ii. 绑定登录按钮(只需要一个元素的id,会自动生成默认的按钮)
QC.Login({
btnId:"qqLoginBtn" //插入按钮的节点id
});
2. 使用OAuth(授权机制)
i. 使用自定义的按钮
<a href="javascript:qqLogin();"><img src="qq.png" /></a>
//使用qq登录
function qqLogin(){
location.href =
'https://graph.qq.com/oauth2.0/authorize?client_id='+thirdLogin.APPID_QQ+'&response_type=token&scope=get_user_info&redirect_uri='+getCurrLocation();
}
//获取当前页面路径--从哪个页面登录,登录成功后,返回哪个页面
function getCurrLocation(){
return window.location.protocol +'//'+window.location.host + window.location.pathname ;
}
ii. 登录成功后,获取openid和access_token
//检查qq登录状态
function check_qq_login_status(){
//检查是否登录成功
if(QC.Login.check()){
//登录成功,获取openId
QC.Login.getMe(function(openId,accessToken){
var data = 'openid='+openId;
callback(1,data);
});
}
}
三、微博登录
1. 使用js
i. 引入js
<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=YOUR APPKEY" type="text/javascript" charset="utf-8"></script>
ii. 绑定登录按钮
//html
<div id="wb_connect_btn"></div>
//js
WB2.anyWhere(function (W) {
W.widget.connectButton({
id: "wb_connect_btn",
type: '3,2',
callback: {
login: function (o) { //登录后的回调函数
alert("login: " + o.screen_name)
},
logout: function () { //退出后的回调函数
alert('logout');
}
}
});
});
2. 使用OAuth
i. 自定义按钮
<a href="javascript:wbLogin();"><img src="wb.png" /></a>
//使用微博登陆
function wbLogin(){
location.href = 'https://api.weibo.com/oauth2/authorize?client_id='+thirdLogin.APPID_WB+'&client_secrect='+thirdLogin.SECRET_WB+'&response_type=code&redirect_uri='+getCurrLocation();
}
登录成功后,会跳到redirect_uri?code=****(带有code参数,code不是与用户绑定的,不能用来标识用户)
ii. 获取Access_Token
使用这个接口 (CODE是上面接口返回的) ,可以获取到access_token,这是接口需要请求方式是POST
https://api.weibo.com/oauth2/access_token?client_id=YOUR_CLIENT_ID&client_secret=YOUR_CLIENT_SECRET&grant_type=authorization_code&redirect_uri=YOUR_REGISTERED_REDIRECT_URI&code=CODE
我的思路是,使用上一个接口授权成功后,在返回页面里根据code,再异步请求后台,后台调用这个接口,然后返回json数据(返回的数据里就有access_token和uid);
四、退出
1. QQ退出
QC.Login.signOut();
2. 微博退出
WB2.logout(function(){location.href = redirect_url});
五、小结
由于时间比较紧,也没有细看,但是显示是完全可以实现登录,退出的。