第三方登陸（ＱＱ登陸）開發流程

時間  2019-11-09
標籤 第三方 登陸 開發 流程 欄目 騰訊 简体版
原文   原文鏈接

近排因爲工做的繁忙，已經一個星期沒寫博文作分享了，接下來我對網站接入第三方登陸----QQ登陸的實現邏輯作一個詳細的講解。php

　　對於整個流程的詳細文檔能夠到QQ互聯官網（http://wiki.connect.qq.com）查看，我這裏就簡單地進行描述，主要是分析代碼的實現過程。html

　　我用的是CI框架(MVC模式)，模板引擎用的是smarty。json

　　下圖爲整個接入流程：api

　　

1、準備工做數組

　　接入QQ登陸前，網站需首先進行申請，得到對應的appid與appkey，以保證後續流程中可正確對網站與用戶進行驗證與受權。app

　　申請appid和appkey的用途　　框架

　　　　  appid：應用的惟一標識。在OAuth2.0認證過程當中，appid的值即爲oauth_consumer_key的值。curl

 

　　　　appkey：appid對應的密鑰，訪問用戶資源時用來驗證應用的合法性。在OAuth2.0認證過程當中，appkey的值即爲oauth_consumer_secret的值。jsp

　　申請地址：http://connect.qq.com/intro/login/函數

2、放置「QQ登陸按鈕」

　　　　此步驟本身看文檔就OK了。我這裏是經過在按鈕添加a連接實現跳轉登陸

V層：index.tpl

1
< a href="{$openLoginUrl.connectQQ}" class="icon connect-qq">< span icon-bg2="icon_qq_n"></ span >  QQ登陸</ a >

 

3、使用Authorization_Code獲取Access_Token

 

須要進行兩步：

 

1. 獲取Authorization Code；

 

2. 經過Authorization Code獲取Access Token

Step1：獲取Authorization Code

請求地址：

PC網站：https://graph.qq.com/oauth2.0/authorize

WAP網站：https://graph.z.qq.com/moc2/authorize

請求方法：

GET

請求參數：

請求參數請包含以下內容：

參數 是否必須 含義
response_type 必須 受權類型，此值固定爲「code」。
client_id 必須 申請QQ登陸成功後，分配給應用的appid。
redirect_uri 必須 成功受權後的回調地址，必須是註冊appid時填寫的主域名下的地址，建議設置爲網站首頁或網站的用戶中心。注意須要將url進行URLEncode。
state 必須 client端的狀態值。用於第三方應用防止CSRF攻擊，成功受權後回調時會原樣帶回。請務必嚴格按照流程檢查用戶與state參數狀態的綁定。
scope 可選 請求用戶受權時向用戶顯示的可進行受權的列表。

 

可填寫的值是API文檔中列出的接口，以及一些動做型的受權（目前僅有：do_like），若是要填寫多個接口名稱，請用逗號隔開。

例如：scope=get_user_info,list_album,upload_pic,do_like

不傳則默認請求對接口get_user_info進行受權。

建議控制受權項的數量，只傳入必要的接口名稱，由於受權項越多，用戶越可能拒絕進行任何受權。
display 可選 僅PC網站接入時使用。

 

用於展現的樣式。不傳則默認展現爲PC下的樣式。

若是傳入「mobile」，則展現爲mobile端下的樣式。
g_ut 可選 僅WAP網站接入時使用。

 

QQ登陸頁面版本（1：wml版本； 2：xhtml版本），默認值爲1。

 

返回說明：

1. 若是用戶成功登陸並受權，則會跳轉到指定的回調地址，並在redirect_uri地址後帶上Authorization Code和原始的state值。如：

PC網站：http://graph.qq.com/demo/index.jsp?code=9A5F************************06AF&state=test

WAP網站：http://open.z.qq.com/demo/index.jsp?code=9A5F************************06AF&state=test

注意：此code會在10分鐘內過時。

2. 若是用戶在登陸受權過程當中取消登陸流程，對於PC網站，登陸頁面直接關閉；對於WAP網站，一樣跳轉回指定的回調地址，並在redirect_uri地址後帶上usercancel參數和原始的state值，其中usercancel值爲非零，如：

http://open.z.qq.com/demo/index.jsp?usercancel=1&state=test

 

下面咱們來構造請求地址：

 

C層：login.php　

1
2
3
4
5
6
7
public function index() {
         $redirect = "/user_center/index";
 
         $this->smartyData['connectQQ'] = $this->model->connectQQ->getLoginUrl($this->getOpenLoginRedirectUrl(AccountType::ConnectQQ, $redirect));
 
         $this->renderTemplateView('login/index.tpl');
     }

　　接下來我對這段代碼進行分析

　　一、$redirect = "/user_center/index";  

　　　　這是到最後登陸成功後進行跳轉的url，通常登陸成功能夠跳轉的首頁或者我的中心

