日本熟妇hd丰满老熟妇,中文字幕一区二区三区在线不卡 ,亚洲成片在线观看,免费女同在线一区二区

AI 助理
備案控制臺
文檔
輸入文檔關鍵字查找
首頁 驗證碼 驗證碼2.0 操作指南 小程序接入 微信小程序接入

微信小程序接入

更新時間：
我的收藏

在控制臺添加驗證場景后，您需要在使用驗證功能的微信小程序頁面中，集成驗證碼初始化代碼，實現微信小程序接入。本文介紹如何集成驗證碼初始化代碼。

前提條件

微信小程序原生語言接入

在使用插件前，首先要在小程序管理后臺設置 > 第三方服務 > 插件管理中添加插件。開發者可登錄小程序管理后臺，通過 appid （wxbe275ff84246f1a4）查找插件并添加。

微信小程序1

步驟一：集成插件

  1. 引入驗證碼小程序插件。

    頁面中使用插件前，需要先在項目app.json中聲明阿里云驗證碼小程序插件。代碼示例如下：

    說明

    插件版本建議使用最新版本，查看最新版本方法：微信開發者工具 > 詳情 > 基本信息 > 插件信息 

    {
  "plugins": {
    "AliyunCaptcha": {
      "version": "2.0.0", //請選擇小程序插件最新版本
      "provider": "wxbe275ff84246f1a4"
    }
  }
}

  2. 引入驗證碼小程序組件。

    使用插件提供的自定義組件，需要在頁面或組件的json 文件中使用plugin://協議指明插件的引用名和自定義組件名。代碼示例如下：

    {
  "usingComponents": {
    "aliyun-captcha": "plugin://AliyunCaptcha/captcha"
  }
}

步驟二：模板插入

wxml中插入aliyun-captcha模板，示例中的參數為必傳參數。

以登錄場景為例：

<view class="captchapage-container">
  <view class="input-group">
    <view class="label">用戶名：</view>
    <input class="input" type="text" placeholder="請輸入用戶名" bindinput="inputUsername" />
  </view>
  <view class="input-group">
    <view class="label">密碼：</view>
    <input class="input" type="password" placeholder="請輸入密碼" bindinput="inputPassword" />
  </view>
  <aliyun-captcha id="captcha-element" wx:if="{{loadCaptcha}}" props="{{pluginProps}}" />
  <!-- 在登錄按鈕上綁定login方法，點擊時在login方法內調用插件實例方法展示驗證碼 -->
  <button class="login-btn" bindtap="login">登錄</button>
</view>

步驟三：插件初始化

在需要使用插件的時候，使用setData傳入必傳參數進行初始化。

以登錄場景為例：

// 獲取驗證碼插件實例
var AliyunCaptchaPluginInterface = requirePlugin('AliyunCaptcha');

// 業務請求(帶驗證碼校驗)回調函數
/**
 * @name captchaVerifyCallback
 * @function
 * 請求參數：由驗證碼腳本回調的驗證參數，不需要做任何處理，直接傳給服務端即可
 * @params {string} captchaVerifyParam
 * 返回參數：字段名固定，captchaResult為必選；如無業務驗證場景時，bizResult為可選
 * @returns {{captchaResult: boolean, bizResult?: boolean|undefined}} 
 */
var captchaVerifyCallback = async function (captchaVerifyParam) {
  console.log(this.data);
  // 業務請求代碼...
  const result = await customFetch('https://xxxx/demo/bizquery', {
      method: 'POST',
      data: {
        captchaVerifyParam, // 攜帶上驗證參數
        userName: this.data.username, // 通過this.data獲取業務數據
        password: this.data.password,
      },
    });
  console.log(captchaVerifyParam);
  return {
    captchaResult: result.captchaVerifyResult, // 驗證碼驗證是否通過，boolean類型，必選
    bizResult: 從result獲取您的業務驗證結果, // 業務驗證是否通過，boolean類型，可選；若為無業務驗證結果的場景，bizResult可以為空
  };
};

