QQ js_sdk第三方授权登录自定义登录按钮

最新推荐文章于 2022-07-26 18:03:24 发布

AspNetSunny

最新推荐文章于 2022-07-26 18:03:24 发布

阅读量2.6k

点赞数 3

分类专栏：第三方文章标签： JS_SDK QQ 授权登录自定义图片按钮事件

本文链接：https://blog.csdn.net/sunnywuxian/article/details/84894854

版权

第三方专栏收录该内容

1 篇文章 0 订阅

订阅专栏

STEP 1:

QQ放置页面添加：

<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="100311200" data-redirecturi="http://192.168.16.54:8080/getToken.html" charset="utf-8"></script>

<img src="qq.png" onclick="qqLogin()">

function qqLogin() {

   QC.Login.showPopup();

}

替换APPID和回调页面即可。。。

STEP 2:

回调页面存储 openid 和 access_token：

<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script>
    	<script type="text/javascript">
			if(QC.Login.check()) { //如果已登录
				QC.Login.getMe(function(openId, accessToken) {
					//本地存储登录返回的openid和access_token
					localStorage.setItem("access_token", accessToken);
					localStorage.setItem("openid", openId);
				});
			}
		</script>

STEP 3:

现在就可随心所欲的使用获取到的openid 和 access_token 调用api接口了

if(QC.Login.check()) {
				console.log(localStorage.getItem("openid"))
				console.log(localStorage.getItem("access_token"))
				//用JS SDK调用OpenAPI获取用户信息
				var paras = {
					access_token: localStorage.getItem("access_token"),
					openid: localStorage.getItem("openid")
				};
				QC.api("get_user_info", paras)
					//指定接口访问成功的接收函数，s为成功返回Response对象
					.success(function(s) {
						//成功回调，通过s.data获取OpenAPI的返回数据
						document.getElementById("qqLoginBtn").innerHTML = "获取用户信息成功！当前用户昵称为：" + s.data.nickname;
					})
					//指定接口访问失败的接收函数，f为失败返回Response对象
					.error(function(f) {
						//失败回调
						console.log("获取用户信息失败！");
					})
					//指定接口完成请求后的接收函数，c为完成请求返回Response对象
					.complete(function(c) {
						//完成请求回调
						console.log("获取用户信息完成！");
					});

				//调用自己的接口，保存信息
			}

只是想在img 图片上添加 QQ登录事件！文档中的自定义登录按钮看的我是一脸懵逼！完全不符合自己的要求！愁死人了。

还好最后在百度中找到了showPopup（）完美解决了问题！~~~

主要用到的几个接口文档

2. JS SDK的其他公开方法
2.1. 直接打开QQ登录弹窗
QC.Login.showPopup(oOpts):Window

参数说明：
oOpts：需要指定appId，回调地址redirect_URI。
参数示例如下：
oOpts：{

      appId:"222222",
      redirectURI:"http://yousite.com/qc_back.html"
}

返回值说明：
返回浏览器弹窗对象。
函数使用示例：
QC.Login.showPopup({

   appId:"222222",
   redirectURI:"http://yousite.com/qc_back.html"
});


2.2. 注销当前登录用户
QC.Login.signOut():void


2.3. 获取当前登录用户的Access Token以及OpenID
QC.Login.getMe(function(openId, accessToken){}):void

参数说明：
这里的参数为回调函数，通过回调函数获取openId和accessToken。
openId：用户身份的唯一标识。建议保存在本地，以便用户下次登录时可对应到其之前的身份信息，不需要重新授权。
accessToken：表示当前用户在此网站/应用的登录状态与授权信息，建议保存在本地。 

2.4. 检测当前登录状态
QC.Login.check():Boolean

返回值说明：
true：说明登录成功。
false：说明登录失败。

JS-SDK文档：

http://wiki.open.qq.com/wiki/%E3%80%90QQ%E7%99%BB%E5%BD%95%E3%80%91JS_SDK%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E#3._.E8.87.AA.E5.AE.9A.E4.B9.89.E7.99.BB.E5.BD.95.E6.8C.89.E9.92.AE

大家可在这里下载我的源码：

https://download.csdn.net/download/handsomclass/10837346