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

原文  http://www.cnblogs.com/it-cen/p/4338202.html

主题 OpenID

近排由于工作的繁忙，已经一个星期没写博文做分享了，接下来我对网站接入第三方登录----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

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

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

互相学习，共同进步！

时间： 2024-10-03 21:41:15

第三方登录（QQ登录）开发流程详解的相关文章

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

近排由于工作的繁忙,已经一个星期没写博文做分享了,接下来我对网站接入第三方登录----QQ登录的实现逻辑做一个详细的讲解. 对于整个流程的详细文档可以到QQ互联官网(http://wiki.connect.qq.com)查看,我这里就简单地进行描述,主要是分析代码的实现过程. 我用的是CI框架(MVC模式),模板引擎用的是smarty. 下图为整个接入流程: 一.准备工作 接入QQ登录前,网站需首先进行申请,获得对应的appid与appkey,以保证后续流程中可正确对网站与用户进行验证与授权.

迅为4412开发板Linux驱动教程——总线_设备_驱动注册流程详解

视频下载地址: 驱动注册:http://pan.baidu.com/s/1i34HcDB 设备注册:http://pan.baidu.com/s/1kTlGkcR 总线_设备_驱动注册流程详解 ? 注册流程图 ? 设备一般都需要先注册,才能注册驱动 – 现在越来越多的热拔插设备,反过来了.先注册驱动,设备来了再注册 设备 ? 本节使用的命令 – 查看总线的命令#ls /sys/bus/ – 查看设备号的命令#cat /proc/devices ? 设备都有主设备号和次设备号,否则255个设备号不

Cocos2d-x 3.X手游开发实例详解

Cocos2d-x 3.X手游开发实例详解(最新最简Cocos2d-x手机游戏开发学习方法,以热门游戏2048.卡牌为例,完整再现手游的开发过程,实例丰富,代码完备,Cocos2d-x作者之一林顺和泰然网创始人杨雍力荐) 于浩洋 著   ISBN 978-7-121-23998-4 2014年9月出版 定价:59.00元 356页 16开 编辑推荐 以Cocos2d-x V3.0为框架全面讲解手游开发的知识和方法 以热门游戏2048.卡牌为例,完整再现手游的开发过程 Cocos2d-x作者之一林

域名注册、域名实名认证、域名解析流程详解

1.域名注册流程详解首先登陆阿里云网站 www.aliyun.com 点击产品,选择域名注册(左下角蓝色字体) 然后来到此页面 在输入框中填入你想要注册的域名产看是否已经被注册 如:[email protected]然后点击查询域名,如果此域名没有被注册会弹出如下页面然后再次输入想要注册的域名点击查询此时各种域名的价钱还有注册状态就会显示出来,选择你喜欢的域名点击加入清单然后点击右侧的立即结算到如下页面选择购买年限和所有者类型然后勾选我已阅读协议 点击立即购买选择付款方式,付款成功后会弹出一个付

CentOS 5,6 系统启动流程详解

一.linux 组成介绍 1.linux 组成: Linux: kernel+rootfs(根文件系统) kernel: 进程管理.内存管理.网络管理.驱动程序.文件系统.安全功能 rootfs: 程序和glibc 库:函数集合, function, 调用接口(头文件负责描述) 过程调用: procedure,无返回值 函数调用: function 程序:二进制执行文件 2.内核设计流派: 单内核(monolithic kernel): Linux 把所有功能集成于同一个程序 微内核(micro

《HTML 5网页开发实例详解》目录

第一篇  从宏观上认识HTML 5 讲述了HTML 5引发的Web革命.HTML 5的整体特性.HTML 5相关概念和框架和开发环境搭建. 第1章 HTML 5引发的Web革命 1.1  你是不是真的了解HTML 5 1.1.1  通过W3C认识HTML 5的发展史 1.1.2  HTML 5.HTML4.XHTML的区别 1.1.3  什么人应该学HTML 5 1.1.4  一个图告诉你如何学习HTML 5 1.2  浏览器之争 1.2.1  说说这些常见的浏览器 1.2.2  浏览器的兼容烦

《iOS 7 应用开发实战详解》

<iOS 7 应用开发实战详解> 基本信息 作者: 朱元波    管蕾 出版社:人民邮电出版社 ISBN:9787115343697 上架时间:2014-4-25 出版日期:2014 年5月 开本:16开 页码:382 版次:1-1 所属分类:计算机 > 软件与程序设计 > 移动开发 > iPhone 更多关于>>><iOS 7 应用开发实战详解> 编辑推荐 新版本 全面讲解了iOS 7开发的各种技术 热门技术 基本控件.数据存储.多场景处理.界

CentOS开机流程详解

CentOS开机流程详解 一.linux开机流程: BIOS:(Basic Input Output System)基本输入输出系统,它是一组固化到计算机内主板上一个ROM芯片 上的程序,保存着计算机最重要的基本输入输出的程序.开机后自检程序和系统自启动程序,可从CMOS中读写系统设置的具体信息. MBR:Master Boot Record,主要引导记录区. Boot Loader:启动引导程序. 二.详细流程 第一步:加载BIOS 打开计算机电源,计算机硬件会自动加载BIOS,读取BIOS内

Linux启动流程详解【转载】

在BIOS阶段,计算机的行为基本上被写死了,可以做的事情并不多:一般就是通电.BIOS.主引导记录.操作系统这四步.所以我们一般认为加载内核是linux启动流程的第一步. 第一步.加载内核 操作系统接管硬件以后,首先读入 /boot 目录下的内核文件. 我们查看一下,/boot 目录下面大概是这样一些文件: 第二步.启动初始化进程 内核文件加载以后,就开始运行第一个程序 /sbin/init,它的作用是初始化系统环境. 由于init是第一个运行的程序,它的进程编号(pid)就是1.其他所有进程都