身份证阅读器读卡器Vue.js和React.js开发包demo下载
本demo需要结合best365英国在线体育官网EST系列谷歌火狐开发包V4.2.0以上版本使用，支持产品型号EST-100GS、EST-100、EST-100N等第三代身份证阅读器/读卡器，本文提供了Vue.js和React.js两种Javascript库用于Web网页浏览器的用法，供参考使用。
下载地址：
3、DONSEE系列身份证阅读器谷歌火狐web开发包下载V5.0.4
React.js和Vue.js
import React, {PureComponent} from 'react';
import "./agreementRecommend.scss";
// 身份证读卡 测试用
var socket;
//提示信息
function resultMsg (msg) {
document.getElementById("text_result").value += "\r\n" + msg;
}
class ReadIdCard extends PureComponent {
constructor(props) {
super(props);
this.state = {}
}
componentDidMount() {
// 默认页面打开，就自动打开设备
this.openReader()
}
openReader = () => {
var host = "ws://127.0.0.1:33666"; //客户端电脑本地IP，非服务器IP，无需修改
if(socket == null){
socket = new WebSocket(host);
}else{
resultMsg("已初始化.");
}
try {
socket.onopen = () => {
resultMsg("初始化成功."); //可以注释
this.getVersion(); //可以注释：控件版本号
this.readSAMID(); //可以注释：读卡器芯片号，全球唯一，通常可用来授权管理
//this.autoReadIDCard(); //自动读卡可以放这里，自动读卡放身份证的间隔要>300ms，否则会不读卡
};
socket.onclose = function () {
resultMsg("读卡服务已经断开.");
};
socket.onerror = function(){
resultMsg("请检查控件是否正常安装.");
};
socket.onmessage = function (msg) {
if (typeof msg.data == "string") {
var msgM=msg.data+"";
var msgJson = JSON.parse(msgM);
//resultMsg(msgM);
//提示信息
switch(msgJson.fun) {
case "EST_GetVersion#":
resultMsg("版本号："+msgJson.errMsg);
break;
case "EST_Reader_ReadIDCard#":
if (msgJson.rCode == "0") {
document.getElementById("text_name").value = msgJson.name; //姓名
document.getElementById("text_sex").value = msgJson.sex; //性别
document.getElementById("text_nation").value = msgJson.nation; //民族
document.getElementById("text_birthday").value = msgJson.birth; //出生日期
document.getElementById("text_address").value = msgJson.address; //住址
document.getElementById("text_idNum").value = msgJson.certNo; //身份证号码
document.getElementById("text_dept").value = msgJson.department; //签发机关
document.getElementById("text_effDate").value = msgJson.effectData; //有效期开始
document.getElementById("text_expDate").value = msgJson.expire; //有效期结束
document.getElementById("PhotoID").src = "data:image/jpeg;base64,"+msgJson.base64Data; //身份证头像，base64格式数据，实际尺寸：102x126px
document.getElementById("PhotoIDFront").src = "data:image/jpeg;base64,"+msgJson.imageFront; //身份证正面照片，实际尺寸：540x340px，如无需使用，建议注释掉
document.getElementById("PhotoIDBack").src = "data:image/jpeg;base64,"+msgJson.imageBack; //身份证反面照片，实际尺寸：540x340px，如无需使用，建议注释掉
//ReadCertID(); //身份证物理ID，如无需使用，建议注释掉
resultMsg(msgJson.errMsg);
return msgJson;
}
else if(msgJson.rCode == "1"){
resultMsg("已停止自动读卡");
}
else if(msgJson.rCode == "-2"){
resultMsg("请放身份证");
}
else {
resultMsg(msgJson.errMsg);
}
break;
case "EST_GetCertFrontImage#": //身份证正面照片，base64格式数据
if (msgJson.rCode == "0") {
document.getElementById("PhotoIDFront").src = "data:image/jpeg;base64,"+msgJson.imageFront;
}
break;
case "EST_GetCertBackImage#": //身份证反面照片，base64格式数据
if (msgJson.rCode == "0") {
document.getElementById("PhotoIDBack").src = "data:image/jpeg;base64,"+msgJson.imageBack;
}
break;
case "EST_ReadCertID#": //身份证物理ID
if (msgJson.rCode == "0") {
document.getElementById("text_ID").value = msgJson.UID;
}
else {
resultMsg(msgJson.errMsg);
}
break;
case "EST_ReadBankCard#": //银行卡卡号
if (msgJson.rCode == "0") {
document.getElementById("text_Bank_ID").value = msgJson.bankCard;
posBeep();
}
else {
resultMsg(msgJson.errMsg);
}
break;
case "EST_ReadM1Card#": //IC卡卡号
if (msgJson.rCode == "0") {
document.getElementById("text_IC_ID").value = msgJson.UID;
posBeep();
}
else {
resultMsg(msgJson.errMsg);
}
break;
case "EST_ReadSocialCard#": //社保卡信息，个别地区社保卡不按国家规范来的，会读取信息不全
if (msgJson.rCode == "0") {
posBeep();
document.getElementById("S_text_name").value = msgJson.XM; //社保卡姓名
document.getElementById("S_text_sex").value = msgJson.XB; //社保卡性别
document.getElementById("S_text_nation").value = msgJson.MZ; //社保卡民族
document.getElementById("S_text_birthday").value = msgJson.CSRQ; //社保卡出生日期
document.getElementById("S_text_idNum").value = msgJson.SHBZHM; //社保卡身份证号
document.getElementById("S_text_effDate").value = msgJson.FKRQ; //社保卡有效期开始
document.getElementById("S_text_expDate").value = msgJson.KYXQ; //社保卡有效期结束
document.getElementById("S_text_kahao").value = msgJson.SBKH; //社保卡卡号
}
else {
resultMsg(msgJson.errMsg);
}
break;
case "EST_IDRequest#":
if (msgJson.rCode == "0") {
resultMsg("找到身份证");
}
else {
resultMsg(msgJson.errMsg);
}
break;
case "EST_FindCardM1#":
if (msgJson.rCode == "0") {
resultMsg("寻卡成功，M1卡UID：" + msgJson.Uid);
}
else {
resultMsg(msgJson.errMsg);
}
break;
case "EST_VerifyKeyM1#":
if (msgJson.rCode == "0") {
resultMsg("秘钥认证成功");
}
else {
resultMsg(msgJson.errMsg);
}
break;
case "EST_ReadCardM1#":
if (msgJson.rCode == "0") {
resultMsg("读卡成功，数据为：" + msgJson.readData);
}
else {
resultMsg(msgJson.errMsg);
}
break;
case "EST_WriteCardM1#":
if (msgJson.rCode == "0") {
resultMsg("写卡成功");
}
else {
resultMsg(msgJson.errMsg);
}
break;
case "EST_PowerOnCpu#": //非接CPU卡上电信息
if (msgJson.rCode == "0") {
resultMsg("复位信息：" + msgJson.ATR);
}
else {
resultMsg(msgJson.errMsg);
}
break;
case "EST_WriteCpu#": //非接CPU卡APDU指令响应信息
if (msgJson.rCode == "0") {
resultMsg("响应数据：" + msgJson.Resp);
}
else {
resultMsg(msgJson.errMsg);
}
break;
case "EST_ReaderGertSAMID#": //获得读卡器芯片系列号，读卡器授权可以放这里来判断
if (msgJson.rCode == "0") {
resultMsg("系列号：" + msgJson.SAMID);
}
else {
resultMsg(msgJson.errMsg);
}
break;
default:
break;
}
}
else{
alert("连接异常,请检查是否成功安装控件.");
}
};
}
catch (ex) {
alert("连接异常,请检查是否成功安装控件.");
}
}
//清空文本框信息
clearinput = () => {
document.getElementById("text_ID").value = "";
document.getElementById("text_IC_ID").value = "";
document.getElementById("text_Bank_ID").value = "";
document.getElementById("text_name").value = "";
document.getElementById("text_sex").value = "";
document.getElementById("text_nation").value = "";
document.getElementById("text_birthday").value = "";
document.getElementById("text_address").value = "";
document.getElementById("text_idNum").value = "";
document.getElementById("text_dept").value = "";
document.getElementById("text_effDate").value = "";
document.getElementById("text_expDate").value = "";
document.getElementById("text_result").value = "";
document.getElementById("PhotoID").src = "";
document.getElementById("S_text_name").value = "";
document.getElementById("S_text_sex").value = "";
document.getElementById("S_text_nation").value = "";
document.getElementById("S_text_birthday").value = "";
document.getElementById("S_text_idNum").value = "";
document.getElementById("S_text_effDate").value = "";
document.getElementById("S_text_expDate").value = "";
document.getElementById("S_text_kahao").value = "";
document.getElementById("PhotoIDBack").src = "";
document.getElementById("PhotoIDFront").src = "";
}
//控件版本号
getVersion = () => {
socket.send("EST_GetVersion#");
}
//蜂鸣器控制，可以自己选择是否蜂鸣
posBeep = () => {
if (socket.readyState == 1) {
socket.send("EST_PosBeep#");
}
else {
resultMsg("未找到控件，请检查控件是否安装.");
}
}
//单次读取身份证信息
readIDCard = () => {
try {
if (socket.readyState == 1) {
// 发送请求
socket.send("EST_Reader_ReadIDCard#");
}
else {
resultMsg("未找到控件，请检查控件是否安装.");
}
}
catch (ex) {
resultMsg("连接异常,请检查是否成功安装控件.");
}
}
//自动读取身份证信息
autoReadIDCard = () => {
try {
if (socket.readyState == 1) {
socket.send("EST_Reader_ReadIDCard#|1");
//resultMsg("自动读卡，请放身份证...");
}
else {
resultMsg("未找到控件，请检查控件是否安装.");
}
}
catch (ex) {
resultMsg("连接异常,请检查是否成功安装控件.");
}
}
//停止连续读取身份证信息
stopAutoReadIDCard = () =>{
try {
if (socket.readyState == 1) {
socket.send("EST_StopReadIDCard#");
}
else {
resultMsg("未找到控件，请检查控件是否安装.");
}
}
catch (ex) {
resultMsg("连接异常,请检查是否成功安装控件.");
}
}
//读取身份证正反面照片
readIDCardImage = () =>{
try {
if (socket.readyState == 1) {
socket.send("EST_GetCertFrontImage#");
socket.send("EST_GetCertBackImage#");
}
else {
resultMsg("未找到控件，请检查控件是否安装.");
}
}
catch (ex) {
resultMsg("连接异常,请检查是否成功安装控件.");
}
}
//读取身份证物理ID，16位16进制数据，一般情况用不到，可以注释掉
ReadCertID = () =>{
try {
if (socket.readyState == 1) {
socket.send("EST_ReadCertID#");
}
else {
resultMsg("未找到控件，请检查控件是否安装.");
}
}
catch (ex) {
resultMsg("连接异常,请检查是否成功安装控件.");
}
}
//读取IC卡号，包括M1、CPU卡，8位16进制数据
readM1Card = () => {
try {
if (socket.readyState == 1) {
socket.send("EST_ReadM1Card#");
}
else {
resultMsg("未找到控件，请检查控件是否安装.");
}
}
catch (ex) {
resultMsg("连接异常,请检查是否成功安装控件.");
}
}
//读取银行卡号，支持QUICK PASS闪付银行卡，大部分卡支持，少部分地方性银行会读取失败
readBankCard = () => {
try {
if (socket.readyState == 1) {
socket.send("EST_ReadBankCard#");
}
else {
resultMsg("未找到控件，请检查控件是否安装.");
}
}
catch (ex) {
resultMsg("连接异常,请检查是否成功安装控件.");
}
}
//读社保卡，支持二代芯片社保卡，三代卡无秘钥不能读取
readSocialCard = () => {
try {
if (socket.readyState == 1) {
socket.send("EST_ReadSocialCard#");
}
else {
resultMsg("未找到控件，请检查控件是否安装.");
}
}
catch (ex) {
resultMsg("连接异常,请检查是否成功安装控件.");
}
}
//检测是否有身份证存在
IDRequest = () => {
try {
if (socket.readyState == 1) {
socket.send("EST_IDRequest#");
}
else {
resultMsg("未找到控件，请检查控件是否安装.");
}
}
catch (ex) {
resultMsg("连接异常,请检查是否成功安装控件.");
}
}
//IC卡读写操作函数，包括M1卡读写、CPU卡读写等功能，详细指令见开发文档中3.2.11 IC卡操作函数部分
cardOperate = () =>{
try {
if (socket.readyState == 1) {
socket.send(document.getElementById("S_text_kacaozuo").value);
}
else {
resultMsg("未找到控件，请检查控件是否安装.");
}
}
catch (ex) {
resultMsg("连接异常,请检查是否成功安装控件.");
}
}
//获得读卡器芯片系列号，全球唯一，通常可用来授权管理
readSAMID = () =>{
try {
if (socket.readyState == 1) {
socket.send("EST_ReaderGertSAMID#");
}
else {
resultMsg("未找到控件，请检查控件是否安装.");
}
}
catch (ex) {
resultMsg("连接异常,请检查是否成功安装控件.");
}
}
//关闭soket
closeSocket = () =>{
try {
if(socket != null){
socket.close();
socket = null;
}
}
catch (ex) {
}
};
render() {
return (
| best365英国在线体育官网EST-100GS系列产品谷歌Chrome、火狐Firefox测试页面V4.2.3 | */}||
| 姓名： | {/**/} |
|
| 性别： | ||
| 民族： | ||
| 出生： | ||
| 住址： | ||
| 身份证号码： |
| |
| 签发机关： | ||
| 有效期开始： | ||
| 有效期结束： | ||
| 身份证物理ID： | ||
| IC卡卡号： |
| |
| 银行卡号： | ||
| 社保卡姓名： | ||
| 社保卡性别： | ||
| 社保卡名族： | ||
| 社保卡出生日期： | ||
| 社保卡身份证号码： | ||
| 发卡日期： | ||
| 卡有效期： | ||
| 社保卡卡号： | ||
| 返回数据： | ||
{/**/} {/**/} {/**/} {/**/} {/**/} {/**/} | ||
)
}
}
export default ReadIdCard;
产品咨询