開發攻略_Client-side

閱讀前提

本開發攻略適用於使用Implicit Grant方式取得Access Token的授權驗證流程，適用於需要透過客戶端存取的方式，例如需要透過瀏覽器的javascript程式碼，或電腦/行動終端機上的客戶端存取時。

閱讀本開發攻略前，請閱讀【QQ登入】使用Implicit Grant方式取得Access Token以了解認證流程。

1. 體驗一把

1.瀏覽器造訪：http://qzs.qq.com/qzone/openapi/client .html 。
2. 點選頁面中的「登入」按鈕：

3. 在彈出的登入框中輸入QQ帳號和密碼：

4. 登入成功之後，跳到指定的回呼位址，URL中帶有Access Token：

#2. 快速上手

準備工作

1. 請確保您的網站已經提交存取QQ登入的申請，並成功取得到appid和appkey。申請接入

2. 請在你的伺服器上ping openapi.qzone.qq.com ，保證網站和Qzone的連線暢通。

Step1：放置QQ登入按鈕

######網站需要下載「QQ登入」按鈕圖片，並依照UI規格將按鈕放置在頁面合適的位置。 ###按鈕圖示下載按鈕放置規格###############Step2：取得Access Token#########1. 開啟瀏覽器，存取以下位址（請將client_id，redirect_uri，scope等參數值替換為你自己的）：############https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=[YOUR_APPID] &redirect_uri=[YOUR_REDIRECT_URI]&scope=[THE_SCOPE]######

2. 如果使用者已經有登入態，會跳出提示一個確認頁。如果還沒有登錄，會彈出登入頁，如下圖所示：

3. 成功登入後，彈出授權框引導使用者授權（僅在第一次造訪某個OpenAPI會出現授權頁），如下圖所示：

注意：
如果使用者不允許，則存取操作將被中止。
建議第三方應用控制授權項，即參數值scope中只傳入必須使用的OpenAPI名稱。因為授權項越多，使用者越有可能拒絕授權。

4. 如果使用者允許授權，則成功跳到指定的redirect_uri，並在URL後面加上「#」號，帶上Access Token以及expires_in等參數。如果redirect_uri位址後面已經有「#」號，則加上「&」號，帶上對應的回傳參數。例如回呼位址是：www.qq.com，則會跳到：

http://www.qq.com/?#access_token=YOUR_ACCESS_TOKEN&expires_in=3600

特別提示：
1. 要求時傳入的recirect_uri必須與註冊時填寫的回呼位址一致，用來進行第三方應用的驗證。
2. 可透過js方法：window.location.hash來取得URL中#後的參數值，詳見下面的範例程式碼。
3. 建議用js設定cookie儲存token。
4. 取得到的access token具有3個月有效期，用戶再次登入時會自動刷新。

Step3：使用Access Token來取得使用者的OpenID

1. 發送請求到以下位址（請將access_token等參數值替換為你自己的）：

https://graph.qq.com/oauth2.0/me?access_token=YOUR_ACCESS_TOKEN

#2. 取得到用戶OpenID，回傳套件如下：

callback( {"client_id":"YOUR_APPID","openid":"YOUR_OPENID"} );

Step4：使用Access Token以及OpenID來存取和修改使用者資料

1. 建議網站在使用者登入後，即呼叫get_user_info接口，取得該使用者的頭像、暱稱並顯示在網站上，使用戶體驗統一。
2. 呼叫其他OpenAPI，以存取和修改使用者資料。所有OpenAPI詳見【QQ登入】API文件。

以呼叫get_user_info介面為例：
（1）發送請求到get_user_info的URL（請將access_token，appid等參數值替換為你自己的）：

https://graph.qq.com/user/get_user_info?access_token=YOUR_ACCESS_TOKEN&oauth_consumer_key=YOUR_APP_ID&openid=YOUR_OPENID

#（2）成功回傳後，即可取得到成功回傳後，即可取得到成功回傳後，即可取得到成功回傳後，即可取得到成功回傳後，即可取得到使用者資料：

{

   "ret":0,
   "msg":"",
   "nickname":"YOUR_NICK_NAME",
   ...

}

3. 範例程式碼

下面給了一個JavaScript的範例（只需要依照註解修改部分程式碼即可運行）

<html>
     <head>
        <title>Client Flow Ex gt;
        < ;script>
           function callback(user)
          Name');
              var greetingText = document.createTextNode('Greetings, ' user.openid  '.' );
              userName.appendChild(greetingText);
                    var appID = "YOUR_APP_ID";
           ///成功授權後的回呼地址，請改為你自己的
            var redirectURI = "http://qzs.qq.com/qzone/1 #           if (window.location.hash.length == 0)
           oauth2.0/authorize?';
              var queryParams = [ 'client_id=' appID,'redirect_uri=' redirectURI,'
              scope='
              var query = queryParams.join ('&');
              var url = path query;

########》window.open(url);
           }
           else
   access token
              var accessToken = window.location.hash.substring(1);
      .hash.substring(1);
      Access Token來取得使用者的OpenID
              var path = "https://graph.qq.com/oauth2.0/me?"  'callback=callback'];
              var query = queryParams.join('&');
           var script = document.createElement('script');
              script.src .body.appendChild(script);
           }
#
4.使用JS SDK

為了讓應用程式更快接入，騰訊提供了JS SDK，應用程式只需引入js腳本，再進行少量的程式碼修改，即可接入QQ登錄，過程非常簡單快速。

← 開發攻略_Server-side