第三方登錄（QQ登錄）開發(fā)流程詳解-分享教程

學(xué)習(xí)NO.1 · 發(fā)表于 2017-2-8 13:50:16

親注冊(cè)登錄道勤網(wǎng)-可以查看更多帖子內(nèi)容哦�。ò蕡D片、文字詳情等）請(qǐng)您及時(shí)注冊(cè)登錄-bmrsportswear.com

您需要登錄才可以下載或查看，沒有賬號(hào)？立即注冊(cè)

x

近排由于工作的繁忙，已經(jīng)一個(gè)星期沒寫博文做分享了，接下來我對(duì)網(wǎng)站接入第三方登錄----QQ登錄的實(shí)現(xiàn)邏輯做一個(gè)詳細(xì)的講解。

對(duì)于整個(gè)流程的詳細(xì)文檔可以到QQ互聯(lián)官網(wǎng)（ http://wiki.connect.qq.com ）查看，我這里就簡單地進(jìn)行描述，主要是分析代碼的實(shí)現(xiàn)過程。

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

下圖為整個(gè)接入流程：

一、準(zhǔn)備工作

接入QQ登錄前，網(wǎng)站需首先進(jìn)行申請(qǐng)，獲得對(duì)應(yīng)的appid與appkey，以保證后續(xù)流程中可正確對(duì)網(wǎng)站與用戶進(jìn)行驗(yàn)證與授權(quán)。

申請(qǐng)appid和appkey的用途

appid ：應(yīng)用的唯一標(biāo)識(shí)。在OAuth2.0認(rèn)證過程中，appid的值即為oauth_consumer_key的值。

appkey：appid對(duì)應(yīng)的密鑰，訪問用戶資源時(shí)用來驗(yàn)證應(yīng)用的合法性。在OAuth2.0認(rèn)證過程中，appkey的值即為oauth_consumer_secret的值。

申請(qǐng)地址： http://connect.qq.com/intro/login/

二、放置“QQ登錄按鈕”

此步驟自己看文檔就OK了。我這里是通過在按鈕添加a鏈接實(shí)現(xiàn)跳轉(zhuǎn)登錄

V層：index.tpl

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

復(fù)制代碼

三、使用Authorization_Code獲取Access_Token

需要進(jìn)行兩步：

1. 獲取Authorization Code；

2. 通過Authorization Code獲取Access Token

Step1：獲取Authorization Code

請(qǐng)求地址：

PC網(wǎng)站：https://graph.qq.com/oauth2.0/authorize

WAP網(wǎng)站：https://graph.z.qq.com/moc2/authorize

請(qǐng)求方法：

GET

請(qǐng)求參數(shù)：

請(qǐng)求參數(shù)請(qǐng)包含如下內(nèi)容：

參數(shù)	是否必須	含義
response_type	必須	授權(quán)類型，此值固定為“code”。
client_id	必須	申請(qǐng)QQ登錄成功后，分配給應(yīng)用的appid。
redirect_uri	必須	成功授權(quán)后的回調(diào)地址，必須是注冊(cè)appid時(shí)填寫的主域名下的地址，建議設(shè)置為網(wǎng)站首頁或網(wǎng)站的用戶中心。注意需要將url進(jìn)行URLEncode。
state	必須	client端的狀態(tài)值。用于第三方應(yīng)用防止CSRF攻擊，成功授權(quán)后回調(diào)時(shí)會(huì)原樣帶回。請(qǐng)務(wù)必嚴(yán)格按照流程檢查用戶與state參數(shù)狀態(tài)的綁定。
scope	可選	請(qǐng)求用戶授權(quán)時(shí)向用戶顯示的可進(jìn)行授權(quán)的列表。可填寫的值是API文檔中列出的接口，以及一些動(dòng)作型的授權(quán)（目前僅有：do_like），如果要填寫多個(gè)接口名稱，請(qǐng)用逗號(hào)隔開。例如：scope=get_user_info,list_album,upload_pic,do_like 不傳則默認(rèn)請(qǐng)求對(duì)接口get_user_info進(jìn)行授權(quán)。建議控制授權(quán)項(xiàng)的數(shù)量，只傳入必要的接口名稱，因?yàn)槭跈?quán)項(xiàng)越多，用戶越可能拒絕進(jìn)行任何授權(quán)。
display	可選	僅 PC網(wǎng)站接入時(shí)使用。用于展示的樣式。不傳則默認(rèn)展示為PC下的樣式。如果傳入“mobile”，則展示為mobile端下的樣式。
g_ut	可選	僅 WAP網(wǎng)站接入時(shí)使用。 QQ登錄頁面版本（1：wml版本； 2：xhtml版本），默認(rèn)值為1。

