QQ互联第三方登陆 redirect uri is illegal(100010)

想必第一次大家接触QQ第三方登陆都会遇到各种各样的问题，备受折磨，因此，今天我把自己做QQ登陆的过程描述一下，希望给大家提供参考，少走弯路。

在开发之前，我们先了解下QQ登陆的流程

第一：查看熟悉网站接入概述

第二：开发者注册网站接入流程

第三：前两步熟悉以后，获取到appid后，即可进行开发了。

本次只介绍PC网站接入QQ过程

登陆页面放置QQ登陆按钮
```
<span id="qqLoginBtn" ></span>
```
id可自定义修改，如果样式不对，也可以自定义class，做一些样式控制。
在登陆页面引用QQ登陆js库。
```
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="XXXX" data-redirecturi="http://www.51purse.com/qq_back.html" charset="utf-8" ></script>
```
data-appid对应的XXXX需要替换为你自己的appid,上面您完成开发者注册后，即可获取到appid。
data-redirecturi为回调地址，后面对应的值是我目前网站的回调页面，大家也可以自己写一个页面。

新建空白页面（回调页面）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

  <head>

      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <title>我爱管账网</title>

    <meta http-equiv="pragma" content="no-cache" />

    <meta http-equiv="cache-control" content="no-cache" />

    <meta http-equiv="expires" content="0" />

    <meta http-equiv="keywords" content="我爱钱包,钱包管家,我爱记账,我爱管账" />

    <meta http-equiv="description" content="我爱管账网是一种给主要给用户提供记账理财的工具，帮助用户更好更合理的管理自己的资金，帮助用户分析和控制预算" />

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

  </head>

  <body>

  </body>

</html>

大家一定要切记：此处必须是空白页面，就是什么内容都不放，值建一个空的HTML文件，引入sdk文件即可，大家完全可复制我的。

登陆页面初始化相关参数，初始化QQ图标，自定义尺寸，传入id。

if($("#qqLoginBtn").size()>0){

        QC.Login({

            btnId : "qqLoginBtn",//插入按钮的html标签id

            size : "A_M",//按钮尺寸

            scope : "get_user_info",//展示授权，全部可用授权可填 all

            display : "pc"//应用场景，可选

        },function(reqData, opts){

            document.cookie="flag=2";

            window.location.href="welcome.html";

        });

    }

此处代码，引入到登陆页面中，初始化的时候，就会加载QQ图片到按钮上去。function(reqData,opts){}方法，即为登陆成功后的回调，登陆成功以后，我这边会手动让他回到主页面，因为我是JS开发者，做的是单页面应用，所以只能自己手动回到主页面，当然，大家其它语言的，可以直接通过action跳转到主页面。

在主页面（welcome.html）同样需要引用sdk文件库，如果QQ按钮和主页面在同一个页面的话，只需要引入一次即可，比如某些论坛。
```
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="XXXX" data-redirecturi="http://www.51purse.com/qq_back.html" charset="utf-8" ></script>
```
此处代码，同登陆页面一样，大家直接复制过去即可。

登陆成功后，大家需要调用QQ的API来获取用户的资料信息，方便在自己网站上展示，同时可将相关字段存入自己的数据库，以维护用户的数据。

//判断当前用户是否登陆

if(QC.Login.check()){//如果已登录

     //用JS SDK调用OpenAPI，此处可获得openId, accessToken

     QC.Login.getMe(function(openId, accessToken){

          //调用get_user_info接口，可得到用户的资料信息,此处不需要传入任何参数，因为QQapi会自动带入参数

          QC.api("get_user_info",{}).success(function(rep){

             var nickName = rep.data.nickname;

             var gender = rep.data.gender;

             var figureurl = rep.data.figureurl;

             $("#currentUserNickName").text(rep.data.nickname);

           });

     });

}else{

     document.cookie="flag=1;expires="+new Date(0).toUTCString();

     window.location.href="login.html";

}

此代码可以获取用户资料信息，同时也可以获取到openId和accessToken。

