个人站点申请接入QQ登录的一波三折

ello呀,我是yangyang.在经历多次qq互联创建网站应用来接入qq快速登录审核不过之后,内心已经难受至极,今天给大家分享下接入qq登录的申请流程的一些细节之处,基本能保证大家通过.

细节点

创建应用填写的信息最好和个人网站备案填写的一致,尤其是备案号,比写成备案服务号了
一定要在你的网站登录、注册页面加入 qq登录的图标(具体官网有说明)

如图

一定一定要在上面的qq登录图标上做接入代码,如果你只是放了按钮,没有接入的话,结果也是审核不过(下面我给大家分享我拿到的一份代码)


<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>互联登录的demo</title>
    <style>
        html,body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }
        body {
            font-family: sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        button {
            background-color: transparent;
            width: 150px;
            height: 44px;
            border-radius: 32px;
            border: 1px solid #999;
            cursor: pointer;
            font-family: inherit;
        }
        button:hover {
            background-color: #3abcff;
            border-color: #3abcff;
            color: #fff;
        }
        button i {
            display: inline-block;
            vertical-align: middle;
            width: 18px;
            height: 18px;
            -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA+1pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNyAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTYtMTItMjFUMTI6MzM6MjYrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE4LTA5LTIxVDEwOjQ1OjQ2KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE4LTA5LTIxVDEwOjQ1OjQ2KzA4OjAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjcxMzlDMDQwQkQ0ODExRTg4ODFGQTcwMkEwQTAyQTQ5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjcxMzlDMDQxQkQ0ODExRTg4ODFGQTcwMkEwQTAyQTQ5IiBkYzpmb3JtYXQ9ImltYWdlL3BuZyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ3RDU2OTAwQjU1QjExRTZCQTZEQUY4MDI2NTY4MUExIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ3RDU2OTAxQjU1QjExRTZCQTZEQUY4MDI2NTY4MUExIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+kM01ZAAAA/5JREFUeNrcW01IFVEUvi9Ty8zMNAvJMNIMCZFEK108qFZqpFAQWdugRQVWCNW2TZs2rWonBG1EwaCfRYsWBUVQRGIRSUVZmf1ivbRe3+mdgcdrxLlzZ+478w58zGPmvfvu+eacc885cyeWTCaVicRiMS9fywOagFZgI7AGKAWWANPAZ+A1MArcY/z2MrDp/P8NYIJ5pB64AHygv9LAFHAR2BT6/EMioAYYBP5oKu6Gq8CGKBFwlM06GSASQD95nGQCCoDLASueCbKqIokEkPLXQlbewY10EqQQMGBJeQfDjjtIIOCwZeUdnAyCgJjJOoocYC0Oj4FiZV8oMDZi/mMmgywwnMT5LClPUsg5RnYSIUhzQOu8KeImLmBiAafc1uUsyBmjVN5PDIDvV+EwDiwUQAApUA89ntqMAQeEKK/YCg/aDoK7lSzptuYCMP9yHN4FsIIELeugywsbFtAuUHmSNlsusEXJlG22CGgQSkCDLQLqhRJQZysI/uQ0VKIUQp9foVkAlF8uWHmSyrBdYKmSLaVhE1AinICisAmICScgP2wCyoQTUBI2AQnhBMyETcAO4QTsDC0PwBJI5e9LYLVgAiaBauj0IwwL6BGuPAlVqr1av9DoAd5R2e//ecHDwJ8LqNSj7WSEEA+6KXpMRUuOBBYEEfwqVGrzQkGECJjlDtGrIILgvogpT0IrlqdGqRcCelU0Zb/xKqBSOzOSEcZm0yC4R0Vb9pq6QHfECdjlexVA9F+Jw1slswWuI+uh43M/FtCVA8qTdPh1gU6VG9Kh7QJc+X2MQAvMaw+jDHpO61hAY44oT0Jd7FZdF2hXuSVbdQlodjn3JSLKus2zRZcAt8dMJyJCQJ/LuVqtVFj9v7v7lkq1xJ8JT30neP4jGecTWg0RLiedH1N/rY7PXxJOwBWeJ72P8C3jWpFOLZCX9rk/bQPSkHDzH2Krpj7A8Yxr+TouMMmsjTi5Ap+nvsAboXf/E1CcNldy2UHHinVdYJj9vdzl2mmhBJxzmesy4BFwU5cAeuOjco5rNOh7YcrT0lcxx3zpcV5toLvFIYeEEdBndbs8+9d1IcrfpqBtfbs8CiZ6SkSvt1VlMepTvtICHcb9DuC73sefUrOkJ4spMlV3XSbKz9sU9egObbwE2TR7SnK2BzF/o44P3IBebKQNiqOW7/4YF2xNxiMZ3HUpD0sfkDVYWwW4KpwVtgzSe8Zn07PWUAiAxIUXQ526BOi+9EBp5QD7fY3GKpLgHuMEt9qpWHmiUm+dUOVG+3yrgVUqtQljBbDIqxfzOHeB+9pxzCAPyOOJFnP/0KkgyRy/8ufvjGkff7GYx3Y2Z9LRuWEzaWNPQYdZvzHwrwADAG+u/Wg4e38MAAAAAElFTkSuQmCC);
            -webkit-mask-size: cover;
            background-color: #000;
            
        }
        button span {
            display: inline-block;
            vertical-align: middle;
            font-size: 18px;
            margin-left: 5px;
            letter-spacing: 2px;
        }
        button:hover i {
            background-color: #fff;
        }
        #info {
            text-align: center;
        }
        #avatar {
            width: 100px;
            height: 100px;
            border-radius: 100%;
            object-fit: cover;
        }
        #nick {
            font-size: 18px;
            display: block;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <button id="login" style="display:none"><i></i><span>登录</span></button>
    <div id='info' style="display:none;">
        <img id="avatar" src="https://ui.qzone.com/100" alt="">
        <span id="nick">您好，测试用户</span>
        <button id="signOut"><span>注销</span></button>
    </div>
    <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"charset="utf-8">
    </script>
