WeChat mini program

Overview and resources

The WeChat mini program plug-in is similar to a web plug-in, and the server-side deployment needs to be completed first. This part describes the process of using the plug-in of the GeeTest mini program;
the configuration parameters in the document and the API method demo can be obtained on GitHub (demo address).

Environmental requirements

Installation

Preparation

Server side deployment needs to be done first, see (server deployment documentation)

Plug-in application

Before using plug-ins, you should first add plug-ins in “Settings-Third Party Services-Plug-in Management” in the background of the mini program management.
Developers can log in to the mini program management background, find and add captcha plug-ins through appid (wx1629d117cf9be937), and wait for GeeTest to approve the application.

Plug-in package introduction

Before using plug-ins in the page, you need to declare the plug-ins you need to use in the project app.json.

It is recommended to use the latest version of the plug-in. The latest version viewing method: WeChat Developer Tools-> Details-> Basic Information-> Plug-in Information

Code sample:

{
  "plugins": {
    "captcha4": {
      "version": "1.0.0",
      "provider": "wx1629d117cf9be937"
    }
  }
}

Use plug-in

The method of using plug-ins is similar to that of ordinary custom components. Use the plugin:// protocol to indicate the reference name of the plug-in and the name of the custom component when defining the custom component to be introduced in the page .json file.

Code sample:

{
  "usingComponents": {
    "captcha4": "plugin://captcha4/captcha4"
  }
}

Template insertion

Insert captcha4 template in wxml; the parameters in the example are required parameters, and refer to the API documentation for other extended parameters.

Code sample:

<captcha4 id="captcha" wx:if="{{loadCaptcha}}" captchaId="{{captchaId}}"  bindSuccess="captchaSuccess" />

Initialization

When you need to render the plug-in, use setData to pass in the necessary parameters to initialize.

Code sample:

onLoad: function() {
     this.setData({ loadCaptcha:true,captchaId:'wxxxxxxxxxxxx'})
 }

Obtain a success certificate

After the captcha is successfully completed, the user-defined captchaSuccess function will be triggered, and the verification result will be stored in the result (where the user can customize it), which will be extracted and uploaded when waiting for the second verification.

Code sample:

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

Secondary validation

The user clicks the submit button to trigger submission for secondary validation.

Code sample:

captchaValidate: function(){
    var self = this;
    var data = self.data.result; // Get the verification result stored when the verification code is completed

    if(typeof data !== 'object') {
      console.log("Please complete verification first！")
      return
    }

    // Submit the result to the user server for secondary verification
    wx.request({
        url: "API2接口（See service-side deployments for details）",
        method: 'POST',
        dataType: 'json',
        data: Object.assign({},data, {
            captcha_id: self.data.captchaId
        }),

        success: function (res) {
            wx.showToast({
                title: res.data.result
            })
        },
        fail: function () {
            console.log('error')
        }
    })
}

Configuration parameters

Configuration parameter here refers to the value passed in when setData is called during initialization.

The following are the required parameters, which are recommended to be filled in according to the above sample code:

Developers only need to pass in these configuration parameters returned by the server SDK as shown in the demo.

These are the parameters that must be configured. For optional configuration parameters, refer to the parameter configuration of MiniProgram API.