Source text: http: //blog.csdn.net/tivonalh/article/details/60954373
Assumption is that each platform has completed the application developer account.
A simple first-come, Weibo and QQ
BiHiroshi:
The introduction of micro-Bo JS
<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=*******&debug=true" type="text/javascript" charset="utf-8"></script>
appkey, fill in your microblogging developer id (replace ****)
|
1
|
<
span
id="wb_connect_btn">微博登录按钮</
span
>
|
On your page Weibo login button labels, add more id. When the page loads, micro Fair automatically load the style, you can also modify their own force.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<
script
>
WB2.anyWhere(function (W) {
W.widget.connectButton({
id: "wb_connect_btn",
type: '3,2',
callback: {
login: function (o) { //登录后的回调函数
console.log(o);
thirdparty(null,null,o.avatar_hd, o.name ,3, o.id);//个人方法
try{
document.getElementsByClassName('loginout')[0].click();
//页面需求，当前页面登录完成之后，不进行跳转，所以模拟点击事件，让微博账号在当前域中退出。不影响下次登录。（元素为微博动态添加）
//微博没有提供退出方法。下面的logout为另一种开发模式调用。
}catch(e){
console.log(e);
}
},
logout: function () { //退出后的回调函数
}
}
});
});
</
script
>
|
The tabs above all to join in html.
So far, after just log in page, the console will be able to see the return data. Of course, the domain test to be registered in microblogging.
QQ login:
The introduction of JavaScript files
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="******" charset="utf-8"></script>
Weibo is similar to Replace your appid
<span id="qqLoginBtn"></span>
Login id identification tag added
JavaScript then add the following code:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
QC.Login({
//btnId：插入按钮的节点id，必选
btnId:"qqLoginBtn",
//用户需要确认的scope授权项，可选，默认all
scope:"all",
//按钮尺寸，可用值[A_XL| A_L| A_M| A_S| B_M| B_S| C_S]，可选，默认B_S
size: "B_S"
}, function(reqData, opts){//登录成功
//根据返回数据，更换按钮显示状态方法
console.log(reqData);//查看返回数据
QC.Login.getMe(function(openId, accessToken){//获取用户的openId
console.log('QQOPENID:'+openId);
thirdparty(null,null,reqData.figureurl_qq_2,reqData.nickname,1,openId);
QC.Login.signOut();//退出QQ登录调用事件
});
}
);
|
To test QQ registered in the domain name. The important thing, say it again.
And QQ Weibo login, roughly the same, as long as the introduction of JS file, which can then be called directly, QQ more harmonious than it, and provide direct exit event. Have the above code. .
Log in now micro-channel is most eggs pain.
Log in micro-channel provides two methods:
First, scan code Login:
Developers need to micro-channel platform, sign up for appId.
Micro letter login button:
<span class="weixin-login"></span>
在你微信登录按钮上，添加点击事件，执行以下代码：
$('.weixin-login').on('click',function(){
window.location.href='https://open.weixin.qq.com/connect/qrconnect?' +
'appid=*******&redirect_uri=http%3a%2f%2fwww.xxxxxx.com%2f'+window.location.pathname.substr(1)+'&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect';
});
需要替换：
redirect_url:要想传当前url，直接encodeURIComponent(window.location.href) //当然，需要你自己进行拼接，不懂的留言
至此，当用户点击之后，跳转至扫码界面：
例如：https://passport.yhd.com/wechat/callback.do?code=CODE&state=3d6be0a4035d839573b04816624a415e
至此，拿到第一步令牌，code。在你的回调页面中，你要获取url中的code去和微信换取下一步的令牌。因为换取下一步的令牌需要涉及到跨域请求，但是微信不让跨域请求，只能在后台进行后续事项。
第二步，后台请求：https://api.weixin.qq.com/sns/oauth2/access_token?appid=[APPID]&secret=[SECRET]&code=[CODE]&grant_type=authorization_code
替换中括号中的数据。（我走的get请求）
返回以下数据：
|
1
2
3
4
5
6
7
8
|
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE",
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}
|
最后一步就不说了：
https://api.weixin.qq.com/sns/userinfo?access_token=[ACCESS_TOKEN]&openid=[OPENID]
替换成上次请求获取到的数据，再请求一次，获奖用户基本信息。
详情查看微信开发者帮助
.