利用JS_SDK实现QQ第三方登陆

前言

现现在，第三方登陆已成为大部分网站必备的一项基础技能，引入时髦的第三方登陆不只能帮你吸引更多的用户，也让你的网站能够充分利用其余大型网站的用户资源。本次教程将让你的网站最快捷便利地引入QQ登陆。

QQ第三方登陆目前提供了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)

参数说明：

参数名称	是否必须	描述
api	必须	指定要调用的OpenAPI名称。例如：调用add_t时，OpenAPI名称为“add_t”。  各OpenAPI的名称具体请参见API列表。
paras	必须	指定要调用的OpenAPI对应的参数。各参数使用JSON的键值对格式列出。  OpenAPI对应的参数具体请参见API列表中各OpenAPI的参数说明。 注意：此处参数不须要自行传递access_token与openid
fmt	可选	指定OpenAPI的返回格式，可用值为“json”或“xml”。默认为“json”。  注意：json、xml为小写，不然将不识别。
method	可选	指定OpenAPI调用请求的发起方式，可用值为“GET”或“POST”。根据配置，默认发送数据为“POST”，获取数据为“GET”。

最后

提供一种代码接入思路，仅供参考：

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("获取用户信息完成！");

   //});

结束语

若是按照上述步骤操做后得不到你须要的用户信息，别担忧，刷新下页面可能会有意想不到的惊喜哦。这是由于你在本地测试和你在申请时填的回调地址不匹配形成的，真正上线以后就没有问题了。

最后但愿本次教程对你们有点帮助和启发。

 

本文原创自我爱学框架，欢迎转载，请保留原文连接！

原文连接：http://www.itframe.top/Detail/Index/article/eed968bd-a64a-47d3-b9cf-40291bdcc7be.html