在uniapp中实现小程序调用百度智能云免费的身份证识别接口进行实名认证_小程序实名认证功能实现-程序员宅基地

技术标签: 数学建模  小程序  uni-app  

本来以为比较简单,结果一路踩坑。

网上找了很多,各种报错。说多了都是泪。

抄了人家不少,自己也不好意思,所以共享出来。

代码比较齐全,改了key就能用,希望对你有所帮助。

<template>
	<view class="content">
		<view class="uni-common-mt">
			<uni-section title="姓名" type="line" padding>
				<uni-easyinput errorMessage type="text" v-model="name" focus placeholder="请输入真实姓名"></uni-easyinput>
			</uni-section>
			<uni-section title="身份证号码" type="line" padding>
				<uni-easyinput type="number" errorMessage v-model="IdNumber" focus
					placeholder="请输入身份证号码"></uni-easyinput>
			</uni-section>
			<uni-section title="上传身份证正面照" type="line" padding="60rpx">
				<image class="img" :src="src" @tap="scan()"></image>
			</uni-section>
		</view>
		<view style="padding: 20rpx;">
			<button type="primary" @click="getIDCard()">点击认证身份信息</button>
		</view>
	</view>
</template>
<script>
	var that;
	// const card = uni.requireNativePlugin('DC-CardRecognize');
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	export default {
		data() {
			return {
				title: 'input',
				focus: false,
				name: "",
				IdNumber: "",
				src: "/static/photo.png",
				httpUrl: "https://aip.baidubce.com/rest/2.0/ocr/v1/general?access_token=",
				imageBase64Str: "",
				APIKey: "用你自己的",
				SecretKey: "还是用你自己的",
				access_token: "",
				filePath: ""

			}
		},
		onLoad() {
			that = this;
			//token验证
			this.getAccess_token();
		},
		methods: {
			getAccess_token() {
				var accessToken = that.cache("accessToken", null, null);
				console.log(accessToken)
				if (!accessToken) {
					uni.request({
						method: 'POST',
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						url: "https://aip.baidubce.com/oauth/2.0/token",
						data: {
							grant_type: "client_credentials",
							client_id: this.APIKey,
							client_secret: this.SecretKey
						},
						success: function(res) {
							console.log(res.data.access_token);
							//uni.setStorageSync("Baidu",res.data);
							that.access_token = res.data.access_token;
							that.cache("accessToken", res.data.access_token, null);
						}
					})
				} else {
					that.access_token = accessToken;
				}

			},
			//缓存,默认有效期28天
			cache: function(key, value, seconds) {
				var timestamp = Date.parse(new Date()) / 1000
				console.log(timestamp + "===" + key)
				if (key && value === null) {
					//删除缓存
					//获取缓存
					var val = uni.getStorageSync(key);
					var tmp = val.split("|")
					if (!tmp[1] || timestamp >= tmp[1]) {
						console.log("key已失效")
						uni.removeStorageSync(key)
						return ""
					} else {
						console.log("key未失效")
						return tmp[0]
					}
				} else if (key && value) {
					//设置缓存
					if (!seconds) {
						var expire = timestamp + (3600 * 24 * 28)
					} else {
						var expire = timestamp + seconds
					}
					value = value + "|" + expire
					uni.setStorageSync(key, value);
				} else {
					console.log("key不能空")
				}
			},
			getIDCard() {
				var flag = this.verifyData();
				var that = this

				if (flag) {
					console.log("==")
					//百度名片识别接口处理开始
					uni.showLoading({
						mask: true,
						title: "识别中,请等待",

					});
					console.log('请求', this.filepath)

					uni.request({
						url: "https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=" +
							that.access_token,
						method: 'POST',
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						data: {
							image: this.filePath,
							id_card_side: "front"
						},
						success(res) {
							console.log('返回结果', res);
							var IdCard = res.data.words_result.公民身份号码.words;
							var userName = res.data.words_result.姓名.words;
							console.log(res.data.words_result.公民身份号码.words)
							if (IdCard == that.IdNumber && userName == that.name) {
								console.log("身份验证成功");
								uni.showToast({
									icon: 'success',
									title: '身份验证成功',
									duration: 1000
								});
							} else {
								uni.showToast({
									icon: 'none',
									title: '身份信息有误请审核信息',
									duration: 1000
								});
							}
						},
						complete() {
							uni.hideLoading();
						}
					})
				}

			},

			//校验输入的数据
			verifyData() {
				var flag = true;
				if (!this.name) {
					flag = false;
					uni.showToast({
						icon: 'none',
						title: '姓名不能为空'
					});
					return false;
				}
				if (!this.IdNumber) {
					flag = false;
					uni.showToast({
						icon: 'none',
						title: '身份证号不能为空'
					});
					return false;
				}
				var re15 = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
				var re18 = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/;
				var res = (re15.test(this.IdNumber) || re18.test(this.IdNumber));
				if (res == false) {
					flag = false;
					uni.showToast({
						icon: 'none',
						title: '身份证号填写有误'
					});
					return false;
				}
				// if (this.filePath === "") {
				// 	flag = false;
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请上传身份证照片面'
				// 	});
				// 	return false;
				// }
				return flag;

			},


			scan() {
				var that = this
				uni.chooseMedia({
					mediaType: ['image'],
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						console.log(res)
						that.src = res.tempFiles[0].tempFilePath
						that.imgToBase64(res.tempFiles[0].tempFilePath).then(base64 => {
							that.filePath = base64
							console.log("[转换成base64]", base64)
						})

					}
				})


			},
			imgToBase64(data) {
				return new Promise((resolve, reject) => {
					pathToBase64(data).then(base64 => {
						resolve(base64)
					}).catch(error => {
						console.error(error)
						reject(error)
					})
				})
			}

		}
	}