　　二、$this->getOpenLoginRedirectUrl(AccountType::ConnectQQ, $redirect);

　　這裏我說明下AccountType::ConnectQQ ，這是個常量而已，個人項目中有微博登陸，因此是用一個常量來判斷是QQ登陸仍是微博登陸，它們的實現過程基本一致。

　　我先附上這個方法的代碼：

1
2
3
4
5
private function getOpenLoginRedirectUrl( $accountType , $redirect ) {
         $url = "/login/openCallback/?type=$accountType" ;
         if (! empty ( $redirect )) $url = "$url&redirect=" . rawurlencode( $redirect );
         return base_url( $url );
     }

　　此方法構造的連接是賦給請求參數 redirect_uri 的

　　三、$this->model->connectQQ->getLoginUrl();

　　此代碼的意思是調用connectQQMolde.php 裏的getLoginUrl()方法，其實它返回的就是請求的url地址

M層 connectQQMolde.php：

1
2
3
public function getLoginUrl( $redirectUrl ) {
     return "https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id={$this->appId}&redirect_uri=" . urlencode( $redirectUrl );
}

　

此時，就已經構造完了請求的url了，將此url賦給V層的index.tpl的qq圖標的a連接那就OK了　

1
<span style= "color: #ff0000; font-family: 'Microsoft YaHei'; font-size: 16px;" ><span style= "color: #000000;" > </span></span>

 

Step2：經過Authorization Code獲取Access Token

 

請求地址：

 

PC網站：https://graph.qq.com/oauth2.0/token

 

WAP網站：https://graph.z.qq.com/moc2/token

 

請求方法：

 

GET

 

請求參數：

 

請求參數請包含以下內容：

 

參數 是否必須 含義
grant_type 必須 受權類型，在本步驟中，此值爲「authorization_code」。
client_id 必須 申請QQ登陸成功後，分配給網站的appid。
client_secret 必須 申請QQ登陸成功後，分配給網站的appkey。
code 必須 上一步返回的authorization code。

 

若是用戶成功登陸並受權，則會跳轉到指定的回調地址，並在URL中帶上Authorization Code。

例如，回調地址爲www.qq.com/my.php，則跳轉到：

http://www.qq.com/my.php?code=520DD95263C1CFEA087******

注意此code會在10分鐘內過時。
redirect_uri 必須 與上面一步中傳入的redirect_uri保持一致。

 

 

 

返回說明：

 

若是成功返回，便可在返回包中獲取到Access Token。 如：

 

access_token=FE04************************CCE2&expires_in=7776000&refresh_token=88E4************************BE14

 

 

 

參數說明 描述
access_token 受權令牌，Access_Token。
expires_in 該access token的有效期，單位爲秒。
refresh_token 在受權自動續期步驟中，獲取新的Access_Token時須要提供的參數。

 

 

而後點擊此連接，跳轉到QQ登陸界面，而後若是登陸成功，就跳到 redirect_uri 的參數裏 ，我這的參數的

