個人站點申請接入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 >訪問菜鳥教程</a>

上面這行代碼顯示為：: 訪問菜鳥教程

點擊這個超鏈接會把用戶帶到菜鳥教程的首頁。

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

HTML 鏈接 - target 屬性

使用 target 屬性，你可以定義被鏈接的文檔在何處顯示。

下面的這行會在新窗口打開文檔：

實例

<a>訪問菜鳥教程!</a>

HTML 鏈接- id 屬性

id屬性可用于創建在一個HTML文檔書簽標記。

提示: 書簽是不以任何特殊的方式顯示，在HTML文檔中是不顯示的，所以對于讀者來說是隱藏的。

實例

在HTML文檔中插入ID:

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

在HTML文檔中創建一個鏈接到"有用的提示部分(id="tips"）"：

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

或者，從另一個頁面創建一個鏈接到"有用的提示部分(id="tips"）"：

<a >

訪問有用的提示部分</a>

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

注釋： 請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：，就會向服務器產生兩次 HTTP 請求。這是因為服務器會添加正斜杠到這個地址，然后創建一個新的請求，就像這樣：。

圖片鏈接

如何使用圖片鏈接。

在當前頁面鏈接到指定位置

如何使用書簽

跳出框架

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

創建電子郵件鏈接

本例演示如何如何鏈接到一個郵件。（本例在安裝郵件客戶端程序后才能工作。）

建電子郵件鏈接 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 網站信息完善

您的項目需求