最近網(wǎng)站更新了一些需求，做了第三方登錄，總結了一些，也是第一次做，有不足的地方歡迎指正！！！
????????申請過程就不說了，下來就appId和keyId,然后引用幾個js,
? ? ? ? ? ?第一個需要放在head內：<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="你的appID"?data-redirectui="你的回調地址(一般是網(wǎng)站首頁)"?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" //插入按鈕的節(jié)點id
});
//從頁面收集OpenAPI必要的參數(shù)。get_user_info不需要輸入?yún)?shù)，因此paras中沒有參數(shù)
var paras = {};
//用JS SDK調用OpenAPI
QC.api("get_user_info", paras)
//指定接口訪問成功的接收函數(shù)，s為成功返回Response對象
.success(function(s){
//成功回調，通過s.data獲取OpenAPI的返回數(shù)據(jù)
console.log("獲取用戶信息成功！當前用戶昵稱為："+s.data.nickname);
})
//指定接口訪問失敗的接收函數(shù)，f為失敗返回Response對象
.error(function(f){
//失敗回調
console.log("獲取用戶信息失敗！");
})
//指定接口完成請求后的接收函數(shù)，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.>微信圖標</div>
之后要獲取傳過來的code，再傳給后臺，微信登錄就完了
最后一個facebook,申請過程很簡單，應用域記得要填，申請過程省略直接上代碼
html+js
<div onclick="Fackbooklogin">Facebook</div>
<script>
//該函數(shù)檢測你是否登錄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 = "http://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>
