第三方登入小結

標籤：style   blog   http   ar   io   os   使用   sp   java   

說明：

       由於業務需要，所以這兩天抽空看了一下第三方登入的API，從而實現了第三方的登入。

一、申請APPID

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

二、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);            });         }   }

三、微博登入

      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>//jsWB2.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）；

四、退出

    1. QQ退出

QC.Login.signOut();

    2. 微博退出

        僅僅使用WB2.logout()這個方法，不一定能真正退出（因為它是非同步執行的，你可以試一下）。

       我的解決方案時，根據登入狀態判斷是否退出，沒退出繼續執行

timeId = setInterval("wb_logout()",50);  //使用定時器 //退出微博   function wb_logout(){        if(WB2.checkLogin()){            WB2.logout();        }else{            clearInterval(timeId);            location.href = getCurrLocation();  //退出後，重新整理頁面（為了改變使用者資訊顯示狀態）        }   }

五、小結

       由於時間比較緊，也沒有細看，但是顯示是完全可以實現登入，退出的。

第三方登入小結