到此基本QQ第三方登陆就结束了，另外一个非常重要的地方是，在您个人的管理中心中，申请appid的地方，需要将回调地址，改成和上面建的空白页面的地址一样即为：
http://www.51purse.com/qq_back.html，切记，必须这么写，否则，登陆会报错（redirect uri is illegal(100010)），这一点我深有体会，官网的Demo是有问题的，我查阅了很多资料都无法解决，我总以后是登陆成功后的页面，所以，我之前填的是主页面，可是怎么弄都不想，必须是之前建的空白页面。

以上7条基本可以实现完整的QQ登陆了。下面给大家补充一下get_user_info接口的返回数据，大家其实也可以去查看API文档，我这边稍微提一下。

get_user_info接口

ret    返回码

msg    如果ret<0，会有相应的错误信息提示，返回数据全部用UTF-8编码。

nickname    用户在QQ空间的昵称。

figureurl    大小为30×30像素的QQ空间头像URL。

figureurl_1    大小为50×50像素的QQ空间头像URL。

figureurl_2    大小为100×100像素的QQ空间头像URL。

figureurl_qq_1    大小为40×40像素的QQ头像URL。

figureurl_qq_2    大小为100×100像素的QQ头像URL。需要注意，不是所有的用户都拥有QQ的100x100的头像，但40x40像素则是一定会有。

gender    性别。 如果获取不到则默认返回"男"

is_yellow_vip    标识用户是否为黄钻用户（0：不是；1：是）。

vip    标识用户是否为黄钻用户（0：不是；1：是）

yellow_vip_level    黄钻等级

level    黄钻等级

is_yellow_year_vip    标识是否为年费黄钻用户（0：不是； 1：是）

{

"ret":0,

"msg":"",

"nickname":"Peter",

"figureurl":"http://qzapp.qlogo.cn/qzapp/111111/942FEA70050EEAFBD4DCE2C1FC775E56/30",

"figureurl_1":"http://qzapp.qlogo.cn/qzapp/111111/942FEA70050EEAFBD4DCE2C1FC775E56/50",

"figureurl_2":"http://qzapp.qlogo.cn/qzapp/111111/942FEA70050EEAFBD4DCE2C1FC775E56/100",

"figureurl_qq_1":"http://q.qlogo.cn/qqapp/100312990/DE1931D5330620DBD07FB4A5422917B6/40",

"figureurl_qq_2":"http://q.qlogo.cn/qqapp/100312990/DE1931D5330620DBD07FB4A5422917B6/100",

"gender":"男",

"is_yellow_vip":"1",

"vip":"1",

"yellow_vip_level":"7",

"level":"7",

"is_yellow_year_vip":"1"

}

。。

最好给大家提供几个地址：
sdk下载地址
 api文档列表地址
给大家看下我的登陆效果

这是登陆页面渲染出来的QQ登陆图标。

这是点击QQ登陆后，跳转第三方QQ登陆窗口页面。

这是登陆成功后的主页面。

这是我再申请QQ登陆时的管理中心页面，填写自己的回调地址，此处非常重要，填错，就无法进行跳转。

QQ互联第三方登陆 redirect uri is illegal(100010)的更多相关文章

