說明

本文中所說的QQ登入功能，是採用官方的OAuth2.0來實現的，這樣有更多的自主權。另一種較為簡單的js-SDK開發方式，雖然非常簡便，但自主性不夠，所以沒有采用。

下文中所構造的URL，均使用了JavaScript的ES6語法。

註冊開發者

先登入QQ互聯官網，登入時所用的QQ號會和相關資訊繫結，這一點要注意。

登入之後點選頂部導航欄右側自己的QQ頭像，進入開發者的註冊/認證介面。

這裡可以選擇以“公司”或“個人”的身份註冊為開發者。自己最開始用的是公司的相關資料來註冊的，但總是提示稽核失敗，卻又不說為什麼失敗，最後乾脆用個人資訊註冊，很快就成功了。

PS：不知道用個人資訊註冊為開發者的話，許可權方面會不會有什麼限制。微信公眾平臺對個人開發者是有限制的，個人身份註冊的公眾號無法認證，公眾平臺的部分許可權也無法呼叫。

建立網站應用

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

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

注意這裡需要填寫兩個 URL，一個是網站地址，也就是需要讓使用者能夠通過QQ登入的網站。另一個是網站回撥域，則是使用者發起QQ登入請求之後，負責與騰訊伺服器通訊，實現QQ登入功能的URL，這兩個URL要注意區分。

所建立的網站應用稽核通過之後，點選檢視按鈕，在網站應用的詳情介面，能看到為這個網站分配的APP ID和APP Key，後面實現QQ登入功能的時候要用到。

另外，還能看到稽核通過的網站應用，有兩個可用的應用介面，第一個登入

流程概述

接下來就需要編寫程式碼，實現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介面，獲取登入使用者的暱稱、頭像、性別，用來顯示在前端頁面中。

一、獲取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。

二、獲取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訪問和修改使用者資訊時使用。

資源搜尋網站大全 http://www.szhdn.com 廣州VI設計公司https://www.houdianzi.com

三、獲取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 了。

四、呼叫介面訪問資料

有了第二步獲取到的獲取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}