随身笔记
随身笔记

第三方qq登录授权

效果就是避免了繁琐的注册流程,登录qq时,直接点击用qq登录即可。坏处就是网站不能搜集到用户的一些基本信息。

 

1,申请appid之后要去开发者后台设置相应的回调地址,这样就算appid被偷后别人也用不了。

流程:申请appid且设置回调地址后,点击“qq登录”后,会跳转到用户授权页面,会利用到appid和用户的授权之后,在跳回之前设置的回调地址并得到code和state参数之后,在获取到Access Token,在用Access Token和appid结合,获取OpenID,就可以调用数据了。

 

2,登录注册成为开发者 http://open.qq.com/login
3,填写认证信息
https://ar.qq.com/#/login
4,提交审核
http://open.qq.com/userv2_editpage/
5,js的用法
http://wiki.connect.qq.com/js_sdk%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E
https://connect.qq.com/

 

 

要提交一些杂七杂八的审核信息才能获取到appid

https://sdeno.com/wp-content/uploads/2019/03/qqappid1.jpg

 

设置回调地址

https://sdeno.com/wp-content/uploads/2019/03/qqappid2.jpg

以上准备工作都完成后就可以开始用qq授权登录功能了。我们使用的是js SDK方法。这是腾讯的人帮我们封装好的也是目前最简单的方法。

 

(1) 引入
<script type="text/javascript" charset="utf-8"
src="https://connect.qq.com/qc_jssdk.js"
data-appid="你的appid"
data-redirecturi="你的回调地址"
></script>
注意:回调地址必须以http或https开头。 回调地址还需要在开发者后台添加
或者
引入https://connect.qq.com/qc_jssdk.js 在用点击事件触发以下代码
QC.Login.showPopup({
 appId:"[appId]",
 redirectURI:"[回调地址]"
});

 

(2)放置按钮
<span id="qqLoginBtn"></span>
<script type="text/javascript">
QC.Login({
   btnId:"qqLoginBtn" //插入按钮的节点id
});
</script>
JS SDK封装了获取Access Token以及OpenID的方法,因此开发者不需要再开发代码进行获取,直接调用QQ登录OpenAPI即可。
QC.Login({
btnId:"qqLoginBtn" //插入按钮的节点id
}, loginFun, logoutFun, outCallBackFun)进行初始化

 

(3)回调页面设置,为了获取Access Token和OpenID,发送数据给腾讯才能拿到用户数据
在需要获取的页面加载
<script type=”text/javascript”
src=”https://connect.qq.com/qc_jssdk.js” charset=”utf-8″ data-callback=”true”></script>
注意:如果回调地址页与加入QQ登录按钮是同一个页面,则只需要引用一次脚本文件。
以下是回调地址:不需要我们任何操作

https://sdeno.com/wp-content/uploads/2019/03/qqappid3.jpg

 

 

(4)获取qq用户数据
QC.api(api, paras, fmt, method)


例如:

get_user_info不需要输入参数,因此paras中没有参数

QC.api("get_user_info", {})
   .success(function(s){
            //成功回调,通过s.data获取OpenAPI的返回数据
            alert("获取用户信息成功!当前用户昵称为:"+s.data.nickname);
   })
            //指定接口访问失败的接收函数,f为失败返回Response对象
   .error(function(f){
            //失败回调
            alert("获取用户信息失败!");
   })
            //指定接口完成请求后的接收函数,c为完成请求返回Response对象
  .complete(function(c){
             //完成请求回调
             alert("获取用户信息完成!");
});


QC.Login.getMe(function(openId, accessToken){
   console.log("当前登录用户的accessToken为:"+accessToken);
   console.log("当前登录用户的openId为:"+openId);
});


QC.Login.signOut()【注销当前登录用户】
QC.Login.check()【检测当前登录状态】
https://www.jianshu.com/p/80450c060343

 

效果:在qq登录的地址,点击qq登录会弹出一个授权页面,这时候需要用户点击授权,之后会跳转到回到地址,就是我们在开发者页面里面添加的那条地址,回调地址会拿到Access Token和OpenID发送给腾讯那里,判断我们是否登录成功,成功后又再次回到我们刚刚登录的页面,但是这时候已经显示了我们已经能是登录状态了

https://sdeno.com/wp-content/uploads/2019/03/qqappid4.jpg

 

开发人员要判断用户是否用qq第三方登录成功,就在成功回调里写判断就行
QC.api("get_user_info", {})
  .success(function(s){
     //这里告诉后台我们登录成功了 
  })

 

————-以下是一些相关信息—————-

 

放置“QQ登录”按钮
http://wiki.open.qq.com/wiki/website/%E6%94%BE%E7%BD%AE%E2%80%9CQQ%E7%99%BB%E5%BD%95%E2%80%9D%E6%8C%89%E9%92%AE_OAuth2.0

快速上手
http://wiki.open.qq.com/wiki/website/%E5%BC%80%E5%8F%91%E6%94%BB%E7%95%A5_Server-side#Step3.EF.BC.9A.E9.80.9A.E8.BF.87Authorization_Code.E8.8E.B7.E5.8F.96Access_Token

回调地址有变化,(申请appid之后要去开发者后台设置相应的回调地址,这样就算appid被偷后别人也用不了)
http://wiki.connect.qq.com/%E5%9B%9E%E8%B0%83%E5%9C%B0%E5%9D%80%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E5%8F%8A%E4%BF%AE%E6%94%B9%E6%96%B9%E6%B3%95

 

http://wiki.open.qq.com/wiki/website/%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C_OAuth2.0#1._.E7.94.B3.E8.AF.B7appid.E5.92.8Cappkey

随身笔记

第三方qq登录授权
效果就是避免了繁琐的注册流程,登录qq时,直接点击用qq登录即可。坏处就是网站不能搜集到用户的一些基本信息。   1,申请appid之后要去开发者后台设置相应的回调地址,这样就…
扫描二维码继续阅读
2019-03-24