Authing DocsDocuments
Concept
Guides
Development Integration
Application integration
Concept
Guides
Development Integration
Application integration
Old Version
Guides
  • Quick start

  • Authenticate the user

  • Authority management for users

  • Authorization

  • Manage user accounts

  • Manage User Directory

  • Management Application

  • Become a source of federal authentication identity

  • Connect to an external identity provider (IdP)

    • Social Identity Provider

      • WeChat QR Code on PC
      • Mini Program QR Code on PC
      • WeChat Official Accounts QR Code
      • Mobile App Use WeChat Login
      • Mobile App Use WeChat Mini Program Login
      • WeChat Web Page
      • WeChat Mini Program
      • Tencent QQ
      • Sina Weibo
      • GitHub
      • Facebook
      • Twitter
      • Google
      • Apple Mobile
      • Apple Web
      • Alipay
      • Slack
      • Gitee
      • GitLab
      • Baidu
      • NetEase YIDUN
      • QingCloud
      • Instagram
      • LinkedIn
    • Enterprise Identity Provider

    • Custom database

  • Open up WeChat ecology
  • Migrate users to Authing

  • Management organization

  • Expandable capabilities

  • Audit Log

  • Configure security information

  • Configure user pool information

  • Deployment plan

  • Frequently Asked Questions FAQs

  1. Guides
  2. /
  3. Connect to an external identity provider (IdP)
  4. /
  5. Social Identity Provider
  6. /
  7. WeChat Web Page

¶ WeChat Web Page

Update Time: 2022-06-09 19:09:54
Edit

¶ Introduction

  • Overview: Authing provides developers with a way to quickly obtain user information in WeChat webpages and complete the login through the SDK. If users access third-party web pages and official accounts in the WeChat client, they can obtain basic user information through the WeChat web page authorization mechanism, and then implement business logic.
  • Application scenarios: Wechat Browser
  • End-User Preview:

¶ Precautions

  • If you do not have an Authing Console account, please go to the Authing Console (opens new window) to register a developer account.

¶ Step 1: Create a WeChat service account on the WeChat public platform

Go to the WeChat public platform (opens new window) to create a WeChat service account.

After the creation is complete, you need to record the AppID and AppSecret of the application, which will be used later.

After that, in the Settings and Development -> Account Info -> Function Settings page of the WeChat public platform backend, set the Webpage authorization domain name to core.authing.cn. For the sake of security verification, the WeChat server needs to perform a request verification with the Authing server, and the developer needs to download the txt file and record the file name and text content.

¶ Step 2: Configure the WeChat web page authorization application in the Authing Console

2.1 On the "Social" page of the Authing Console, click the "Create Connection" button to enter the "Choosing a Social Identity Source" page.

2.2 On the "Choosing a Social Identity Source" page, click the "WeChat" card.

2.3 Continue to click the "WeChat Web Page" login mode, or click "... Add".

2.4 On the "WeChat Web Page" configuration page, fill in the relevant field information obtained in the step 1.

FieldDescription
Unique Identifiera. The unique identifier consists of lowercase letters, numbers, and -, and the length is less than 32 digits.
b. This is the unique identifier of this connection and cannot be modified after setting.
Display NameThis name will be displayed on the button on the end user's login screen.
AppIDAppID obtained in step 1.
AppSecretAppSecret obtained in step 1.
Domain Verification FilenameThe domain name verification file name obtained in step 1, for example: MP_verify_t1op33AC5w4rNIwE.txt
Domain Verification File ContentThe content of the domain name verification file obtained in step 1, for example: E1op22BD7w1rMItt
Callback URLYour business callback link
ScopesApplication authorization scope, snsapi_base (do not pop up the authorization page, jump directly, only get the user openid), snsapi_userinfo (pop up the authorization page, you can get the nickname, gender, and location through openid. And, even if you are not paying attention, As long as the user is authorized, the information can also be obtained). For details, please see WeChat official account webpage authorization document description (opens new window).
Login ModeAfter enabling the "Login Only Mode", you can only log in to an existing account and cannot create a new account. Please choose carefully.
Account Identity AssociationWhen "Account Identity Association" is not enabled, a new user is created by default when a user logs in through an identity provider. After enabling "Account Identity Association", you can allow users to directly log in to existing accounts through "Field Matching" or "Ask Binding Mode".

2.5 After the configuration is complete, click the "Create" or "Save" button to complete the creation.

¶ Step 3:Development access

You can get the sample code here: https://github.com/authing/wechat-eco-solution (opens new window), and visit the online sample application (opens new window).

¶ Access using SDK

First use CDN to introduce authing-wxmp-sdk

<script src="https://cdn.authing.co/packages/authing-wxmp-sdk/<latest-version>/authing-wxmp-sdk.min.js"></script>

Please replace <latest-version> with the latest version. The latest version can be viewed at https://www.npmjs.com/package/@authing/wxmp (opens new window).

For the detailed documentation of authing-wxmp-sdk, please refer to: Wechat Webpage Authorization Login SDK.

¶ Initialize SDK

Initialize the SDK with the UserPool ID:

const authingWx = new AuthingWxmp({
  userPoolId: "YOUR_USERPOOL_ID"
});

¶ Initiate WeChat authorization

Call the getAuthorizationUrl method to obtain the WeChat authorization login link, and modify window.location to redirect to the WeChat login authorization page:

window.location = authingWx.getAuthorizationUrl();

¶ Get UserInfo

After redirecting to the business callback link, obtain user information through the getUserInfo method:


// If `authingWx` is not initialized on the callback page, it needs to be initialized first.
// For the specific initialization method, please refer to the above.
const { ok, userinfo, message } = authingWx.getUserInfo();
if (ok) {
  console.log(userinfo);
} else if (message) {
  // The message object contains the error message
  alert(message);
}

¶ Access using the embedded login component

Take React for example.

¶ Install @authing/react-ui-components


$ yarn add @authing/react-ui-components

# OR

$ npm install @authing/react-ui-components --save

¶ Initiate

import React from "react";
import ReactDOM from "react-dom";
import { AuthingGuard } from "@authing/react-ui-components";
// import css
import "@authing/react-ui-components/lib/index.min.css";

const App = () => {
  const appId = "AUTHING_APP_ID";
  const onLogin = userInfo => {
    console.log(userInfo);
  };
  return <AuthingGuard appId={appId} onLogin={onLogin} />;
};

ReactDOM.render(<App />, root);

¶ Use

After the initialization is completed, open the page in WeChat and you will see the following button. Click to authorize. After the authorization is completed, it will jump to the application callback link, and you can use AuthenticationClient to obtain user information.

Prev: Mobile App Use WeChat Mini Program Login Next: WeChat Mini Program
  • Introduction
  • Precautions
  • Step 1: Create a WeChat service account on the WeChat public platform
  • Step 2: Configure the WeChat web page authorization application in the Authing Console
  • Step 3:Development access

User identity management

Integrated third-party login
Mobile phone number flash check (opens new window)
Universal login form component
Custom authentication process

Enterprise internal management

Single Sign On
Multi-factor Authentication
Authority Management

Developers

Development Document
Framework Integration
Blog (opens new window)
GitHub (opens new window)
Community User Center (opens new window)

Company

400 888 2106
sales@authing.cn
16 / F, Block B, NORTH STAR CENTURY CENTER, Beijing(Total)
room 406, 4th floor, zone B, building 1, No. 200, Tianfu Fifth Street, Chengdu(branch)

Beijing ICP No.19051205-1

© Beijing Steamory Technology Co.