☰

企业官网建设流程全解析

首页 / 建站日记 / 企业官网建设流程全解析
身份证阅读器读卡器谷歌火狐浏览器WEB开发接口
2026/9/10 9:20:41 网站建设 项目流程

以EST-100G身份证阅读器系列WEB浏览器读卡效果图，从图片中可以看到，此款设备支持二代身份证、三代身份证、身份证头像、身份证物理卡号、IC卡卡号、银行卡卡号、社保卡等多种卡片信息读取，支持谷歌火狐等多浏览器。

测试版本（2021年01月更新）：
Chrome浏览器：78.*，支持https
Firefox浏览器：70.*
360浏览器：10.0.*，支持极速和兼容两种模式
IE浏览器：IE11，Edge浏览器不支持
QQ浏览器：支持
搜狗浏览器：支持
遨游浏览器：支持

V4.2.5 2019-12-09

*增加读取身份证正、反面照片功能
*增加M1卡读写操作功能（可读写扇区、块信息）
*增加CPU卡读写操作功能（APDU指令）


说明：此SDK支持型号东信EST-100G免驱系列身份证读卡器，其他品牌型号，未经深度测试，不一定适用！

// **无缝支持新版本谷歌Chrome火狐Firefox网页浏览器，支持H5、Vue、React、jQuery、JSP、PHP、ASP、ASPX、JS、HTML等开发语言

以下是WEB前端部分代码，供参考！