</script>

<style>
	.option {
		display: flex;
		margin-top: 4%;
		margin-left: 30upx;
		padding-bottom: 30upx;
		border-bottom: #333333 solid 0.5upx;
	}

	.msg-left {
		flex: 5;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.msg-right {
		flex: 2;
		display: flex;
		justify-content: center;
		text-align: center;
		margin-right: 15upx;
		border-bottom: #000000 solid 0.5upx;
	}

	.img {
		display: flex;
		margin-top: 4%;
		margin-left: 30upx;
		padding-bottom: 30upx;

	}

	.img image {
		justify-content: center;
		margin-top: 8%;

	}
</style>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/poluc/article/details/131238609

智能推荐

JavaScript学习笔记_curry函数未定义-程序员宅基地

文章浏览阅读343次。五种原始的变量类型1.Undefined--未定义类型 例:var v;2.String -- ' '或" "3.Boolean4.Number5.Null--空类型 例: var v=null;Number中:NaN -- not a number非数本身是一个数字,但是它和任何数字都不相等,代表非数,它和自己都不相等判断是不是NaN不能用=_curry函数未定义

兑换码编码方案实践_优惠券编码规则-程序员宅基地

文章浏览阅读1.2w次,点赞2次,收藏17次。兑换码编码设计当前各个业务系统,只要涉及到产品销售,就离不开大大小小的运营活动需求,其中最普遍的就是兑换码需求,无论是线下活动或者是线上活动,都能起到良好的宣传效果。兑换码:由一系列字符组成,每一个兑换码对应系统中的一组信息,可以是优惠信息(优惠券),也可以是相关奖品信息。在实际的运营活动中,要求兑换码是唯一的,每一个兑换码对应一个优惠信息,而且需求量往往比较大(实际上的需求只有预期_优惠券编码规则

c语言周林答案,C语言程序设计实训教程教学课件作者周林ch04结构化程序设计课件.ppt...-程序员宅基地

文章浏览阅读45次。C语言程序设计实训教程教学课件作者周林ch04结构化程序设计课件.ppt* * 4.1 选择结构程序设计 4.2 循环结构程序设计 4.3 辅助控制语句 第四章 结构化程序设计 4.1 选择结构程序设计 在现实生活中,需要进行判断和选择的情况是很多的: 如果你在家,我去拜访你 如果考试不及格,要补考 如果遇到红灯,要停车等待 第四章 结构化程序设计 在现实生活中,需要进行判断和选择的情况..._在现实生活中遇到过条件判断的问

幻数使用说明_ioctl-number.txt幻数说明-程序员宅基地

文章浏览阅读999次。幻数使用说明 在驱动程序中实现的ioctl函数体内,实际上是有一个switch{case}结构,每一个case对应一个命令码,做出一些相应的操作。怎么实现这些操作,这是每一个程序员自己的事情。 因为设备都是特定的,这里也没法说。关键在于怎样组织命令码,因为在ioctl中命令码是唯一联系用户程序命令和驱动程序支持的途径 。 命令码的组织是有一些讲究的,因为我们一定要做到命令和设备是一一对应的,利_ioctl-number.txt幻数说明

ORB-SLAM3 + VScode:检测到 #include 错误。请更新 includePath。已为此翻译单元禁用波浪曲线_orb-slam3 include <system.h> 报错-程序员宅基地

文章浏览阅读399次。键盘按下“Shift+Ctrl+p” 输入: C++Configurations,选择JSON界面做如下改动:1.首先把 “/usr/include”,放在最前2.查看C++路径,终端输入gcc -v -E -x c++ - /usr/include/c++/5 /usr/include/x86_64-linux-gnu/c++/5 /usr/include/c++/5/backward /usr/lib/gcc/x86_64-linux-gnu/5/include /usr/local/_orb-slam3 include 报错

「Sqlserver」数据分析师有理由爱Sqlserver之十-Sqlserver自动化篇-程序员宅基地

文章浏览阅读129次。本系列的最后一篇,因未有精力写更多的入门教程,上篇已经抛出书单,有兴趣的朋友可阅读好书来成长,此系列主讲有理由爱Sqlserver的论证性文章,希望读者们看完后,可自行做出判断,Sqlserver是否真的合适自己,目的已达成。渴望自动化及使用场景笔者所最能接触到的群体为Excel、PowerBI用户群体,在Excel中,我们知道可以使用VBA、VSTO来给Excel带来自动化操作..._sqlsever 数据分析

随便推点

智慧校园智慧教育大数据平台(教育大脑)项目建设方案PPT_高校智慧大脑-程序员宅基地

文章浏览阅读294次,点赞6次,收藏4次。教育智脑)建立学校的全连接中台,对学校运营过程中的数据进行处理和标准化管理,挖掘数据的价值。能:一、原先孤立的系统聚合到一个统一的平台,实现单点登录,统一身份认证,方便管理;三、数据共享,盘活了教育大数据资源,通过对外提供数。的方式构建教育的通用服务能力平台,支撑教育核心服务能力的沉淀和共享。物联网将学校的各要素(人、机、料、法、环、测)全面互联,数据实时。智慧校园解决方案,赋能教学、管理和服务升级,智慧教育体系,该数据平台具有以下几大功。教育大数据平台底座:教育智脑。教育大数据平台,以中国联通。_高校智慧大脑

编程5大算法总结--概念加实例_算法概念实例-程序员宅基地

文章浏览阅读9.5k次,点赞2次,收藏27次。分治法,动态规划法,贪心算法这三者之间有类似之处,比如都需要将问题划分为一个个子问题,然后通过解决这些子问题来解决最终问题。但其实这三者之间的区别还是蛮大的。贪心是则可看成是链式结构回溯和分支界限为穷举式的搜索,其思想的差异是深度优先和广度优先一:分治算法一、基本概念在计算机科学中,分治法是一种很重要的算法。字面上的解释是“分而治之”,就是把一个复杂的问题分成两_算法概念实例

随笔—醒悟篇之考研调剂_考研调剂抑郁-程序员宅基地

文章浏览阅读5.6k次。考研篇emmmmm,这是我随笔篇章的第二更,原本计划是在中秋放假期间写好的,但是放假的时候被安排写一下单例模式,做了俩机试题目,还刷了下PAT的东西,emmmmm,最主要的还是因为我浪的很开心,没空出时间来写写东西。  距离我考研结束已经快两年了,距离今年的考研还有90天左右。  趁着这个机会回忆一下青春,这一篇会写的比较有趣,好玩,纯粹是为了记录一下当年考研中发生的有趣的事。  首先介绍..._考研调剂抑郁

SpringMVC_class org.springframework.web.filter.characterenco-程序员宅基地

文章浏览阅读438次。SpringMVC文章目录SpringMVC1、SpringMVC简介1.1 什么是MVC1.2 什么是SpringMVC1.3 SpringMVC的特点2、HelloWorld2.1 开发环境2.2 创建maven工程a>添加web模块b>打包方式:warc>引入依赖2.3 配置web.xml2.4 创建请求控制器2.5 创建SpringMVC的配置文件2.6 测试Helloworld2.7 总结3、@RequestMapping注解3.1 @RequestMapping注解的功能3._class org.springframework.web.filter.characterencodingfilter is not a jakart

gdb: Don‘t know how to run. Try “help target“._don't know how to run. try "help target".-程序员宅基地

文章浏览阅读4.9k次。gdb 远程调试的一个问题:Don't know how to run. Try "help target".它在抱怨不知道怎么跑,目标是什么. 你需要为它指定target remote 或target extended-remote例如:target extended-remote 192.168.1.136:1234指明target 是某IP的某端口完整示例如下:targ..._don't know how to run. try "help target".

c语言程序设计教程 郭浩志,C语言程序设计教程答案杨路明郭浩志-程序员宅基地

文章浏览阅读85次。习题 11、算法描述主要是用两种基本方法:第一是自然语言描述,第二是使用专用工具进行算法描述2、c 语言程序的结构如下:1、c 语言程序由函数组成,每个程序必须具有一个 main 函数作为程序的主控函数。2、“/*“与“*/“之间的内容构成 c 语言程序的注释部分。3、用预处理命令#include 可以包含有关文件的信息。4、大小写字母在 c 语言中是有区别的。5、除 main 函数和标准库函数以..._c语言语法0x1e