1
<span style= "font-family: 'Microsoft YaHei'; font-size: 16px;" >　　/login/openCallback/?type=11&redirect=/user_center/index</span><br><br><span style= "font-family: 'Microsoft YaHei'; font-size: 16px;" >　此時是跳轉到/login.php控制器的openCallback方法。</span><br><br><span style= "font-family: 'Microsoft YaHei'; font-size: 16px;" >　咱們來看一下openCallback()方法</span><br>　　
1
2
3
4
5
6
7
8
9
10
11
12
13
public function openCallback() {
         $redirect = urldecode( $this ->requestParam( 'redirect' );
             $authCode = $this ->requestParam( 'code' );
             $result = $this ->model->connectQQ->getAccessToken( $authCode , $this ->getOpenLoginRedirectUrl( $accountType , $redirect ));
             $accessToken = $result [ 'access_token' ];
             $result = array_merge ( $result , $this ->model->connectQQ->getOpenId( $accessToken ));
             $openId = $result [ 'openid' ];
             $loginResult = $this ->model->login->openAccountLogin( $accountType , $openId , $accessToken );
  
         if ( $loginResult ->isOK()) {
             redirect( empty ( $redirect ) ? '/' : $redirect );
         }
     }

　　繼續對代碼進行分析：

　　一、$redirect = urldecode($this->requestParam('redirect');

　　　　這個是獲取參數redirect的值 這裏的值爲 /user_center/index

　　二、$authCode = $this->requestParam('code');

 

 　　　　這個是獲取參數code的值  這裏是  authorization code

　　三、$result = $this->model->connectQQ->getAccessToken($authCode, $this->getOpenLoginRedirectUrl($accountType, $redirect));

　　　　$this->getOpenLoginRedirectUrl($accountType, $redirect);

　　　　　　這個和上面介紹的同樣，這裏取得結果是  /login/openCallback/?type=$accountType&/user_center/index

　　　　$this->model->connectQQ->getAccessToken();

 

　　　　這個方法就是調用M層的connectQQModel.php裏的getAccessToke()方法，

 M層：connectQQModel.php

1
2
3
4
5
6
7
public function getAccessToken( $authCode , $redirectUrl ) {
         $result = $this ->callApi( "https://graph.qq.com/oauth2.0/token?grant_type=authorization_code&client_id={$this->appId}&client_secret={$this->appKey}&code={$authCode}&redirect_uri={$redirectUrl}" );
         if (isset( $result [ 'error' ])) {
             throw new ConnectQQException( $result [ 'error_description' ], intval ( $result [ 'error' ]));
         }
         return $result ;
     }

　　　　一、$result = $this->callApi("https://graph.qq.com/oauth2.0/token?grant_type=authorization_code&client_id={$this->appId}&client_secret={$this->appKey}&code={$authCode}&redirect_uri={$redirectUrl}");

　　　　先看$this->callApi()裏面的參數，此參數就是通過Authorization Code獲取Access Token的請求URL地址

　　　　接下來咱們看看$this->callApi()方法，此方法是發起一個Api請求，參數$params是參數數組，$method是請求類型；

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
private function callApi( $apiUrl , $params = array (), $method = 'GET' ) {
         $resultText = curl_request_text( $error , $apiUrl , $params , $method );
         if (0 === strncmp ( '{' , ltrim( substr ( $resultText , 0, 10)), 1)) {
             $result = json_decode( $resultText , true);
         }
         else if ( strpos ( $resultText , "callback" ) !== false) {
             $lpos = strpos ( $resultText , "(" );
             $rpos = strrpos ( $resultText , ")" );
             $errorText = substr ( $resultText , $lpos + 1, $rpos - $lpos -1);
             $result = json_decode( $errorText , true);
         }
         else {
             parse_str ( $resultText , $result );
         }
         return $result ;
     }

 

　　　　$resultText = curl_request_text($error, $apiUrl, $params, $method);

　　　　　　先看一下這個自定義函數curl_requesr_text()，做用是 發起一個 HTTP(S) 請求, 並返回響應文本,至於有關CURL的知識能夠點擊連接參考個人另外一篇博文去了解

　　　　　　http://www.cnblogs.com/it-cen/p/4240663.html，固然也能夠百度搜一下，這裏我就不過多講述了；

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/**
     * 發起一個 HTTP(S) 請求, 並返回響應文本
     *
     * @param array 錯誤信息: array($errorCode, $errorMessage)
     * @param string url
     * @param array 參數數組
     * @param string 請求類型    GET|POST
     * @param int 超時時間
     * @param array 擴展的包頭信息
     * @param array $extOptions
     *
     * @return string
      */
     function curl_request_text(& $error , $url , $params = array (), $method = 'GET' , $timeout = 15, $extheaders = null, $extOptions = null)
     {
         if (!function_exists( 'curl_init' )) exit ( 'Need to open the curl extension.' );
 
         $method = strtoupper ( $method );
         $curl = curl_init();
         curl_setopt( $curl , CURLOPT_CONNECTTIMEOUT, $timeout );
         curl_setopt( $curl , CURLOPT_TIMEOUT, $timeout );
         curl_setopt( $curl , CURLOPT_RETURNTRANSFER, true);
         curl_setopt( $curl , CURLOPT_SSL_VERIFYPEER, false);
         curl_setopt( $curl , CURLOPT_SSL_VERIFYHOST, false);
         curl_setopt( $curl , CURLOPT_HEADER, false);
         switch ( $method )
         {
             case 'POST' :
                 curl_setopt( $curl , CURLOPT_POST, TRUE);
                 if (! empty ( $params ))
                 {
                     curl_setopt( $curl , CURLOPT_POSTFIELDS, http_build_query( $params ));
                 }
                 break ;
 
             case 'DELETE' :
             case 'GET' :
                 if ( $method == 'DELETE' )
                 {
                     curl_setopt( $curl , CURLOPT_CUSTOMREQUEST, 'DELETE' );
                 }
                 if (! empty ( $params ))
                 {
                     $url = $url . ( strpos ( $url , '?' ) ? '&' : '?' ) . ( is_array ( $params ) ? http_build_query( $params ) : $params );
                 }
                 break ;
         }
         curl_setopt( $curl , CURLINFO_HEADER_OUT, TRUE);
         curl_setopt( $curl , CURLOPT_URL, $url );
         if (! empty ( $extheaders ))
         {
             curl_setopt( $curl , CURLOPT_HTTPHEADER, ( array ) $extheaders );
         }
         if (! empty ( $extOptions )) {
             foreach ( $extOptions as $key => $value ) curl_setopt( $curl , $key , $value );
         }
         $response = curl_exec( $curl );<br>
         curl_close( $curl );
 
         return $response ;
     }

　　

　　再回到$this->getAccessToken()方法，通過判斷是否有$result['error']，若是有就表明api返回有錯誤，則拋出一個異常

　　if(isset($result['error'])) {
　　　　throw new ConnectQQException($result['error_description'], intval($result['error']));
　　}
　　return $result;

　　最終返回的是一個數組給C層 login.php 裏openCallback()裏所調用的$this->model->connectQQ->getAccessToken();

 

　　如今咱們回到C層 login.php 裏openCallback();

1
2
3
4
5
6
7
8
9
10
11
12
13
public function openCallback() {
         $redirect = urldecode( $this ->requestParam( 'redirect' );
             $authCode = $this ->requestParam( 'code' );
             $result = $this ->model->connectQQ->getAccessToken( $authCode , $this ->getOpenLoginRedirectUrl( $accountType , $redirect ));
             $accessToken = $result [ 'access_token' ];
             $result = array_merge ( $result , $this ->model->connectQQ->getOpenId( $accessToken ));
             $openId = $result [ 'openid' ];
             $loginResult = $this ->model->login->openAccountLogin( $accountType , $openId , $accessToken );
  
         if ( $loginResult ->isOK()) {
             redirect( empty ( $redirect ) ? '/' : $redirect );
         }
     }

　　四、此時到了 $accessToken = $result['access_token'];

　　　　將得到的Access Token賦給$accessToken

　　五、$result = array_merge($result, $this->model->connectQQ->getOpenId($accessToken));

　　先看 $this->model->connectQQ->getOpenId($accessToken)；這個就是用來獲取openId，

 

先來補充些獲取openId的資料：　

 

1 請求地址

 

PC網站：https://graph.qq.com/oauth2.0/me
WAP網站：https://graph.z.qq.com/moc2/me

 

2 請求方法

 

GET

 

3 請求參數

 

請求參數請包含以下內容：

 

參數 是否必須 含義
access_token 必須 在Step1中獲取到的access token。

 

 

 

4 返回說明

 

PC網站接入時，獲取到用戶OpenID，返回包以下：

 

 

WAP網站接入時，返回以下字符串：

 

client_id=100222222&openid=1704************************878C

 

openid是此網站上惟一對應用戶身份的標識，網站可將此ID進行存儲便於用戶下次登陸時辨識其身份，或將其與用戶在網站上的原有帳號進行綁定。

 

 

接下來咱們看M層connectQQModel.php的getOpenId()方法：

M層 connectQQModel.php:

1
2
3
4
5
6
7
public function getOpenId( $accessToken ) {
         $result = $this ->callApi( "https://graph.qq.com/oauth2.0/me?access_token={$accessToken}" );
         if (isset( $result [ 'error' ])) {
             throw new ConnectQQException( $result [ 'error_description' ], intval ( $result [ 'error' ]));
         }
         return $result ;
     }

　　此方法仍是調用了callApi()方法 發起Api請求，返回的是一個數組，具體的和上面全部的獲取Access Token的流程同樣；

　　

繼續返回C層 login.php 裏openCallback();

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
public function openCallback() {
         $redirect = urldecode( $this ->requestParam( 'redirect' );
             $authCode = $this ->requestParam( 'code' );
             $result = $this ->model->connectQQ->getAccessToken( $authCode , $this ->getOpenLoginRedirectUrl( $accountType , $redirect ));
             $accessToken = $result [ 'access_token' ];
             $result = array_merge ( $result , $this ->model->connectQQ->getOpenId( $accessToken ));
             $openId = $result [ 'openid' ];
             $loginResult = $this ->model->login->openAccountLogin( $accountType , $openId , $accessToken );
  
         if ( $loginResult ->isOK()) {
             redirect( empty ( $redirect ) ? '/' : $redirect );
         }
     }

 

　　而後就是獲取到了$openId;

　　openID的做用：openid是此網站上惟一對應用戶身份的標識，網站可將此ID進行存儲便於用戶下次登陸時辨識其身份，或將其與用戶在網站上的原有帳號進行綁定。

 

　　接下來就是$loginResult = $this->model->login->openAccountLogin($accountType, $openId, $accessToken);  也就是經過$openId和$accessToken查詢下用戶表是否有對應的用戶，若是沒有就進行綁定啊或者直接存儲啊，也就是一系列登陸綁定的邏輯了，這裏我就很少說了，你們都應該會。

　　好了，第三方登陸--QQ登陸的整個邏輯處理已經詳細地講解完畢，但願你們能經過此博文能順利給本身網站接入第三方登陸。文章中的代碼都是咱們項目中用的代碼，基本不會有問題。但願你們多多支持。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程