Directly call APIs in mini programs

Interaction flow

Prerequisites

Obtain an STS temporary access credential:

1. Grant permissions:

   Before obtaining an STS temporary access credential, the caller (a RAM user or RAM role) must be authorized to call STS operations. You can grant these permissions by using a RAM policy. For the setup steps and required policies, see Use an STS temporary access credential to access OSS. We recommend that you configure fine-grained authorization policies to avoid granting excessive permissions. For more information, see Custom policies for Vision Intelligence Open Platform.

   Important

   For the following steps, the caller (a RAM user or RAM role) must have the AliyunSTSAssumeRoleAccess permission (to call the STS AssumeRole operation) and the AliyunVIAPIFullAccess permission. The AliyunVIAPIFullAccess permission grants full management access to Vision Intelligence Open Platform APIs. For this example, we use this broad permission for simplicity. However, in a production environment, we highly recommend configuring more fine-grained authorization policies to mitigate security risks. For more information, see Custom policies for Vision Intelligence Open Platform.

2. Call the AssumeRole operation:

   Use the authorized RAM user or RAM role to call the AssumeRole operation and provide the required parameters. For detailed information about the operation and its parameters, see the official AssumeRole documentation.

3. Use the STS token:

   After successfully calling the AssumeRole operation, you receive an STS token that includes an AccessKeyId, an AccessKeySecret, and a SecurityToken, as shown in the code sample below. When you call other Alibaba Cloud service APIs, you must replace placeholders in your code, such as <ALIBABA_CLOUD_ACCESS_KEY_ID>, <ALIBABA_CLOUD_ACCESS_KEY_SECRET>, and <ALIBABA_CLOUD_SECURITY_TOKEN>, with the temporary AccessKeyId, AccessKeySecret, and SecurityToken from the STS token.

{
  "RequestId": "429D9967-C809-5A30-B65E-9B742CF*****",
  "AssumedRoleUser": {
    "Arn": "acs:ram::175805416243****:role/STStokenTestRole/STSsessionName",
    "AssumedRoleId": "39779315882322****:STSsessionName"
  },
  "Credentials": {
    "SecurityToken": "exampleToken",
    "AccessKeyId": "STS.exampleAccessKeyID",
    "AccessKeySecret": "exampleAccessKeySecret",
    "Expiration": "2024-06-12T03:21:29Z"
  }
}

Step 1: Configure basic parameters

The following code snippet, located in the utils/client.js file of the MiniprogramDemo, shows how to call the Alibaba Cloud RecognizeBankCard service.

1. Parameters:

   • miniProgramType: The type of the mini program that is making the call. Possible values are wx (WeChat), my (Alipay), or dd (DingTalk). Pass these as variables, not as string literals.

   • callback: A callback function that receives the request result after the HTTP request completes.

2. Alibaba Cloud credentials:

   • The accessKeyId, accessKeySecret, and securityToken are security credentials provided by Alibaba Cloud. In this code, you must replace the <ALIBABA_CLOUD_ACCESS_KEY_ID>, <ALIBABA_CLOUD_ACCESS_KEY_SECRET>, and <ALIBABA_CLOUD_SECURITY_TOKEN> placeholders with the temporary credentials provided by STS.

3. API endpoint and parameters:

   • endpoint: The API endpoint for the Alibaba Cloud OCR service. For bank card recognition, the endpoint is ocr.cn-shanghai.aliyuncs.com.

   • Action: The name of the specific API operation to request. In this example, it is RecognizeBankCard.

   • API_HTTP_METHOD: The recommended HTTP method. Here, it is POST.

   • API_VERSION: A string that specifies the API version, which indicates the release date of the Alibaba Cloud API you are using.

4. Build the request:

   • The code first sets a series of system parameters, including the signature method, AccessKeyId, signature version, and timestamp.

   • The SecurityToken is obtained from STS and must be included in the request.

   • The business parameter ImageURL is the URL of the bank card image to be recognized.

5. Make the API request:

   • Call the callApiRequest function, passing the mini program type, system parameters, HTTP method, API endpoint, and a callback function. Use the callback function to handle the API response.

