IT技术互动交流平台

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

作者:河畔一角  发布日期:2015-12-11 20:35:46

想必第一次大家接触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登陆时的管理中心页面,填写自己的回调地址,此处非常重要,填错,就无法进行跳转。
Tag标签: 第三方  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规