QQ互联登录提示redirect uri is illegal(100010)完美解决方法
大概2015年3月低,腾讯QQ互联开发平台调整了有关QQ登录应用回调地址填写规则,用来修复QQ登录过程因回调地址的漏洞可能导致存在的安全问题. 博主接触这块较多,但也是四月才了解此事,从4月起,所有新 ...
QQ互联登录回调路径错误redirect uri is illegal(100010)
QQ互联登录设置的路径设置
Discuz3.1登录QQ互联显示redirect uri is illegal(100010)的解决
QQ互联最近也是BUG不断,引起了很多用户的不满,从早前关闭群组功能,到发布2.0接口标准,引发系列站长用户的连锁反应.而Discuz从X3开始,为了应对QQ互联的2.0接口标准,采用了云平台来整合Q ...
解决qq互联回调地址错误redirect uri is illegal(100010)的方法，不同于网上大部分方法
我是在用ecshop自己搭建的一个网店系统安装了第三方登录的插件,包括qq登录插件.网上大部分情况都是discuz论坛的这个回调地址出错及解决办法.所以在我出错的时候参考他们的办法并不管用.但是在后面 ...
QQ互联 redirect uri is illegal(100010)的解决办法，很简单
我的地址栏内容是:http://openapi.qzone.qq.com/oauth/show?which=ConfirmPage&display=pc&response_type=c ...
QQ互联API接口失效，第三方网站的死穴
最近2个月,用开源程序WeCenter搭建了一个社交问答网站. 为了方便用户注册,开通了QQ登录功能. 今天,突然发现QQ互联返回一直出现错误. 度娘了很久,发现大家都遇到这个问题了.Disc ...
QQ互联，填写回调时注意事项
今天在做QQ登录接口的时候,填写回调地址的时候,竟然出现了诡异的事情. 我的回调地址我直接填的域名,也申请通过了.但是在做开发地时候,一直提示这蛋疼的 redirect uri is illegal ...
第三方登陆-qq互联
看到很多网站都有第三方登陆,使用业余时间自己也要实现一个第三方登陆的功能: 1.登陆qq互联的网站:https://connect.qq.com/index.html 2.点击头像进行资料申请 --- ...
QQ互联OAuth2.0 .NET SDK 发布以及网站QQ登陆示例代码(转)
OAuth: OAuth(开放授权)是一个开放标准,允许用户授权第三方网站访问他们存储在另外的服务提供者上的信息,而不需要将用户名和密码提供给第三方网站或分享他们数据的所有内容. QQ登录OAuth2 ...

随机推荐

eclipse项目导入到android studio中文乱码处理
由于eclipse项目是gbk编码,Android studio默认用的是utf-8. 就会导致代码中的汉字,注释全部显示为乱码. 解决方法:在module的bulid.gradle中加入: comp ...
在ExpressJS中设置二级域名跨域共享Cookie
问题:我使用expressjs和mongostore来管理session.下面是expressjs中的设置. app.configure(function(){ app.use(express.ses ...
【C语言】两种方式实现冒泡排序算法
题目要求编写一个C语言程序,实现基本的冒泡排序算法. 算法冒泡排序,用一句话来总结: 一组数中,相邻的两个数进行比较.交换,将最大(小)数交换至尾(首)部,即完成了一次冒泡排序要想对N个数字进行 ...
20155214 2016-2017-2 《Java程序设计》第5周学习总结
20155214 2016-2017-2 <Java程序设计>第5周学习总结教材学习内容总结 1.错误会被包装为可抛出的对象,继承自java.lang.Throwable类. 2.可以利 ...
POJ1275出纳员的雇佣【差分约束】
出纳员的雇佣 Tehran的一家每天24小时营业的超市,需要一批出纳员来满足它的需要.超市经理雇佣你来帮他解决问题:超市在每天的不同时段需要不同数目的出纳员(例如:午夜时只需一小批,而下午则需要很多) ...
老李分享：接电话之uiautomator 1
老李分享:接电话之uiautomator poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9 ...
WCF消息压缩
对于WCF应用来说,传输前压缩请求消息和回复消息,不但可以降低网络流量,也可以提高网络传输的性能一.消息压缩方案二.用于数据压缩与解压缩组件三.用于消息压缩与解压的组件四.用于对请求/回复消息 ...
c++ 字符串去重
##### c++ 字符串去重 == 需求 == * 编写一个字符串过滤函数,若字符串出现多个相同的字符,将不是首次出现的字符过滤掉. > 输入:"apache" 输出:&q ...
解决tomcat debug 调试时间过长的问题
做java web很早就碰到一个问题,eclipse 的调试有时候忽然启动时间奇慢 ,但是正常启动速度没问题,其他项目也完全正常后来想想也不影响项目运行,也没太在意不过今天又碰到这问题了,而且启动 ...
javascript数组常用方法详解
1,splice(). array.splice(index,many,list1,list2....) 参数1.index位置负数为从结尾处算,倒数第一为-1:参数2,many要删除的项目, ...