前端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(替換****)

<span id="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) //固然，須要你本身進行拼接，不懂的留言

至此，當用戶點擊以後，跳轉至掃碼界面：

例如：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請求）。

返回如下數據：

{ 
"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]

替換成上次請求獲取到的數據，再請求一次，獲獎用戶基本信息。

詳情查看微信開發者幫助

 

下一篇：微信受權登陸