js在网站中集成qq第三方登录功能

进入qq第三方登陆申请页面。地址:js在网站中集成qq第三方登录功能
js在网站中集成qq第三方登录功能
点击“管理中心”。(注:在弹出的页面中,可能会要求你登陆QQ号、注册应用开发者资料,安要求填写即可。)

完成上述步骤后进入“管理中心”:
js在网站中集成qq第三方登录功能
在中管理中心中点击“创建应用”。
选择应用类型(我这里为PC博客网站,所以选择“网站”)
js在网站中集成qq第三方登录功能
填写网站信息:
js在网站中集成qq第三方登录功能

这是本网站填好后的信息,你可以参考修改为你自己的信息。

鼠标移动到“网站地址”后的“验证”按钮:

js在网站中集成qq第三方登录功能

按照提示,在自己的首页中加入提示的meta标签内容,验证你网站地址(meta标签中每个人的content值不一样)。这里你要保证你的网站地址外网可以访问。

我这里用了nat123软件代理自己的域名,你也可以用花生壳给你的免费域名,这样就可以在本地开发测试了;


完成信息填写后,在“管理中心”可以看到自己的应用名称。

js在网站中集成qq第三方登录功能
点击应用名称查看appId和appKey:
js在网站中集成qq第三方登录功能
现在你就完成了QQ第三方登陆接口的申请工作。

在页面中引入js:

<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="XXXXX" data-redirecturi="<%=basePath%>static/html/qc_callback.html" charset="utf-8"></script>

data-appid为你申请的appId

qc_callback.html:

<html> 
   <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	 <title> QQConnect JSDK - redirectURI </title>
	 <style type="text/css">
		html, body{font-size:14px; line-height:180%;}
	 </style>
   </head> 
   <body> 
	<div>
		<h3>数据传输中,请稍后...</h3>
	</div>
   </body> 
</html>
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script>


加入qq登陆按钮:

<img src="' + base_path + 'static/images/bt_qq.png" onclick="login_qq();">


登陆方法:

function login_qq() {
	var login_url = "https://graph.qq.com/oauth/show?which=ConfirmPage&display=pc&client_id=xxxxx&response_type=token&scope=get_user_info,add_t&redirect_uri=http%3A%2F%2Fqzonestyle.gtimg.cn%2Fqzone%2Fopenapi%2Fredirect-1.0.1.html";
	window.open(login_url, "TencentLogin", "width=830,height=420,menubar=0,scrollbars=1,resizable=1,status=1,titlebar=0,toolbar=0,location=1");
}
//client_id为你申请的appId

QC.Login({}, cbLoginFun);//QQ登陆接口登陆成功后的回调方法

var cbLoginFun = function(oInfo, oOpts){ /**登陆成功!*/
			QC.Login.getMe(function(openId, accessToken){
					//openId是用户的唯一标示,本网站用来作为用户id,
//oInfo是用户信息,本网站用到了用户头像oInfo.figureurl_1,用户名称oInfo.nickname。
//在这里保存用户信息到session中
			});
};


赞.. 浏览 ..
...条评论

加载更多评论