最新公告
  • 欢迎您光临三优资源网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 第三方登录(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,返回包如下:

     

     

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

     

     

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

      互相学习,共同进步!

     

    1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3165260857@qq.com
    2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
    3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
    4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!


    三优资源网 » 第三方登录(QQ登录)开发流程详解

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    三优资源网
    一个高级程序员模板开发平台

    发表评论

    • 231会员总数(位)
    • 1263资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 1448稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情