一、QQ互联平台申请网站应用
1、QQ互联平台中注册开发者账号,在应用管理选择网站应用,创建相关应用。按照要求准备好资料,提交审核即可,一般4天左右,审核结果相较微信会慢一些,相关信息可查看接入指南。
注意:
- 平台信息-网站地址:可填写项目地址或者公司官网;
- 平台信息-网站回调域:可填写多个回调域,多个用分号;隔开,需带上https/http,这个配置十分重要,用户扫码成功后,会跳转到这个回调域;
2、应用审核通过后,会显示相关详情信息,在后面的接入流程中会使用;
注意:
- 基本信息-APP Key,一般不要放在前端项目中。
- 平台信息-网站回调域可以直接进行修改,无需审核,填入的地址必须是已经在工信部备案的,否则修改会失败;
- 应用接口-QQ登录的接口是已获得的状态,说明开发者可以使用登录相关接口了;
- 应用接口-获取unionid的接口需要进行申请绑定,当状态变成已获得的,说明开发者可以使用unionid相关接口了;
二、QQ登录对接
QQ互联-网站开发流程有相关的文档说明,详细地介绍了如何接入QQ登录,以下为相关拆解步骤。
整体流程:
- 第三方发起QQ授权登录请求,QQ用户允许授权第三方应用后,QQ会拉起应用或重定向到第三方网站,并且带上授权临时票据code参数,获取Authorization Code;;
- 通过获取Authorization Code,加上参数client_id等,通过API换取Access Token;
- 通过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账号,页面上会显示二维码、用户头像快捷登录,两个选项。
参数说明:
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扫码成功后,会显示授权页面;
授权成功后,QQ会提示登录通知;
注意:若用户禁止授权,则不会发生重定向,可在当前页面重新获取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列表文档:
5、前后端对接
完成上面的流程后,后端会获取到用户相关的登录信息、个人信息等,前端可以在上面填入的回调页面中,调用后端的接口获取相关数据,进行相关逻辑处理。
以上就是web端接入第三方QQ的流程。