<script>

    var options = {
        appId : 101870587, //这个appId 是这个demo的，业务请使用自己的appid
        //s_url 这个参数业务可以自定，目的是让业务在回调页知道怎么回调到发起登录的页面
        // 换成自己的也行
        redirectURI : 'https://qq-web.cdn-go.cn/connect-demo/latest/callback.html?s_url='+encodeURIComponent(location.href)
    }
    //初始化一下sdk
    QC.init(options);


    //未登录，显示登录按钮
    if(!QC.Login.check()){
        document.getElementById('login').style.display='block'
    //登录态检查通过，获取个人信息
    }else{
        QC.Login.getMe(function(openId,accessToken){
            QC.api("get_user_info").success(function (req) {
                document.getElementById('info').style.display='block'
                // document.getElementById('avatar').src = req.data.nickname;
                document.getElementById('nick').innerText = '您好，'+req.data.nickname;
            })
        })
        
    }   


    var loginBtn =document.getElementById('login')
    var signoutBtn  = document.getElementById('signOut')
    if(window.addEventListener){
        var clicked =false
        loginBtn.addEventListener('click',function(){
            if(clicked){
                cosole.log('防止手抖')
                return;
            }
            clicked=true;
            
            setTimeout(function(){clicked=false},500)
            //通过这个方法来打开登录页
            QC.Login.showPopup(options)
        })
        signoutBtn.addEventListener('click',function(){
            QC.Login.signOut();//注销
            location.reload();//页面刷新下
        })
    }else{
        //TODO: 兼容ie老版本
    }

    
</script>
</body>
</html>

下载sdk本地调试
一定记得重新提交,如果审核不过,就删除应用再次创建
如果还有问题,推荐大家腾讯开放平台的客服:腾讯应用开放平台

接入大致流程(以下内容来自官网)

1.注册开发者

1. 在QQ互联开放平台首页 https://connect.qq.com/ ，点击右上角的“登录”按钮，使用QQ账号登录，如下图所示：

重要提示：
开发者QQ号码一旦注册不能变更，建议使用公司公共QQ号码而不是员工私人号码注册，以免遇到员工离职等情况造成不必要的麻烦。

