Implementing QQ Login with OAuth2.0: Step‑by‑Step Guide

Explanation

The QQ login feature described here uses the official OAuth2.0 protocol to give developers more control; a simpler js‑SDK approach exists but offers less autonomy.

Register as a Developer

Log in to the QQ Connect website; the QQ number used for login will be bound to the developer account. After logging in, click your QQ avatar on the top navigation bar to open the developer registration/verification page.

You can register as a “company” or “individual”. The author initially tried a company registration but kept receiving unexplained audit failures, so switched to personal registration and succeeded quickly.

Note: It is unclear whether registering as an individual imposes any permission restrictions; on the WeChat platform, personal accounts have limited capabilities.

Create a Website Application

To enable QQ login on a website, you must first create a website application in QQ Connect.

In the top navigation bar, select “Application Management”, then the “Website Application” tab, and click “Create Application”. Fill in the required information, including two URLs: the website address (where users will log in) and the website callback domain (the endpoint that receives the OAuth callback).

After the application is approved, view its details to obtain the APP ID and APP Key, which are needed for the login implementation. Also enable the “unionid” interface, which is disabled by default.

Process Overview

The overall flow is:

Redirect the user to the QQ authorization URL; after the user logs in, QQ redirects back to the callback URL with an Authorization Code.

The callback server exchanges the Authorization Code for an Access Token.

Using the Access Token, the server requests the OpenID of the logged‑in QQ account.

With the Access Token and OpenID, the server can call QQ APIs (e.g., get_user_info ) to obtain user information such as nickname, avatar, and gender.

1. Obtain Authorization Code

On your login page, when the user clicks the QQ icon, send a request to the following URL:

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

appId is the APP ID of your website application, redirectUrl is the callback domain you configured, state is a developer‑defined string, and scope lists the permissions requested. If scope is omitted, only the get_user_info permission is granted by default.

After the user authorizes, QQ redirects to the callback URL, for example https://a.com/api/getauthcode , with a request like:

GET /getauthcode?code=F91C6110*****...

The code parameter in the query string is the Authorization Code.

2. Obtain Access Token

Exchange the Authorization Code for an Access Token by requesting:

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

The response looks like:

access_token=FF3A****&expires_in=7776000&refresh_token=2516****

The Access Token is valid for 90 days. It is recommended to store it for subsequent API calls.

3. Obtain OpenID

With the Access Token, request the OpenID:

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

The response is a JSONP callback containing the APP ID and OpenID:

callback({"client_id":"appId","openid":"openId"});

The openid uniquely identifies the logged‑in QQ account.

4. Call API to Access User Data

Now you can call QQ’s get_user_info API to retrieve user details:

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

The response includes the user’s nickname, avatar URL, gender, and other basic profile information.