如何將QQ第三方登錄集成到網(wǎng)站的詳細(xì)教程

學(xué)習(xí)NO.1

今天道勤小編來給大將講訴下關(guān)于QQ登錄集成的方法，為了從訪客的便利性出發(fā)，很多網(wǎng)站都集成了第三方登錄，但是大部分網(wǎng)站都是用的插件，或者是程序自帶的功能，那么對于一個沒有此項功能的網(wǎng)站來說，比如說個人網(wǎng)站wordpress，如何集成QQ第三方登錄按鈕？今天手把手教大家怎么實現(xiàn)按鈕的申請和布置。

首先打開QQ開放平臺網(wǎng)址http://connect.qq.com/intro/login,選擇申請加入，

會提示讓你登錄，選擇qq快捷登錄后會進(jìn)入QQ互聯(lián)界面，點擊右上角的“創(chuàng)建應(yīng)用”，選擇“網(wǎng)站”。

填寫相應(yīng)信息并驗證。

驗證之后點擊創(chuàng)建應(yīng)用，跳轉(zhuǎn)到你的應(yīng)用中心，里面有你這個應(yīng)用的APP ID和APP KEY，點擊“圖標(biāo)素材”上傳圖標(biāo)，一定要按照它的要求上傳png格式的圖標(biāo)，大小要一致，完善之后就可以提交審核了。

[

在審核期間，把登錄圖標(biāo)的代碼布置上自己的網(wǎng)站上，這樣審核才會容易通過。布置代碼的方法為：

在網(wǎng)站的head頭部加入以下代碼：

1. <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="101215352" charset="utf-8" data-redirecturi="http://www.mizuiren.com"></script>

復(fù)制代碼

紅色的數(shù)字修改成你的APP ID，紅色的網(wǎng)址修改成你的網(wǎng)站地址，然后在網(wǎng)站底部加入以下代碼：

1. //qq第三方登錄
   
2. <script>jQuery(document).ready(function($){
   
3. QC.Login({
   
4. btnId: "qq_login_btn",
   
5. scope: "all", },
   
6. function() {
   
7. QC.api("get_user_info").success(function(s) {
   
8. var paras = { format: "json" };
   
9. QC.api("get_info", paras).success(function(w) {
   
10. var data = eval(w.data);
    
11. // weiboUrl = "http://t.qq.com/"+data.data.name;
    
12. // lc = data.data.location;
    
13. }).error(function(e) {
    
14. }).complete(function(c) { //完成請求回調(diào)
    
15. document.getElementById("qq_login_btn").style.display="none";
    
16. var userQQSmallImage = s.data.figureurl_qq_1; //大小為40×40像素的QQ頭像URL。
    
17. // userQQLargeImage = s.data.figureurl_qq_2; //大小為100×100像素的QQ頭像URL。
    
18. document.getElementById("QQImg").src=s.data.figureurl_qq_2;
    
19. document.getElementById("QQLogin").innerhtml=s.data.nickname+"(注銷登錄)";
    
20. document.getElementById("MainQQ").style.display="block";
    
21. document.getElementById("QQLogin").onclick=function(){
    
22. QC.Login.signOut();location.reload();}
    
23. // var userQQZoneImage = s.data.figureurl_1; //大小為50×50像素的QQ空間頭像URL
    
24. }); }); }); });
    
25. </script>

復(fù)制代碼

這些準(zhǔn)備都做好了，就剩下html按鈕位置的部署了，在你的網(wǎng)站需要顯示qq登錄按鈕的地方加入以下代碼：

1. <span id="MainQQ" style="display:none;"><img id="QQImg"><a id="QQLogin">QQ登錄</a></span>
   
2. <span id="qq_login_btn"></span>

復(fù)制代碼

刷新你的網(wǎng)站吧，哈哈，登錄圖標(biāo)是不是出來了，點擊登錄試試看，已經(jīng)可以成功回調(diào)了。至于整合到網(wǎng)站的會員數(shù)據(jù)庫中就靠大家去整了。

道勤主機(jī)提供365天*24小時全年全天無休、實時在線、零等待的售后技術(shù)支持。竭力為您免費(fèi)處理您在使用道勤主機(jī)過程中所遇到的一切問題! 如果您是道勤主機(jī)用戶，那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費(fèi)電話、后臺提交工單這些方式聯(lián)系道勤主機(jī)客服！ 如果您不是我們的客戶也沒問題，點擊頁面最右邊的企業(yè)QQ在線咨詢圖標(biāo)聯(lián)系我們并購買后，我們?yōu)槟�免費(fèi)進(jìn)行無縫搬家服務(wù)，讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機(jī)的服務(wù)！