阿里云金融级实人认证,PC或移动端H5网页接入,前端部分

695 阅读1分钟

1.首先引入在脚手架public文件中的index中引入js

 <script type="text/javascript" src="https://cn-shanghai-aliyun-cloudauth.oss-cn-shanghai.aliyuncs.com/web_sdk_js/jsvm_all.js" ></script>

image.png

  1. 引入上述JS文件,调用函数getMetaInfo()获取MetaInfo。

  2. 您在调用实人认证服务端发起认证请求时需要传入该MetaInfo值。

  3. 获取服务端初始化返回的CertifyUrl,在浏览器中加载该链接进行实人认证。

**说明** 初始化接口返回的认证CertifyUrl在**30分钟有效****仅能认证提交一次**,请您在有效期内应用,避免重复使用。

image.png image.png

2.在你需要使用的vue文件中调用调用函数getMetaInfo()获取MetaInfo

<template>
  <div>
  </div>
</template>
<script>

export default {
		data() {
			return {
				MetaInfo:null
			};
		},
    created(){
      const metaInfo = getMetaInfo()
      console.log(metaInfo);
    }
	}
</script>

<style>
</style>

控制台打印出 image.png

3.调接口把拿到的数据传给后端,后端返回链接数据拿到链接地址进行下一步操作

<template>
  <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">

    <el-form-item label="姓名" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="身份证号" prop="idCard">
      <el-input v-model="ruleForm.idCard"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>

</template>
<script>
// export function InitFaceVerify(ruleForm) {
//   return request({
//     url: '/apply/InitFaceVerify',
//     method: 'post',
//     data:ruleForm

//   })
// }--------------apply.js
  import {
    InitFaceVerify
  } from "@/api/system/apply";
  export default {
    data() {

      return {
        MetaInfo:null,
        url1:"",
        ruleForm: {
          name: '',
          idCard: '',
          metaInfo:''
        },
        

      };
    },

    created() {
      this.metaInfo = getMetaInfo();
    },
    methods: {
      submitForm(ruleForm) {
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            this.ruleForm.metaInfo = JSON.stringify(this.metaInfo);//一定要转json格式不然会报错
            console.log(this.ruleForm.metaInfo)
            InitFaceVerify(this.ruleForm).then(response => {
              // this.url1 = response.data.certifyUrl;
              // this.certifyId = response.data.certifyId;
              // this.qrcode();

              console.log(response)
            }); 

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // resetForm(formName) {
      //   this.$refs[formName].resetFields();
      // }
      
    }
  } 
</script>

输入姓名和身份证号码之后提交,后端拿到参数之后就会返回给你一个链接可以直接点击链接进行人脸识别,也可以拿到链接转二维码手机扫码识别,或者点击按钮直接跳转

转二维码识别可以参考juejin.cn/post/715874…

原理图

image.png

官方文档描述非常简约!