¶ WeChat web page authorization

¶ Scenario introduction

• Overview: GenAuth provides developers with a method to quickly obtain user information and complete login on the WeChat web page through the SDK. If a user visits a third-party web page or public account in the WeChat client, the WeChat web page authorization mechanism can be used to obtain basic user information and implement business logic.
• Application scenario: WeChat browser
• End user preview:

¶ Notes

• If you have not opened a GenAuth console account, please go to GenAuth console (opens new window) to register a developer account;

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

Go to 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, you need to set the web authorization domain name to core.genauth.ai in the Settings and Development -> Public Account Settings -> Function Settings page of the WeChat public platform backend. For security verification, the WeChat server needs to make a request verification with the GenAuth server. Developers need to download the txt file and record the file name and text content.

¶ Step 2: Configure WeChat web authorization application in the GenAuth console

2.1 Please click the "Create Social Identity Source" button on the "Social Identity Source" page of the GenAuth console to enter the "Select Social Identity Source" page.

2.2 On the "Select Social Identity Source" page, click the "WeChat" card to enter the "WeChat Login Mode" page.

2.3 Continue to click the "WeChat Web Authorization" login mode, or click … Add to open the "WeChat Web Authorization" configuration page.

2.4 On the "WeChat Web Authorization" configuration page, fill in the relevant field information.

2.5 After the configuration is completed, 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 import authing-wxmp-sdk

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

¶ Initialize SDK

Use user pool ID to initialize SDK:

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

¶ Initiate WeChat authorization

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

window.location = authingWx.getAuthorizationUrl();

¶ Get user information

After jumping back to the business callback link, use getUserInfo method to get user information:

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

¶ Access using the embedded login component

Take React as an example.

¶ Install @authing/react-ui-components

$ yarn add @authing/react-ui-components

# OR

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

¶ Initialization

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

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

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

¶ Usage

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