前端html第三方登入集合，微信，微博，QQ
申請開發者賬號之內的就不累贅了，網上一大堆：
說下需求，一個網頁要在三類容器執行，公司app，微信自動登入，瀏覽器。
假設是已經申請完成各平臺開發者賬號。
先來簡單的，微博和QQ
微博：
引入微博JS
<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=*******&debug=true" type="text/javascript" charset="utf-8"></script>
appkey中，填入你的微博開發者id(替換****)
| 1 |
<spanid="wb_connect_btn">微博登入按鈕</span>
|
在你的頁面微博登入按鈕標籤上，加入以上id。頁面載入時，微博會自動載入樣式，你也可以自己強行修改。
<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>
將以上標籤全部加入html中。
至此，只要在頁面中登入之後，就能在控制檯看到返回資料。當然，測試要在微博註冊的域下。
QQ登入：
和微博一樣，引入JavaScript檔案
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="******" charset="utf-8"></script>
微博類似，替換為你的appid
<span id="qqLoginBtn"></span>
登入標籤中加入id標識
然後JavaScript中加入以下程式碼：
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登入呼叫事件 }); } );
測試要在QQ中註冊的域名下。重要的事情，再說一遍。
QQ和微博登入，大致相同，只要引入JS檔案，然後直接呼叫方法即可，QQ比微博更和諧，直接提供退出事件。上面程式碼中有。。
現在來說最蛋疼的微信登入。
微信登入提供兩種方法：
第一種，掃碼登入：
需要在微信開發者平臺中，註冊獲取appId。
微信登入按鈕：
<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) //當然，需要你自己進行拼接，不懂的留言
至此，當用戶點選之後，跳轉至掃碼介面：
至此，拿到第一步令牌，code。在你的回撥頁面中，你要獲取url中的code去和微信換取下一步的令牌。因為換取下一步的令牌需要涉及到跨域請求，但是微信不讓跨域請求，只能在後臺進行後續事項。
第二步，後臺請求：https://api.weixin.qq.com/sns/oauth2/access_token?appid=[APPID]&secret=[SECRET]&code=[CODE]&grant_type=authorization_code
替換中括號中的資料。（我走的get請求）。
返回以下資料：
{ "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]
替換成上次請求獲取到的資料，再請求一次，獲獎使用者基本資訊。