文档章节

第三方登录(如QQ登录)开发流程详解

liunx_
 liunx_
发布于 2017/09/03 15:22
字数 3106
阅读 58
收藏 1
点赞 0
评论 0

  近排由于工作的繁忙,已经一个星期没写博文做分享了,接下来我对网站接入第三方登录----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登录的整个逻辑处理已经详细地讲解完毕,希望大家能通过此博文能顺利给自己网站接入第三方登录。文章中的代码都是我们项目中用的代码,基本不会有问题。希望大家多多支持。

© 著作权归作者所有

共有 人打赏支持
liunx_
粉丝 0
博文 20
码字总数 29282
作品 0
成都
程序员
APP「登录注册模块」详解

登录注册对于大部分app来说,都是最基础的模块。 看似简单,却与相当多的产品功能用户使用场景交织在一起,受到产品类型、用户定位、业务逻辑、使用场景、用户操作等不同因素影响。 设计一个...

Ronie
2017/02/23
0
0
iOS 基于第三方QQ授权登录

iOS 基于第三方QQ授权登录 基于iOS实现APP的第三方QQ登陆,接入第三方SDK时的一个基本的步骤: 1,找到相关的开放平台,QQ互联平台,http://connect.qq.com/; 2,注册成功后创建自己的APP,...

Youth_关旋
2016/08/27
114
0
如何在Android手机中开发QQ账户登陆功能的应用

背景 OAUTH开发授权协议,为用户资源的授权提供了一个安全开放而又简易的标准。可以使用第三方的账户登陆另一个方的应用或服务,而不暴露给另一个应用该账户的信息。现在已经得到广泛的应用,...

长平狐
2012/09/06
466
0
oauth 开放授权

本想前段时间就把自己通过QQ OAuth1.0、OAuth2.0协议进行验证而实现QQ登录的心得及Demo实例分享给大家,可一直很忙,今天抽点时间说下OAuth1.0协议原理,及讲解下QQ对于Oauth1.0的认证开发。...

bengozhong
2016/08/15
26
0
OAuth的机制原理讲解及开发流程

本想前段时间就把自己通过QQ OAuth1.0、OAuth2.0协议进行验证而实现QQ登录的心得及Demo实例分享给大家,可一直很忙,今天抽点时间说下OAuth1.0协议原理,及讲解下QQ对于Oauth1.0的认证开发。...

只想一个人静一静
2014/04/26
0
0
【基础概念】 OAuth的认知以及开发流程

什么是OAUTH? OAUTH协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需...

林元煌
2017/06/11
0
0
joomlaQQ登录微博登录

joomlaQQ登录 微信登录等第三方登录 在joomla网站上集成QQ,微信,支付宝,人人,明道,短信,微博登录现在已经成为可能。只需要安装ZMAX程序人开发的ZMAX第三方登录组件,一键就可以让你的网...

张敏樱木花道
2015/04/09
560
0
JAVASHOP 6.1 发布,网上商城系统

Javashop发布新版本:V61.新版中进行了商家中心的修改,增加了很多体验性的操作,我们的目标是我们用心为客户省心。系统支持佣金结算、区域团购、实时物流、售后服务等基础功能;为电商运营商...

javashopv4
2016/08/11
7.9K
7
01第三方平台概述

第三方平台概述 一、概述 公众平台第三方平台是为了让公众号或小程序运营者,在面向垂直行业需求时,可以一键授权给第三方平台(并且可以同时授权给多家第三方),通过第三方平台来完成业务,...

MadDragon
03/12
0
0
统一认证,移动互联网时代应用开发未来的最佳登录注册方式?

统一认证:移动互联网时代的用户账号一站式管理平台 随着智能手机已经完全普及化,移动互联网时×××始真正的到来,随之而来的也是庞大的应用开发市场。 1. 应用(APP)登录 移动互联网时代...

505647699
04/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

python浏览器自动化测试库【2018/7/22-更新】

64位py2.7版本 更新 document_GetResources 枚举页面资源 document_GetresourceText 获取指定url的内容 包括页面图片 下载地址下载地址 密码:upr47x...

开飞色
16分钟前
17
0
关于DCL双重锁失效及解决方案

关于DCL双重锁失效及解决方案 Double Check Lock (DCL)实现单例 DCL 方式实现单例的优点是既能够在需要时才初始化单例,又能够保证线程安全,且单例对象初始化后调用getInstance方法不进行...

DannyCoder
21分钟前
0
0
PowerDesigner 16.5 安装配置

PowerDesigner16.5破解版是一款业内领先且开发人员常用的数据库建模工具,PowerDesigner可以从物理和概念两个层面设计数据库,方便用户制作处清晰直观的数据流程图和结构模型,欢迎有需要的朋...

Gibbons
46分钟前
0
0
mac Homebrew 指令积累

1通用命令 brew install [包名] //安装包 brew list //列举安装的包 brew info [包名] // 显示安装包的详细信息 mysql 相关 #启动mysql 服务 brew service start mysql my...

Kenny100120
今天
0
0
前端Tips: 创建, 发布自己的 Vue UI 组件库

创建, 发布自己的 Vue UI 组件库 前言 在使用 Vue 进行日常开发时, 我们经常会用到一些开源的 UI 库, 如: Element-UI, Vuetify 等. 只需一行命令, 即可方便的将这些库引入我们当前的项目: n...

ssthouse_hust
今天
1
0
大数据教程(2.13):keepalived+nginx(多主多活)高可用集群搭建教程【自动化脚本】

上一章节博主为大家介绍了目前大型互联网项目的keepalived+nginx(主备)高可用系统架构体系,相信大家应该看了博主的文章对keepalived/nginx技术已经有一定的了解,在本节博主将为大家分享k...

em_aaron
今天
4
0
Git 2.18版本发布:支持Git协议v2,提升性能

在最新的官方 Git 客户端正式版2.18中添加了对 Git wire 协议 v2 的支持,并引入了一些性能与 UI 改进的新特性。在 Git 的核心团队成员 Brandon Williams 公开宣布这一消息前几周,Git 协议 ...

六库科技
今天
0
0
Java8新特性之接口

在JDK8以前,我们定义接口类中,方法都是抽象的,并且不能存在静态方法。所有的方法命名规则基本上都是 public [返回类型] [方法名](参数params) throws [异常类型] {}。 JDK8为接口的定义带...

developlee的潇洒人生
今天
0
0
aop + annotation 实现统一日志记录

aop + annotation 实现统一日志记录 在开发中,我们可能需要记录异常日志。由于异常比较分散,每个 service 方法都可能发生异常,如果我们都去做处理,会出现很多重复编码,也不好维护。这种...

长安一梦
今天
2
0
将博客搬至CSDN

AHUSKY
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部