<html> <head> <title>东信EST-100G系列谷歌火狐身份证社保卡读卡测试页面V4.1.1</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> body {background-color:#eeeeee;} td {background-color:#FFFFFF;} input {width:430px;} .butt {width:110px; height:25px;} .title {padding-left:10px; width:130px;} table {font-size:12px;} table .tfonts{font-size:22px;} </style> </head> <body> <table width="800px" border="0" cellspacing="1" cellpadding="2" align="center" bgcolor="#18bf10"> <tr> <td colspan="3" align="center" height="60px;" class="tfonts">东信EST-100系列产品谷歌Chrome、火狐Firefox测试页面V4.1.1</td> </tr> <tr> <td class="title">姓名：</td> <td width="100px"> <input type="text" name="text_name" id="text_name" value="" readonly > </td> <td rowspan="5" align="center"> <img id="PhotoID" name="Photo" style="width:102px; height:126px;" src="https://img-blog.csdnimg.cn/2022010709324177507.jpeg"/> </td> </tr> <tr> <td class="title">性别：</td> <td> <input type="text" name="text_sex" id="text_sex" value="" readonly > </td> </tr> <tr> <td class="title">民族：</td> <td> <input type="text" name="text_nation" id="text_nation" value="" readonly > </td> </tr> <tr> <td class="title">出生：</td> <td> <input type="text" name="text_birthday" id="text_birthday" value="" readonly > </td> </tr> <tr> <td class="title">住址：</td> <td > <input type="text" name="text_address" id="text_address" value="" readonly > </td> </tr> <tr> <td class="title">身份证号码：</td> <td> <input type="text" name="text_idNum" id="text_idNum" value="" readonly > </td> <td rowspan="5" align="center"> <img id="PhotoIDFront" name="Photo" style="width:200px;height:126px;" src="https://img-blog.csdnimg.cn/2022010709324231495.jpeg"/> </td> </tr> <tr> <td class="title">签发机关：</td> <td> <input type="text" name="text_dept" id="text_dept" value="" readonly > </td> </tr> <tr> <td class="title">有效期开始：</td> <td> <input type="text" name="text_effDate" id="text_effDate" value="" readonly > </td> </tr> <tr> <td class="title">有效期结束：</td> <td> <input type="text" name="text_expDate" id="text_expDate" value="" readonly > </td> </tr> <tr> <td class="title">身份证物理ID：</td> <td> <input type="text" name="text_ID" id="text_ID" value="" readonly > </td> </tr> <tr> <td class="title">IC卡卡号：</td> <td> <input type="text" name="text_IC_ID" id="text_IC_ID" value="" readonly > </td> <td rowspan="5" align="center"> <img id="PhotoIDBack" name="Photo" style="width:200px;height:126px;" src="https://img-blog.csdnimg.cn/2022010709324243000.jpeg"/> </td> </tr> <tr> <td class="title">银行卡号：</td> <td> <input type="text" name="text_Bank_ID" id="text_Bank_ID" value="" readonly ></td> </tr> <tr> <td class="title">社保卡姓名：</td> <td> <input type="text" name="S_text_name" id="S_text_name" value="" readonly > </td> </tr> <tr> <td class="title">社保卡性别：</td> <td> <input type="text" name="S_text_sex" id="S_text_sex" value="" readonly > </td> </tr> <tr> <td class="title">社保卡名族：</td> <td> <input type="text" name="S_text_nation" id="S_text_nation" value="" readonly > </td> </tr> <tr> <td class="title">社保卡出生日期：</td> <td colspan="2"> <input type="text" name="S_text_birthday" id="S_text_birthday" value="" readonly > </td> </tr> <tr> <td class="title">社保卡身份证号码：</td> <td colspan="2"> <input type="text" name="S_text_idNum" id="S_text_idNum" value="" readonly > </td> </tr> <tr> <td class="title">发卡日期：</td> <td colspan="2"> <input type="text" name="S_text_effDate" id="S_text_effDate" value="" readonly > </td> </tr> <tr> <td class="title">卡有效期：</td> <td colspan="2"> <input type="text" name="S_text_expDate" id="S_text_expDate" value="" readonly > </td> </tr> <tr> <td class="title">社保卡卡号：</td> <td colspan="2"> <input type="text" name="S_text_kahao" id="S_text_kahao" value="" readonly > </td> </tr> <tr> <td class="title">IC卡操作：</td> <td colspan="2"> <input type="text" name="S_text_kacaozuo" id="S_text_kacaozuo" value="" placeholder="M1卡、CPU卡等读写操作在此输入指令，详细见开发文档说明"> </td> </tr> <tr> <td class="title">返回数据：</td> <td colspan="2"> <textarea id="text_result" rows="6" name="text_result" style="color:#FF0000;width:94.3%;" cols="40" readonly></textarea> </td> </tr> <tr> <td colspan="3" align="center" height="50px;"> <input class="butt" type="button" name="clearImage" value="清除信息" onClick="clearinput()"> <input class="butt" type="button" name="readIDCard" value="读身份证" onClick="readIDCard();"> <input class="butt" type="button" name="readM1Card" value="读IC卡卡号" onClick="readM1Card();"> <input class="butt" type="button" name="readBankCard" value="读银行卡卡号" onClick="readBankCard();"> <input class="butt" type="button" name="readSocialCard" value="读社保卡" onClick="readSocialCard();"> <input class="butt" type="button" name="cardOperate" value="IC卡操作" onClick="cardOperate();"> <!--<input Class="butt" type="button" name="IDRequest" value="检测身份证卡片" onClick="IDRequest();">--> <input class="butt" type="button" name="closeSocket" value="关闭设备" onClick="closeSocket();"> </td> </tr> </table> </p> <p align="center"> 测试版本（2019年12月更新）： 谷歌Chrome：78.*.*.* / 火狐Firefox：70.* / 360安全浏览器：10.*.*.* / Internet Explorer：IE11 </p> <p align="center">说明：此SDK支持型号东信EST-100G免驱系列身份证读卡器，其他品牌型号，未经深度测试，不一定适用！</p> <script type="text/javascript"> //================================================================== // **无缝支持新版本谷歌Chrome火狐Firefox网页浏览器，支持H5、Vue、React、jQuery、JSP、PHP、ASP、ASPX、JS、HTML等开发语言 // 控件版本：V4.1.1，前端修改日期：2019.12.09 // ================================================================== var socket; function openReader() { if(socket == null){ socket = new WebSocket(host); }else{ resultMsg("已初始化."); } try { socket.onopen = function () { resultMsg("初始化成功."); getVersion(); }; 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") { posBeep(); 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 //readIDCardImage() //读取身份证正反面照片，如无需使用，建议注释掉。base64格式数据，实际尺寸：540x340px，前端为了排版，做了缩小显示 //ReadCertID(); //身份证物理ID，如无需使用，建议注释掉 } 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; default: break; } } else{ alert("连接异常,请检查是否成功安装控件."); } }; } catch (ex) { alert("连接异常,请检查是否成功安装控件."); } } //提示信息 function resultMsg(msg) { document.getElementById("text_result").value += "\r\n" + msg; } //清空文本框信息 function 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 = ""; } //控件版本号 function getVersion() { socket.send("EST_GetVersion#"); } //蜂鸣器控制，可以自己选择是否蜂鸣 function posBeep() { if (socket.readyState == 1) { socket.send("EST_PosBeep#"); } else { resultMsg("未找到控件，请检查控件是否安装."); } } //读取身份证信息 function readIDCard() { try { if (socket.readyState == 1) { socket.send("EST_Reader_ReadIDCard#"); } else { resultMsg("未找到控件，请检查控件是否安装."); } } catch (ex) { resultMsg("连接异常,请检查是否成功安装控件."); } } //读取身份证正反面照片 function readIDCardImage() { try { if (socket.readyState == 1) { socket.send("EST_GetCertFrontImage#"); socket.send("EST_GetCertBackImage#"); } else { resultMsg("未找到控件，请检查控件是否安装."); } } catch (ex) { resultMsg("连接异常,请检查是否成功安装控件."); } } //读取身份证物理ID，16位8进制数据，一般情况用不到，可以注释掉 function ReadCertID() { try { if (socket.readyState == 1) { socket.send("EST_ReadCertID#"); } else { resultMsg("未找到控件，请检查控件是否安装."); } } catch (ex) { resultMsg("连接异常,请检查是否成功安装控件."); } } //读取IC卡号，包括M1、CPU卡，8位16进制数据 function readM1Card() { try { if (socket.readyState == 1) { socket.send("EST_ReadM1Card#"); } else { resultMsg("未找到控件，请检查控件是否安装."); } } catch (ex) { resultMsg("连接异常,请检查是否成功安装控件."); } } //读取银行卡号，支持QUICK PASS闪付银行卡，大部分卡支持，少部分地方性银行会读取失败 function readBankCard() { try { if (socket.readyState == 1) { socket.send("EST_ReadBankCard#"); } else { resultMsg("未找到控件，请检查控件是否安装."); } } catch (ex) { resultMsg("连接异常,请检查是否成功安装控件."); } } //读社保卡，支持二代芯片社保卡，三代卡无秘钥不能读取 function readSocialCard() { try { if (socket.readyState == 1) { socket.send("EST_ReadSocialCard#"); } else { resultMsg("未找到控件，请检查控件是否安装."); } } catch (ex) { resultMsg("连接异常,请检查是否成功安装控件."); } } //检测是否有身份证存在 function IDRequest() { try { if (socket.readyState == 1) { socket.send("EST_IDRequest#"); } else { resultMsg("未找到控件，请检查控件是否安装."); } } catch (ex) { resultMsg("连接异常,请检查是否成功安装控件."); } } //IC卡读写操作函数，包括M1卡读写、CPU卡读写等功能，详细指令见开发文档中3.2.11 IC卡操作函数部分 function cardOperate() { try { if (socket.readyState == 1) { socket.send(document.getElementById("S_text_kacaozuo").value); } else { resultMsg("未找到控件，请检查控件是否安装."); } } catch (ex) { resultMsg("连接异常,请检查是否成功安装控件."); } } //关闭soket function closeSocket() { try { if(socket != null){ socket.close(); socket = null; } } catch (ex) { } }; // 默认页面打开，就自动打开设备 window.onload=openReader(); </script> </body> </html>

说明：此SDK支持型号东信EST-100G，其他品牌型号，例如千景J15S、华科HK-100、东大HD-100、华视CVR-100U，华旭HX-FDX3S，神思SS628-100U，新中新DKQ-A16D，精伦iDR210，普天CP IDMR02/TG，神盾ICR-100U未经深度测试，不一定适用！

标签： 网站建设 企业官网 项目流程 UI设计 前端开发

热门文章

文章分类

标签云

网站建设 响应式设计 用户体验 SEO优化 前端开发 小程序 电商平台 性能优化

相关文章

您可能感兴趣的其他内容

如何用 paper-lookup 技能检索学术文献并返回可复现的出处信息
2026/9/10 9:19:43 网站建设

如何用 paper-lookup 技能检索学术文献并返回可复现的出处信息

如何用 paper-lookup 技能检索学术文献并返回可复现的出处信息 【免费下载链接】scientific-agent-skills Turn any AI agent into an AI Scientist. The #1 Agent Skills library for science, used by 190,000 scientists worldwide. 165 ready-to-use validated skills plus…...

阅读更多 →
C++迭代器失效与安全删除：从vector erase到容器遍历
2026/9/10 9:17:08 网站建设

C++迭代器失效与安全删除：从vector erase到容器遍历

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …...

阅读更多 →
4 步拿到网盘文件直链：LinkSwift 用户脚本使用指南
2026/9/10 9:16:10 网站建设

4 步拿到网盘文件直链：LinkSwift 用户脚本使用指南

4 步拿到网盘文件直链&#xff1a;LinkSwift 用户脚本使用指南 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼云盘…...

阅读更多 →

需要专业的网站建设服务？

联系我们获取免费的网站建设咨询和方案报价，让我们帮助您实现业务目标

立即咨询