概述

一、准备工作

申请appid，appkey，回调地址（申请时填写的回调地址，重要！）

qq互联申请地址：https://connect.qq.com/manage.html,成功后查看一下两个参数
qqAppID = ‘qqAppID ‘;
qqAppkey = ‘qqAppkey ‘;

二、放置QQ登录按钮

其实就是给你要实现QQ登录的地方绑定一个onclick点击事件

如：给如图示图标绑定一个onclick点击事件，在对应函数里写一个http请求去服务器端处理QQ登录（安全考虑）

三、获取Authorization Code值

1.请求网址

https://graph.qq.com/oauth2.0/authorize?response_type=code&display=pc&client_id='+qqAppID+'&redirect_uri='+qqRedirect_uri+'&state=zmzui&scope=get_user_info,get_vip_info,get_vip_rich_info

2.参数及其对应值

response_type的值固定为code；

client_id的值为申请的appid；

display的值为pc(pc端需要传)；

redirect_uri的值为申请时填写的回调地址；（注意：需要将url进行编码！！！）

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

scope值需要的请求

3. 将此url地址返回到前台

利用window.open在新窗口打开此网址。若发现未打开，很有可能是被拦截了。

4. 请求成功

请求成功后，会打开QQ登录界面，如图示：

5. 返回

当用户成功授权登录后，会跳转到上述指定的回调地址里，并携带参数code和state值。如：code=code&state=state
code值即为你要获取到的Authorization Code值
state值即为上述你随机产生的字符串

四、获取Access Token值

1.获取判断

此时已经走到了回调地址里

根据回调产生的地址，获取code值，state值

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

2.请求网址

https://graph.qq.com/oauth2.0/token?grant_type=authorization_code&client_id='+qqAppID+'&client_secret='+qqAppkey+'&code='+code+'&redirect_uri='+qqRedirect_uri

3.参数及其对应值

grant_type的值固定为authorization_code；

client_id的值为申请的appid；

client_secret的值为申请的appkey；

redirect_uri的值为申请时填写的回调地址；（注意：需要将url进行编码！！！）

code值为获取到的Authorization Code值

4.这个地址从后台发起请求即可

5.请求成功后，返回包如下

（可以手动请求一下该网址，看看返回的是什么）

access_token=access_token&expires_in=expires_in&refresh_token=refresh_token

access_token即为我们要获取到access_token值

expires_in即为access_token值的有效期

refresh_token，忽略。

五、获取OpenID值

1.获取access_token值

2.请求网址

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

3.参数及其对应值

access_token值为获取到的Access Token值
unionid所有平台互联唯一id（可选）

4.这个地址从后台发起请求即可

5.请求成功后，返回包如下

callbackc ( {"client_id": "*client_id*", "openid": "*openid**"} )

client_id即为appid

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

这里我们要拿参数感觉没有头脑的返回不规则的串，所以要对当前进行处理

jsonStr = resultTWO.replace('callback( ','');
jsonStr = jsonStr.replace(' );','');
jsonStr = JSON.parse(jsonStr);

六、获取该QQ用户的相关信息

1.获取openid值

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

2.请求网址

https://graph.qq.com/user/get_user_info?access_token=“ + access_token+ “&oauth_consumer_key=” + qqAppID + “&openid=” + qqOpenid

3.参数及其对应值

access_token值为上述获取到的access_token值
oauth_consumer_key值为申请的appid
openid值为获取到的openid值

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

5.请求成功后，返回包（json数据）如下

看官方的文档我们知道

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

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