• 利用JS_SDK实现QQ第三方登录


    根据项目实际需求,需要QQ第三方登录,总结教程如下。


    • 准备工作

      在正式接入之前你需要了解以下名词的含义:

      1. appid :应用的唯一标识。在OAuth2.0认证过程中,appid的值即为oauth_consumer_key的值。

      2. appkey:appid对应的密钥,访问用户资源时用来验证应用的合法性。在OAuth2.0认证过程中,appkey的值即为oauth_consumer_secret的值。

      3. redirecturl:成功授权后的回调地址,必须是注册appid时填写的主域名下的地址,建议设置为网站首页或网站的用户中心。注意需要将url进行URLEncode。

      4. access token:用来判断用户在本网站上的登录状态,具有3个月有效期,用户再次登录时自动刷新。

      5. openid:是此网站上唯一对应用户身份的标识,网站可将此ID进行存储便于用户下次登录时辨识其身份,或将其与用户在网站上的原有帐号进行绑定。


    • 第一步

      要接入QQ登录,必不可少的是appid和appkey,通过申请接入QQ登录,按照相应步骤操作即可轻松获得,在此不做赘述。


    • 第二步

      在需要放置QQ登录按钮的页面加入下面SCRIPT代码:

      <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="APPID" data-redirecturi="REDIRECTURI" charset="utf-8"></script>

      PS:APPID 和 REDIRECTURI 换成第一步申请所得到的对应内容,REDIRECTURI 就是登录之后返回的回调地址,在申请页面自己填写,一般写网站主域名即可。注意:回调地址必须以http或https开头。


    • 第三步

      在页面放置一个元素节点用来展现登录按钮,并且指定其ID,如:

      <div id="qq"></div>

      然后在页面加入如下SCRIPT:

      <script type="text/javascript">

          QC.Login({

             btnId:"qq"    //插入按钮的节点id

      });

      </script>

      这时你就可以在页面看到如下效果:

      如何你对这个展示效果不满意,也可以自定义登录按钮。



    • 第四步

      在  REDIRECTURI 即回调地址页面加入如下SCRIPT:

      <script type="text/javascript"

      src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script>

      PS:官方说法如果回调地址页与加入QQ登录按钮是同一个页面,则只需要引用一次脚本文件。如果你理解不了这种官方说法,可以在第一步的脚本中加入data-callback="true"属性,而忽略第四步,前提是回调地址页与加入QQ登录按钮的页面是同一个页面。


    • 第五步

      因为JS SDK封装了获取Access Token以及OpenID的方法,因此开发者不需要用开发代码进行获取,直接调用QQ登录OpenAPI即可。

      调用OpenAPI时,请统一遵循下述调用方式:

      QC.api(api, paras, fmt, method)

      参数说明:



    • 最后

      提供一种代码接入思路,仅供参考:

      QC.api("get_user_info", {}) //get_user_info是API参数

      //指定接口访问成功的接收函数,s为成功返回Response对象

             .success(function (s) {

                 //成功回调,通过s.data获取OpenAPI的返回数据

                 nick = s.data.nickname; //获得昵称

                 headurl = s.data.figureurl_qq_1; //获得头像

                 if (QC.Login.check()) {//判断是否登录

                     QC.Login.getMe(function (openId, accessToken) { //这里可以得到openId和accessToken

                         //下面可以调用自己的保存方法

                         ……

                     });

                 }

             })

      //指定接口访问失败的接收函数,f为失败返回Response对象

             .error(function (f) {

                 //失败回调

                 alert("获取用户信息失败!");

             });

         ////指定接口完成请求后的接收函数,c为完成请求返回Response对象

         //.complete(function (c) {

         //    //完成请求回调

         //    alert("获取用户信息完成!");

         //});

      如果没有效果,刷新试一下,这是因为你在本地测试和你在申请时填的回调地址不匹配造成的,真正上线之后就没有问题了。

  • 相关阅读:
    查找质数的算法优化版
    一些新闻链接
    spring的自动装配基础
    Spring中的Autowired注解和Resource注解的区别
    动态规划:01背包 复习
    贪心问题 POJ 2393 Yogurt factory
    穷竭搜索:POJ 3187 Backward Digit Sums
    穷竭搜索: POJ 2718 Smallest Difference
    何凯文每日一句打卡||DAY1~DAY3
    贪心问题:区间覆盖 POJ 1328 Rader Installation
  • 原文地址:https://www.cnblogs.com/caicaizi/p/8177888.html
Copyright © 2020-2023  润新知