第三方登录（QQ登录）开发流程详解

第三方登录（QQ登录）开发流程详解

　　近排由于工作的繁忙，已经一个星期没写博文做分享了，接下来我对网站接入第三方登录----QQ登录的实现逻辑做一个详细的讲解。

　　对于整个流程的详细文档可以到QQ互联官网（http://wiki.connect.qq.com）查看，我这里就简单地进行描述，主要是分析代码的实现过程。

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

　　下图为整个接入流程：

　　

一、准备工作

　　接入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

1	< 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　

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

　　接下来我对这段代码进行分析

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

　　　　这是到最后登录成功后进行跳转的url，一般登录成功可以跳转的首页或者个人中心

　　2、$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 的

　　3、$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 );          }      }

　　继续对代码进行分析：

　　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

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

　　　　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是请求类型；

 

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

　　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，返回包如下：

 

 

1	callback( {"client_id":"YOUR_APPID","openid":"YOUR_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登录的整个逻辑处理已经详细地讲解完毕，希望大家能通过此博文能顺利给自己网站接入第三方登录。文章中的代码都是我们项目中用的代码，基本不会有问题。希望大家多多支持。

 

 

　　如果您觉得您能在此博文学到了新知识，请为我顶一个，如文章中有解释错的地方，欢迎指出。

　　互相学习，共同进步！