網站接入QQ登陸功能

原文連接：網站接入QQ登陸功能

---

需求描述

網站須要實現QQ登陸功能。

說明

1. 本文中所說的QQ登陸功能，是採用官方的OAuth2.0來實現的，這樣有更多的自主權。另外一種較爲簡單的JS-SDK開發方式，雖然很是簡便，但自主性不夠，因此沒有采用。
2. 下文中所構造的URL，均使用了JavaScript的ES6語法。

註冊開發者

先登陸QQ互聯官網，登陸時所用的QQ號會和相關信息綁定，這一點要注意。

登陸以後點擊頂部導航欄右側本身的QQ頭像，進入開發者的註冊/認證界面。

這裏能夠選擇以「公司」或「我的」的身份註冊爲開發者。本身最開始用的是公司的相關資料來註冊的，但老是提示審覈失敗，卻又不說爲何失敗，最後乾脆用我的信息註冊，很快就成功了。

PS：不知道用我的信息註冊爲開發者的話，權限方面會不會有什麼限制。微信公衆平臺對我的開發者是有限制的，我的身份註冊的公衆號沒法認證，公衆平臺的部分權限也沒法調用。

建立網站應用

要想讓網站可以使用QQ登陸功能，就必須先在QQ互聯中建立網站應用。

在QQ互聯網站頂部導航欄上，點擊應用管理。點擊頁面中的網站應用這個標籤，再點擊建立應用，按照要求填寫相關的信息便可。

注意這裏須要填寫兩個 URL，一個是網站地址，也就是須要讓用戶可以經過QQ登陸的網站。另外一個是網站回調域，則是用戶發起QQ登陸請求以後，負責與騰訊服務器通信，實現QQ登陸功能的URL，這兩個URL要注意區分。

所建立的網站應用審覈經過以後，點擊查看按鈕，在網站應用的詳情界面，能看到爲這個網站分配的APP ID和APP Key，後面實現QQ登陸功能的時候要用到。

另外，還能看到審覈經過的網站應用，有兩個可用的應用接口，第一個登陸默認是開啓的，第二個unionid須要手動開啓，這裏先把它開啓了，後面說不定就用上了。

流程概述

接下來就須要編寫代碼，實現QQ登陸功能了。這裏先簡要說明一下總體流程：

1. 按照要求訪問指定網址，會顯示QQ登陸界面，選擇QQ帳號進行登陸以後，會向以前所填寫的 網站回調域 發起回調，回調URL中包含Authorization Code（受權碼）。
2. 網站回調域 用這個Authorization Code（受權碼），結合其它數據，向指定的地址發送請求，接收到的響應中包含Access Token（訪問令牌）。
3. 網站回調域 再用Access Token（訪問令牌） 向指定的地址發送請求，接收到的響應中包含所登陸QQ帳號的 OpenID（不涉及用戶隱私）。
4. 網站回調域 拿到用戶的OpenID以後，結合前面獲取到的Access Token以及其它數據，就能夠調用QQ的接口，實現特定的功能了。好比能夠調用get_user_info接口，獲取登陸用戶的暱稱、頭像、性別，用來顯示在前端頁面中。

1、獲取Authorization Code

在本身編寫的登陸頁面，點擊QQ圖標以後，請求下面的地址：

https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=${appId}&redirect_uri=${redirectUrl}&state=${state}&scope=${scope}
複製代碼

上面的地址中，appId爲網站應用的APP ID，redirectUrl爲網站應用的網站回調域，state爲用戶自定義的字符串，scope爲向用戶所請求的受權列表。

scope以外的參數均爲必填項，scope若是不寫，則默認只請求對接口get_user_info進行受權，獲取用戶最基本的幾項信息：QQ暱稱、QQ頭像、性別。

發起請求以後，會將用戶導向到QQ官方的登陸頁面，用戶在這個頁面上選擇須要登陸的QQ號，點擊「登陸」，網站回調域 就會收到的騰訊服務器所發起的回調。

好比以前所填寫的 網站回調域 爲 a.com/api/getauthcode 的話，騰訊服務器就會向 網站回調域 發送以下請求：

GET /getauthcode?code=F91C6110********
複製代碼

在上面接收到的這個請求中，URL查詢字符串裏，code= 後面的字符串，就是騰訊服務器發來的Authorization Code。

2、獲取Access Token

拿到Authorization Code，結合其它數據，請求以下地址：

https://graph.qq.com/oauth2.0/token?grant_type=authorization_code&client_id=${appId}&client_secret=${appKey}&code=${authCode}&state=${state}&redirect_uri=${redirectUrl}
複製代碼

網站回調域 會收到以下響應：

access_token=FF3A****&expires_in=7776000&refresh_token=2516****
複製代碼

其中就包含了Access Token，而且這個Access Token有90天的有效期，但並不會按照官方文檔所說的，用戶再次登陸時自動刷新，而是短期（一天內）連續屢次登陸都不會刷新。

對於這個Access Token，官網建議開發者將其進行保存，以便後續調用OpenAPI訪問和修改用戶信息時使用。

3、獲取OpenID

有了Access Token以後，就能夠用它來獲取當前所登陸QQ帳號的OpenID了。請求以下地址：

https://graph.qq.com/oauth2.0/me?access_token=${accessToken}
複製代碼

網站回調域 會收到以下響應：

callback( {"client_id":"appId","openid":"openId"} );
複製代碼

上面的響應中包含了 APP ID 和 OpenID，APP ID 可用來確認是否爲合法的網站請求，OpenID 天然就是所登陸QQ帳號的 OpenID 了。

4、調用接口訪問數據

有了第二步獲取到的獲取Access Token，和第三步獲取到的OpenID，就能夠拿來訪問QQ的接口，獲取用戶的相關信息了。

好比如下面的方式請求 get_user_info 接口，就可以獲取到用戶暱稱、QQ頭像等信息。

https://graph.qq.com/user/get_user_info?access_token=${accessToken}&oauth_consumer_key=${appId}&openid=${openId}
複製代碼

參考資料

• 網站接入概述
• 網站接入流程
• 準備工做_OAuth2.0
• 使用Authorization_Code獲取Access_Token
• 獲取用戶OpenID_OAuth2.0
• OpenAPI調用說明_OAuth2.0
• 開發攻略_Server-side | OAuth2.0開發指引
• get_user_info | API列表