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

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

　　近排因爲工做的繁忙，已經一個星期沒寫博文作分享了，接下來我對網站接入第三方登陸----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

<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　

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登陸仍是微博登陸，它們的實現過程基本一致。

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

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：

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

　　繼續對代碼進行分析：

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

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

 

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

　　四、此時到了 $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:

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

 

 

　　若是您以爲您能在此博文學到了新知識，請爲我頂一個，如文章中有解釋錯的地方，歡迎指出。

　　互相學習，共同進步！

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