【道勤網(wǎng)】- bmrsportswear.com 軟件視頻自學(xué)教程|免費(fèi)教程|自學(xué)電腦|3D教程|平面教程|影視動(dòng)畫教程|辦公教程|機(jī)械設(shè)計(jì)教程|網(wǎng)站設(shè)計(jì)教程！【道勤網(wǎng)】

標(biāo)題: 如何將QQ第三方登錄集成到網(wǎng)站的詳細(xì)教程 [打印本頁]
作者: 學(xué)習(xí)NO.1    時(shí)間: 2016-1-5 22:27
標(biāo)題: 如何將QQ第三方登錄集成到網(wǎng)站的詳細(xì)教程
本帖最后由 學(xué)習(xí)NO.1 于 2016-1-5 22:29 編輯

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

首先打開QQ開放平臺(tái)網(wǎng)址http://connect.qq.com/intro/login,選擇申請(qǐng)加入，
(, 下載次數(shù): 57)
會(huì)提示讓你登錄，選擇qq快捷登錄后會(huì)進(jìn)入QQ互聯(lián)界面，點(diǎn)擊右上角的“創(chuàng)建應(yīng)用”，選擇“網(wǎng)站”。
(, 下載次數(shù): 62)
填寫相應(yīng)信息并驗(yàn)證。
(, 下載次數(shù): 61)
驗(yàn)證之后點(diǎn)擊創(chuàng)建應(yīng)用，跳轉(zhuǎn)到你的應(yīng)用中心，里面有你這個(gè)應(yīng)用的APP ID和APP KEY，點(diǎn)擊“圖標(biāo)素材”上傳圖標(biāo)，一定要按照它的要求上傳png格式的圖標(biāo)，大小要一致，完善之后就可以提交審核了。
[ (, 下載次數(shù): 60)
在審核期間，把登錄圖標(biāo)的代碼布置上自己的網(wǎng)站上，這樣審核才會(huì)容易通過。布置代碼的方法為：
在網(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) { //完成請(qǐng)求回調(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)是不是出來了，點(diǎn)擊登錄試試看，已經(jīng)可以成功回調(diào)了。至于整合到網(wǎng)站的會(huì)員數(shù)據(jù)庫中就靠大家去整了。







歡迎光臨 【道勤網(wǎng)】- bmrsportswear.com 軟件視頻自學(xué)教程|免費(fèi)教程|自學(xué)電腦|3D教程|平面教程|影視動(dòng)畫教程|辦公教程|機(jī)械設(shè)計(jì)教程|網(wǎng)站設(shè)計(jì)教程！【道勤網(wǎng)】 (http://bmrsportswear.com/) Powered by Discuz! X3.4