¶ SDK for WeChat applet

GitHub source address:https://github.com/authing/authing-wxapp-sdk (opens new window)

Authing small procedure SDK（authing-wxapp-sdk）suitable for use in WeChat applets authing-js-sdk (opens new window) based on the WeChat applet environment. you can use authing-js-sdk AuthenticationClient all methods in the middle, such as Get, modify user information, add user custom fields, and so on. Specially used in a small program environment Get the user's mobile phone number through WeChat、 Use WeChat Authorized Login、Login with the mobile phone number authorized by WeChat methods.

¶ Configuring a small program login in Authing

In order to use Authing small program SDK in a small program, you need to apply for a small program in WeChat open platform (opens new window), at the same time Authing console (opens new window) fill in the configuration of the applet.

¶ Install

From the small program base library version 2.2.1 or more, and the developer tool 1.02.1808300 or above, the applet supports the use of NPM to install a third party package, please see: Please see:NPM support | WeChat open document (opens new window) 。

¶ install npm

use npm:

npm install authing-wxapp-sdk

use yarn:

yarn add authing-wxapp-sdk

¶ Build in a small program developer tool npm

Click on the menu bar in the developer tool: Tool --> build npm:

¶ initialization

AuthenticationClient Initialization Need to pass the AppId (Applications ID):

You can view your own application list in the console's Application.

const { AuthenticationClient } = require("authing-wxapp-sdk");

const authing = new AuthenticationClient({
  appId: "AUTHING_APP_ID"
});

The full parameter list is as follows:

• appId: Authing application ID（required）；
• accessToken: Through the user's token initialization SDK (optional, you can cache the user token in the front-end localStorage, remember the purpose of logging in).
• timeout: Request timeout, units in milliseconds, default is 10,000 (10 seconds).
• onError: Error handler, you can use it globally capture all anomalies for the Authing client request. The function is defined as:

(code: number, message: string, data: any) => void

Complete error code, please see this document。

• host: Authing optional, ignore for cloud users. For private users, it's required in this format: https://authing-api.mydomain.com without ending with /.

¶ Instructions

After the user completes the login, the SDK will write the user's token to WeChat's Storage, follow-up requests will automatically carry the token.

const { code } = await wx.login();
// No user authorization
const user = await authing.loginByCode(code); // Successfully logged in, write token to WeChat Storage

// You can do this after logging in
await authing.updateProfile((nickname: "Bob"));

Subsequent users open the applet, if the user's token is saved in the Storage of the applet, access the Authing request will automatically bring the token.

// This request can be successful because the user is out of the login state.
await authing.updateProfile((nickname: "Mick"));

¶ API Reference

you can use authing-js-sdk AuthenticationClient all methods in the middle, Calling method and authing-js-sdk perfect match.

¶ loginByCode

Log in by using WeChat authorization.

• If the user logs in in a small program, and the user does not use the WeChat app log in to the same body to bind the same body, a new account will be created.
• If the user logs in in the applet in the applet, the user uses the WeChat app log in to the same body to bind the same body, and will return the corresponding WeChat account.

¶ parameter

• code: transfer wx.login() (opens new window) Get the code, no user authorization is required. Required.
• options: Optional.
• options.iv: open-type is getUserInfo WeChat Button Components (opens new window) click on the event to return iv. iv and encryptedData must be passed at the same time,Authing Server will try iv and encryptedData Sino-Adding User Information. The first time you need to manually authorize. Optional.
• options.encryptedData: open-type is getUserInfo WeChat Button Components (opens new window) click on the event to return encryptedData. iv and encryptedData must be passed at the same time,Authing Server will try iv and encryptedData Sino-Adding User Information. The first time you need to manually authorize. Optional.
• options.rawData: open-type is getUserInfo WeChat Button Components (opens new window) click on the event to return rawData. and iv + encryptedData Two choices, if you pass rawData, Authing Server will use this data directly as a user profile. The first time you need to manually authorize. Optional.

¶ Example

1. Silent authorization

The Nickname in the profile of the user's registered users, Avatar will be empty because the user's avatar and nickname are not obtained.

const { code } = await wx.login();
const data = await authing.loginByCode(code);

2. User manually authorizes to get nickname avatar

