网站接入QQ登陆功能

原文连接：网站接入QQ登陆功能

---

需求描述

网站须要实现QQ登陆功能。

说明

1. 本文中所说的QQ登陆功能，是采用官方的OAuth2.0来实现的，这样有更多的自主权。另外一种较为简单的JS-SDK开发方式，虽然很是简便，但自主性不够，因此没有采用。
2. 下文中所构造的URL，均使用了JavaScript的ES6语法。

注册开发者

先登陆QQ互联官网，登陆时所用的QQ号会和相关信息绑定，这一点要注意。

登陆以后点击顶部导航栏右侧本身的QQ头像，进入开发者的注册/认证界面。

这里能够选择以“公司”或“我的”的身份注册为开发者。本身最开始用的是公司的相关资料来注册的，但老是提示审核失败，却又不说为何失败，最后干脆用我的信息注册，很快就成功了。

PS：不知道用我的信息注册为开发者的话，权限方面会不会有什么限制。微信公众平台对我的开发者是有限制的，我的身份注册的公众号没法认证，公众平台的部分权限也没法调用。

建立网站应用

要想让网站可以使用QQ登陆功能，就必须先在QQ互联中建立网站应用。

在QQ互联网站顶部导航栏上，点击应用管理。点击页面中的网站应用这个标签，再点击建立应用，按照要求填写相关的信息便可。

注意这里须要填写两个 URL，一个是网站地址，也就是须要让用户可以经过QQ登陆的网站。另外一个是网站回调域，则是用户发起QQ登陆请求以后，负责与腾讯服务器通信，实现QQ登陆功能的URL，这两个URL要注意区分。

所建立的网站应用审核经过以后，点击查看按钮，在网站应用的详情界面，能看到为这个网站分配的APP ID和APP Key，后面实现QQ登陆功能的时候要用到。

另外，还能看到审核经过的网站应用，有两个可用的应用接口，第一个登陆默认是开启的，第二个unionid须要手动开启，这里先把它开启了，后面说不定就用上了。

流程概述

接下来就须要编写代码，实现QQ登陆功能了。这里先简要说明一下总体流程：

1. 按照要求访问指定网址，会显示QQ登陆界面，选择QQ帐号进行登陆以后，会向以前所填写的 网站回调域 发起回调，回调URL中包含Authorization Code（受权码）。
2. 网站回调域 用这个Authorization Code（受权码），结合其它数据，向指定的地址发送请求，接收到的响应中包含Access Token（访问令牌）。
3. 网站回调域 再用Access Token（访问令牌） 向指定的地址发送请求，接收到的响应中包含所登陆QQ帐号的 OpenID（不涉及用户隐私）。
4. 网站回调域 拿到用户的OpenID以后，结合前面获取到的Access Token以及其它数据，就能够调用QQ的接口，实现特定的功能了。好比能够调用get_user_info接口，获取登陆用户的昵称、头像、性别，用来显示在前端页面中。

1、获取Authorization Code

在本身编写的登陆页面，点击QQ图标以后，请求下面的地址：

https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=${appId}&redirect_uri=${redirectUrl}&state=${state}&scope=${scope}
复制代码

上面的地址中，appId为网站应用的APP ID，redirectUrl为网站应用的网站回调域，state为用户自定义的字符串，scope为向用户所请求的受权列表。

scope以外的参数均为必填项，scope若是不写，则默认只请求对接口get_user_info进行受权，获取用户最基本的几项信息：QQ昵称、QQ头像、性别。

发起请求以后，会将用户导向到QQ官方的登陆页面，用户在这个页面上选择须要登陆的QQ号，点击“登陆”，网站回调域 就会收到的腾讯服务器所发起的回调。

好比以前所填写的 网站回调域 为 a.com/api/getauthcode 的话，腾讯服务器就会向 网站回调域 发送以下请求：

GET /getauthcode?code=F91C6110********
复制代码

在上面接收到的这个请求中，URL查询字符串里，code= 后面的字符串，就是腾讯服务器发来的Authorization Code。

2、获取Access Token

拿到Authorization Code，结合其它数据，请求以下地址：

https://graph.qq.com/oauth2.0/token?grant_type=authorization_code&client_id=${appId}&client_secret=${appKey}&code=${authCode}&state=${state}&redirect_uri=${redirectUrl}
复制代码

网站回调域 会收到以下响应：

access_token=FF3A****&expires_in=7776000&refresh_token=2516****
复制代码

其中就包含了Access Token，而且这个Access Token有90天的有效期，但并不会按照官方文档所说的，用户再次登陆时自动刷新，而是短期（一天内）连续屡次登陆都不会刷新。

对于这个Access Token，官网建议开发者将其进行保存，以便后续调用OpenAPI访问和修改用户信息时使用。

3、获取OpenID

有了Access Token以后，就能够用它来获取当前所登陆QQ帐号的OpenID了。请求以下地址：

https://graph.qq.com/oauth2.0/me?access_token=${accessToken}
复制代码

网站回调域 会收到以下响应：

callback( {"client_id":"appId","openid":"openId"} );
复制代码

上面的响应中包含了 APP ID 和 OpenID，APP ID 可用来确认是否为合法的网站请求，OpenID 天然就是所登陆QQ帐号的 OpenID 了。

4、调用接口访问数据

有了第二步获取到的获取Access Token，和第三步获取到的OpenID，就能够拿来访问QQ的接口，获取用户的相关信息了。

好比如下面的方式请求 get_user_info 接口，就可以获取到用户昵称、QQ头像等信息。

https://graph.qq.com/user/get_user_info?access_token=${accessToken}&oauth_consumer_key=${appId}&openid=${openId}
复制代码

参考资料

• 网站接入概述
• 网站接入流程
• 准备工做_OAuth2.0
• 使用Authorization_Code获取Access_Token
• 获取用户OpenID_OAuth2.0
• OpenAPI调用说明_OAuth2.0
• 开发攻略_Server-side | OAuth2.0开发指引
• get_user_info | API列表