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

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

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

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

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

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

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

  1. 登陆页面放置QQ登陆按钮
    <span id="qqLoginBtn" ></span>

    id可自定义修改,如果样式不对,也可以自定义class,做一些样式控制。

  2. 在登陆页面引用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为回调地址,后面对应的值是我目前网站的回调页面,大家也可以自己写一个页面。

  3. 新建空白页面(回调页面)
    <!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文件即可,大家完全可复制我的。

  4. 登陆页面初始化相关参数,初始化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跳转到主页面。

  5. 在主页面(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>

    此处代码,同登陆页面一样,大家直接复制过去即可。

  6. 登陆成功后,大家需要调用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。

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

    。。

  9. 最好给大家提供几个地址:
    sdk下载地址
    api文档列表地址
  10. 给大家看下我的登陆效果
    QQ互联第三方登陆 redirect uri is illegal(100010)_第1张图片
    这是登陆页面渲染出来的QQ登陆图标。
    QQ互联第三方登陆 redirect uri is illegal(100010)_第2张图片
    这是点击QQ登陆后,跳转第三方QQ登陆窗口页面。
    QQ互联第三方登陆 redirect uri is illegal(100010)_第3张图片
    这是登陆成功后的主页面。
    QQ互联第三方登陆 redirect uri is illegal(100010)_第4张图片
    这是我再申请QQ登陆时的管理中心页面,填写自己的回调地址,此处非常重要,填错,就无法进行跳转。

你可能感兴趣的:(QQ互联第三方登陆 redirect uri is illegal(100010))