最近网站更新了一些需求，做了第三方登录，总结了一些，也是第一次做，有不足的地方欢迎指正！！！
申请过程就不说了，下来就appId和keyId,然后引用几个js,
第一个需要放在head内：<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="你的appID" data-redirectui="你的回调地址(一般是网站首页)" charset="utf-8"></script>,
第二个js:<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script>。
下边是html和js
<div id="qq-login-btn"></div>
QC.Login({//按默认样式插入QQ登录按钮
btnId:"qq_login_btn" //插入按钮的节点id
});
//从页面收集OpenAPI必要的参数。get_user_info不需要输入参数，因此paras中没有参数
var paras = {};
//用JS SDK调用OpenAPI
QC.api("get_user_info", paras)
//指定接口访问成功的接收函数，s为成功返回Response对象
.success(function(s){
//成功回调，通过s.data获取OpenAPI的返回数据
console.log("获取用户信息成功！当前用户昵称为："+s.data.nickname);
})
//指定接口访问失败的接收函数，f为失败返回Response对象
.error(function(f){
//失败回调
console.log("获取用户信息失败！");
})
//指定接口完成请求后的接收函数，c为完成请求返回Response对象
.complete(function(c){
//完成请求回调
console.log("获取用户信息完成！");
});
if(QC.Login.check()){//如果已登录
QC.Login.getMe(function(openId, accessToken){
console.log(["当前登录用户的", "openId为："+openId, "accessToken为："+accessToken].join("\n"));
});
//这里可以调用自己的保存接口
//...
}
//
</script>
QQ退出的方法QC.Login.signOut()
QQ结束。
微信登录：
还是两个js,第一个js还是放在head里<script scr="http://res.wx.qq.com/connect/zh_CN/htmledition/js/js/wxLogin.js"></script>
第二个js:<script type="text/JavaScript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"><script>
下边是html和js
<div onclick="window.location.href="https://open.weixin.qq.com/connect/qrconnect?appid=你的appID&redirect_uri=回调地址&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect";">微信图标</div>
之后要获取传过来的code，再传给后台，微信登录就完了
最后一个facebook,申请过程很简单，应用域记得要填，申请过程省略直接上代码
html+js
<div onclick="Fackbooklogin">Facebook</div>
<script>
//该函数检测你是否登录facebook
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(JSON.stringify(response));
// The response object is returned with a status field that lets the app know the current login status of the person.
//Full docs on the response object can be found in the documentation for FB.getLoginStatus().
if (response.status === 'connected') {
//登录到你的应用和Facebook。
testAPI();
} else {
console.log("未登录")
}
}
// This function is called when someone finishes with the Login Button.
//See the onlogin handler attached to it in the sample code below.
// checkLoginState;
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
function Fackbooklogin(){
FB.login(function(response) {
statusChangeCallback(response);
}, {scope: 'public_profile,email'});
}
window.fbAsyncInit = function() {
FB.init({
appId : '你的appID',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.8' // use graph api version 2.8
});
// Now that we've initialized the JavaScript SDK, we call FB.getLoginStatus().
// This function gets the state of the person visiting this page and can return one of three states to the callback you provide.
//They can be:
// 1。Logged into your app ('connected')
// 2. Logged into Facebook, but not your app ('not_authorized')
// 3.Not logged into Facebook and can't tell if they are logged into your app or not.
// These three cases are handled in the callback function.
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
//Load the SDK asynchronously
//异步加载SDK
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Here we run a very simple test of the Graph API after login is successful.
//See statusChangeCallback() for when this call is made.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
//这里可以写function
});
}
退出方法FB.logout(function(response){})
<script>
