乐趣区

网站接入QQ登录功能

jiezi

原文链接：网站接入 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 接口，获取登录用户的昵称、头像、性别，用来显示在前端页面中。

一、获取 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。

二、获取 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 访问和修改用户信息时使用。

三、获取 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 了。

四、调用接口访问数据

有了第二步获取到的获取 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 列表
退出移动版