Integrate with an Alipay Mini Program

Server-side integration

Your business server calls an Alibaba Cloud API to dynamically generate a short-lived session token. The URL containing the token is sent to the mini program frontend for secure access.

Architecture and workflow

1. Configure the AI assistant to use token-based authentication.

2. The mini program calls your server-side API to obtain the URL for the web-view page.

3. Your server retrieves the current Alipay user's information and calls the Alibaba Cloud API to generate a session token. The server then appends the returned token to the AI assistant's page URL, for example, https://xxxxxx?access_session_token=xxxxxxxxxx, and returns the complete URL to the frontend.

4. The mini program uses a server-generated URL in its web-view component to access an H5 page.

Frontend implementation

You can refer to the following sample code:

• index.axml

  <view class="page">
    <view >  
      <web-view id="web-view-1" src="{{src}}" onMessage="onmessage"></web-view>
    </view>
  </view>

• index.js

  Page({
    data:{
    },
    async onLoad(){
      this.webviewContext = my.createWebViewContext('web-view-1');
      this.getUrl();
    },
  
    getUrl() {
      // Call the server-side API to get the URL
      const url = callServerSideAPI
      this.setData({
        src: url
      });
    }
  })

Server-side implementation

You can refer to the official Alibaba Cloud sample code.

On the left side of the page, you can configure request parameters such as ChatbotId, IntegratedId, and UserId. The right side displays sample code in your chosen programming language (such as Java, TypeScript, Go, or Python) that you can run directly or download as a complete project.

Client-side integration

Configure integration information

1. Log on to the Alipay mini program Open Platform. Find your mini program and click Development Settings > View to view the interface signing method. Obtain the Alipay integration credentials required by the AI assistant: App ID, App Private Key, and Alipay Public Key.

1. On the AppFlow integration page, click Alipay Mini Program. Enter your Alipay mini program credentials, select the page to bind, and click the button to generate a web page. The resulting URL is the src value for the mini program web-view component.

Frontend implementation

The Alipay mini program frontend must implement the following methods:

1. Obtain the user authorization code by calling my.getAuthCode with scopes: ['auth_base', 'auth_user'].

2. If the AI assistant requires user information:

   1. In the previous step, you set scops=auth_user and called my.getAuthUserInfo to request user information authorization.

   2. Implement the onmessage listener method. When a message with event type=userInfo is received to authorize a request for user information, POST the user information to the AI assistant page. For details, see the sample code:

   • index.axml

     <view class="page">
       <view >  
         <web-view id="web-view-1" src="{{src}}" onMessage="onmessage"></web-view>
       </view>
     </view>

   • index.js

     Page({
       data:{
       },
       async onLoad(){
         this.webviewContext = my.createWebViewContext('web-view-1');
         this.login();
       },
       onmessage(event){
         console.log("Received message from web-view", event.detail);
         if (event && event.detail && event.detail.type == 'userInfo') {
           this.getUserInfo();
         } 
       },
     
       // POST user information to the H5 page
       getUserInfo() {
         console.log("Getting user info",this.data.userInfo)
         this.webviewContext.postMessage(
           {
             type: 'userInfo',
             data: {
               userName : this.data.userInfo.nickName,
               avatar : this.data.userInfo.avatar,
             }
           }
         )
       },
       login() {
         my.getAuthCode({
           // scopes: "auth_user"
           scopes: 'auth_user', // or ['auth_base', 'auth_user']
           success: (res) => {
             console.log('Successfully obtained auth code', res);
             console.log('Auth code:', res.authCode);
             console.log('Failed auth scopes:', res.authErrorScopes);
             console.log('Successful auth scopes:', res.authSuccessScopes);
             // Set user information
             my.getAuthUserInfo({
               fail: (error) => {
                 console.error('getAuthUserInfo', error);
               },
               success: (userInfo) => {
                 console.log(`userInfo:`, userInfo);
                 this.setData({
                   userInfo: userInfo,
                   src: "https://xxxxx/webhook/home/xxxxxx/index?code=" + res.authCode
                 });
               }
             });
           
           },
           fail: (error) => {
             console.log('Failed to obtain auth code:', error);
           },
           complete: () => {
             console.log('API call completed (regardless of success or failure)');
           }
         },  )
       }
     })