网站实现QQ第三方登录详细步骤

一、准备工作：申请appid，appkey，回调地址（申请时填写的回调地址，重要！）

申请地址：https://connect.qq.com/manage.html#/

        

二、放置QQ登录按钮：其实就是给你要实现QQ登录的地方绑定一个onclick点击事件

 

如：给如图示图标绑定一个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登录界面，如图示：

   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数据）如下：

nickname为用户的昵称

figureurl_qq_1为用户不同尺寸的QQ头像url

gender为用户性别

……

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