// 業務請求驗證結果回調函數
var onBizResultCallback = function (bizResult) {
  if (bizResult === true) {
    // 業務驗證通過后的邏輯，如提示通過
    wx.showToast({
      title: '業務驗證通過！',
      duration: 2000,
      icon: 'success',
    });
  } else {
  // 業務驗證不通過后的邏輯，如提示不通過
    wx.showToast({
      title: '業務驗證不通過！',
      duration: 2000,
      icon: 'error',
    });
  }
};

async function customFetch(url, option) {
  option.url = url;
  return new Promise((resolve, reject) => {
    wx.request({
      ...option,
      success(res) {
        resolve(res.data);
      },
      fail(res) {
        reject(new Error(res.toString()));
      },
    });
  });
}

// 頁面邏輯
Page({
  data: {
    username: '',
    password: '',
    loadCaptcha: false, // 是否加載驗證碼
  },
  onLoad: function(options) {
    // 構造插件參數
    var pluginProps = {
      SceneId: 'xxxxx',
      mode: 'popup',
      // 固定寫法，需要綁定this，保證回調函數中的this是當前頁面指向的this，以此在回調函數中通過this.data獲取業務參數。
      captchaVerifyCallback: captchaVerifyCallback.bind(this), 
      // 固定寫法，需要綁定this，保證回調函數中的this是當前頁面指向的this，以此在回調函數中通過this.data獲取業務參數。
      onBizResultCallback: onBizResultCallback.bind(this), 
      slideStyle: {
        width: 540, // 寬度默認為540rpx
        height: 60, // 高度默認為60rpx
      },
      language: 'cn',
      region: 'cn',
    };
    this.setData({
      loadCaptcha: true, // 可以用來控制加載/重載驗證碼
      pluginProps,
    });
  },
  inputUsername: function(e) {
    this.setData({
      username: e.detail.value
    });
  },
  inputPassword: function(e) {
    this.setData({
      password: e.detail.value
    });
  },
  login: function() {
    const { username, password } = this.data;
    // 可以做自定義業務校驗
    if (username && password) {
      // 彈出式下調用實例方法展示驗證碼
      AliyunCaptchaPluginInterface.show();
    } else {
      wx.showToast({
        title: '請填寫用戶名和密碼',
        icon: 'none'
      });
    }
  },
})

Taro框架小程序插件接入

說明

Taro接入時，暫時只支持React接入。

步驟一：集成插件

  1. 引入驗證碼小程序插件。

    頁面中使用插件前，需要先在項目app.config.js中聲明阿里云驗證碼小程序插件。代碼示例如下：

    說明

    插件版本建議使用最新版本，查看最新版本方法：微信開發者工具 > 詳情 > 基本信息 > 插件信息 

    {
  "plugins": {
    "AliyunCaptcha": {
      "version": "2.0.0", //請選擇小程序插件最新版本
      "provider": "wxbe275ff84246f1a4"
    }
  }
}

  2. 引入驗證碼小程序組件。

    使用插件提供的自定義組件，需要在頁面或組件的index.config.js文件中使用plugin://協議指明插件的引用名和自定義組件名。代碼示例如下：

    export default {
  usingComponents: {
    'aliyun-captcha': 'plugin://AliyunCaptcha/captcha',
  },
};

步驟二：代碼集成

以登錄場景為例：

import Taro from '@tarojs/taro';
import { useEffect, useState, useRef } from 'react';
import { View, Text, Input, Button, Form } from '@tarojs/components';
import './index.scss';

// 獲取驗證碼插件實例
const AliyunCaptchaPluginInterface = Taro.requirePlugin('AliyunCaptcha');

// 業務參數需要維護全局變量來在captchaVerifyCallback中使用，使用state無法生效
// let userName = '';
// let passWord = '';

