第三方登錄（QQ登錄）開發流程詳解

一、准備工作

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

申請appid和appkey的用途

 appid ：應用的唯一標識。在OAuth2.0認證過程中，appid的值即為oauth_consumer_key的值。

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

申請地址： http://connect.qq.com/intro/login/
二、放置“QQ登錄按鈕”

此步驟自己看文檔就OK了。我這里是通過在按鈕添加a鏈接實現跳轉登錄
V層：index.tpl

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

三、使用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

public function index() {
        $redirect = "/user_center/index";

        $this->smartyData['connectQQ'] = $this->model->connectQQ->getLoginUrl($this->getOpenLoginRedirectUrl(AccountType::ConnectQQ, $redirect));

        $this->renderTemplateView('login/index.tpl');
    }

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

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

這是到最后登錄成功后進行跳轉的url，一般登錄成功可以跳轉的首頁或者個人中心

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

這里我說明下 AccountType::ConnectQQ  ， 這是個常量而已，我的項目中有微博登錄，所以是用一個常量來判斷是QQ登錄還是微博登錄，它們的實現過程基本一致。

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

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

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

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

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

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了
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 的參數里 ，我這的參數的

  /login/openCallback/?type=11&redirect=/user_center/index

 此時是跳轉到/login.php控制器的openCallback方法。

 我們來看一下openCallback()方法
 

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);
  }
}

繼續對代碼進行分析：

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

這個是獲取參數redirect的值 這里的值為 /user_center/index

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

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

3、 $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

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;
  }

1、 $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是請求類型；

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 ，當然也可以百度搜一下，這里我就不過多講述了；

/**
* 發起一個 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);

  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();

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);
  }
}

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

將獲得的Access Token賦給$accessToken

5、 $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:

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();

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登錄的整個邏輯處理已經詳細地講解完畢.