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:/