For example, if you want to use the general segmentation feature, the SegmentCommonImage API documentation shows that this feature belongs to the segmentation and matting category (imageseg20191230) and its operation name is SegmentCommonImage. Change the endpoint to imageseg.cn-shanghai.aliyuncs.com (note that this domain must be added to the mini program's allowlist), change the Action to SegmentCommonImage, and keep the API_VERSION as 2019-12-30. The parameter for the image URL is still named ImageURL. When you retrieve the result, you get an ImageURL, which is the URL of the segmented image, not a bank card number.

npm install crypto-js

/**
 * ========================================================================================================================
 * This is an example for RecognizeBankCard.
 * Replace <ALIBABA_CLOUD_ACCESS_KEY_ID>, <ALIBABA_CLOUD_ACCESS_KEY_SECRET>, and <ALIBABA_CLOUD_SECURITY_TOKEN> with the temporary
 * AccessKeyId, AccessKeySecret, and SecurityToken obtained from Alibaba Cloud STS.
 * To call the RecognizeBankCard API, see https://www.alibabacloud.com/help/en/vision-intelligence/latest/recognizebankcard
 * ========================================================================================================================
 */
// Description of parameters:
// miniProgramType: The type of the mini program. For example, pass wx for WeChat, my for Alipay, or dd for DingTalk. Do not pass these as strings.
// callback: A callback function for the result.
function callRecognizeBankCard(miniProgramType, callback) {
  /**
  Replace <ALIBABA_CLOUD_ACCESS_KEY_ID>, <ALIBABA_CLOUD_ACCESS_KEY_SECRET>, and <ALIBABA_CLOUD_SECURITY_TOKEN> with the temporary
  AccessKeyId, AccessKeySecret, and SecurityToken obtained from the STS token data.
  You must grant the AliyunVIAPIFullAccess permission to the RAM user or RAM role. For more information, see https://www.alibabacloud.com/help/en/ram/user-guide/create-a-custom-policy
  */
  //AccessKeyId
  const accessKeyId = "<ALIBABA_CLOUD_ACCESS_KEY_ID>";
  //AccessKeySecret
  const accessKeySecret = "<ALIBABA_CLOUD_ACCESS_KEY_SECRET>";
  //SecurityToken
  const securityToken = "<ALIBABA_CLOUD_SECURITY_TOKEN>";
  // The endpoint is the API endpoint, which is category-specific. For API endpoints of different categories, see: https://www.alibabacloud.com/help/en/vision-intelligence/latest/endpoints
  const endpoint = "ocr.cn-shanghai.aliyuncs.com";
  // API Action, which is the feature name. Refer to the Action parameter in the specific algorithm's documentation. This example uses RecognizeBankCard: https://www.alibabacloud.com/help/en/vision-intelligence/latest/recognizebankcard
  const Action = "RecognizeBankCard";
  // The recommended API_HTTP_METHOD is POST.
  const API_HTTP_METHOD = "POST";
  // API_VERSION is the API version, which is category-specific. For API versions of different categories, see: https://www.alibabacloud.com/help/en/vision-intelligence/latest/api-version
  const API_VERSION = "2019-12-30";
  const request_ = {};
  //System parameters
  request_["SignatureMethod"] = "HMAC-SHA1",
  request_["SignatureNonce"] = signNRandom(),
  request_["AccessKeyId"] = accessKeyId,
  request_["SignatureVersion"] = "1.0",
  request_["Timestamp"] = getTimestamp(),
  request_["Format"] = "JSON",
  request_["RegionId"] = "cn-shanghai",
  request_["Version"] = API_VERSION,
  request_["Action"] = Action;
  request_["SecurityToken"] = securityToken;
  // Business parameters. Modify these according to the specific AI feature's API documentation.
  request_["ImageURL"] = "http://viapi-test.oss-cn-shanghai.aliyuncs.com/viapi-3.0domepic/ocr/RecognizeBankCard/yhk3.jpg";
  callApiRequest(miniProgramType, request_, API_HTTP_METHOD, endpoint, accessKeySecret, callback);
}

Step 2: Call API and calculate signature

The following code snippet implements the signing and request sending process for the Vision Intelligence Open Platform API. Signing is a common security measure for cloud services. It ensures that requests are not tampered with and originate from an authenticated user. For more information about the logic, see Request signature.

1. Generate a nonce and a timestamp:

   • signNRandom: Generates a random number to be used as a nonce for the signature.

   • getTimestamp: Generates the current UTC timestamp, formatted as an ISO 8601 compliant string.

   • pad2: Formats the time to ensure that the month, day, hour, minute, and second are all two-digit numbers.

2. Signature calculation helper functions:

   • ksort: Sorts the keys of the request parameters object in lexicographical order. This is a step in constructing the canonicalized request string.

   • createHmac: Hashes a string using HMAC-SHA1 with a specified key and encodes the result as a Base64 string. This is a key step in the signing process.

   • encode: URL-encodes a string and handles some special characters to comply with signature encoding requirements.

3. Signature and request string generation:

   • sha1: A wrapper function for HMAC-SHA1 signing of a string.

   • getSignature: Calculates the API request signature based on the request parameters, HTTP method, and AccessKeySecret.

   • objToParam: Converts a key-value pair object into a URL query string.

   • toQueryPair: Converts a single key-value pair into a part of a URL query string.

4. Generate the final request URL:

   • generateUrl: Generates the final, signed API request URL based on the HTTP request method, API endpoint, request parameters object, and AccessKeySecret.

5. Module export:

   • The callRecognizeBankCard method is exported via module.exports, allowing it to be imported and used in other JavaScript files.

/**
 * ========================================================================================================================
 * The following code is only for calculating the signature when calling the server API. For details on the logic, see: https://www.alibabacloud.com/help/en/pop/latest/signature-mechanisms
 * ========================================================================================================================
 */
// Random number
function signNRandom() {
  const Rand = Math.random()
  const mineId = Math.round(Rand * 100000000000000)
  return mineId;
};
// Timestamp
function getTimestamp() {
  let date = new Date();
  let YYYY = pad2(date.getUTCFullYear());
  let MM = pad2(date.getUTCMonth() + 1);
  let DD = pad2(date.getUTCDate());
  let HH = pad2(date.getUTCHours());
  let mm = pad2(date.getUTCMinutes());
  let ss = pad2(date.getUTCSeconds());
  return `${YYYY}-${MM}-${DD}T${HH}:${mm}:${ss}Z`;
}
function pad2(num) {
  if (num < 10) {
    return '0' + num;
  }
  return '' + num;
};
function ksort(params) {
  let keys = Object.keys(params).sort();
  let newParams = {};
  keys.forEach((key) => {
  newParams[key] = params[key];
  });
  return newParams;
};
function createHmac(stringToSign, key) {
  const CrypStringToSign = CryptoJS.HmacSHA1(CryptoJS.enc.Utf8.parse(stringToSign), key);
  const base64 = CryptoJS.enc.Base64.stringify(CrypStringToSign);
  return base64;
};
function encode(str) {
  var result = encodeURIComponent(str);
  return result.replace(/!/g, '%21')
  .replace(/'/g, '%27')
  .replace(/\(/g, '%28')
  .replace(/\)/g, '%29')
  .replace(/\*/g, '%2A');
};
function sha1(stringToSign, key) {
  return createHmac(stringToSign, key);
};
function getSignature(signedParams, method, secret) {
  var stringToSign = `${method}&${encode('/')}&${encode(signedParams)}`;
  const key = secret + "&";
  return sha1(stringToSign, key);
};
// Concatenate parameters
function objToParam(param) {
  if (Object.prototype.toString.call(param) !== '[object Object]') {
    return '';
  }
  let queryParam = '';
  for (let key in param) {
    if (param.hasOwnProperty(key)) {
      let value = param[key];
      queryParam += toQueryPair(key, value);
    }
  }
  return queryParam;
};
function toQueryPair(key, value) {
  if (typeof value == 'undefined') {
    return `&${key}=`;
  }
  return `&${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
};
function generateUrl(request, httpMethod, endpoint, accessKeySecret) {
  // Sort the keys in the parameters
  const sortParams = ksort(request);
  // Concatenate into parameters
  const sortQueryStringTmp = objToParam(sortParams);
  const sortedQueryString = sortQueryStringTmp.substring(1); // Remove the extra & at the beginning
  // Construct the string to be signed
  const Signature = getSignature(sortedQueryString, httpMethod, accessKeySecret)
  // The final signature must also be specially URL-encoded
  request["Signature"] = encodeURIComponent(Signature);
  // Generate the final valid request URL
  const finalUrl = "https://" + endpoint + "/?Signature=" + encodeURIComponent(Signature) + sortQueryStringTmp;
  return finalUrl;
}
// Export method
module.exports = {
  callRecognizeBankCard: callRecognizeBankCard
}

Step 3: Encapsulate and send the request

The following code snippet provides a basic framework for making an API request and handling the callback in a mini program.

1. Construct the URL: Use the generateUrl function to generate the complete API request URL, including the signature, based on the provided parameters.

2. Make the request: Call miniProgramType.request and pass a configuration object that includes:

   • url: The complete API request URL.

   • method: The request method, hardcoded as "POST" here.

   • header: Specifies the request headers. For example, Content-Type: application/json.

3. Handle a successful response: If the request is successful, the success callback is invoked, and the result is passed to the externally provided callback function.

4. Handle a failed response: If the request fails, the fail callback is invoked, and the error information is passed to the externally provided callback function.

// Request data
function callApiRequest(miniProgramType, request_, API_HTTP_METHOD, endpoint, accessKeySecret, callback) {
  const url = generateUrl(request_, API_HTTP_METHOD, endpoint, accessKeySecret);
  miniProgramType.request({
    url: url,
    method: 'POST',
    header: {
      "Content-Type": "application/json"
    },
    success: (result) => {
      // Get the result
      return typeof callback == "function" && callback(result.data)
    },
    fail: (error) => {
      // Get the error message
      return typeof callback == "function" && callback(error.data)
    }
  })
}

Step 4: Call the API service

The following code snippet shows how to call the Alibaba Cloud Vision Intelligence Open Platform's bank card recognition service from a mini program and handle the response.

1. Import the client module: Import the custom client module from the utils directory. This module likely contains the methods for calling Alibaba Cloud APIs.

2. Define the page logic: Use the mini program's Page method to define the page's data and logic. The initial page data includes the bank card number (cardNumber) and an error message (errorMessage).

3. Implement the API call: Define the callApi method within the page logic. This method uses the client module to make a call to the Alibaba Cloud bank card recognition API.

4. Handle the API response: In the callApi method, a callback function handles the API response. If an error is detected, the corresponding error message is displayed. If the call is successful, the recognized bank card number is displayed.

5. Update page data: Use the setData method to update the page data based on the API response, displaying either the bank card number or an error message.

const client = require("../../utils/client.js");
// index.js
Page({
  data: {
      cardNumber: '',
      errorMessage: '',
  },
  callApi: function() {
    client.callRecognizeBankCard(wx, function(result) {
      console.log(result);
      if(result.Code) {
        if (result.Code == 'InvalidAccessKeyId.NotFound') {
          this.setData({'errorMessage': 'Request error. Check if YOUR_ACCESS_KEY_ID and YOUR_ACCESS_KEY_SECRET are correctly set in your code.'});
        } else if(result.Code == 'InvalidApi.NotPurchase') {
          this.setData({'errorMessage': 'Request error. Your account has not activated the corresponding Vision Intelligence Open Platform category. Please activate it: https://www.alibabacloud.com/help/en/vision-intelligence/latest/activate-vision-intelligence-platform'});
        } else if(result.Code == 'Unauthorized') {
          this.setData({'errorMessage': 'Request error. Your RAM user has not been granted the AliyunVIAPIFullAccess permission. Please refer to https://www.alibabacloud.com/help/en/ram/user-guide/create-a-custom-policy'});
        } else if(result.Code == 'InvalidAction.NotFound') {
          this.setData({'errorMessage': 'Request error. Check if the API you are calling matches the category. For API and category relationships, see: https://www.alibabacloud.com/help/en/vision-intelligence/latest/activate-vision-intelligence-platform. Also check if it matches the endpoint. For category and endpoint relationships, see: https://www.alibabacloud.com/help/en/vision-intelligence/latest/endpoints'});
        } else {
          this.setData({'errorMessage': result.Message});
        }
      } else {
        // Get the bank card number. This is just an example. Refer to the documentation to get the output parameters you need.
        this.setData({'cardNumber': result.Data.CardNumber});
      }
    }.bind(this));
  }
})

Step 5: Configure the request-valid domain name

When making API requests from a mini program, configure the server domain name. Different AI categories have different endpoints. For more information, see Endpoints.

The following example shows how to configure the request-valid domain name for a WeChat mini program. On the Server Domain Name page in the WeChat Mini Program admin console, find the request-valid domain name configuration item, click Modify, and add the corresponding endpoint.

Interaction flow

Prerequisites

Obtain an STS temporary access credential:

1. Grant permissions:

   Before obtaining an STS temporary access credential, the caller (a RAM user or RAM role) must be authorized to call STS operations. You can grant these permissions by using a RAM policy. For the setup steps, see Use an STS temporary access credential to access OSS. We recommend that you configure fine-grained authorization policies to avoid granting excessive permissions. For more information, see Custom policies for Vision Intelligence Open Platform.

   Important

   For the following steps, the caller (a RAM user or RAM role) needs the following permissions: AliyunSTSAssumeRoleAccess (to call the STS AssumeRole operation), permissions to upload files to OSS (see Grant a RAM role permissions to upload files to OSS), and AliyunVIAPIFullAccess. The AliyunVIAPIFullAccess permission grants full management access to Vision Intelligence Open Platform APIs. For this example, we use this broad permission for simplicity. However, you should configure more fine-grained authorization policies to mitigate security risks. For more information, see Custom policies for Vision Intelligence Open Platform.

2. Call the AssumeRole operation:

   Use the authorized RAM user or RAM role to call the AssumeRole operation and provide the required parameters. For detailed information about the operation and its parameters, see the official AssumeRole documentation.

3. Use the STS token:

   After successfully calling the AssumeRole operation, you receive an STS token that includes an AccessKeyId, an AccessKeySecret, and a SecurityToken, as shown in the code sample below. When you call other Alibaba Cloud service APIs, you must replace placeholders in your code, such as <ALIBABA_CLOUD_ACCESS_KEY_ID>, <ALIBABA_CLOUD_ACCESS_KEY_SECRET>, and <ALIBABA_CLOUD_SECURITY_TOKEN>, with the temporary AccessKeyId, AccessKeySecret, and SecurityToken from the STS token.

{
  "RequestId": "429D9967-C809-5A30-B65E-9B742CF*****",
  "AssumedRoleUser": {
    "Arn": "acs:ram::175805416243****:role/STStokenTestRole/STSsessionName",
    "AssumedRoleId": "39779315882322****:STSsessionName"
  },
  "Credentials": {
    "SecurityToken": "exampleToken",
    "AccessKeyId": "STS.exampleAccessKeyID",
    "AccessKeySecret": "exampleAccessKeySecret",
    "Expiration": "2024-06-12T03:21:29Z"
  }
}

Step 1: Configure basic parameters

The following code snippet, located in the utils/client.js file of the MiniprogramDemo, shows how to call the Alibaba Cloud RecognizeBankCard service. You must replace placeholders in your code, such as <ALIBABA_CLOUD_ACCESS_KEY_ID>, <ALIBABA_CLOUD_ACCESS_KEY_SECRET>, and <ALIBABA_CLOUD_SECURITY_TOKEN>, with the temporary AccessKeyId, AccessKeySecret, and SecurityToken from the Alibaba Cloud STS token.

/**
 * For information on how to obtain an Alibaba Cloud STS token, see https://www.alibabacloud.com/help/en/oss/developer-reference/use-temporary-access-credentials-provided-by-sts-to-access-oss
 * Replace <ALIBABA_CLOUD_ACCESS_KEY_ID>, <ALIBABA_CLOUD_ACCESS_KEY_SECRET>, and <ALIBABA_CLOUD_SECURITY_TOKEN> with the temporary
 * AccessKeyId, AccessKeySecret, and SecurityToken obtained from the Alibaba Cloud STS token data.
 * You must grant the AliyunVIAPIFullAccess permission to the RAM user or RAM role. For more information, see https://www.alibabacloud.com/help/en/ram/user-guide/create-a-custom-policy
 */
//AccessKeyID
const accessKeyId = "YOUR_ACCESS_KEY_ID";
//AccessKeySecret
const accessKeySecret = "YOUR_ACCESS_KEY_SECRET";
// miniProgramType: The type of the mini program. For example, pass wx for WeChat, my for Alipay, or dd for DingTalk. Do not pass these as strings.
const miniProgramType = wx;
//SecurityToken
const securityToken = "<ALIBABA_CLOUD_SECURITY_TOKEN>";

Step 2: Get a temporary OSS STS token

The getOssStsToken function retrieves temporary credentials for uploading files to OSS. It calls the generic callApi utility, which constructs and signs a request to the Alibaba Cloud API. callApi handles system parameters like SignatureNonce (to prevent replay attacks) and the timestamp, then uses callApiRequest to send the final request.

/**
 * ========================================================================================================================
 * Get an OSS STS token. This uses the official Vision Intelligence Open Platform OSS bucket for temporary storage.
 * It is intended for debugging purposes only. Files are stored for one day.
 * For the principle of obtaining an ossStsToken, see the "Other languages" section of Scenario 2 in: https://www.alibabacloud.com/help/en/vision-intelligence/latest/obtaining-an-sts-token-for-an-oss-bucket
 * ========================================================================================================================
 */
function getOssStsToken(callback) {
  // The endpoint is the API endpoint, which is category-specific. For API endpoints of different categories, see: https://www.alibabacloud.com/help/en/vision-intelligence/latest/endpoints
  const endpoint = "viapiutils.cn-shanghai.aliyuncs.com";
  // API Action, which is the feature name. Refer to the Action parameter in the specific algorithm's documentation. This example uses RecognizeBankCard: https://www.alibabacloud.com/help/en/vision-intelligence/latest/recognizebankcard
  const Action = "GetOssStsToken";
  // API_VERSION is the API version, which is category-specific. For API versions of different categories, see: https://www.alibabacloud.com/help/en/vision-intelligence/latest/api-version
  const API_VERSION = "2020-04-01";
  callApi(endpoint, Action, API_VERSION, null, callback);
}
/**
 * ========================================================================================================================
 * Call any platform API by using a signature.
 * Signature documentation: https://www.alibabacloud.com/help/en/pop/latest/signature-mechanisms
 * ========================================================================================================================
 */
function callApi(endpoint, action, version, params, callback) {
  // The recommended API_HTTP_METHOD is POST.
  const API_HTTP_METHOD = "POST";
  const request_ = {};
  //System parameters
  request_["SignatureMethod"] = "HMAC-SHA1",
  request_["SignatureNonce"] = signNRandom(),
  request_["AccessKeyId"] = accessKeyId,
  request_["SignatureVersion"] = "1.0",
  request_["Timestamp"] = getTimestamp(),
  request_["Format"] = "JSON",
  request_["RegionId"] = "cn-shanghai",
  request_["Version"] = version,
  request_["Action"] = action;
  request_["SecurityToken"] = securityToken;
  // Business parameters. Modify these according to the specific AI feature's API documentation.
  if(params) {
    for(let key in params) {
      request_[key] = params[key];
    }
  }
  callApiRequest(miniProgramType, request_, API_HTTP_METHOD, endpoint, accessKeySecret, callback);
}

Step 3: Upload the file to OSS

The code snippet below shows how to upload a file to Alibaba Cloud OSS and call any Alibaba Cloud API service from a mini program (such as WeChat, Alipay, or DingTalk).

uploadToTempOss function:

1. Generate form data for the upload: Call the getFormDataParams function to get the form data, including the signature, policy, and security token.

2. Construct the upload path: Create a storage path for the file in OSS, combining the user's AccessKeyId, a random string, and the file name.

3. Upload the file using the mini program API: Send the upload request using the mini program's uploadFile interface, including the generated form data and file path.

4. Handle the upload result: If the upload is successful (based on the response status code), return the complete URL of the file. If it fails, print an error message.

callApiRequest function:

1. Generate a signed request URL: Use the generateUrl function to sign the request parameters and get the complete request URL.

2. Make the API request: Send the request to the Alibaba Cloud API service using the mini program's request interface.

3. Handle the API response: Call the provided callback function to process the returned result, whether it is a successful response or an error.

/**
 * ========================================================================================================================
 * Process files and URLs by uploading them to the official Vision Intelligence Open Platform OSS bucket for temporary storage.
 * This method is for debugging purposes only. Files are stored for one day.
 * ========================================================================================================================
 */
// Use oss-client-sdk for file upload
function uploadToTempOss(ossStsToken, tempFilePath, fileName, callback) {
  const host = 'https://viapi-customer-temp.oss-cn-shanghai.aliyuncs.com';
  let formDataParams = getFormDataParams(ossStsToken.AccessKeyId,ossStsToken.AccessKeySecret,ossStsToken.SecurityToken);
  const signature = formDataParams.signature;
  const ossAccessKeyId = ossStsToken.AccessKeyId;
  const policy = formDataParams.policy;
  const key = accessKeyId+'/'+getNonce(6)+'/'+fileName;
  const securityToken = formDataParams['x-oss-security-token']; 
  miniProgramType.uploadFile({
    url: host, // URL of the developer's server.
    filePath: tempFilePath,
    name: 'file', // Must be 'file'.
    formData: {
      key,
      policy,
      OSSAccessKeyId: ossAccessKeyId,
      signature,
      'x-oss-security-token': securityToken // Required when using an STS signature.
    },
    success: (res) => {
      if (res.statusCode === 204 || res.statusCode === '204') {
        let result = 'https://viapi-customer-temp.oss-cn-shanghai.aliyuncs.com/'+key;
        callback && callback(result);
      } else {
        console.log('upload error', res);
      }
    },
    fail: err => {
      console.log(err);
    }
  });
}
// Request data
function callApiRequest(miniProgramType, request_, API_HTTP_METHOD, endpoint, accessKeySecret, callback) {
  const url = generateUrl(request_, API_HTTP_METHOD, endpoint, accessKeySecret);
  miniProgramType.request({
    url: url,
    method: 'POST',
    header: {
      "Content-Type": "application/json"
    },
    success: (result) => {
      // Get the result
      return typeof callback == "function" && callback(result.data)
    },
    fail: (error) => {
      // Get the error message
      return typeof callback == "function" && callback(error.data)
    }
  })
}

Step 4: Call the API with the OSS URL

The following code snippet shows how to get the OSS URL after an upload and then call the Vision Intelligence Open Platform API. The procedure is the same as calling the API as described in Scenario 1: File in Shanghai OSS. The code for each step is encapsulated. For the complete sample code, download the MiniprogramDemo.

1. Prepare the parameters for the API call:

   • Endpoint: The API endpoint, which is ocr.cn-shanghai.aliyuncs.com.

   • Action: The API operation name, which is RecognizeBankCard, indicating the bank card recognition service.

   • API Version: The API version, which is 2019-12-30.

   • Ensure that you grant the necessary permissions to the RAM user or RAM role to call the Vision Intelligence Open Platform API. See Grant permissions in the prerequisites section.

2. Construct the request parameters object:

   The request_ object contains the system parameters required for the API call (such as signature method, timestamp, and format) and the business parameters (in this case, the ImageURL of the bank card image to be recognized).

3. Make the API request:

   The encapsulated callApi function is called, passing the prepared request parameters, API endpoint, and a callback function. The callback function is used to handle the API response.

In the utils/client.js file, the endpoint, Action, API_VERSION, and request_["ImageURL"] parameters in the callRecognizeBankCard function are business-specific. For example, if you want to use the general segmentation feature, the SegmentCommonImage documentation shows that this feature belongs to the segmentation and matting category (imageseg20191230) and its operation name is SegmentCommonImage. Change the endpoint to imageseg.cn-shanghai.aliyuncs.com (note that this domain must be added to the mini program's allowlist), change the Action to SegmentCommonImage, and keep the API_VERSION as 2019-12-30. The name of the parameter in request_["ImageURL"] is still ImageURL. When you retrieve the result, you will get an ImageURL, which in this case is the address of the segmented image, not a bank card number.

/**
 * ========================================================================================================================
 * This is an example for RecognizeBankCard.
 * To call the RecognizeBankCard API, see https://www.alibabacloud.com/help/en/vision-intelligence/latest/recognizebankcard
 * ========================================================================================================================
 */
// Description of parameters:
// imageUrl: The URL of the image.
// callback: A callback function for the result.
function callRecognizeBankCard(imageUrl, callback) {
  // The endpoint is the API endpoint, which is category-specific. For API endpoints of different categories, see: https://www.alibabacloud.com/help/en/vision-intelligence/latest/endpoints
  const endpoint = "ocr.cn-shanghai.aliyuncs.com";
  // API Action, which is the feature name. Refer to the Action parameter in the specific algorithm's documentation. This example uses RecognizeBankCard: https://www.alibabacloud.com/help/en/vision-intelligence/latest/recognizebankcard
  const Action = "RecognizeBankCard";
  // The recommended API_HTTP_METHOD is POST.
  const API_HTTP_METHOD = "POST";
  // API_VERSION is the API version, which is category-specific. For API versions of different categories, see: https://www.alibabacloud.com/help/en/vision-intelligence/latest/api-version
  const API_VERSION = "2019-12-30";
  const params = {};
  // Business parameters. Modify these according to the specific AI feature's API documentation.
  params["ImageURL"] = imageUrl;
  callApi(endpoint, Action, API_VERSION, params, callback);
}

Step 5: Configure the request-valid domain name

When making API requests from a mini program, configure the server domain name. Different AI categories have different endpoints. For more information, see Endpoints.

The following example shows how to configure the request-valid domain name for a WeChat mini program.