如何实现QQ在线登录？简述QQ在线登录步骤

要实现QQ在线登录，首先需在QQ互联官网申请appid和appkey。将“QQ登录”按钮图片放置在网站页面合适位置，并添加相应前台代码。用户点击按钮后，通过OAuth2.0协议获取Authorization Code，再通过此Code获取Access Token，最终使用Access Token调用QQ接口完成登录。

## 实现QQ在线登录步骤简述

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

在接入QQ登录前，网站需首先进行申请，获得对应的appid与appkey，以保证后续流程中可正确对网站与用户进行验证与授权。

#### 1. 申请appid和appkey

**appid**：应用的唯一标识，在OAuth2.0认证过程中，appid的值即为oauth_consumer_key的值。

**appkey**：appid对应的密钥，访问用户资源时用来验证应用的合法性，在OAuth2.0认证过程中，appkey的值即为oauth_consumer_secret的值。

#### 2. 申请地址

开发者需要前往[QQ互联官网](https://connect.qq.com/manage.html#/)进行申请。

#### 3. 申请流程

（1）进入[QQ互联官网](https://connect.qq.com/manage.html#/)，点击“创建应用”，在弹出的对话框中填写网站或应用的详细资料（名称，域名，回调地址）。

（2）提交资料后，审核通过即可获取appid和appkey，注意：申请appid时，登录的QQ号码将与申请到的appid绑定，后续维护均需要使用该号码，对appid和appkey信息进行保密，不要随意泄漏。

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

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

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

本步骤的作用是在网站页面上放置“QQ登录”按钮，并为按钮添加前台代码，实现点击按钮即弹出QQ登录对话框。

#### 1. 下载“QQ登录”按钮图片

按钮图片可以从官方渠道下载，并根据UI规范将按钮放置在页面合适的位置。

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

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

“`html

“`

#### 3. 编写跳转函数

写一个函数“toLogin()”，该函数通过调用“index.php”中的qq_login函数来实现将页面跳转到QQ登录页面。

“`javascript

“`

#### 4. 为按钮添加事件

“`html

“`

### 三、使用Authorization Code获取Access Token

本步骤的作用是通过用户验证登录和授权，获取Access Token，为下一步获取用户的OpenID做准备；Access Token是应用在调用OpenAPI访问和修改用户数据时必须传入的参数。

#### 1. 获取Authorization Code

请求地址：

“`

PC网站：https://graph.qq.com/oauth2.0/authorize

请求方法：GET

请求参数：

| 参数 | 是否必须 | 含义 |

| –| –| –|

| response_type | 必须 | 授权类型，此值固定为“code”。 |

| client_id | 必须 | 申请QQ登录成功后，分配给应用的appid。 |

| redirect_uri | 必须 | 成功授权后的回调地址，必须是注册appid时填写的主域名下的地址，建议设置为网站首页或网站的用户中心，注意需要将url进行URLEncode。 |

| state | 必须 | client端的状态值，用于第三方应用防止CSRF攻击，成功授权后回调时会原样带回，请务必严格按照流程检查用户与state参数状态的绑定。 |

| scope | 可选 | 请求用户授权时向用户显示的可进行授权的列表。
可填写的值是API文档中列出的接口，以及一些动作型的授权（目前仅有：do_like），如果要填写多个接口名称，请用逗号隔开。
scope=get_user_info,list_album,upload_pic,do_like
不传则默认请求对接口get_user_info进行授权。
建议控制授权项的数量，只传入必要的接口名称，因为授权项越多，用户越可能拒绝进行任何授权。 |

| display | 可选 | 可选值有page（PC网页默认就使用这个显示）、mobile（移动应用）、touch（触屏手机默认使用这个显示）、wap（老式手机网页）。 |

“`

#### 2. 通过Authorization Code获取Access Token

移动端应用可以直接获得AccessToken，请参考使用Implicit Grant方式获取AccessToken，对于Web Server模式，需要进行两步：获取Authorization Code和通过Authorization Code获取Access Token。

**获取Authorization Code**：用户在页面上点击“QQ登录”按钮，将触发QQ登录对话框，效果如下图所示，之后等待审核，审核通过进行第三步。

**通过Authorization Code获取Access Token**：拿到Authorization Code后，结合其他数据，向指定的地址发送请求，接收到的响应中包含Access Token（访问令牌），请求地址：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={accessToken}&expires_in={expiresIn}&refresh_token={refreshToken}，其中access_token即为我们要获取到的access token值，expires_in即为access token值的有效期，refresh_token暂时忽略，官网建议开发者将access token进行保存，以便后续调用OpenAPI访问和修改用户信息时使用。

### 四、获取OpenID并调用接口访问数据

有了第二步获取到的Access Token后，就可以用它来获取当前所登录QQ账号的OpenID（不涉及用户隐私），请求地址：https://graph.qq.com/oauth2.0/me?access_token={accessToken}，响应包如下：callback({“client_id”:”{appId}”,”openid”:”{openId}”})，其中openid即为我们要获取到的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}，请求成功后返回包（json数据）如下：nickname为用户的昵称figureurl_qq_1为用户不同尺寸的QQ头像urlgender为用户性别……拿到这些数据后，就可以去前台展示了，至此，QQ登录完成！

小伙伴们，上文介绍了“如何实现qq在线登陆,qq在线登陆步骤简述”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。