天天看點

網站接入QQ登入功能的實作

網站接入QQ登入功能的實作

說明

本文中所說的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登入功能的時候要用到。

另外,還能看到稽核通過的網站應用,有兩個可用的應用接口,第一個登入預設是開啟的,第二個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接口,擷取登入使用者的昵稱、頭像、性别,用來顯示在前端頁面中。

一、擷取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通路和修改使用者資訊時使用。

三、擷取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}      

網站接入QQ登入功能的實作

繼續閱讀