返回說明：

1. 如果用戶成功登錄并授權(quán)，則會(huì)跳轉(zhuǎn)到指定的回調(diào)地址，并在redirect_uri地址后帶上Authorization Code和原始的state值。如：

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

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

注意：此code會(huì)在10分鐘內(nèi)過期。

2. 如果用戶在登錄授權(quán)過程中取消登錄流程，對(duì)于PC網(wǎng)站，登錄頁面直接關(guān)閉；對(duì)于WAP網(wǎng)站，同樣跳轉(zhuǎn)回指定的回調(diào)地址，并在redirect_uri地址后帶上usercancel參數(shù)和原始的state值，其中usercancel值為非零，如：

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

下面我們來構(gòu)造請(qǐng)求地址：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');
}

復(fù)制代碼

接下來我對(duì)這段代碼進(jìn)行分析

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

這是到最后登錄成功后進(jìn)行跳轉(zhuǎn)的url，一般登錄成功可以跳轉(zhuǎn)的首頁或者個(gè)人中心

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

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

我先附上這個(gè)方法的代碼：

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

復(fù)制代碼

此方法構(gòu)造的鏈接是賦給請(qǐng)求參數(shù) redirect_uri 的

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

此代碼的意思是調(diào)用connectQQMolde.php 里的getLoginUrl()方法，其實(shí)它返回的就是請(qǐng)求的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);
}

復(fù)制代碼

此時(shí)，就已經(jīng)構(gòu)造完了請(qǐng)求的url了，將此url賦給V層的index.tpl的qq圖標(biāo)的a鏈接那就OK了

Step2：通過Authorization Code獲取Access Token

請(qǐng)求地址：

PC網(wǎng)站：https://graph.qq.com/oauth2.0/token

WAP網(wǎng)站：https://graph.z.qq.com/moc2/token

請(qǐng)求方法：

GET

請(qǐng)求參數(shù)：

請(qǐng)求參數(shù)請(qǐng)包含如下內(nèi)容：

參數(shù)	是否必須	含義
grant_type	必須	授權(quán)類型，在本步驟中，此值為“authorization_code”。
client_id	必須	申請(qǐng)QQ登錄成功后，分配給網(wǎng)站的appid。
client_secret	必須	申請(qǐng)QQ登錄成功后，分配給網(wǎng)站的appkey。
code	必須	上一步返回的authorization code。如果用戶成功登錄并授權(quán)，則會(huì)跳轉(zhuǎn)到指定的回調(diào)地址，并在URL中帶上Authorization Code。例如，回調(diào)地址為www.qq.com/my.php，則跳轉(zhuǎn)到： http://www.qq.com/my.php?code=520DD95263C1CFEA087****** 注意此code會(huì)在10分鐘內(nèi)過期。
redirect_uri	必須	與上面一步中傳入的redirect_uri保持一致。

返回說明：

如果成功返回，即可在返回包中獲取到Access Token。如：

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

參數(shù)說明	描述
access_token	授權(quán)令牌，Access_Token。
expires_in	該access token的有效期，單位為秒。
refresh_token	在授權(quán)自動(dòng)續(xù)期步驟中，獲取新的Access_Token時(shí)需要提供的參數(shù)。

然后點(diǎn)擊此鏈接，跳轉(zhuǎn)到QQ登錄界面，然后如果登錄成功，就跳到 redirect_uri 的參數(shù)里，我這的參數(shù)的

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

此時(shí)是跳轉(zhuǎn)到/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);
}
}

復(fù)制代碼

繼續(xù)對(duì)代碼進(jìn)行分析：

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

這個(gè)是獲取參數(shù)redirect的值這里的值為 /user_center/index

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

這個(gè)是獲取參數(shù)code的值這里是 authorization code

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

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

這個(gè)和上面介紹的一樣，這里取得結(jié)果是 /login/openCallback/?type=$accountType&/user_center/index

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

這個(gè)方法就是調(diào)用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;
}

復(fù)制代碼

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()里面的參數(shù)，此參數(shù)就是通過Authorization Code獲取Access Token的請(qǐng)求URL地址

接下來我們看看$this->callApi()方法，此方法是發(fā)起一個(gè)Api請(qǐng)求，參數(shù)$params是參數(shù)數(shù)組，$method是請(qǐng)求類型；

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

復(fù)制代碼

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

先看一下這個(gè)自定義函數(shù)curl_requesr_text()，作用是發(fā)起一個(gè) HTTP(S) 請(qǐng)求, 并返回響應(yīng)文本,至于有關(guān)CURL的知識(shí)可以點(diǎn)擊鏈接參考我的另一篇博文去了解

