Alipay mini program integration

Environment requirements

Download the SDK

Log on to the Phone Number Verification Service console. On the Overview page, find the API&SDK area on the right and click Download Now. On the API&SDK page, download and decompress the SDK as instructed.

Sample demo

A sample demo is available for integrating the Captcha feature into an Alipay mini program. Refer to the sample code in the demo to quickly understand the integration steps. To download the demo, see Alipay mini program integration demo.

Create a verification plan

1. Log on to the Phone Number Verification Service console.

2. In the left navigation pane, choose Integrated Verification (Based on Atomic Capabilities) > Captcha Service > Captcha Plan Management.

3. On the Captcha Plan Management page, click Add Captcha Plan.

   Enter a Plan Name, set Client Type to H5, and create the Captcha plan. This provides the key parameters, such as appId and appKey.

   Note

   The Client Type setting is for tagging purposes only and does not affect the use of the plan ID.

Import the component

1. Add the domain name https://captcha.alicaptcha.com to the whitelist in the backend of the Alipay mini program.

2. In the Alipay Developer Tool, go to Details > Mini Program Configuration to enable component2.

3. In the xxxx.json file of the page that requires verification, import the component. The following code provides an example. For more information, see the index.json file in the demo.

   {  
      "usingComponents": {
       "captcha4": "/component/captcha4/captcha4"
     }
   }

Initialization

In the xxxx.axml file of the page that requires verification, import the component. The parameters in the following example are required.

<captcha4  ref="captcha" my:if="{{loadCaptcha}}"  captchaId="{{captchaId}}"/>

Component parameters:

The following code shows how to bind an event listener. For complete event descriptions and code examples, see Event descriptions later in this topic.

<captcha4
    id="captcha"
    my:if="{{loadCaptcha}}"
    captchaId="{{captchaId}}"
    onSuccess="captchaSuccess"
    onReady="captchaReady"
    onClose="captchaClose"
    onError="captchaError"
    onFail="captchaFail"
/>

In buttonless mode, you must manually call the showCaptcha method to trigger the Captcha verification. The following code provides an example. For more information, see the index.js file in the demo.

captcha(ref){ // Get the ref
    this.captcha = ref
}
verify: function () { // Open the Captcha
     this.captcha.showCaptcha()
},

Obtain the success credential

After the Captcha is successfully completed, the user-defined captchaSuccess function is triggered. Store the verification result in the result variable. You can use a custom storage method. The result is then fetched and uploaded for secondary authentication. In buttonless mode, you can perform secondary authentication directly at this step.

captchaSuccess: function(result) {
    console.log("captcha-Success!");
    this.setData({
        result: result
    })
}

Submit for secondary validation

When the user clicks the submit button, secondary validation is triggered.

captchaValidate: function() {
    var self = this;
    var data = self.data.result; // Get the verification result stored when the Captcha was completed
    
    if (typeof data !== 'object') {
        console.log("Please complete the verification first!");
        return;
    }
    
    // Submit the result to your server for secondary validation
    my.request({
        url: "your_business_interface", // Replace with the actual URL
        method: 'POST',
        dataType: 'json',
        data: Object.assign({}, data, {
            captcha_id: self.data.captchaId
        }),
        success: function(res) {
            my.showToast({
                title: res.data.result
            });
        },
        fail: function() {
            console.log('error');
        }
    });
}