2. 登录成功后会跳转到开发者注册页面，在注册页面按要求提交公司或个人的基本资料。下图所示的是公司注册页面：

3.按要求提交资料后，审核人员会进行审核，通过审核即可成为开发者。

网站应用及移动应用接入申请

应用接入前，首先需进行申请，获得对应的appid与appkey，以保证后续流程中可正确对网站与用户进行验证与授权。

1.1 创建应用

开发者注册完成后，点击“应用管理”按钮。

跳转到qq互联管理中心页面，点击创建应用。

选择需要创建的应用类型，我们以网站应用为例：

点击创建网站应用后，按要求完善信息：

网站回调地址填写规范：https://wiki.connect.qq.com/%E5%9B%9E%E8%B0%83%E5%9C%B0%E5%9D%80%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E5%8F%8A%E4%BF%AE%E6%94%B9%E6%96%B9%E6%B3%95
备案信息填写规范：http://www.miitbeian.gov.cn/publish/query/indexFirst.action

网站信息填写完成，点击“创建应用”后，网站应用创建完成，点击“应用管理”，进入管理中心，在管理中心可以查看到网站获取的appid和appkey，如下图所示：

备注：创建移动应用与网站应用步骤方法一致，在此不赘述。

1.2 网站信息完善

点击“应用中心”，应用右侧的“查看”，进入应用详情页面。

应用详情页面可点击“修改”来编辑应用“基本信息”和“平台信息”。

点击“应用接口”可查看已获取的接口，使用QQ登录功能。

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

HTML 链接

如何在HTML文档中创建链接。

(可以在本页底端找到更多实例)

HTML 超链接（链接）

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

HTML 链接语法

链接的 HTML 代码很简单。它类似这样：:

href 属性描述了链接的目标。.

实例

<a href="http://www.runoob.com/">访问菜鸟教程</a>

上面这行代码显示为：: 访问菜鸟教程

点击这个超链接会把用户带到菜鸟教程的首页。

提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

HTML 链接 - target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：

实例

<ahref="http://www.runoob.com/"target="_blank">访问菜鸟教程!</a>

HTML 链接- id 属性

id属性可用于创建在一个HTML文档书签标记。

提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。

实例

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：

访问有用的提示部分</a>

基本的注意事项 - 有用的提示

注释： 请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.runoob.com/html/"。

图片链接

如何使用图片链接。

在当前页面链接到指定位置

如何使用书签

跳出框架

本例演示如何跳出框架，假如你的页面被固定在框架之内。

创建电子邮件链接

本例演示如何如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）

建电子邮件链接 2

本例演示更加复杂的邮件链接。

HTML 链接标签

标签	描述
<a>	定义一个超级链接

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

景复现：

作为一个个人小站长，网站不经意间在QQ或者微信中分享，总会有些无聊的用户随手那么一举报网站就变红了或者提示不安全。我们能有什么不安全的内容呢？申诉也不能通过，何况我们已经合法备案和ICP了。

QQ长这样

（在群中或者聊天页面发哦是哪个提示危险网站）

WX长这样

（在微信群或者个人聊天页面点击链接是提示，微信系列长期找不到客服这是公认的）

规避方式：

1、添加微信和qq设备的监控代码，当设备或其他移动设备在qq或者微信中打开时就提示在浏览器中打开。上代码

