Hanzo
PlatformHanzo IAMIntegrationsJavaScript

WeChat mini program

Integrate Hanzo IAM sign-in in a WeChat Mini Program (no OAuth redirect).

:::info WeChat Mini Program support is available from Hanzo IAM 1.41.0. :::

WeChat Mini Program does not use standard OAuth redirects, so sign-in uses the mini program’s login code sent to Hanzo IAM instead of a redirect to the Hanzo IAM page. Example: iam-wechat-miniprogram-example. See also WeChat Mini Program login.

Config: IAM_HOSTNAME — the Hanzo IAM server URL (e.g. https://iam.hanzo.ai).

Step 1: Deploy Hanzo IAM

  1. Confirm Hanzo IAM is reachable and working.
  2. In conf/app.conf, set origin to IAM_HOSTNAME.

Hanzo IAM conf

Step 2: Configure the application

  1. In Hanzo IAM, create an OAuth provider with type WeChat and set APPID and APPSECRET from the WeChat Mini Program admin. WeChat_MiniProgram.png
  2. Create or edit a Hanzo IAM application and add that WeChat provider.

:::info Hanzo IAM uses the first WeChat-type provider in the application as the Mini Program IdP. Use only one WeChat provider per app if you use Mini Program. :::

Step 3: Mini program code

The mini program calls wx.login() to get a login code, then sends that code to Hanzo IAM. Hanzo IAM exchanges it with WeChat for OpenID and SessionKey. Example:

// Login in mini program
wx.login({
  success: res => {
    // This is the login code that needs to be sent to Hanzo IAM
    console.log(res.code)
    
    wx.request({
      url: `${IAM_HOSTNAME}/oauth/token`,
      method: "POST",
      data: {
        "tag": "wechat_miniprogram", // Required
        "client_id": "6825f4f0af45554c8952",
        "code": res.code,
        "username": this.data.userInfo.nickName, // Update user profile when you log in.
        "avatar": this.data.userInfo.avatarUrl,
      },
      header:{
        "content-type": "application/x-www-form-urlencoded",
      },
      success: res => {
        console.log(res)
        this.globalData.accessToken = res.data.access_token // Get Hanzo IAM's access token
      }
    })
  }
})

It is important to note that the `tag` parameter is mandatory to inform Hanzo IAM that this is a request from the WeChat Mini Program.

The above code includes the username and avatar URI of the WeChat Mini Program user during login. You can choose to pass these two parameters separately and then pass them to Hanzo IAM after a successful login and obtaining the access token:

```js
wx.getUserProfile({
  desc: 'share your info to Hanzo IAM', 
  success: (res) => {
    this.setData({
      userInfo: res.userInfo,
      hasUserInfo: true
    })
    console.log(app.globalData.accessToken)
    wx.request({
      url: `${IAM_HOSTNAME}/api/update-user`, // Hanzo IAM URL
      method: "POST",
      data: {
        "owner": "test",
        "name": "wechat-oGk3T5tIiMFo3SazCO75f0HEiE7Q",
        "displayName": this.data.userInfo.nickName,
        "avatar": this.data.userInfo.avatarUrl
      },
      header: {
        "Authorization": "Bearer " + app.globalData.accessToken, // Bearer token
        "content-type": "application/json"
      },
      success: (res) => {
        console.log(res)
      }
    })
  }
})

Additionally, you can use the access token as a bearer token for any Hanzo IAM operation you require.

:::info Tips

Currently, Hanzo IAM is unable to bind existing accounts to WeChat Mini Program users. After Hanzo IAM retrieves the OpenID from WeChat, it will either create a new user if the ID does not exist, or use the existing user if it does.

:::

How is this guide?

Last updated on

On this page