Only the first time you need to authorize, you can use the wx.getUserInfo to directly get the avatar nickname directly.

• First request user manual authorization

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">
  Get an avatar nickname
</button>

getUserInfo: async function (e) {
  const { code } = await wx.login()
  const { rawData } = e.detail
  const user = await authing.loginByCode(code, { rawData })

  // or pass in iv encryptedData
  // const { iv, encryptedData } = e.detail
  // const user = await authing.loginByCode(code, { iv, encryptedData })

  console.log(user)
}

• can then be automatically obtained by wx.getUserInfo

const { rawData } = await wx.getUserInfo();
const user = await authing.loginByCode(code, { rawData });
// or iv encryptedData
// const { iv, encryptedData } = e.detail
// const user = await authing.loginByCode(code, { iv, encryptedData })

¶ loginByPhone

Log in by WeChat mobile phone number. You need to manually authorize each time you call.

• If the mobile phone number is registered for the first time, the mobile phone number is bound to the WeChat account (there is no existence).
• If the mobile phone number is registered, the account number corresponding to the mobile phone number will be returned, and the mobile phone number is bound to the current WeChat account.

¶ parameter

• code: Call wx.login() (opens new window) get code. No user authorization is required. Required.
• iv: open-type is getPhoneNumber WeChat Button Components (opens new window) Click on the iv. Required.
• encryptedData: open-type is getPhoneNumber WeChat Button Components (opens new window) Click on the encryptedData. Required.

¶ Example

<button open-type="getPhoneNumber" bindgetphonenumber="getPhone">
  Get your phone number
</button>

getPhone: async function(e) {
  const { code } = await wx.login()
  const { iv, encryptedData } = e.detail
  const data = await authing.loginByPhone(code, iv, encryptedData)
  console.log(data)
}

¶ getPhone

Get the mobile phone number of the current user (will not use the mobile phone number to register or bind account)

¶ parameter

• code: transfer wx.login() (opens new window) Get the code, no user authorization is required. Required.
• iv: open-type is getPhoneNumber WeChat Button Components (opens new window) clicking on the event back iv. Required.
• encryptedData: open-type is getPhoneNumberWeChat Button Components (opens new window) clicking on the event back encryptedData. Required.

¶ Example

<button open-type="getPhoneNumber" bindgetphonenumber="getPhone">
  Get your phone number
</button>

getPhone: async function(e) {
  const { code } = await wx.login()
  const { iv, encryptedData } = e.detail
  const data = await authing.getPhone(code, iv, encryptedData)
  console.log(data)
}

Returned Data example:

{
  "countryCode": "86",
  "phoneNumber": "188xxxx8888",
  "purePhoneNumber": "188xxxx8888",
  "openid": "o1p9H4wAgb9uTqpxG5Z1g0pIr3FE",
  "unionid": "o0pqE6Fbr5M-exSu_PeL_sjwN44U"
}

¶ updateAvatar

Update the user avatar, the method automatically calls the wx.chooseImage to get the picture and upload the CDN of Authing, only one line of code calls.

¶ Example

const { photo } = await authing.updateAvatar();
console.log(photo);

¶ Best Practices

We recommend that the user uses a small program for the first time, use the loginByCode to get the Authing account corresponding to the small program account, if the account is bound to the mobile phone number, there is no need to request the user to authorize the mobile phone again. No. If the account does not bind the phone number, then call the loginByPhone method to request the user to authorize the mobile phone number.

After the user logs in, authing-wxapp-sdk, you can call thetoken, you can call authing.checkLoginStatus() Judging whether the user's token is valid, when token invalidates again Log in.

¶ Error handling

You can use try catch

try {
  const user = await authing.loginByEmail("test@example.com", "passw0rd");
} catch (error) {
  console.log(error.code); // 2004
  console.log(error.message); // User does not exist
}

Complete error code, please see document。

You can also specify onError unified capture all Authing request exception, such as the WeChat component displaying an error message using the wx.showModal.

const authing = new AuthenticationClient({
  userPoolId,
  onError: (code, message) => {
    wx.showModal({
      content: message,
      showCancel: false
    });
  }
});

¶ Get help

Join us on forum: #authing-chat (opens new window)