來源 | https://github.com/Dream4ever/Knowledge-Base/issues/76

說明

本文中所說的QQ登錄功能，是采用官方的OAuth2.0來實(shí)現(xiàn)的，這樣有更多的自主權(quán)。另一種較為簡(jiǎn)單的js-SDK開發(fā)方式，雖然非常簡(jiǎn)便，但自主性不夠，所以沒有采用。

下文中所構(gòu)造的URL，均使用了JavaScript的ES6語(yǔ)法。

注冊(cè)開發(fā)者

先登錄QQ互聯(lián)官網(wǎng)，登錄時(shí)所用的QQ號(hào)會(huì)和相關(guān)信息綁定，這一點(diǎn)要注意。

登錄之后點(diǎn)擊頂部導(dǎo)航欄右側(cè)自己的QQ頭像，進(jìn)入開發(fā)者的注冊(cè)/認(rèn)證界面。

這里可以選擇以“公司”或“個(gè)人”的身份注冊(cè)為開發(fā)者。自己最開始用的是公司的相關(guān)資料來注冊(cè)的，但總是提示審核失敗，卻又不說為什么失敗，最后干脆用個(gè)人信息注冊(cè)，很快就成功了。

PS：不知道用個(gè)人信息注冊(cè)為開發(fā)者的話，權(quán)限方面會(huì)不會(huì)有什么限制。微信公眾平臺(tái)對(duì)個(gè)人開發(fā)者是有限制的，個(gè)人身份注冊(cè)的公眾號(hào)無(wú)法認(rèn)證，公眾平臺(tái)的部分權(quán)限也無(wú)法調(diào)用。

創(chuàng)建網(wǎng)站應(yīng)用

要想讓網(wǎng)站能夠使用QQ登錄功能，就必須先在QQ互聯(lián)中創(chuàng)建網(wǎng)站應(yīng)用。

在QQ互聯(lián)網(wǎng)站頂部導(dǎo)航欄上，點(diǎn)擊應(yīng)用管理。點(diǎn)擊頁(yè)面中的網(wǎng)站應(yīng)用這個(gè)標(biāo)簽，再點(diǎn)擊創(chuàng)建應(yīng)用，按照要求填寫相關(guān)的信息即可。

注意這里需要填寫兩個(gè) URL，一個(gè)是網(wǎng)站地址，也就是需要讓用戶能夠通過QQ登錄的網(wǎng)站。另一個(gè)是網(wǎng)站回調(diào)域，則是用戶發(fā)起QQ登錄請(qǐng)求之后，負(fù)責(zé)與騰訊服務(wù)器通訊，實(shí)現(xiàn)QQ登錄功能的URL，這兩個(gè)URL要注意區(qū)分。

所創(chuàng)建的網(wǎng)站應(yīng)用審核通過之后，點(diǎn)擊查看按鈕，在網(wǎng)站應(yīng)用的詳情界面，能看到為這個(gè)網(wǎng)站分配的APP ID和APP Key，后面實(shí)現(xiàn)QQ登錄功能的時(shí)候要用到。

另外，還能看到審核通過的網(wǎng)站應(yīng)用，有兩個(gè)可用的應(yīng)用接口，第一個(gè)登錄默認(rèn)是開啟的，第二個(gè)unionid需要手動(dòng)開啟，這里先把它開啟了，后面說不定就用上了。

流程概述

接下來就需要編寫代碼，實(shí)現(xiàn)QQ登錄功能了。這里先簡(jiǎn)要說明一下整體流程：

