web端接入第三方QQ登录

735 阅读5分钟

一、QQ互联平台申请网站应用

1、QQ互联平台中注册开发者账号,在应用管理选择网站应用,创建相关应用。按照要求准备好资料,提交审核即可,一般4天左右,审核结果相较微信会慢一些,相关信息可查看接入指南

注意:

  • 平台信息-网站地址:可填写项目地址或者公司官网;
  • 平台信息-网站回调域:可填写多个回调域,多个用分号;隔开,需带上https/http,这个配置十分重要,用户扫码成功后,会跳转到这个回调域;

1.png

2.png

2、应用审核通过后,会显示相关详情信息,在后面的接入流程中会使用;

注意:

  • 基本信息-APP Key,一般不要放在前端项目中。
  • 平台信息-网站回调域可以直接进行修改,无需审核,填入的地址必须是已经在工信部备案的,否则修改会失败;
  • 应用接口-QQ登录的接口是已获得的状态,说明开发者可以使用登录相关接口了;
  • 应用接口-获取unionid的接口需要进行申请绑定,当状态变成已获得的,说明开发者可以使用unionid相关接口了;

3.png

4.png

二、QQ登录对接

QQ互联-网站开发流程有相关的文档说明,详细地介绍了如何接入QQ登录,以下为相关拆解步骤。

整体流程:

  1. 第三方发起QQ授权登录请求,QQ用户允许授权第三方应用后,QQ会拉起应用或重定向到第三方网站,并且带上授权临时票据code参数,获取Authorization Code;;
  2. 通过获取Authorization Code,加上参数client_id等,通过API换取Access Token;
  3. 通过Access Token进行接口调用,获取用户基本数据资源或帮助用户实现基本操作。

1、QQ二维码链接

配置链接参数,生成完整的QQ二维码链接;

 https://graph.qq.com/oauth2.0/authorize[?](https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect)which=Login&response_type=code&redirect_uri=redirect_uri&client_id=client_id&state=state

若有频繁登录使用的QQ账号,页面上会显示二维码、用户头像快捷登录,两个选项。

5.png 参数说明:

client_id:必填,申请QQ登录成功后,分配给应用的appid;

redirect_uri:必填,成功授权后的回调地址,必须是注册appid时填写的主域名下的地址,建议设置为网站首页或网站的用户中心。注意需要将url进行URLEncode

response_type:必填,值为code;

scope:选填,网页应用目前仅填写snsapi_login;

请求用户授权时向用户显示的可进行授权的列表。可填写的值是API文档中列出的接口,如果要填写多个接口名称,请用逗号隔开。

例如:scope=get_user_info,list_album,upload_pic,不传则默认请求对接口get_user_info进行授权。

建议控制授权项的数量,只传入必要的接口名称,因为授权项越多,用户越可能拒绝进行任何授权。

state:选填,client端的状态值。用于第三方应用防止CSRF攻击,成功授权后回调时会原样带回。请务必严格按照流程检查用户与state参数状态的绑定。

display:选填,;仅PC网站接入时使用。用于展示的样式。不传则默认展示为PC下的样式。如果传入“mobile”,则展示为mobile端下的样式。

若提示“该链接无法访问”,请检查参数是否填写错误;

2、获取Authorization Code

用户扫码、授权后,会将页面重定向到回调域(redirect_uri),并且带上code和state参数:redirect_uri?code=CODE&state=STATE,比如:


http://graph.qq.com/demo/index.jsp?code=9A5F************************06AF&state=test

注意:此code会在10分钟内过期。

移动端QQ扫码成功后,会显示授权页面;

6.png

授权成功后,QQ会提示登录通知;

7.png

注意:若用户禁止授权,则不会发生重定向,可在当前页面重新获取QQ二维码;

3、通过access_token获取unionid、openid

在获取unionid之前,需要对UnionID打通业务进行自主申请,获取相关权限。权限申请通过后,就可以通过https请求方式获取unionid了,可查看相关文档。该接口通过code等相关参数可获取access_token,为了安全考虑,开发者请勿将access_token返回给前端,需要开发者保存在后台,访问QQapi的请求由后台发起;所以该接口是提供给后端调用的,前端调用无效。

https://graph.qq.com/oauth2.0/me?access_token=ACCESSTOKEN&unionid=1

参数说明:

access_token:必填,用户凭证;

unionid:选填,是否申请unionID;

fmt:选填,因历史原因,默认是jsonpb格式,如果填写json,则返回json格式;

{
  "client_id":"YOUR_APPID",
  "openid":"YOUR_OPENID",
  "unionid":"YOUR_UNIONID"
}

4、通过access_token调用接口

获取access_token后,进行接口调用,有以下前提:

  • access_token有效且未超时;
  • QQ用户已授权给第三方应用账号相应接口作用域(scope)。

可通过对应的接口获取登录信息、用户个人信息等。

查看API列表文档:

8.png

5、前后端对接

完成上面的流程后,后端会获取到用户相关的登录信息、个人信息等,前端可以在上面填入的回调页面中,调用后端的接口获取相关数据,进行相关逻辑处理。

以上就是web端接入第三方QQ的流程。