app和网页h5怎样接入对接QQ三方登录?

接入qq第三方登录比较麻烦,主要是因为前期的准备工作较麻烦,需要进行域名备案,备案通过后才能在qq互联平台上通过应用审核。

成为开发者

首先需要登录qq互联的网站,完成用户开发者信息的验证。

image.png
审核通过后,需要在qq互联上创建应用,并进行审核。没有通过备案的域名是不能通过审核的,所以需要先进行域名备案。

创建应用

审核通过后就可以获得应用的appid和appkey,申请时填写的回调地址,这个很重要!

放置QQ登录按钮

其实就是给你要实现QQ登录的地方绑定一个onclick点击事件
image.png
如:给如图示图标绑定一个onclick点击事件,在对应函数里写一个http请求去服务器端处理QQ登录(安全考虑)

获取Authorization Code值

1、请求网址

url = "https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=" + appid + "&redirect_uri=" + redirectURI + "&state=" + state

2、参数及其对应值
response_type的值固定为code;

client_id的值为申请的appid;

redirect_uri的值为申请时填写的回调地址;(注意:需要将url进行编码!!!)

state值是用来防止CSRF攻击的,自己随机产生一段字符串此值

3、将此url地址返回到前台,利用window.open在新窗口打开此网址。若发现未打开,很有可能是被拦截了。

4、请求成功:请求成功后,会打开QQ登录界面,如图示:
image.png

5、返回:当用户成功授权登录后,会跳转到上述指定的回调地址里,并携带参数code和state值。如:redirect_uri?code=&state=

code值即为你要获取到的Authorization Code值

state值即为上述你随机产生的字符串

获取Access Token值

1、获取判断:此时已经走到了回调地址里

获取code值,state值

判断携带的state参数值和你随机产生的字符串是否相等,相等才能往下走!

2、请求网址:

url = " https://graph.qq.com/oauth2.0/token? grant_type=authorization_code

&client_id=" + appid + "&client_secret="+ appkey + "&redirect_uri=" + redirectURI + "&code=" + code

3、参数及其对应值:

grant_type的值固定为authorization_code;

client_id的值为申请的appid;

client_secret的值为申请的appkey;

redirect_uri的值为申请时填写的回调地址;(注意:需要将url进行编码!!!)

code值为获取到的Authorization Code值

4、这个直接在后台请求就可以了。

5、请求成功后,返回包如下:(可以手动请求一下该网址,看看返回的是什么)
“access_token= &expires_in=&refresh_token=***”

access_token即为我们要获取到access_token值

expires_in即为access_token值的有效期

refresh_token,忽略。

获取OpenID值:

1、获取access_token值

2、请求网址:
url = “https://graph.qq.com/oauth2.0/me?access_token=” + access_token

3、参数及其对应值:

access_token值为获取到的Access Token值

4、这个也是直接在后台请求就可以了。

5、请求成功后,返回包如下:

callbackc ( {“client_id”: “", “openid”: "”} )

client_id即为appid

openid即为我们要获取到的openid值

获取该QQ用户的相关信息

1、获取openid值:此值与用户QQ号一一对应,不会改变。因此,可以将此值存入数据库,与网站账号进行绑定。一般来说,若QQ用户第一次授权登录,应让他先进行自己网站的账号注册,注册成功以后就可以直接通过QQ进行登录。

2、请求网址:

url = " https://graph.qq.com/user/get_user_info?access_token=" + access_token

+ "&oauth_consumer_key=" + appid + "&openid=" + openid

3、参数及其对应值:

access_token值为上述获取到的access_token值

oauth_consumer_key值为申请的appid

openid值为获取到的openid值

4、这个还是直接在后台请求就可以了。

5、请求成功后,返回包(json数据)如下:
image.png

nickname为用户的昵称
figureurl_qq_1为用户不同尺寸的QQ头像url
gender为用户性别

6、拿到这些数据后,就可以去前台展示了。至此,QQ登录完成!

回到稻壳网首页
稻壳客服

扫一扫,微信咨询

请留下需求和联系方式,我们即刻为您准备方案
需求提交成功

提交成功

免费服务热线021-61676039(工作日9:00 ~ 18:00)
×
稻壳客服

扫一扫,微信咨询