阿里云滑块awsc

AWSC的语言配置

需要预设定语言配置,多语言切换需要配置upLang来联动使用才有效果

关于reset后宽度初始化和自定义样式不一致问题

可以直接在配置中指定固定宽度

  1.       width: "500",

验证失败后重置滑块状态

  1.  window.nc.reset();

源码

  1. <template>
  2.   <div class="verify-box">
  3.     <div id="nc"></div>
  4.   </div>
  5. </template>
  6. <script setup lane="ts">
  7. import { onMounted, watchEffect } from "vue";
  8. import { useGlobal } from "@/hooks/useGlobal";
  9. import { useMessage } from "naive-ui";
  10. import * as LoginAction from "@/api/login";
  12. const { appConfig } = useGlobal();
  13. const message = useMessage();
  15. const emit = defineEmits(["verifySuccess"]);
  16. var myLang = {
  17.   id: {
  18.     // //加载状态提示。
  19.     // LOADING: "加载中...",
  20.     // //等待滑动状态提示。
  21.     // SLIDE: "请向右滑动验证",
  22.     // //验证通过状态提示。
  23.     // SUCCESS: "验证通过",
  24.     // //验证失败触发拦截状态提示。
  25.     // ERROR: "非常抱歉，网络出错了...",
  26.     // //验证失败触发拦截状态提示。
  27.     // FAIL: "验证失败，请点击重试",
  28.     //加载状态提示。
  29.     LOADING: "Memuatkan...",
  30.     //等待滑动状态提示。
  31.     SLIDE: "Silakan slide kanan untuk",
  32.     //验证通过状态提示。
  33.     SUCCESS: "passed",
  34.     //验证失败触发拦截状态提示。
  35.     ERROR: "Maaf, ada kesalahan jaringan...",
  36.     //验证失败触发拦截状态提示。
  37.     FAIL: "Verifikasi gagal, silakan klik Coba lagi",
  38.   },
  39.   en: {
  40.     //加载状态提示。
  41.     LOADING: "Loading...",
  42.     //等待滑动状态提示。
  43.     SLIDE: "Please swipe right to verify",
  44.     //验证通过状态提示。
  45.     SUCCESS: "Verification passed",
  46.     //验证失败触发拦截状态提示。
  47.     ERROR: "I am very sorry, there is a network error...",
  48.     //验证失败触发拦截状态提示。
  49.     FAIL: "Verification failed, please click retry",
  50.   },
  51. };
  52. onMounted(() => {
  53.   watchEffect(() => {
  54.     if (appConfig.showLang) {
  55.       fetchConfig();
  56.     }
  57.   });
  58. });
  60. function fetchConfig() {
  61.   LoginAction.fetchAfsConfig()
  62.     .then((res) => {
  63.       console.log(res.afsConfig, "fetchConfig");
  64.       removeVertify();
  65.       onInit(res.afsConfig);
  66.     })
  67.     .catch((err) => console.error(err));
  68. }
  70. function removeVertify() {
  71.   let dom = document.getElementById("nc");
  72.   dom.innerHTML = "";
  73. }
  75. function onInit(afsConfig) {
  76.   AWSC.use("nc", function (state, module) {
  77.     // 初始化
  78.     window.nc = module.init({
  79.       // 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
  80.       appkey: afsConfig.appKey,
  81.       //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
  82.       scene: afsConfig.scene,
  83.       // 声明滑动验证需要渲染的目标ID。
  84.       renderTo: "nc",
  85.       language: appConfig.showLang,
  86.       width: "500",
  87.       upLang: myLang,
  88.       // test: module.TEST_PASS, // 测试滑动通过状态
  89.       // test: module.TEST_BLOCK, // 测试滑动失败状态
  90.       //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
  91.       success: function (data) {
  92.         emit("verifySuccess", data);
  93.       },
  94.       // 滑动验证失败时触发该回调参数。
  95.       fail: function (failCode) {
  96.         window.console && console.log(failCode);
  97.         window.nc.reset();
  98.         message.warning("Verification failed. Please try again later.");
  99.       },
  100.       // 验证码加载出现异常时触发该回调参数。
  101.       error: function (errorCode) {
  102.         window.nc.reset();
  103.         window.console && console.log(errorCode);
  104.       },
  105.     });
  106.   });
  107. }
  109. </script>
  110. <style lang="scss" scoped>
  111. #nc {
  112.   width: 100% !important;
  113.   display: contents;
  114.   .nc_scale {
  115.     width: 100% !important;
  116.   }
  117. }
  118. :deep(.nc-container #nc_1_wrapper) {
  119.   width: 100%;
  120.   height: 36px;
  121.   line-height: 36px;
  122.   #nc_1_n1t,
  123.   #nc_1__bg,
  124.   #nc_1_n1z,
  125.   #nc_1__scale_text,
  126.   .nc-lang-cnt {
  127.     height: 36px;
  128.     box-sizing: border-box;
  129.     line-height: 36px;
  130.   }
  131. }
  132. .verify-box {
  133.   width: 100%;
  134.   height: 34px;
  135.   margin-bottom: 2.25rem;
  136. }
  137. </style>