http://www.cnblogs.com/it-cen/p/4240663.html ，當(dāng)然也可以百度搜一下，這里我就不過多講述了；

/**
* 發(fā)起一個(gè) HTTP(S) 請(qǐng)求, 并返回響應(yīng)文本
*
* @param array 錯(cuò)誤信息: array($errorCode, $errorMessage)
* @param string url
* @param array 參數(shù)數(shù)組
* @param string 請(qǐng)求類型 GET|POST
* @param int 超時(shí)時(shí)間
* @param array 擴(kuò)展的包頭信息
* @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;
}

復(fù)制代碼

再回到$this->getAccessToken()方法，經(jīng)過判斷是否有$result['error']，如果有就代表api返回有錯(cuò)誤，則拋出一個(gè)異常

if(isset($result['error'])) {

throw new ConnectQQException($result['error_description'], intval($result['error']));

}

return $result;

最終返回的是一個(gè)數(shù)組給C層 login.php 里openCallback()里所調(diào)用的$this->model->connectQQ->getAccessToken();

現(xiàn)在我們回到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);
}
}

復(fù)制代碼

4、此時(shí)到了 $accessToken = $result['access_token'];

將獲得的Access Token賦給$accessToken

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

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

先來補(bǔ)充些獲取openId的資料：

1 請(qǐng)求地址

PC網(wǎng)站：https://graph.qq.com/oauth2.0/me

WAP網(wǎng)站：https://graph.z.qq.com/moc2/me

2 請(qǐng)求方法

GET

3 請(qǐng)求參數(shù)

請(qǐng)求參數(shù)請(qǐng)包含如下內(nèi)容：

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

4 返回說明

PC網(wǎng)站接入時(shí)，獲取到用戶OpenID，返回包如下：

WAP網(wǎng)站接入時(shí)，返回如下字符串：

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

openid是此網(wǎng)站上唯一對(duì)應(yīng)用戶身份的標(biāo)識(shí)，網(wǎng)站可將此ID進(jìn)行存儲(chǔ)便于用戶下次登錄時(shí)辨識(shí)其身份，或?qū)⑵渑c用戶在網(wǎng)站上的原有賬號(hào)進(jìn)行綁定。

接下來我們看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; }

此方法還是調(diào)用了callApi()方法發(fā)起Api請(qǐng)求，返回的是一個(gè)數(shù)組，具體的和上面所有的獲取Access Token的流程一樣；

繼續(xù)返回 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是此網(wǎng)站上唯一對(duì)應(yīng)用戶身份的標(biāo)識(shí)，網(wǎng)站可將此ID進(jìn)行存儲(chǔ)便于用戶下次登錄時(shí)辨識(shí)其身份，或?qū)⑵渑c用戶在網(wǎng)站上的原有賬號(hào)進(jìn)行綁定。

接下來就是 $loginResult = $this->model->login->openAccountLogin($accountType, $openId, $accessToken); 也就是通過$openId和$accessToken查詢下用戶表是否有對(duì)應(yīng)的用戶，如果沒有就進(jìn)行綁定啊或者直接存儲(chǔ)啊，也就是一系列登錄綁定的邏輯了，這里我就不多說了，大家都應(yīng)該會(huì)。

好了，第三方登錄--QQ登錄的整個(gè)邏輯處理已經(jīng)詳細(xì)地講解完畢，希望大家能通過此博文能順利給自己網(wǎng)站接入第三方登錄。文章中的代碼都是我們項(xiàng)目中用的代碼，基本不會(huì)有問題。希望大家多多支持。

如果您覺得您能在此博文學(xué)到了新知識(shí)，請(qǐng)為我頂一個(gè)，如文章中有解釋錯(cuò)的地方，歡迎指出。

互相學(xué)習(xí)，共同進(jìn)步！

-----

另外分享一個(gè)視頻的學(xué)習(xí)課程

道勤主機(jī)提供365天*24小時(shí)全年全天無休、實(shí)時(shí)在線、零等待的售后技術(shù)支持。竭力為您免費(fèi)處理您在使用道勤主機(jī)過程中所遇到的一切問題! 如果您是道勤主機(jī)用戶，那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費(fèi)電話、后臺(tái)提交工單這些方式聯(lián)系道勤主機(jī)客服！如果您不是我們的客戶也沒問題，點(diǎn)擊頁面最右邊的企業(yè)QQ在線咨詢圖標(biāo)聯(lián)系我們并購買后，我們?yōu)槟赓M(fèi)進(jìn)行無縫搬家服務(wù)，讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機(jī)的服務(wù)！