¶ PC website using WeChat scan code to log in

Update Time: 2026-03-25 09:13:34

WeChat PC scan code login allows users to securely log in to third-party applications or websites with WeChat identity. After enabling WeChat scan code login in Authing, it can quickly obtain basic open information of WeChat users through Authing and help users realize basic open functions.

Application scenario: PC website;
Overview: Jump to the WeChat QR code page in the PC website application, and then use WeChat to scan the code to log in to the application;
View WeChat official documentation (opens new window).

¶ Step 1: Create a website application on the WeChat open platform

Please open the WeChat platform (opens new window) Guide to create a WeChat website application, you need to record the App ID and App Secret of the application , which will be used later. Please make sure that the app has obtained the permission to log in with WeChat , and set the authorization callback domain to core.authing.cn.

¶ Step 2: Configure the WeChat scan code application in the Authing console

On the social login configuration page of the console, find the WeChat PC scan code login application, and fill in the following configuration:

App ID: WeChat application ID;
App Secret: WeChat application key;
Callback URL: This is your business callback domain name, which is not a concept related to the callback link configured by the self-built application, nor is it related to the callback address configuration of the third-party social login console . For example, the domain name of your website is https://example.com, and the url for processing the Authing callback request is /auth/callback, then you should fill in as https://example.com/auth/callback. This parameter has been deprecated. It is recommended to configure the callback link separately in the application, where the address can be filled with #.

¶ Step 3: Start developing access

Authing social login supports four access methods: using JavaScript SDK , using embedded login component , using managed login page and manually invoking social login interface . Each access method has its own advantages and disadvantages. You can choose the appropriate method according to your business needs.

Here's a comparison of the pros and cons of each approach:

Access method	Advantage	disadvantage	Recommend
JavaScript SDK	Access is simple and only requires a few lines of code. The most customizable.	Yes
embedded login component	Access is simple and only requires a few lines of code. This component can be integrated into your application. Relatively high degree of customization	Yes
hosted login page	Simple operation and maintenance, Authing is responsible for operation and maintenance. Each user pool has an independent second-level domain name.	If you need to embed into your application, you need to use the pop-up mode to log in, that is: after clicking the login button, a window will pop up with the content of the login page hosted by Authing, or the browser will be redirected to the login page hosted by Authing.	Yes
Manually call the social login interface	User information needs to be parsed manually from the URL. Access is relatively complicated and troublesome.	No

Method

To implement WeChat PC scan code login, you only need to implement the following lines of code:

Initialize the AuthenticationClient with the application ID, you can view the application ID on the application list page of the console.
Call the authenticationClient.social.authorize method. The first parameter is passed to wechat:pc, and the second parameter specifies the onSuccess and onError callback functions.
After the user successfully logs in, you can get the user information in the onSuccess callback function; if the login fails, you can get the error code and error information in the onError callback function. For a complete list of error codes, see: Error Code List.

import { AuthenticationClient } from "authing-js-sdk";

const authenticationClient = new AuthenticationClient({
  appId: "AUTHING_APP_ID",
  appHost: "https://xxx.authing.cn"
});

// Use  GitHub 登录
await authenticationClient.social.authorize("wechat:pc", {
  onSuccess: user => {
    console.log(user);
  },
  onError: (code, message) => {}
});

¶ Next

After obtaining the user information, you can get the user's identity credential (the token field ), which you can carry in subsequent requests sent by the client to the backend server token, for axios example :

const axios = require("axios");
axios
  .get({
    url: "https://yourdomain.com/api/v1/your/resources",
    headers: {
      Authorization: "Bearer ID_TOKEN"
    }
  })
  .then(res => {
    // custom codes
  });

The legitimacy of this needs to be checked in the back-end interface to verify the user's identity. For details of the verification method, see Verifying User Identity Credentials (token) . After identifying the user's identity, you may also need to perform permission management on the user to determine whether the user has permission to operate this API.