前端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]

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

詳情查看微信開發者幫助

 

下一篇：微信授權登錄