第三方登陸之QQ登陸 js_SDK

時間 2019-11-09

標籤第三方登陸 sdk 欄目騰訊简体版

原文原文鏈接

本文記錄實現網站第三方登陸之QQ登陸功能javascript

1、準備html

一、已備案域名java

二、註冊成爲QQ互聯開發者jquery

2、具體操做流程瀏覽器

一、登陸QQ互聯，進入「應用管理」添加應用app

二、點擊建立應用進行建立網站

須要注意的地方：ui

（1）在建立應用以前須要先進行開發者信息的認證，點擊右上角頭像完成開發者信息認證的填寫。提交審覈通常幾個工做日就能完成。本人完成的是我的認證。url

（2）本人完成的是網站認證，故這裏只說網站認證。網站訪問的域名必須已備案（由於須要網站備案號）；必需要有網站圖標；回調地址填寫到登陸成功後須要跳轉到的頁面。spa

三、應用審覈經過後查看應用就能獲得APP ID和APP Key了（以上全部工做都是爲了這兩個參數）

四、實際登陸功能的開發

（1）在html文件中引入jssdk文件（這裏須要注意data-appid和data-redirecturi分別替換成認證完成後的appID和回調地址）

<script type="text/javascript"  charset="utf-8"
    src="http://connect.qq.com/qc_jssdk.js"
    data-appid="XXXXXXXXX"
    data-redirecturi="http://XXXXXXXXXXXX"
	data-callback="true"
></script>

（2）放置QQ登錄按鈕（這個有規定，自行了解）

<span id="qqLoginBtn"></span>
<script type="text/javascript">
QC.Login({
    btnId:"qqLoginBtn"	//插入按鈕的節點id
});
</script>

到這裏基礎就完成了，是否是很簡單。

下面的代碼是爲了便於查看具體登陸成功後具體都能獲取到什麼，作了一些修改的代碼：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>login</title>
<script type="text/javascript"  charset="utf-8"
    src="http://connect.qq.com/qc_jssdk.js"
    data-appid="XXXXXXXXXXXXXXXXX"
    data-redirecturi="http://XXXXXXXXXXXXXXXXX"
	data-callback="true"
></script>
<script src="static/js/jquery-3.2.1.js"></script>
</head>

<body>
<span id="qqLoginBtn"></span>
<div id="div"></div>
<div>
	<input type="button" id="exit" value="exit"></input>
</div>
<script type="text/javascript">
	var cbLoginFun = function(oInfo, oOpts){
	    var div=$("#div");
	    
	    var p=$("<p></p>");
	    p.text("-->oInfo<--");
	    div.append(p);
	    
	    var reg=/figureurl\w*/;
	    
	    var imgDiv,imgSpan,img;
	    
	    $.each(oInfo,function(key,value){
	    	if(reg.test(key)&&key!="figureurl_type"){
	    		imgDiv=$("<div style='border:1px solid #333;'></div>");
	    		imgSpan=$("<span></span>").text(key);
	    		imgDiv.append(imgSpan);
	    		img=$("<img style='padding:1%;border:1px solid #571;border-radius:10%;' >").attr("src",value);
	    		imgDiv.append(img);
	    		div.append(imgDiv);
	    	}else{
	    		p=$("<p></p>");
		    	p.text(key+"\t-->\t"+value);
			    div.append(p);
	    	}
	    });
	    
	};
	
	var loginOut=function(){
		alert("login out successful...");
		window.history.go(0);
	}
    QC.Login({
       btnId:"qqLoginBtn"	//插入按鈕的節點id
	},cbLoginFun,loginOut);
    
    $("#exit").click(function(){
    	console.log("exit");
    	QC.Login.signOut(loginOut);
    });
</script>
</body>
</html>

因爲回調地址和我指望登陸成功後跳轉的頁面是一個，因此我在退出以後直接讀取了瀏覽器的歷史。

注意：若是回調地址頁與加入QQ登陸按鈕是同一個頁面，則只須要引用一次腳本文件。（jssdk使用說明原話）

完。。。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。