function Index() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [loadCaptcha, setLoadCaptcha] = useState(false);
  // 業務參數也可以使用ref來維護，推薦
  const bizParams = useRef({
    username: '',
    password: '',
  });

  useEffect(() => {
    setLoadCaptcha(true); // 可以用來控制加載/重載驗證碼
  }, []);

  const handleUsernameChange = (e) => {
    setUsername(e.target.value); // 更新state
    bizParams.current.username = e.target.value; // 同時更新ref
    // userName = e.target.value; // 或者更新全局變量
  };
  
  const handlePasswordChange = (e) => {
    setPassword(e.target.value); // 更新state
    bizParams.current.password = e.target.value; // 同時更新ref
    // passWord = e.target.value; // 或者更新全局變量
  };

  const login = () => {
    // 可以做自定義業務校驗
    if (username && password) {
      // 彈出式下調用實例方法展示驗證碼
      AliyunCaptchaPluginInterface.show();
    } else {
      Taro.showToast({
        title: '請填寫用戶名和密碼',
        icon: 'none'
      });
    } 
  }


  // 業務請求(帶驗證碼校驗)回調函數
  /**
   * @name captchaVerifyCallback
   * @function
   * 請求參數：由驗證碼腳本回調的驗證參數，不需要做任何處理，直接傳給服務端即可
   * @params {string} captchaVerifyParam
   * 返回參數：字段名固定，captchaResult為必選；如無業務驗證場景時，bizResult為可選
   * @returns {{captchaResult: boolean, bizResult?: boolean|undefined}} 
   */
  async function captchaVerifyCallback(captchaVerifyParam) {
    console.log(bizParams.current); // 業務參數ref
    // console.log(userName, passWord); // 或者使用全局業務參數
    // 業務請求代碼...
    const result = await customFetch('https://xxxx/demo/bizquery', {
      method: 'POST',
      mode: 'cors',
      enableHttp2: true,
      enableQuic: true,
      data: {
        captchaVerifyParam, // 攜帶上驗證參數
        userName: bizParams.current.username, // 通過ref獲取業務數據
        password: bizParams.current.password, // 通過ref獲取業務數據
        // 或者通過全局變量獲取業務數據
        // username: userName, // 通過全局變量獲取業務數據
        // password: passWord, // 通過全局變量獲取業務數據
      },
    });
    return {
      captchaResult: result.captchaVerifyResult, // 驗證碼驗證是否通過，boolean類型，必選
      bizResult: 從result獲取您的業務驗證結果, // 業務驗證是否通過，boolean類型，可選；若為無業務驗證結果的場景，bizResult可以為空
    };
  }

  // 業務請求驗證結果回調函數
  function onBizResultCallback(bizResult) {
    if (bizResult === true) {
      // 業務驗證通過后對邏輯，如提示通過
      Taro.showToast({
        title: '業務驗證通過！',
        duration: 2000,
        icon: 'success',
      });
    } else {
    // 業務驗證不通過后的邏輯，如提示不通過
      Taro.showToast({
        title: '業務驗證不通過！',
        duration: 2000,
        icon: 'error',
      });
    }
  }

  async function customFetch(url, option) {
    option.url = url;
    return new Promise((resolve, reject) => {
      Taro.request({
        ...option,
        success(res) {
          resolve(res.data);
        },
        fail(res) {
          reject(new Error(res.toString()));
        },
      });
    });
  }
  
  // 構造插件參數
  const pluginProps = {
    SceneId: 'xxxxx',
    mode: 'popup',
    captchaVerifyCallback,
    onBizResultCallback,
    slideStyle: {
      width: 540, // 寬度默認為540rpx
      height: 60, // 高度默認為60rpx
    },
    language: 'cn',
    region: 'cn',
  };

  return (
    <View className="captcha-page">
      <Form>
        <View className="input-group">
          <Text>賬號：</Text>
          <Input
            type="text"
            placeholder="請輸入賬號"
            value={username}
            onInput={handleUsernameChange}
          />
        </View>
        <View className="input-group">
          <Text>密碼：</Text>
          <Input
            type="password"
            placeholder="請輸入密碼"
            value={password}
            onInput={handlePasswordChange}
          />
        </View>
        {/* 在登錄按鈕上綁定login方法，點擊時在login方法內調用插件實例方法展示驗證碼 */}
        <Button style={{ margin: '20px' }} id="captcha-button" onClick={login}>登錄</Button>
      </Form>
      {loadCaptcha && <aliyun-captcha id="captcha-element" props={pluginProps} />}
    </View>
  );
}

