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

# 如何实现QQ在线登录，QQ在线登陆步骤简述

## 一、准备工作

在开始集成QQ在线登录之前，需要进行一些准备工作，包括申请AppID和AppKey，以及确保服务器连接畅通，这些步骤是实现QQ登录的基础，只有完成这些准备工作，才能进行后续的集成操作。

### 1. 申请AppID和AppKey

为了使用QQ互联的登录功能，需要在QQ互联官网（https://connect.qq.com/）申请一个应用，并获得对应的AppID和AppKey，这两个参数是OAuth2.0认证过程中必须的。

#### 1.1 AppID和AppKey的用途

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

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

#### 1.2 申请流程

进入[QQ互联开放平台](https://connect.qq.com/manage.html#/)页面，点击“创建应用”。

在弹出的对话框中填写网站或应用的详细资料（名称，域名，回调地址）。

提交资料后，获取AppID和AppKey。

注意：申请AppID时，登录的QQ号码将与申请到的AppID绑定，后续维护均需要使用该号码，对AppID和AppKey信息进行保密，不要随意泄漏。

### 2. 确保服务器连接畅通

接入QQ登录时，网站需要不停地和Qzone进行交互，发送请求和接受响应，确保服务器能够连接到腾讯的相关服务器是必要的。

#### 2.1 检查服务器连接

对于PC网站，可以在服务器上ping graph.qq.com，确保连接畅通，移动应用则无需此步骤。

## 二、放置QQ登录按钮

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

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

从[QQ互联官网](https://xianresident.qcloud.com/tool/faceconnect.html)下载“QQ登录”按钮图片，并根据UI规范将按钮放置在页面合适的位置。

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

“`html

“`

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

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

### 1. 获取Authorization Code

#### 1.1 请求地址

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

请求方法：GET

#### 1.2 请求参数

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

| –| –| –|

| 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 | 可选 | 仅PC网站接入时使用，用于展示的样式，不传则默认展示为PC下的样式，如果传入“mobile”，则展示为移动下的样式。 |

| g_ut | 可选 | 仅WAP网站接入时使用，QQ登录页面版本（1：wml版本；2：xhtml版本），默认值为1。 |

#### 1.3 返回说明

如果用户成功登录并授权，则会跳转到指定的回调地址，并在redirect_uri地址后带上Authorization Code和原始的state值。

PC网站：http://graph.qq.com/demo/index.jsp?code=9A5F************************06AF&state=test

WAP网站：http://open.z.qq.com/demo/index.jsp?code=9A5F************************06AF&state=test

注意：此code会在10分钟内过期。

如果用户在登录授权过程中取消登录流程，对于PC网站，登录页面直接关闭；对于移动应用，同样跳转回指定的回调地址，并在redirect_uri地址后带上usercancel参数和原始的state值，其中usercancel值为非零，如：

http://open.z.qq.com/demo/index.jsp?usercancel=1&state=test

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

#### 2.1 请求地址

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

请求方法：GET

#### 2.2 请求参数

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

| –| –| –|

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

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

| client_secret | 必须 | AppID对应的密钥。 |

| code | 必须 | 上一步获取的code值。 |

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

#### 2.3 返回说明

请求成功后，返回包如下：

“`json

“access_token”: “**********************************************************************************************************************************************************************************************”,

“expires_in”: 7776000,

“refresh_token”: “*********************************************************************************************************************************************************************************”

“`

access_token即为我们要获取到的access_token值，expires_in即为access_token值的有效期，refresh_token忽略。

## 四、通过Access Token获取OpenID

### 1. 请求地址

https://graph.qq.com/oauth2.0/me?access_token=ACCESS_TOKEN

### 2. 请求参数

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

| –| –| –|

| access_token | 必须 | 上一步获取的Access Token值。 |

| oauth_consumer_key | 必须 | AppID。 |

| openid | 必须 | OpenID值。 |

### 3. 返回说明

请求成功后，返回包如下：

“`json

“client_id”: “**********”,

“openid”: “**********”

“`

client_id即为AppID，openid即为我们要获取到的openid值，这个openid值与用户QQ号一一对应，不会改变，可以将此值存入数据库，与网站账号进行绑定，若QQ用户第一次授权登录，应让他先进行自己网站的账号注册，注册成功以后就可以直接通过QQ进行登录了。

## 五、获取用户信息

### 1. 请求地址

https://graph.qq.com/user/get_user_info?access_token=ACCESS_TOKEN&oauth_consumer_key=APPID&openid=OPENID

### 2. 请求参数

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

| –| –| –|

| access_token | 必须 | 上一步获取的Access Token值。 |

| oauth_consumer_key | 必须 | AppID。 |

| openid | 必须 | OpenID值。 |

### 3. 返回说明

请求成功后，返回包（json数据）如下：

“`json

“nickname”: “用户昵称”,

“figureurl_qq_1”: “用户不同尺寸的QQ头像url”,

“gender”: “用户性别”,

…

“`

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

以上就是关于“如何实现qq在线登陆,qq在线登陆步骤简述”的问题，朋友们可以点击主页了解更多内容，希望可以够帮助大家!