网站使用QQ互联接入第三方登录，实现qq快捷登录网站的功能

清疚 2022-02-28 15:28 1510阅读 0赞

百度搜索 ‘**QQ****互联开放平台**’

![20190326101350246.png][]

[https://connect.qq.com/devuser.html?agreement\#/][https_connect.qq.com_devuser.html_agreement]

文档地址 ： [QQ互联开放平台][QQ]

操作步骤如下：

# 一、准备工作\_OAuth2.0 #

**本步骤的作用**：  
接入QQ登录前，网站需首先进行申请，获得对应的appid与appkey，以保证后续流程中可正确对网站与用户进行验证与授权。  
**本步骤在整个流程中的位置**：  
![oauth2.0\_guid\_1.png][oauth2.0_guid_1.png]

## 1. 申请appid和appkey ##

### 申请appid和appkey的用途 ###

**appid**：应用的唯一标识。在OAuth2.0认证过程中，appid的值即为oauth\_consumer\_key的值。  
**appkey**：appid对应的密钥，访问用户资源时用来验证应用的合法性。在OAuth2.0认证过程中，appkey的值即为oauth\_consumer\_secret的值。

### 申请地址 ###

[https://connect.qq.com/manage.html\#/][https_connect.qq.com_manage.html]

### 申请流程 ###

1.开发者资质审核  
参考文章：[开发者注册流程][Link 1]  
2. 申请appid（oauth\_consumer\_key/client\_id）和appkey（auth\_consumer\_secret/client\_secret）；  
（1）进入[https://connect.qq.com/manage.html\#/][https_connect.qq.com_manage.html]页面，点击“创建应用”，在弹出的对话框中填写网站或应用的详细资料（名称，域名，回调地址）；  
（2）点击“确定”按钮，提交资料后，获取appid和appkey。  
注意：申请appid时，登录的QQ号码将与申请到的appid绑定，后续维护均需要使用该号码。  
**注意:对appid和appkey信息进行保密，不要随意泄漏。**

## 2. 保证连接畅通 ##

接入QQ登录时，网站需要不停的和Qzone进行交互，发送请求和接受响应。  
1. 对于PC网站：  
请在你的服务器上ping graph.qq.com ，保证连接畅通。  
2.移动应用无需此步骤

# 二、放置“QQ登录”按钮\_OAuth2.0 #

**本步骤的作用**：  
在网站页面上放置“QQ登录”按钮，并为按钮添加前台代码，实现点击按钮即弹出QQ登录对话框。  
**本步骤在整个流程中的位置**：  
![oauth2.0\_guid\_2.png][oauth2.0_guid_2.png]

## 1. 下载“QQ登录”按钮图片，并将按钮放置在页面合适的位置 ##

按钮图片下载： [点击这里下载][Link 2] 。  
按照UI规范，将按钮放置在页面合适的位置：[点击这里查看][Link 3]。

## 2. 为“QQ登录”按钮添加前台代码 ##

### 2.1 效果演示 ###

用户在页面上点击“QQ登录”按钮，将触发QQ登录对话框，效果如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExNTk0MTc_size_16_color_FFFFFF_t_70][]

### 2.2 前台代码 ###

为了实现上述效果，应该为“QQ登录”按钮图片添加如下前台代码：

### 2.3 代码示例 ###

1. 写一个函数“toLogin()”，该函数通过调用“index.php”中的qq\_login函数来实现将页面跳转到QQ登录页面。  
（示例中的oauth/index.php，请参见从[SDK下载][SDK]页面下载PHP SDK，在Connect2.1文件夹下的index.php文件。  
）

2. 为按钮添加“toLogin()”事件：

# 三、使用Authorization\_Code获取Access\_Token #

**本步骤的作用**：  
通过用户验证登录和授权，获取Access Token，为下一步获取用户的OpenID做准备；  
同时，Access Token是应用在调用OpenAPI访问和修改用户数据时必须传入的参数。  
**移动端应用**可以直接获得AccessToken，请参考[使用Implicit\_Grant方式获取Access\_Token][Implicit_Grant_Access_Token]  
**本步骤在整个流程中的位置**：  
![oauth2.0\_guid\_3.png][oauth2.0_guid_3.png]

## 1. 简介 ##

即server-side模式，是[OAuth2.0认证][OAuth2.0]的一种模式，又称Web Server Flow；  
适用于需要从web server访问的应用，例如Web网站。  
其授权验证流程示意图如下（图片来源：[OAuth2.0协议草案V21的4.1节][OAuth2.0_V21_4.1] ）  
![OAuth\_guide\_V2\_1.png][OAuth_guide_V2_1.png]  
对于应用而言，需要进行两步：  
1. 获取Authorization Code；  
2. 通过Authorization Code获取Access Token

## 2. 过程详解 ##

### Step1：获取Authorization Code ###

**请求地址**：  
PC网站：https://graph.qq.com/oauth2.0/authorize  
**请求方法**：  
GET  
**请求参数**：  
请求参数请包含如下内容：

<table style="width:693px;"> 
 <tbody> 
  <tr> 
   <th>参数</th> 
   <th>是否必须</th> 
   <th>含义</th> 
  </tr> 
  <tr> 
   <td>response_type</td> 
   <td>必须</td> 
   <td>授权类型，此值固定为“code”。</td> 
  </tr> 
  <tr> 
   <td>client_id</td> 
   <td>必须</td> 
   <td>申请QQ登录成功后，分配给应用的appid。</td> 
  </tr> 
  <tr> 
   <td>redirect_uri</td> 
   <td>必须</td> 
   <td>成功授权后的回调地址，必须是注册appid时填写的主域名下的地址，建议设置为网站首页或网站的用户中心。注意需要将url进行URLEncode。</td> 
  </tr> 
  <tr> 
   <td>state</td> 
   <td>必须</td> 
   <td>client端的状态值。用于第三方应用防止CSRF攻击，成功授权后回调时会原样带回。请务必严格按照流程检查用户与state参数状态的绑定。</td> 
  </tr> 
  <tr> 
   <td>scope</td> 
   <td>可选</td> 
   <td>请求用户授权时向用户显示的可进行授权的列表。<br> 可填写的值是<a href="http://wiki.connect.qq.com/api%E5%88%97%E8%A1%A8" rel="nofollow">API文档</a>中列出的接口，以及一些动作型的授权（目前仅有：do_like），如果要填写多个接口名称，请用逗号隔开。<br> 例如：scope=get_user_info,list_album,upload_pic,do_like<br> 不传则默认请求对接口get_user_info进行授权。<br> 建议控制授权项的数量，只传入必要的接口名称，因为授权项越多，用户越可能拒绝进行任何授权。</td> 
  </tr> 
  <tr> 
   <td>display</td> 
   <td>可选</td> 
   <td>仅<strong>PC网站</strong>接入时使用。<br> 用于展示的样式。不传则默认展示为PC下的样式。<br> 如果传入“mobile”，则展示为mobile端下的样式。</td> 
  </tr> 
 </tbody> 
</table>

**返回说明**：  
1. 如果用户成功登录并授权，则会跳转到指定的回调地址，并在redirect\_uri地址后带上Authorization Code和原始的state值。如：  
PC网站：http://graph.qq.com/demo/index.jsp?code=9A5F\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*06AF&state=test  
注意：此code会在10分钟内过期。  
2. 如果用户在登录授权过程中取消登录流程，对于PC网站，登录页面直接关闭；对于WAP网站，同样跳转回指定的回调地址，并在redirect\_uri地址后带上usercancel参数和原始的state值，其中usercancel值为非零，如：  
http://open.z.qq.com/demo/index.jsp?usercancel=1&state=test  
**错误码说明**：  
接口调用有错误时，会返回code和msg字段，以url参数对的形式返回，value部分会进行url编码（UTF-8）。  
PC网站接入时，错误码详细信息请参见：[100000-100031：PC网站接入时的公共返回码][100000-100031_PC]。

### Step2：通过Authorization Code获取Access Token ###

**请求地址**：  
PC网站：https://graph.qq.com/oauth2.0/token  
**请求方法**：  
GET  
**请求参数**：  
请求参数请包含如下内容：

<table> 
 <tbody> 
  <tr> 
   <th>参数</th> 
   <th>是否必须</th> 
   <th>含义</th> 
  </tr> 
  <tr> 
   <td>grant_type</td> 
   <td>必须</td> 
   <td>授权类型，在本步骤中，此值为“authorization_code”。</td> 
  </tr> 
  <tr> 
   <td>client_id</td> 
   <td>必须</td> 
   <td>申请QQ登录成功后，分配给网站的appid。</td> 
  </tr> 
  <tr> 
   <td>client_secret</td> 
   <td>必须</td> 
   <td>申请QQ登录成功后，分配给网站的appkey。</td> 
  </tr> 
  <tr> 
   <td>code</td> 
   <td>必须</td> 
   <td>上一步返回的authorization code。<br> 如果用户成功登录并授权，则会跳转到指定的回调地址，并在URL中带上Authorization Code。<br> 例如，回调地址为www.qq.com/my.php，则跳转到：<br> http://www.qq.com/my.php?code=520DD95263C1CFEA087******<br> 注意此code会在10分钟内过期。</td> 
  </tr> 
  <tr> 
   <td>redirect_uri</td> 
   <td>必须</td> 
   <td>与上面一步中传入的redirect_uri保持一致。</td> 
  </tr> 
 </tbody> 
</table>

**返回说明**：

如果成功返回，即可在返回包中获取到Access Token。 如：

access\_token=FE04\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*CCE2&expires\_in=7776000&refresh\_token=88E4\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*BE14

<table> 
 <tbody> 
  <tr> 
   <th><strong>参数说明</strong></th> 
   <th><strong>描述</strong></th> 
  </tr> 
  <tr> 
   <td>access_token</td> 
   <td>授权令牌，Access_Token。</td> 
  </tr> 
  <tr> 
   <td>expires_in</td> 
   <td>该access token的有效期，单位为秒。</td> 
  </tr> 
  <tr> 
   <td>refresh_token</td> 
   <td>在授权自动续期步骤中，获取新的Access_Token时需要提供的参数。</td> 
  </tr> 
 </tbody> 
</table>

**错误码说明**：  
接口调用有错误时，会返回code和msg字段，以url参数对的形式返回，value部分会进行url编码（UTF-8）。  
PC网站接入时，错误码详细信息请参见：[100000-100031：PC网站接入时的公共返回码][100000-100031_PC]。

### Step3：（可选）权限自动续期，获取Access Token ###

Access\_Token的有效期默认是3个月，过期后需要用户重新授权才能获得新的Access\_Token。本步骤可以实现授权自动续期，避免要求用户再次授权的操作，提升用户体验。  
**请求地址**：  
PC网站：https://graph.qq.com/oauth2.0/token  
**请求方法**：  
GET  
**请求参数**：  
请求参数请包含如下内容：

<table> 
 <tbody> 
  <tr> 
   <th>参数</th> 
   <th>是否必须</th> 
   <th>含义</th> 
  </tr> 
  <tr> 
   <td>grant_type</td> 
   <td>必须</td> 
   <td>授权类型，在本步骤中，此值为“refresh_token”。</td> 
  </tr> 
  <tr> 
   <td>client_id</td> 
   <td>必须</td> 
   <td>申请QQ登录成功后，分配给网站的appid。</td> 
  </tr> 
  <tr> 
   <td>client_secret</td> 
   <td>必须</td> 
   <td>申请QQ登录成功后，分配给网站的appkey。</td> 
  </tr> 
  <tr> 
   <td>refresh_token</td> 
   <td>必须</td> 
   <td>在<a href="http://wiki.connect.qq.com/%E4%BD%BF%E7%94%A8authorization_code%E8%8E%B7%E5%8F%96access_token#Step2.EF.BC.9A.E9.80.9A.E8.BF.87AuthorizationCode.E8.8E.B7.E5.8F.96AccessToken" rel="nofollow">Step2</a>中，返回的refres_token。</td> 
  </tr> 
 </tbody> 
</table>

**返回说明**：  
如果成功返回，即可在返回包中获取到Access Token。 如：  
access\_token=FE04\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*CCE2&expires\_in=7776000&refresh\_token=88E4\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*BE14。

[20190326101350246.png]: /images/20220228/ea9439dda1a742a7806a1f9fcc1957af.png
[https_connect.qq.com_devuser.html_agreement]: https://connect.qq.com/devuser.html?agreement#/
[QQ]: http://wiki.connect.qq.com/%E6%94%BE%E7%BD%AEqq%E7%99%BB%E5%BD%95%E6%8C%89%E9%92%AE_oauth2-0
[oauth2.0_guid_1.png]: /images/20220228/3c76a0bf7fa14cdb97b9b80d763c75fb.png
[https_connect.qq.com_manage.html]: https://connect.qq.com/manage.html#/
[Link 1]: http://wiki.connect.qq.com/%E6%88%90%E4%B8%BA%E5%BC%80%E5%8F%91%E8%80%85
[oauth2.0_guid_2.png]: /images/20220228/695510ba458c467d8ba83ca6f5ec783b.png
[Link 2]: http://wiki.connect.qq.com/%E7%BD%91%E7%AB%99%E5%89%8D%E7%AB%AF%E9%A1%B5%E9%9D%A2%E8%A7%84%E8%8C%83#1..E4.BD.BF.E7.94.A8.E8.85.BE.E8.AE.AF.E6.8F.90.E4.BE.9B.E7.9A.84.E6.A0.87.E5.87.86.E2.80.9CQQ.E7.99.BB.E5.BD.95.E2.80.9D.E6.A0.87.E8.AF.86
[Link 3]: http://wiki.connect.qq.com/%E7%BD%91%E7%AB%99%E5%89%8D%E7%AB%AF%E9%A1%B5%E9%9D%A2%E8%A7%84%E8%8C%83#2..E6.A0.87.E8.AF.86.E6.94.BE.E7.BD.AE.E4.BD.8D.E7.BD.AE.E8.A7.84.E8.8C.83
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExNTk0MTc_size_16_color_FFFFFF_t_70]: /images/20220228/30a7c4d224804406a5cfd7ee87d0c903.png
[SDK]: http://wiki.connect.qq.com/sdk%E4%B8%8B%E8%BD%BD
[Implicit_Grant_Access_Token]: http://wiki.connect.qq.com/%E4%BD%BF%E7%94%A8implicit_grant%E6%96%B9%E5%BC%8F%E8%8E%B7%E5%8F%96access_token
[oauth2.0_guid_3.png]: /images/20220228/07ae89a4650f4c62864c7f82cba17a64.png
[OAuth2.0]: http://wiki.connect.qq.com/oauth2-0%E7%AE%80%E4%BB%8B
[OAuth2.0_V21_4.1]: http://tools.ietf.org/html/draft-ietf-oauth-v2-21
[OAuth_guide_V2_1.png]: /images/20220228/d71142b7260643db8219ffe0d2ea3cae.png
[100000-100031_PC]: http://wiki.connect.qq.com/%E5%85%AC%E5%85%B1%E8%BF%94%E5%9B%9E%E7%A0%81%E8%AF%B4%E6%98%8E#100000-100031.EF.BC.9APC.E7.BD.91.E7.AB.99.E6.8E.A5.E5.85.A5.E6.97.B6.E7.9A.84.E5.85.AC.E5.85.B1.E8.BF.94.E5.9B.9E.E7.A0.81