首先樣式就是上面這種，H5方案只保證在微信公眾號和小程序內才能穩定運行~~
下面我們來了解下准備工作吧！！！上圖
上圖中是最基本的准備工作，就不一一贅述了，需要大家細心地把每步做好o，強調一點就是創建實人認證場景時要選擇對應的方案，自己填寫的場景標識要記住，在代碼中會用到的，在創建場景時可能會出現創建error的對話框，多刷新幾次頁面重復創建幾次就可以啦！要有耐心哦。。。
好了那我們廢話不多說，准備工作無誤后直接上代碼把！~
前台頁面：（頁面中是我為了測試復制的頁面，可能很多沒用的js，css等等，但是我就不在這里摘除了哈，實現功能要緊！）
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="css/mui-header.css" />
<link rel="stylesheet" href="css/weui/weui.css" />
<link rel="stylesheet" href="css/weui/weuix.css" />
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<script src="js/zepto.min.js"></script>
<script src="js/zepto.weui.js"></script>
<style>
.area {
margin: 20px auto 0px auto;
}
.mui-content-padded {
margin-top: 25px;
}
.mui-btn {
padding: 10px;
}
.link-area {
display: block;
margin-top: 25px;
text-align: center;
}
.spliter {
color: #bbb;
padding: 0px 8px;
}
#imGes {
width: 100px;
height: 100px;
border: 1px solid #E5E5E5;
border-radius: 50%;
margin: 30px auto;
margin-top: 50px;
}
</style>
</head>
<body ontouchstart>
<header class="mui-bar mui-bar-nav mui-bar-nav-bg" style="background: #007aff;">
<!-- mui-bar-transparent -->
<h1 class="mui-title" style="color: #fff;">實人認證</h1>
</header>
<div class="container" id="content">
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__hd">
<label class="weui-label">姓名</label>
</div>
<div class="weui-cell__bd">
<input id='username' class="weui-input" placeholder="請輸入真實姓名" type="text">
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd">
<label class="weui-label">身份證號</label>
</div>
<div class="weui-cell__bd">
<input id='idCard' class="weui-input" pattern="[0-18]*" placeholder="請輸入身份證號碼" type="text">
</div>
</div>
</div>
<br> <br>
<div class="page-bd-15">
<a href="javascript:;" id='login' onclick="next();" class="weui-btn weui-btn_primary bg-blue">下一步</a>
</div>
</div>
<script>
var pathUrl = getBasePath();
//這里我只引用了成功后回調的頁面失敗的仍然使用阿里雲的錯誤提示，可能錯誤提示要比自己寫的更全面些把~
var success = 'http://mmgy.nat300.top/項目名稱/.../weixin/success.html';
var successRedirect=encodeURIComponent(success);
// var fail = 'http://mmgy.nat300.top/.../weixin/fail.html';
//var failRedirect=encodeURIComponent(fail);
//打開新的頁面
function openWindow(url) {
mui.openWindow({
url : url,
id : url
})
}
function next() {
var name = $("#username").val();
var idCard = $("#idCard").val();
$.ajax({
url : pathUrl + '/expand/message/srrz.htm',
data : {
name : name,
idCard : idCard
},
beforeSend : function() {
$.showLoading();
},
type : "POST",
success : function(response) {
if(response!="" && response!=null){
//官方給出的樣例，如果不使用阿里雲的默認提示就要拼參哦，參數為你要調取的頁面。
//resultUrl === H5認證流程頁面入口URL&successRedirect=https%3A%2F%2Fwww.your_h5_sucess_address&failRedirect=https%3A%2F%2Fwww.your_h5_fail_address
var resultUrl=response+"&successRedirect="+successRedirect;//+"&failRedirect="+failRedirect;
// console.log(resultUrl);
openWindow(resultUrl);
}
},
error : function(res) {
$.hideLoading();
}
})
}
</script>
</body>
</html>
@Controller
@RequestMapping(value = "/expand/message/")
public class BDCSRRZController {
@ResponseBody
@RequestMapping(value = "srrz.htm", method =RequestMethod.POST)
public String SRRZ(HttpServletRequest request){
String rzurl= null;
try {
rzurl= RZUtils.RZ(request);
} catch (ClientException e) {
e.printStackTrace();
}
return rzurl;
}
RZUtils：
public class RZUtils {
private static IAcsClient client;
static {
DefaultProfile profile = DefaultProfile.getProfile(
"cn-hangzhou", // 您的可用區ID
"", // 您的Access Key ID
""); // 您的Access Key Secret
try {
DefaultProfile.addEndpoint("cn-hangzhou", "cn-hangzhou", "Cloudauth", "cloudauth.aliyuncs.com");
} catch (ClientException e) {
e.printStackTrace();
}
client = new DefaultAcsClient(profile);
}
//人臉認證
public static String RZ(HttpServletRequest httpServletRequest) throws ClientException {
String name = httpServletRequest.getParameter("name");
String idCard = httpServletRequest.getParameter("idCard");
HttpSession session = httpServletRequest.getSession();
DescribeVerifyTokenRequest request = new DescribeVerifyTokenRequest();
String BID = UUID.randomUUID().toString();
request.setBizId(BID);
request.setBizType("checkyyr"); //創建方法請參見https://help.aliyun.com/document_detail/127885.htm
request.setName(name);
request.setIdCardNumber(idCard);
DescribeVerifyTokenResponse response = client.getAcsResponse(request);
String verifyToken = response.getVerifyToken();
// verifyPageUrl僅在RPH5BioOnly認證方案下返回
String verifyPageUrl = response.getVerifyPageUrl();
return verifyPageUrl;
}
至此簡單的人臉驗證就接入成功了，后續可能會需要調用拍攝到的圖片等等信息，要仔細看文檔，我這里就簡單把圖片地址調取到，但是地址據說只有5分鍾有效期！！
RZUtils：
public static String HD(HttpServletRequest request) throws ClientException {
//6. 接入方服務端獲取認證狀態和認證資料(注：客戶端無線認證SDK回調中也會攜帶認證狀態, 但建議以服務端調接口獲取的為准進行業務上的判斷和處理)
String resultUrl="";
DescribeVerifyResultRequest verifyResultRequest = new DescribeVerifyResultRequest();
String bid = request.getParameter("BID");
//要傳入這兩個參數，
verifyResultRequest.setBizId(bid);//實人認證時創建的bid
verifyResultRequest.setBizType("");//是控制台中新增場景你自己設置的場景標識
DescribeVerifyResultResponse verifyResultResponse = client.getAcsResponse(verifyResultRequest);
resultUrl = verifyResultResponse.getMaterial().getFaceImageUrl();
System.out.println(resultUrl);
//Integer verifyStatus = verifyResultResponse.getVerifyStatus();
return resultUrl;//圖片http地址。
}
好啦~簡單的應用接入完畢，本人小白一個~如果我有寫的不好或者不對的地方歡迎各路大神指教小弟~(#^.^#)