export default Index;

uni-app接入小程序

說明

暫時只支持uni-app中使用Vue3接入。

步驟一：集成插件

  1. 引入驗證碼小程序插件。

    頁面中使用插件前，需要先在項目manifest.json中聲明阿里云驗證碼小程序插件。代碼示例如下：

    說明

    插件版本建議使用最新版本，查看最新版本方法：微信開發者工具 > 詳情 > 基本信息 > 插件信息 

    "mp-weixin": {
  "plugins": {
    "AliyunCaptcha": {
      "version": "2.0.0",
      "provider": "wxbe275ff84246f1a4",
    }
  }
}

  2. 引入驗證碼小程序組件。

    使用插件提供的自定義組件，和使用普通自定義組件的方式相仿。在 page.json 文件內對應頁面的style 節點下配置需要引入的自定義組件時，使用plugin://協議指明插件的引用名和自定義組件名，代碼示例如下：

    {
  "path": "pages/CaptchaPage",
  "style": {
    "mp-weixin": {
        "usingComponents": {
            "aliyun-captcha": "plugin://AliyunCaptcha/captcha"
        }
    }
  }
}

步驟二：代碼集成

在.vue 文件中的<template>中插入aliyun-captcha組件。在需要使用插件的時候，在<script>代碼中進行初始化。

以登錄場景為例：

<template>
  <view class="captchapage-container">
    <view class="input-group">
      <view class="label">用戶名：</view>
      <input
        class="input"
        type="text"
        placeholder="請輸入用戶名"
        @input="inputUsername"
      />
    </view>
    <view class="input-group">
      <view class="label">密碼：</view>
      <input
        class="input"
        type="password"
        placeholder="請輸入密碼"
        @input="inputPassword"
      />
    </view>
    <aliyun-captcha
      id="captcha-element"
      v-if="this.data.loadCaptcha"
      :props="this.data.pluginProps"
    />
    <button class="login-btn" @click="login">登錄</button>
  </view>
</template>