按照要求訪問指定網(wǎng)址，會(huì)顯示QQ登錄界面，選擇QQ賬號(hào)進(jìn)行登錄之后，會(huì)向之前所填寫的網(wǎng)站回調(diào)域發(fā)起回調(diào)，回調(diào)URL中包含Authorization Code（授權(quán)碼）。
網(wǎng)站回調(diào)域用這個(gè)Authorization Code（授權(quán)碼），結(jié)合其它數(shù)據(jù)，向指定的地址發(fā)送請(qǐng)求，接收到的響應(yīng)中包含Access Token（訪問令牌）。
網(wǎng)站回調(diào)域再用Access Token（訪問令牌）向指定的地址發(fā)送請(qǐng)求，接收到的響應(yīng)中包含所登錄QQ賬號(hào)的 OpenID（不涉及用戶隱私）。
網(wǎng)站回調(diào)域拿到用戶的OpenID之后，結(jié)合前面獲取到的Access Token以及其它數(shù)據(jù)，就可以調(diào)用QQ的接口，實(shí)現(xiàn)特定的功能了。比如可以調(diào)用get_user_info接口，獲取登錄用戶的昵稱、頭像、性別，用來顯示在前端頁(yè)面中。

一、獲取Authorization Code

在自己編寫的登錄頁(yè)面，點(diǎn)擊QQ圖標(biāo)之后，請(qǐng)求下面的地址：


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

上面的地址中，appId為網(wǎng)站應(yīng)用的APP ID，redirectUrl為網(wǎng)站應(yīng)用的網(wǎng)站回調(diào)域，state為用戶自定義的字符串，scope為向用戶所請(qǐng)求的授權(quán)列表。

scope之外的參數(shù)均為必填項(xiàng)，scope如果不寫，則默認(rèn)只請(qǐng)求對(duì)接口get_user_info進(jìn)行授權(quán)，獲取用戶最基本的幾項(xiàng)信息：QQ昵稱、QQ頭像、性別。

發(fā)起請(qǐng)求之后，會(huì)將用戶導(dǎo)向到QQ官方的登錄頁(yè)面，用戶在這個(gè)頁(yè)面上選擇需要登錄的QQ號(hào)，點(diǎn)擊“登錄”，網(wǎng)站回調(diào)域就會(huì)收到的騰訊服務(wù)器所發(fā)起的回調(diào)。

比如之前所填寫的網(wǎng)站回調(diào)域為a.com/api/getauthcode 的話，騰訊服務(wù)器就會(huì)向網(wǎng)站回調(diào)域發(fā)送如下請(qǐng)求：


GET /getauthcode?code=F91C6110********

在上面接收到的這個(gè)請(qǐng)求中，URL查詢字符串里，code= 后面的字符串，就是騰訊服務(wù)器發(fā)來的Authorization Code。

二、獲取Access Token

拿到Authorization Code，結(jié)合其它數(shù)據(jù)，請(qǐng)求如下地址：


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

網(wǎng)站回調(diào)域會(huì)收到如下響應(yīng)：


access_token=FF3A****&expires_in=7776000&refresh_token=2516****

其中就包含了Access Token，并且這個(gè)Access Token有90天的有效期，但并不會(huì)按照官方文檔所說的，用戶再次登錄時(shí)自動(dòng)刷新，而是短時(shí)間（一天內(nèi)）連續(xù)多次登錄都不會(huì)刷新。

對(duì)于這個(gè)Access Token，官網(wǎng)建議開發(fā)者將其進(jìn)行保存，以便后續(xù)調(diào)用OpenAPI訪問和修改用戶信息時(shí)使用。

三、獲取OpenID

有了Access Token之后，就可以用它來獲取當(dāng)前所登錄QQ賬號(hào)的OpenID了。請(qǐng)求如下地址：


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

網(wǎng)站回調(diào)域會(huì)收到如下響應(yīng)：


callback( {"client_id":"appId","openid":"openId"} );

上面的響應(yīng)中包含了 APP ID 和 OpenID，APP ID 可用來確認(rèn)是否為合法的網(wǎng)站請(qǐng)求，OpenID 自然就是所登錄QQ賬號(hào)的 OpenID 了。

四、調(diào)用接口訪問數(shù)據(jù)

有了第二步獲取到的獲取Access Token，和第三部獲取到的 OpenID，就可以拿來訪問QQ的接口，獲取用戶的相關(guān)信息了。

比如以下面的方式請(qǐng)求 get_user_info 接口，就能夠獲取到用戶昵稱、QQ頭像等信息。


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

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)

網(wǎng)站接入QQ登錄功能的實(shí)現(xiàn)