第三方登陆之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使用说明原话）

完。。。