《前端实现实名认证流程：Vue + AES 加密 + 阿里云人脸识别实战》

m0_49221990

1141人浏览 · 2025-06-19 09:19:43

m0_49221990 · 2025-06-19 09:19:43 发布

✨摘要（开头引入）

在互联网应用中，实名认证已成为合规和安全的重要一环，特别是在金融、电商、社交等场景。本文将介绍如何通过 Vue.js 构建一个简洁高效的实名认证页面，结合阿里云人脸识别服务，使用 AES 加密保护用户隐私，实现“前端采集、后端验证、安全跳转”的完整闭环流程。

📌一、场景背景

实名认证通常涉及三要素：

姓名
身份证号码
人脸活体检测

大多数平台将前两项作为表单信息采集，最后一步依赖于三方服务（如阿里云、腾讯云）提供的 SDK。前端的职责是用户交互、数据加密、发起认证、跳转到识别页面。

🧱二、技术栈与依赖

Vue.js 2.x：构建响应式页面
Axios：发送 API 请求
CryptoJS：AES 加密用户敏感信息
阿里云实人认证 SDK：获取设备指纹 metaInfo（window.getMetaInfo()）
后端接口：通过 accessToken 和加密信息发起认证

💡三、页面结构与 UI 设计

采用简洁卡片式 UI，包括：

姓名与身份证号输入框
表单校验提示
“开始认证”按钮

跳转逻辑

🔐四、AES 加密实现

为避免明文传输用户隐私，前端使用 CryptoJS 对姓名与身份证号加密，代码如下：

encrypt(data) {
  const key = CryptoJS.enc.Utf8.parse("909JDcx1pOa9joEy");
  const iv = CryptoJS.enc.Utf8.parse("909JDcx1pOa9joEy");
  const encrypted = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(data), key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  return encrypted.toString();
}

全部代码：

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://o.alicdn.com/yd-cloudauth/cloudauth-cdn/jsvm_all.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.min.js"></script>

  <title>实名认证</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 20px;
      background-color: #f8f8f8;
    }

    .card {
      background: #fff;
      padding: 24px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      max-width: 400px;
      margin: 0 auto;
    }

    .title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 16px;
    }

    .text {
      font-size: 14px;
      color: #666;
      margin-bottom: 24px;
    }

    .button {
      display: block;
      width: 100%;
      padding: 12px;
      background-color: #2979ff;
      color: white;
      text-align: center;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
    }

    .emtry {
      color: red;
      font-size: 14px;
    }

    .button:disabled {
      background-color: #ccc;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="card" v-if="authStatus == 1 || authStatus == 3">
      <div class="title">实名认证</div>
      <div class="text">为了保障您的账户安全，请先完成实名认证。</div>
      <input v-model="realName" type="text" placeholder="请输入姓名"
        style="margin-bottom: 12px; width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #ccc;" />
      <p v-if="isrealName" class="emtry">请输入姓名</p>
      <input v-model="idCardNO" type="text" placeholder="请输入身份证号"
        style="margin-bottom: 24px; width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #ccc;" />
      <p v-if="isidCardNO" class="emtry">请输入身份证号</p>

      <button class="button" @click="start">开始认证</button>
    </div>
  </div>

 <script>
  new Vue({
    el: '#app',
    data() {
      return {
        realName: '',               // 用户输入的姓名
        idCardNO: '',              // 用户输入的身份证号
        showNameError: false,      // 是否显示“请输入姓名”的错误提示
        showIdError: false,        // 是否显示“请输入身份证号”的错误提示
        token: new URLSearchParams(window.location.search).get('token'), // 从 URL 中获取 token 参数
        apiUrl: 'https://api.ututradepro.com/buyer-api/buyer/passport/member/initFaceAuth' // 实名认证接口地址
      };
    },
    methods: {
      // 加密方法：使用 AES 对称加密，将用户输入的真实姓名或身份证号进行加密
      encrypt(data) {
        const key = CryptoJS.enc.Utf8.parse("909JDcx1pOa9joEy"); // 秘钥（16字节）
        const iv = CryptoJS.enc.Utf8.parse("909JDcx1pOa9joEy");  // 偏移量（IV）

        // 将待加密的字符串转换为 UTF-8 格式并进行加密，返回 base64 字符串
        const encrypted = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(data), key, {
          iv: iv,
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7
        });
        return encrypted.toString();
      },

      // 点击“开始认证”按钮时执行的逻辑
      startAuth() {
        // 表单校验：如果未填写姓名或身份证号，设置错误标记并终止操作
        this.showNameError = !this.realName;
        this.showIdError = !this.idCardNO;
        if (this.showNameError || this.showIdError) return;

        // 调用阿里云的 SDK 获取浏览器环境信息（face++ 验证需要）
        const metaInfo = JSON.stringify(window.getMetaInfo());

        // 构造请求参数
        const params = {
          realName: this.encrypt(this.realName),  // 加密姓名
          idCardNO: this.encrypt(this.idCardNO),  // 加密身份证号
          metaInfo: metaInfo,                    // 阿里云提供的设备环境信息
          type: "WX"                              // 认证类型，WX 表示微信环境
        };

        // 调用后台接口发起实名认证请求
        axios.post(this.apiUrl, params, {
          headers: { accessToken: this.token }   // 携带 token 鉴权
        }).then(res => {
          // 返回的 result 是阿里人脸识别的 URL
          const target = res.data.result;

          // 拼接跳转地址，跳转到中转页，由中转页再打开阿里的 URL
          const jump = 'https://ututradepro.com/jump.html';
          window.location.href = `${jump}?url=${target}`;
        }).catch(err => {
          // 接口调用失败，弹出错误提示
          alert("认证请求失败，请稍后再试");
          console.error(err);
        });
      }
    }
  });
</script>

</body>

</html>