nodeJS搭建中转服务器，阿里云人脸比对DEMO

第一步：搭建服务端（node端）

1.建立一个文件夹，在文件夹里建立一个packge.json文件将以下内容复制到文件中（因为利用express创建，所以要安装express依赖）

{
"name": "face",
"description": "face",
"version": "0.0.1",
"private": true,
"dependencies": {
"express": "^4.16.4",
"request": "^2.88.0"
}
}

1.再建立一个文件server.js,将以下代码复制到里面

var request = require('request');
var url = require('url');
var crypto = require('crypto');
//var date = new Date().toUTCString(); //这里注释掉，和官方文档有区别。
var express = require('express')
// 这里填写AK和请求
var ak_id = 'x.............m'; //你阿里云的AccessKey id
var ak_secret = 'B................X'; //你阿里云的AccessKey secret
var app = express();

//人脸属性识别
function getFaceAttribute(obj, getMsg) {
var options = {
//这里调用的是人脸属性识别接口
url: 'https://dtplus-cn-shanghai.data.aliyuncs.com/face/verify',
method: 'POST',
body: obj,//这里传递参数
headers: {
'accept': 'application/json',
'content-type': 'application/json',
'date': new Date().toUTCString(), //这里获取时间，防止出现授权失败，时间过期问题
'Authorization': ''
}
};
md5 = function (buffer) {
var hash;
hash = crypto.createHash('md5');
hash.update(buffer);
return hash.digest('base64');
};

sha1 = function (stringToSign, secret) {
var signature;
return signature = crypto.createHmac('sha1', secret).update(stringToSign).digest().toString('base64');
};

// step1: 组stringToSign [StringToSign = #{method}\\n#{accept}\\n#{data}\\n#{contentType}\\n#{date}\\n#{action}]
var body = options.body || '';
var bodymd5;
if (body === void 0 || body === '') {
bodymd5 = body;
} else {
bodymd5 = md5(new Buffer(body));
}
console.log(bodymd5)
var stringToSign = options.method + "\n" + options.headers.accept + "\n" + bodymd5 + "\n" + options.headers['content-type'] + "\n" + options.headers.date + "\n" + url.parse(options.url).path;
console.log("step1-Sign string:", stringToSign);
// step2: 加密 [Signature = Base64( HMAC-SHA1( AccessSecret, UTF-8-Encoding-Of(StringToSign) ) )]
var signature = sha1(stringToSign, ak_secret);
// console.log("step2-signature:", signature);
// step3: 组authorization header [Authorization = Dataplus AccessKeyId + ":" + Signature]
var authHeader = "Dataplus " + ak_id + ":" + signature;
console.log("step3-authorization Header:", authHeader);
options.headers.Authorization = authHeader;
console.log('authHeader', authHeader);
// step4: send request
/*if (error) {
console.log("error", error)
}
console.log("step4-response body:", response.statusCode, body)*/
function callback(error, response, body) {
getMsg(error, response, body);
}
request(options, callback);
}

//设置跨域访问
app.all('*', function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
app.get('/getFaceAttribute', function (req, res) {
getFaceAttribute('{type:0,image_url_1:"' + req.query.image_url_1 + '",content_1:"' + req.query.content_1 + '",image_url_2:"' + req.query.image_url_2 + '",content_2:"' + req.query.content_2 +'"}', function (error, response, body) {
if (error) {
console.log("error", error)
}
console.log("step4-response body:", response.statusCode, body)
res.end(JSON.stringify(body));
});
});
app.listen(8888,function(){
console.log('listening 8888')
});
console.log("port at 8888");

建立好这两个文件后在控制台进入改文件夹执行以下命令

npm install

执行成功后再执行

node server.js

服务端程序就跑好了。

在浏览器端输入 http://127.0.0.1:8888/getFaceAttribute 就可以查看服务端程序了。

第二步：书写前端代码

1.建立一个html文件将以下代码复制到页面里

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
   <head>
   <body>
   <div>
       <img class="img1" style="max-width:300px;max-height:300px" src="" />
       <img class="img2" style="max-width:300px;max-height:300px" src="" />
   </div>
   <div style="text-align:center">同一个人？
   <button onclick="getImg()">点我判断</button>
   </div>
   <div style="text-align:center" class="isSamePerson">匹配指数</div>
   <script>
   var imgarr = ['http://img.hb.aicdn.com/0d9d568146f8ae162279235dcf07c549391037b675c0-cbsL1p_fw658',
               'http://img.hb.aicdn.com/7f6c16bc552aac4c097e5e7e0a050f2cae9bbadf2466e-1m5xe9_fw658',
               'https://hbimg.b0.upaiyun.com/d20cfe57e4456d409d5c1bb85551afc5ca35778e5cc8-e8RqAO_fw658',
               'https://hbimg.b0.upaiyun.com/5980883930ef4770ca9086dc1ad4e8e51a66b8d048f7-jasSwH_fw658',
               'https://hbimg.b0.upaiyun.com/c628845dec9cc1a37537dcfd8239c054ef43e13c56600-zqJBsk_fw658',
               'https://hbimg.b0.upaiyun.com/bcee16a7a538de2146e362022d0b28078302a82a11f7b4-GMs2qD_fw658',
               'https://hbimg.b0.upaiyun.com/d81613952e8345db9d018787e7e20fa35191359c1b87eb-298QRe_fw658',
               'https://hbimg.b0.upaiyun.com/188308a2c0b85bf33a11244d7598b0f26e3407cafe20-wlMzrK_fw658',
               'https://hbimg.b0.upaiyun.com/4df2d6f643d824584e21496aea13eeafab7d7ff32cc90-3oatlw_fw658']
   function getImg(){
   var img1 = imgarr[Math.floor(Math.random()*imgarr.length)];
   var img2 = imgarr[Math.floor(Math.random()*imgarr.length)];
   $('.img1').attr('src',img1)
   $('.img2').attr('src',img2)
   $.ajax({
           type:"get",
           url:"http://127.0.0.1:8888/getFaceAttribute",//
           async:true,
           data:{
           type:0,
           image_url_1:img1,
           content_1:'',
           image_url_2:img2,
           content_2:''
           },
           success:function(data){
var des = '匹配指数'
               var data = JSON.parse(data)
               if(data.confidence >0){
                   $('.isSamePerson').text(des + data.confidence);
               }else{
               console.log(data);
               }

           },
           error:function(data){
               console.log('error')
               console.log(data);
           }
       });
   }

getImg()
</script>
</body>
</html>

打开html文件就可以访问了，页面如下图所示。

nodeJS搭建中转服务器，阿里云人脸比对DEMO

其实写这个DEMO踩了好多坑，踩坑经历就不写在这里了，我一开始对nodejs搭建后台都是一脸懵比，也看了网站的帖子并借鉴了过来。代码里面括号里的提示或备注就是踩坑总结。

详细内容请参考阿里云人脸识别官方文档 https://help.aliyun.com/knowledge_detail/53535.html

nodeJS搭建中转服务器，阿里云人脸比对DEMO

相关推荐