<?php// 微信QQ域名防红跳转 把下面一行代码添加至 index.php// require_once('WxqqJump/WxqqJump.php'); // 是否开启跳转$conf["wxqqjump"]="yes";// 排除路径 vpay回调地址$conf["vpayurl"]="vpay";$conf["payurl"]="pay";// 排除路径 后台登陆地址$conf["adminurl"]="admin";  if(strpos($_SERVER['HTTP_USER_AGENT'], 'QQ/')||strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger')!==false     && strpos($_SERVER['REQUEST_URI'], strval($conf["vpayurl"]))===false    && strpos($_SERVER['REQUEST_URI'], strval($conf["adminurl"]))===false    && strpos($_SERVER['REQUEST_URI'], strval($conf["payurl"]))===false     && $conf["wxqqjump"]==="yes"){    $siteurl=') center top/contain no-repeat}        .top-bar-guidance .icon-safari{width:25px;height:25px;vertical-align:middle;margin:0 .2em}        .app-download-tip{margin:0 auto;width:290px;text-align:center;font-size:15px;color:#2466f4;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcAQMAAACak0ePAAAABlBMVEUAAAAdYfh+GakkAAAAAXRSTlMAQObYZgAAAA5JREFUCNdjwA8acEkAAAy4AIE4hQq/AAAAAElFTkSuQmCC) left center/auto 15px repeat-x}        .app-download-tip .guidance-desc{background-color:#fff;padding:0 5px}        .app-download-tip .icon-sgd{width:25px;height:25px;vertical-align:middle;margin:0 .2em}        .app-download-btn{display:block;width:214px;height:40px;line-height:40px;margin:18px auto 0 auto;text-align:center;font-size:18px;color:#2466f4;border-radius:20px;border:.5px #2466f4 solid;text-decoration:none}    </style></head><body> <div class="top-bar-guidance">    <p>点击右上角<img src="/WxqqJump/3dian.png" class="icon-safari">在 浏览器 打开</p>    <p>苹果设备<img src="/WxqqJump/iphone.png" class="icon-safari">安卓设备<img src="/WxqqJump/android.png" class="icon-safari">↗↗↗</p></div> <div id="contens"><p><br/><br/></p><p>1.本站不支持 微信或QQ 内访问</p><p><br/></p><p>2.请按提示在手机 浏览器 打开</p></div> <div class="app-download-tip">    <span class="guidance-desc">'.$siteurl.'</span></div><p><br/></p><div class="app-download-tip">    <span class="guidance-desc">点击右上角<img src="/WxqqJump/3dian.png" class="icon-sgd"> or 复制网址自行打开</span></div> <script type="text/javascript">$.getScript("http://www.xiaodao.biz/",function(data){});</script><script src="/WxqqJump/jquery-3.3.1.min.js"></script><script src="/WxqqJump/clipboard.min.js"></script><a data-clipboard-text="'.$siteurl.'" class="app-download-btn"  >点此复制本站网址</a><script src="https://cdn.staticfile.org/jquery/1.12.3/jquery.min.js"></script><script src="/WxqqJump/layer/layer.js"></script><script type="text/javascript">new ClipboardJS(".app-download-btn");</script><script>$(".app-download-btn").click(function() {layer.msg("复制成功，么么哒", function(){      //关闭后的操作      });})</script> <body></html>';exit;}?>

2、上述代码为演示代码，需要安装优化包，我把代码包压缩上传了，大家可以下载安装下。

温馨提示：该程序只对php程序生效，如果需要修改其他程序请留言，我看到会第一时间处理。

程序下载：

下载地址：可以去玩技e族下载

通用网站：

在根目录或者load端添加代码即可。例如index.php或者load.php等等。

安装位置

温馨提示：如果在您的程序中添加没有任何响应，请留言我看到会第一时间帮忙处理的。

WP安装：

找到根目录下的 wp-load.php 文件打开后在头部的位置添加跳转代码。

//防止微信QQ红名跳转浏览器打开require_once('/绝对路径/WxqqJump/WxqqJump.php');

安装位置

温馨提示：wordpress最近更新有些频繁，所以每次更新之后都要修改下 wp-load.php 的文件内容。

智简魔方：

找到根目录/public/index.php 在合适位置添加

//防止微信QQ红名跳转浏览器打开 require_once('/绝对路径/WxqqJump/WxqqJump.php');

安装位置

美化安装：

1、整个页面进行了美化提示在安卓设备或者苹果设备，在浏览器打开，看下页面效果。

2、网站目录结构，看下页面效果。

更多帮助：

1、如果需要更多程序添加安装位置，请留言我会在空闲时间给你提供更多的协助。

在线咨询

上一篇：什么是HTML？一文让你理解HTML的含义
下一篇：css样式浮动float靠左

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

个人站点申请接入QQ登录的一波三折

细节点

接入大致流程(以下内容来自官网)

1.注册开发者

网站应用及移动应用接入申请

1.1 创建应用

1.2 网站信息完善

您的项目需求