第三方登陸小結

說明：

       因爲業務須要，因此這兩天抽空看了一下第三方登陸的API，從而實現了第三方的登陸。

1、申請APPID

             到QQ和新浪微博的開發平臺申請APPID和SECRET ，這是一個百度的apistore，第三方登陸；

2、QQ登陸

        1. 使用js

             i. 先引入js（redirecturi是登陸成功後的返回頁面地址）       

<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="APPID" data-redirecturi="REDIRECTURI" charset="utf-8"></script>

            ii. 綁定登陸按鈕（只須要一個元素的id，會自動生成默認的按鈕）

                 QC.Login({

                 btnId:"qqLoginBtn"    //插入按鈕的節點id

                 }）；

         2.  使用OAuth（受權機制）

                 i. 使用自定義的按鈕

                    <a href="javascript:qqLogin();"><img src="qq.png" /></a>

   //使用qq登陸  
function qqLogin(){
      location.href = 
'https://graph.qq.com/oauth2.0/authorize?client_id='+thirdLogin.APPID_QQ+'&response_type=token&scope=get_user_info&redirect_uri='+getCurrLocation();
   }

  //獲取當前頁面路徑--從哪一個頁面登陸，登陸成功後，返回哪一個頁面
  function getCurrLocation(){
      return window.location.protocol +'//'+window.location.host + window.location.pathname ;
  }

              ii. 登陸成功後，獲取openid和access_token 

//檢查qq登陸狀態
   function check_qq_login_status(){
       //檢查是否登陸成功
        if(QC.Login.check()){
           //登陸成功，獲取openId
            QC.Login.getMe(function(openId,accessToken){
               var data = 'openid='+openId;
               callback(1,data);
            });
         }
   }

3、微博登陸

      1. 使用js

            i. 引入js  

<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=YOUR APPKEY" type="text/javascript" charset="utf-8"></script>

   

           ii. 綁定登陸按鈕

//html
<div id="wb_connect_btn"></div>
//js
WB2.anyWhere(function (W) {
    W.widget.connectButton({
        id: "wb_connect_btn",
        type: '3,2',
        callback: {
            login: function (o) { //登陸後的回調函數
                alert("login: " + o.screen_name)
            },
            logout: function () { //退出後的回調函數
                alert('logout');
            }
        }
    });
});

         2. 使用OAuth

               i. 自定義按鈕

                <a href="javascript:wbLogin();"><img src="wb.png" /></a>

//使用微博登錄
   function wbLogin(){
      location.href = 'https://api.weibo.com/oauth2/authorize?client_id='+thirdLogin.APPID_WB+'&client_secrect='+thirdLogin.SECRET_WB+'&response_type=code&redirect_uri='+getCurrLocation();
   }

             登陸成功後，會跳到redirect_uri?code=****（帶有code參數，code不是與用戶綁定的，不能用來標識用戶）

             ii. 獲取Access_Token

             使用這個接口  （CODE是上面接口返回的）  ，能夠獲取到access_token，這是接口須要請求方式是POST

https://api.weibo.com/oauth2/access_token?client_id=YOUR_CLIENT_ID&client_secret=YOUR_CLIENT_SECRET&grant_type=authorization_code&redirect_uri=YOUR_REGISTERED_REDIRECT_URI&code=CODE

             個人思路是，使用上一個接口受權成功後，在返回頁面里根據code，再異步請求後臺，後臺調用這個接口，而後返回json數據（返回的數據裏就有access_token和uid）；

4、退出

    1. QQ退出

QC.Login.signOut();

    2. 微博退出

  WB2.logout(function(){location.href = redirect_url});

5、小結

       因爲時間比較緊，也沒有細看，可是顯示是徹底能夠實現登陸，退出的。