<script>
  // 獲取驗證碼插件實例
  const AliyunCaptchaPluginInterface = requirePlugin("AliyunCaptcha");

  // 業務請求(帶驗證碼校驗)回調函數
  /**
   * @name captchaVerifyCallback
   * @function
   * 請求參數：由驗證碼腳本回調的驗證參數，不需要做任何處理，直接傳給服務端即可
   * @params {string} captchaVerifyParam
   * 返回參數：字段名固定，captchaResult為必選；如無業務驗證場景時，bizResult為可選
   * @returns {{captchaResult: boolean, bizResult?: boolean|undefined}}
   */
  var captchaVerifyCallback = async function (captchaVerifyParam) {
    console.log(this.data);
    // 業務請求代碼...
    const result = await customFetch("https://xxxx/demo/bizquery", {
      method: "POST",
      data: {
        captchaVerifyParam, // 攜帶上驗證參數
        userName: this.data.username, // 通過this.data獲取業務數據
        password: this.data.password,
      },
    });
    console.log(captchaVerifyParam);
    return {
      captchaResult: result.captchaVerifyResult, // 驗證碼驗證是否通過，boolean類型，必選
      bizResult: 從result獲取您的業務驗證結果, // 業務驗證是否通過，boolean類型，可選；若為無業務驗證結果的場景，bizResult可以為空
    };
  };

  // 業務請求驗證結果回調函數
  var onBizResultCallback = function (bizResult) {
    if (bizResult === true) {
      // 業務驗證通過后的邏輯，如提示通過
      uni.showToast({
        title: "業務驗證通過！",
        duration: 2000,
        icon: "success",
      });
    } else {
      // 業務驗證不通過后的邏輯，如提示不通過
      uni.showToast({
        title: "業務驗證不通過！",
        duration: 2000,
        icon: "error",
      });
    }
  };

  async function customFetch(url, option) {
    option.url = url;
    return new Promise((resolve, reject) => {
      uni.request({
        ...option,
        success(res) {
          resolve(res.data);
        },
        fail(res) {
          reject(new Error(res.toString()));
        },
      });
    });
  }

  export default {
    data() {
      return {
        data: {
          username: "",
          password: "",
          loadCaptcha: false,
        },
      };
    },
    onLoad(options) {
      console.log(AliyunCaptchaPluginInterface);
      var pluginProps = {
        SceneId: "xxxxx",
        mode: "popup",
        captchaVerifyCallback: captchaVerifyCallback.bind(this), // 固定寫法，需要綁定this
        onBizResultCallback: onBizResultCallback.bind(this), // 固定寫法，需要綁定this
        slideStyle: {
          width: 540, // 寬度默認為540rpx
          height: 60, // 高度默認為60rpx
        },
        language: "cn",
        region: "cn",
      };
      // 初始化驗證碼插件
      this.data.loadCaptcha = true; // 可以用來控制加載/重載驗證碼
      this.data.pluginProps = pluginProps;
    },
    methods: {
      // 用戶名輸入處理函數
      inputUsername(e) {
        this.data.username = e.detail.value;
      },
      // 密碼輸入處理函數
      inputPassword(e) {
        this.data.password = e.detail.value;
      },
      // 登錄按鈕點擊處理函數
      login() {
        const { username, password } = this.data;
        // 這里僅作為示例，實際開發中需要將登錄信息發送到服務器驗證
        if (username && password) {
          AliyunCaptchaPluginInterface.show();
        } else {
          uni.showToast({
            title: "請填寫用戶名和密碼",
            icon: "none",
          });
        }
      },
    },
  };
</script>

<style></style>

參數說明

參數

類型

是否必填

默認值

描述

SceneId

String

是

無

驗證碼場景ID，新建驗證場景后可獲取該值。具體操作，請參見步驟二：新建驗證場景。

mode

String

是

無

驗證碼模式，考慮到防護效果和接入體驗，目前只支持彈出式?？蛇x項：

  • popup：表示彈出式。

captchaVerifyCallback

Function

是

captchaVerifyCallback

業務請求（帶驗證碼校驗）回調函數。更多信息，請參考上文示例代碼注釋部分。

onBizResultCallback

Function

是

onBizResultCallback

業務請求結果回調函數，用于設置驗證結果處理邏輯。

slideStyle

Object

否

{ width: 540, height: 60 }

滑塊驗證碼樣式，支持自定義寬度和高度，單位為rpx。

說明

  • 由于驗證碼需要通過滑動采集足夠多的信息用于策略模型判斷，所以，建議您將滑塊的寬度（width值）最小設置為540 rpx。如果width值小于540 rpx，系統會按照540 rpx進行配置。

  • 該參數僅對滑塊模式有效，并不適用于拼圖驗證碼。如果您使用的是拼圖驗證碼，由于拼圖驗證碼的圖像尺寸和驗證答案是預設固定的，請不要復寫 CSS 強行修改樣式，否則會導致驗證異常。

language

String

否

cn

驗證碼語言類型，請參見驗證碼2.0支持的語言。

region

String

否

cn

驗證碼實例所屬地域。取值：

  • cn：表示中國內地。

  • sgp：新加坡。

說明

  • 客戶端接入region參數和服務端接入地址endpoint不一致，會導致驗證請求返回錯誤

  • 產品在中國內地（華東2（上海））和新加坡分別設置了管控中心平臺，根據客戶自行配置的調用參數，客戶端采集的行為數據、設備數據等將回傳到對應中心處理，主要實現安全驗證功能。