liuchang/fe_service_ebtp_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'uat-export-face-live-detection' of http://gitlab.tianti.tg.unicom.local/eshop/fe_service_ebtp_frontend into release_electronic_bid_evaluation_room

Browse Source
This commit is contained in:
袁帅
2022-10-18 15:22:59 +08:00
parent c95434ceb0 4965600636
commit cee9fb84b4
16 changed files with 12607 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -125,6 +125,7 @@
"prettier": "^2.0.1",
"pro-download": "1.0.1",
"puppeteer-core": "^5.0.0",
"react-iframe": "^1.8.0",
"react-pdf-js": "^4.0.1",
"stylelint": "^13.0.0",
"typescript": "^3.9.7"

4
public/faceLoginIE/cs.css Normal file
View File

@ -0,0 +1,4 @@
@charset "utf-8";
/* CSS Document */
#webcam{ border: 1px solid #666666; width: auto; height: auto; float: left; }

866
public/faceLoginIE/excanvas.js Normal file
View File

@ -0,0 +1,866 @@
// Copyright 2006 Google Inc.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
// Known Issues: (From VML version)
//
// * Patterns are not implemented.
// * Radial gradient are not implemented. The VML version of these look very
// different from the canvas one.
// * Coordsize. The width and height attribute have higher priority than the
// width and height style values which isn't correct.
// * Painting mode isn't implemented.
// * Canvas width/height should is using content-box by default. IE in
// Quirks mode will draw the canvas using border-box. Either change your
// doctype to HTML5
// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
// or use Box Sizing Behavior from WebFX
// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
// * Optimize. There is always room for speed improvements.
//Known Issues: Silverlight version
//
// * Doing a transformation during a path (ie lineTo, transform, lineTo) will
// not work corerctly because the transform is done to the whole path (ie
// transform, lineTo, lineTo)
// * Patterns are not yet implemented.
// only add this code if we do not already have a canvas implementation
if (!window.CanvasRenderingContext2D) {
(function() {
var xamlId;
var G_vmlCanvasManager_ = {
init: function(opt_doc) {
var doc = opt_doc || document;
// Create a dummy element so that IE will allow canvas elements to be
// recognized.
doc.createElement('canvas');
if (/MSIE/.test(navigator.userAgent) && !window.opera) {
var self = this;
createXamlScriptTag();
doc.attachEvent('onreadystatechange', function() {
self.init_(doc);
});
}
},
init_: function(doc) {
// setup default css
var ss = doc.createStyleSheet();
ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
// default size is 300x150 in Gecko and Opera
'text-align:left;width:300px;height:150px}' +
'canvas *{width:100%;height:100%;border:0;' +
'background:transparen;margin:0}' +
'canvas div {position:relative}' +
// Place a div on top of the plugin.
'canvas div div{position:absolute;top:0;' +
// needs to be "non transparent"
'filter:alpha(opacity=0);background:red}';
// find all canvas elements
var els = doc.getElementsByTagName('canvas');
for (var i = 0; i < els.length; i++) {
if (!els[i].getContext) {
this.initElement(els[i]);
}
}
},
/**
* Public initializes a canvas element so that it can be used as canvas
* element from now on. This is called automatically before the page is
* loaded but if you are creating elements using createElement you need to
* make sure this is called on the element.
* @param {HTMLElement} el The canvas element to initialize.
* @return {HTMLElement} the element that was created.
*/
initElement: function(el) {
el.getContext = function() {
if (this.context_) {
return this.context_;
}
return this.context_ = new CanvasRenderingContext2D_(this);
};
var attrs = el.attributes;
if (attrs.width && attrs.width.specified) {
// TODO: use runtimeStyle and coordsize
// el.getContext().setWidth_(attrs.width.nodeValue);
el.style.width = attrs.width.nodeValue + 'px';
} else {
el.width = el.clientWidth;
}
if (attrs.height && attrs.height.specified) {
// TODO: use runtimeStyle and coordsize
// el.getContext().setHeight_(attrs.height.nodeValue);
el.style.height = attrs.height.nodeValue + 'px';
} else {
el.height = el.clientHeight;
}
// insert object tag
el.innerHTML = getObjectHtml();
// do not use inline function because that will leak memory
el.attachEvent('onpropertychange', onPropertyChange);
return el;
}
};
function onPropertyChange(e) {
var el = e.srcElement;
switch (e.propertyName) {
case 'width':
el.style.width = el.attributes.width.nodeValue + 'px';
el.getContext().clearRect();
break;
case 'height':
el.style.height = el.attributes.height.nodeValue + 'px';
el.getContext().clearRect();
break;
}
}
G_vmlCanvasManager_.init();
function createXamlScriptTag() {
// This script tag contains the boilerplate XAML.
document.write('<script type=text/xaml>' +
'<Canvas x:Name="root" ' +
'xmlns="http://schemas.microsoft.com/client/2007" ' +
'xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ' +
'Width="300" ' +
'Height="150" ' +
'Background="Transparent"> ' +
'</Canvas>' +
'</script>');
// Find the id of the writtenscript file.
var scripts = document.scripts;
var script = scripts[scripts.length - 1];
xamlId = script.uniqueID;
script.id = xamlId;
}
function getObjectHtml(fn) {
return '<div><object type="application/x-silverlight" >' +
'<param name="windowless" value="true">' +
'<param name="background" value="transparent">' +
'<param name="source" value="#' + xamlId + '">' +
'</object><div></div></div>';
}
function hasSilverlight() {
try {
new ActiveXObject('AgControl.AgControl');
return true;
} catch (_) {
return false;
}
}
// precompute "00" to "FF"
var dec2hex = [];
for (var i = 0; i < 16; i++) {
for (var j = 0; j < 16; j++) {
dec2hex[i * 16 + j] = i.toString(16) + j.toString(16);
}
}
function createMatrixIdentity() {
return [
[1, 0, 0],
[0, 1, 0],
[0, 0, 1]
];
}
function matrixMultiply(m1, m2) {
var result = createMatrixIdentity();
for (var x = 0; x < 3; x++) {
for (var y = 0; y < 3; y++) {
var sum = 0;
for (var z = 0; z < 3; z++) {
sum += m1[x][z] * m2[z][y];
}
result[x][y] = sum;
}
}
return result;
}
function doTransform(ctx) {
transformObject(ctx, getRoot(ctx), ctx.m_);
}
function transformObject(ctx, obj, m) {
var transform = obj.renderTransform;
var matrix;
if (!transform) {
transform = create(ctx, '<MatrixTransform/>');
matrix = create(ctx, '<Matrix/>');
transform.matrix = matrix;
obj.renderTransform = transform;
} else {
matrix = transform.matrix;
}
matrix.m11 = m[0][0];
matrix.m12 = m[0][1];
matrix.m21 = m[1][0];
matrix.m22 = m[1][1];
matrix.offsetX = m[2][0];
matrix.offsetY = m[2][1];
}
function copyState(o1, o2) {
o2.fillStyle = o1.fillStyle;
o2.lineCap = o1.lineCap;
o2.lineJoin = o1.lineJoin;
o2.lineWidth = o1.lineWidth;
o2.miterLimit = o1.miterLimit;
o2.shadowBlur = o1.shadowBlur;
o2.shadowColor = o1.shadowColor;
o2.shadowOffsetX = o1.shadowOffsetX;
o2.shadowOffsetY = o1.shadowOffsetY;
o2.strokeStyle = o1.strokeStyle;
o2.globalAlpha = o1.globalAlpha;
o2.arcScaleX_ = o1.arcScaleX_;
o2.arcScaleY_ = o1.arcScaleY_;
}
// precompute "00" to "FF"
var decToHex = [];
for (var i = 0; i < 16; i++) {
for (var j = 0; j < 16; j++) {
decToHex[i * 16 + j] = i.toString(16) + j.toString(16);
}
}
// Silverlight does not support spelling gray as grey.
var colorData = {
darkgrey: '#A9A9A9',
darkslategrey: '#2F4F4F',
dimgrey: '#696969',
grey: '#808080',
lightgrey: '#D3D3D3',
lightslategrey: '#778899',
slategrey: '#708090'
};
function getRgbHslContent(styleString) {
var start = styleString.indexOf('(', 3);
var end = styleString.indexOf(')', start + 1);
var parts = styleString.substring(start + 1, end).split(',');
// add alpha if needed
if (parts.length == 4 && styleString.substr(3, 1) == 'a') {
alpha = +parts[3];
} else {
parts[3] = 1;
}
return parts;
}
function percent(s) {
return parseFloat(s) / 100;
}
function clamp(v, min, max) {
return Math.min(max, Math.max(min, v));
}
function hslToRgb(parts) {
var r, g, b;
h = parseFloat(parts[0]) / 360 % 360;
if (h < 0)
h++;
s = clamp(percent(parts[1]), 0, 1);
l = clamp(percent(parts[2]), 0, 1);
if (s == 0) {
r = g = b = l; // achromatic
} else {
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hueToRgb(p, q, h + 1 / 3);
g = hueToRgb(p, q, h);
b = hueToRgb(p, q, h - 1 / 3);
}
return decToHex[Math.floor(r * 255)] +
decToHex[Math.floor(g * 255)] +
decToHex[Math.floor(b * 255)];
}
function hueToRgb(m1, m2, h) {
if (h < 0)
h++;
if (h > 1)
h--;
if (6 * h < 1)
return m1 + (m2 - m1) * 6 * h;
else if (2 * h < 1)
return m2;
else if (3 * h < 2)
return m1 + (m2 - m1) * (2 / 3 - h) * 6;
else
return m1;
}
function translateColor(styleString) {
var str, alpha = 1;
styleString = String(styleString);
if (styleString.charAt(0) == '#') {
return styleString;
} else if (/^rgb/.test(styleString)) {
var parts = getRgbHslContent(styleString);
var str = '',
n;
for (var i = 0; i < 3; i++) {
if (parts[i].indexOf('%') != -1) {
n = Math.floor(percent(parts[i]) * 255);
} else {
n = +parts[i];
}
str += decToHex[clamp(n, 0, 255)];
}
alpha = parts[3];
} else if (/^hsl/.test(styleString)) {
var parts = getRgbHslContent(styleString);
str = hslToRgb(parts);
alpha = parts[3];
} else if (styleString in colorData) {
return colorData[styleString];
} else {
return styleString;
}
return '#' + dec2hex[Math.floor(alpha * 255)] + str;
}
function processLineCap(lineCap) {
switch (lineCap) {
case 'butt':
return 'flat';
case 'round':
return 'round';
case 'square':
default:
return 'square';
}
}
function getRoot(ctx) {
return ctx.canvas.firstChild.firstChild.content.findName('root');
}
function create(ctx, s, opt_args) {
if (opt_args) {
s = s.replace(/\%(\d+)/g, function(match, index) {
return opt_args[+index - 1];
});
}
try {
return ctx.canvas.firstChild.firstChild.content.createFromXaml(s);
} catch (ex) {
throw Error('Could not create XAML from: ' + s);
}
}
function drawShape(ctx, s, opt_args) {
var canvas = ctx.lastCanvas_ || create(ctx, '<Canvas/>');
var shape = create(ctx, s, opt_args);
canvas.children.add(shape);
transformObject(ctx, canvas, ctx.m_);
if (!ctx.lastCanvas_) {
getRoot(ctx).children.add(canvas);
ctx.lastCanvas_ = canvas;
}
return shape;
}
function createBrushObject(ctx, value) {
if (value instanceof CanvasGradient_) {
return value.createBrush_(ctx);
} else if (value instanceof CanvasPattern_) {
throw Error('Not implemented');
} else {
return create(ctx, '<SolidColorBrush Color="%1"/>', [translateColor(value)]);
}
}
/**
* This class implements CanvasRenderingContext2D interface as described by
* the WHATWG.
* @param {HTMLElement} surfaceElement The element that the 2D context should
* be associated with
*/
function CanvasRenderingContext2D_(surfaceElement) {
this.m_ = createMatrixIdentity();
this.lastCanvas_ = null;
this.mStack_ = [];
this.aStack_ = [];
this.currentPath_ = [];
// Canvas context properties
this.strokeStyle = '#000';
this.fillStyle = '#000';
this.lineWidth = 1;
this.lineJoin = 'miter';
this.lineCap = 'butt';
this.miterLimit = 10;
this.globalAlpha = 1;
this.canvas = surfaceElement;
};
var contextPrototype = CanvasRenderingContext2D_.prototype;
contextPrototype.clearRect = function() {
var root = getRoot(this);
root.children.clear();
// TODO: Implement
this.currentPath_ = [];
this.lastCanvas_ = null;
};
contextPrototype.beginPath = function() {
// TODO: Branch current matrix so that save/restore has no effect
// as per safari docs.
this.currentPath_ = [];
};
contextPrototype.moveTo = function(aX, aY) {
this.currentPath_.push('M' + aX + ',' + aY);
};
contextPrototype.lineTo = function(aX, aY) {
if (this.currentPath_.length == 0) return;
this.currentPath_.push('L' + aX + ',' + aY);
};
contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
aCP2x, aCP2y,
aX, aY) {
if (this.currentPath_.length == 0) return;
this.currentPath_.push('C' + aCP1x + ',' + aCP1y + ' ' +
aCP2x + ',' + aCP2y + ' ' +
aX + ' ' + aY);
};
contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
if (this.currentPath_.length == 0) return;
this.currentPath_.push('Q' + aCPx + ',' + aCPy + ' ' +
aX + ',' + aY);
};
contextPrototype.arcTo = function(x1, y1, x2, y2, radius) {
if (this.currentPath_.length == 0) return;
// TODO: Implement
};
contextPrototype.arc = function(aX, aY, aRadius,
aStartAngle, aEndAngle, aClockwise) {
var deltaAngle = Math.abs(aStartAngle - aEndAngle);
// If start and stop are the same WebKit and Moz does nothing
if (aStartAngle == aEndAngle) {
// different browsers behave differently here so we do the easiest thing
return;
}
var endX = aX + aRadius * Math.cos(aEndAngle);
var endY = aY + aRadius * Math.sin(aEndAngle);
if (deltaAngle >= 2 * Math.PI) {
// if larger than 2PI
this.arc(aX, aY, aRadius, aStartAngle, aStartAngle + Math.PI, aClockwise);
this.arc(aX, aY, aRadius, aStartAngle + Math.PI,
aStartAngle + 2 * Math.PI, aClockwise);
// now move to end point
this.moveTo(endX, endY);
return;
}
var startX = aX + aRadius * Math.cos(aStartAngle);
var startY = aY + aRadius * Math.sin(aStartAngle);
var rotationAngle = deltaAngle * 180 / Math.PI; // sign, abs?
var sweepDirection = aClockwise ? 0 : 1;
var isLargeArc = rotationAngle >= 180 == Boolean(aClockwise) ? 0 : 1;
if (this.currentPath_.length != 0) {
// add line to start point
this.lineTo(startX, startY);
} else {
this.moveTo(startX, startY);
}
this.currentPath_.push('A' + aRadius + ',' + aRadius + ' ' +
rotationAngle + ' ' +
isLargeArc + ' ' +
sweepDirection + ' ' +
endX + ',' + endY);
};
contextPrototype.rect = function(aX, aY, aWidth, aHeight) {
this.moveTo(aX, aY);
this.lineTo(aX + aWidth, aY);
this.lineTo(aX + aWidth, aY + aHeight);
this.lineTo(aX, aY + aHeight);
this.closePath();
};
contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) {
// Will destroy any existing path (same as FF behaviour)
this.beginPath();
this.moveTo(aX, aY);
this.lineTo(aX + aWidth, aY);
this.lineTo(aX + aWidth, aY + aHeight);
this.lineTo(aX, aY + aHeight);
this.closePath();
this.stroke();
this.currentPath_ = [];
};
contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
// Will destroy any existing path (same as FF behaviour)
this.beginPath();
this.moveTo(aX, aY);
this.lineTo(aX + aWidth, aY);
this.lineTo(aX + aWidth, aY + aHeight);
this.lineTo(aX, aY + aHeight);
this.closePath();
this.fill();
this.currentPath_ = [];
};
contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
return new LinearCanvasGradient_(aX0, aY0, aX1, aY1);
};
contextPrototype.createRadialGradient = function(x0, y0,
r0, x1,
y1, r1) {
return new RadialCanvasGradient_(x0, y0, r0, x1, y1, r1);
};
contextPrototype.drawImage = function(image, var_args) {
var dx, dy, dw, dh, sx, sy, sw, sh;
// For Silverlight we don't need to get the size of the image since
// Silverlight uses the image original dimension if not provided.
if (arguments.length == 3) {
dx = arguments[1];
dy = arguments[2];
// Keep sx, sy, sw, dw, sh and dh undefined
} else if (arguments.length == 5) {
dx = arguments[1];
dy = arguments[2];
dw = arguments[3];
dh = arguments[4];
// Keep sx, sy, sw and sh undefined
} else if (arguments.length == 9) {
sx = arguments[1];
sy = arguments[2];
sw = arguments[3];
sh = arguments[4];
dx = arguments[5];
dy = arguments[6];
dw = arguments[7];
dh = arguments[8];
} else {
throw Error('Invalid number of arguments');
}
var slImage;
// If we have a source rect we need to clip the image.
if (arguments.length == 9) {
slImage = drawShape(this, '<Image Source="%1"/>', [image.src]);
var clipRect = create(this,
'<RectangleGeometry Rect="%1,%2,%3,%4"/>', [sx, sy, sw, sh]);
slImage.clip = clipRect;
var m = createMatrixIdentity();
// translate to 0,0
m[2][0] = -sx;
m[2][1] = -sy;
// scale
var m2 = createMatrixIdentity();
m2[0][0] = dw / sw;
m2[1][1] = dh / sh;
m = matrixMultiply(m, m2);
// translate to destination
m[2][0] += dx;
m[2][1] += dy;
transformObject(this, slImage, m);
} else {
slImage = drawShape(this,
'<Image Source="%1" Canvas.Left="%2" Canvas.Top="%3"/>', [image.src, dx, dy]);
if (dw != undefined || dh != undefined) {
slImage.width = dw;
slImage.height = dh;
slImage.stretch = 'fill';
}
}
};
contextPrototype.stroke = function() {
if (this.currentPath_.length == 0) return;
var path = drawShape(this, '<Path Data="%1"/>', [this.currentPath_.join(' ')]);
path.stroke = createBrushObject(this, this.strokeStyle);
path.opacity = this.globalAlpha;
path.strokeThickness = this.lineWidth;
path.strokeMiterLimit = this.miterLimit;
path.strokeLineJoin = this.lineJoin;
// Canvas does not differentiate start from end
path.strokeEndLineCap = path.strokeStartLineCap =
processLineCap(this.lineCap);
};
contextPrototype.fill = function() {
if (this.currentPath_.length == 0) return;
var path = drawShape(this, '<Path Data="%1"/>', [this.currentPath_.join(' ')]);
// The spec says to use non zero but Silverlight uses EvenOdd by defaul
path.data.fillRule = 'NonZero';
path.fill = createBrushObject(this, this.fillStyle);
path.fill.opacity = this.globalAlpha;
// TODO: What about even-odd etc?
};
contextPrototype.closePath = function() {
this.currentPath_.push('z');
};
/**
* Sets the transformation matrix and marks things as dirty
*/
function setM(self, m) {
self.m_ = m;
self.lastCanvas_ = null;
};
contextPrototype.save = function() {
var o = {};
copyState(this, o);
this.aStack_.push(o);
this.mStack_.push(this.m_);
setM(this, matrixMultiply(createMatrixIdentity(), this.m_));
};
contextPrototype.restore = function() {
copyState(this.aStack_.pop(), this);
setM(this, this.mStack_.pop());
};
contextPrototype.translate = function(aX, aY) {
var m1 = [
[1, 0, 0],
[0, 1, 0],
[aX, aY, 1]
];
setM(this, matrixMultiply(m1, this.m_));
};
contextPrototype.rotate = function(aRot) {
var c = Math.cos(aRot);
var s = Math.sin(aRot);
var m1 = [
[c, s, 0],
[-s, c, 0],
[0, 0, 1]
];
setM(this, matrixMultiply(m1, this.m_));
};
contextPrototype.scale = function(aX, aY) {
var m1 = [
[aX, 0, 0],
[0, aY, 0],
[0, 0, 1]
];
setM(this, matrixMultiply(m1, this.m_));
};
contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) {
var m1 = [
[m11, m12, 0],
[m21, m22, 0],
[dx, dy, 1]
];
setM(this, matrixMultiply(m1, this.m_));
};
contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
setM(this, [
[m11, m12, 0],
[m21, m22, 0],
[dx, dy, 1],
]);
};
contextPrototype.clip = function() {
if (this.currentPath_.length) {
var clip = this.currentPath_.join(' ');
var canvas = create(this, '<Canvas Width="%1" Height="%2" Clip="%3"/>', [getRoot(this).width, getRoot(this).height, clip]);
var parent = this.lastCanvas_ || getRoot(this);
parent.children.add(canvas);
this.lastCanvas_ = canvas;
}
};
contextPrototype.createPattern = function() {
return new CanvasPattern_;
};
// Gradient / Pattern Stubs
function CanvasGradient_() {
this.colors_ = [];
}
CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
aColor = translateColor(aColor);
this.colors_.push({
offset: aOffset,
color: aColor
});
};
CanvasGradient_.prototype.createStops_ = function(ctx, brushObj, colors) {
var gradientStopCollection = brushObj.gradientStops;
for (var i = 0, c; c = colors[i]; i++) {
var color = translateColor(c.color);
gradientStopCollection.add(create(ctx,
'<GradientStop Color="%1" Offset="%2"/>', [color, c.offset]));
}
};
function LinearCanvasGradient_(x0, y0, x1, y1) {
CanvasGradient_.call(this);
this.x0_ = x0;
this.y0_ = y0;
this.x1_ = x1;
this.y1_ = y1;
}
LinearCanvasGradient_.prototype = new CanvasGradient_;
LinearCanvasGradient_.prototype.createBrush_ = function(ctx) {
var brushObj = create(ctx, '<LinearGradientBrush MappingMode="Absolute" ' +
'StartPoint="%1,%2" EndPoint="%3,%4"/>', [this.x0_, this.y0_, this.x1_, this.y1_]);
this.createStops_(ctx, brushObj, this.colors_);
return brushObj;
};
function isNanOrInfinite(v) {
return isNaN(v) || !isFinite(v);
}
function RadialCanvasGradient_(x0, y0, r0, x1, y1, r1) {
if (r0 < 0 || r1 < 0 || isNanOrInfinite(x0) || isNanOrInfinite(y0) ||
isNanOrInfinite(x1) || isNanOrInfinite(y1)) {
// IE does not support DOMException so this is as close as we get.
var error = Error('DOMException.INDEX_SIZE_ERR');
error.code = 1;
throw error;
}
CanvasGradient_.call(this);
this.x0_ = x0;
this.y0_ = y0;
this.r0_ = r0;
this.x1_ = x1;
this.y1_ = y1;
this.r1_ = r1;
}
RadialCanvasGradient_.prototype = new CanvasGradient_;
CanvasGradient_.prototype.createBrush_ = function(ctx) {
if (this.x0_ == this.x1_ && this.y0_ == this.y1_ && this.r0_ == this.r1_) {
return null;
}
var radius = Math.max(this.r0_, this.r1_);
var minRadius = Math.min(this.r0_, this.r1_);
var brushObj = create(ctx, '<RadialGradientBrush MappingMode="Absolute" ' +
'GradientOrigin="%1,%2" Center="%3,%4" ' +
'RadiusX="%5" RadiusY="%5"/>', [this.x0_, this.y0_, this.x1_, this.y1_, radius]);
var colors = this.colors_.concat();
if (this.r1_ < this.r0_) {
// reverse color stop array
colors.reverse();
for (var i = 0, c; c = colors[i]; i++) {
c.offset = 1 - c.offset;
}
}
// sort the color stops
colors.sort(function(c1, c2) {
return c1.offset - c2.offset;
});
if (minRadius > 0) {
// We need to adjust the color stops since SL always have the inner radius
// at (0, 0) so we change the stops in case the min radius is not 0.
for (var i = 0, c; c = colors[i]; i++) {
c.offset = minRadius / radius + (radius - minRadius) / radius * c.offset;
}
}
this.createStops_(ctx, brushObj, colors);
return brushObj;
};
function CanvasPattern_() {}
// set up externs
G_vmlCanvasManager = G_vmlCanvasManager_;
CanvasRenderingContext2D = CanvasRenderingContext2D_;
CanvasGradient = CanvasGradient_;
CanvasPattern = CanvasPattern_;
})();
}

97
public/faceLoginIE/index.html Normal file
View File

@ -0,0 +1,97 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery-webcam-master</title>
<!-- <link href="cs.css" rel="stylesheet" type="text/css"> -->
<script src="jquery.js"></script>
<script src="jquery.webcam.min.js"></script>
<!-- <script src="excanvas.js"></script> -->
</head>
<body>
<div id="webcam" style="float: left; clear: both;"></div>
<!-- <input id="snapBtn" type="button" value="人脸识别" style="float: left; clear: both;"/>
<img id="base64image" src='' width="450" height="320" style="float: left; clear: both;"/> -->
<script type="text/javascript">
var pos = 0, ctx = null, saveCB,w = 380,h= 200, image = new Array();
var canvas = document.createElement("canvas");//创建画布指定宽度和高度
canvas.setAttribute('width', 320);
canvas.setAttribute('height', 240);
document.body.appendChild(canvas);
// canvas = window.G_vmlCanvasManager.initElement(canvas);
ctx = canvas.getContext("2d");//设置画布为2d，未来可能支持3d
image = ctx.getImageData(0, 0, 320, 240);//截图320*240，即整个画布作为有效区(cutx?)
$(document).ready(function() {
$("#webcam").webcam({
width: w,
height: h,
mode: "callback",
swffile: "jscam_canvas_only.swf", // 这里引入swf文件，注意路径
onTick: function(remain) {},
onSave: function(data) {
var col = data.split(";");//把data切割为数组
var img = image;
//绘制图像
//参数data 只是每行的数据 ，例如320*240 大小的照片，一张完整的照片下来需要240个data，每个data有320个rgb
for(var i = 0; i < 320; i++) {
//转换为十进制
var tmp = parseInt(col[i]);
img.data[pos + 0] = (tmp >> 16) & 0xff;
img.data[pos + 1] = (tmp >> 8) & 0xff;
img.data[pos + 2] = tmp & 0xff;
img.data[pos + 3] = 0xff;
pos+= 4;
}
//当绘制320*240像素的图片时发给后端php
if (pos == 4 * 320 * 240) {
//把图像放到画布上,输出为png格式
ctx.putImageData(img, 0, 0);
window.parent.postMessage({"image": canvas.toDataURL("image/png")}, '*');
image = new Array();
pos = 0;
}
// image.push(data);
// pos += 4 * 320;
//post>= 4 * 320(x轴像素) * 240(y轴像素) 表示读取图像数据完毕
// if (pos >= 4 * 320 * 240) {
// window.parent.postMessage({"image":image.join('|')}, '*');
// image = new Array();
// pos = 0;
// }
},
onCapture: function(data) {
webcam.save();
// Show a flash for example
},
debug: function(type, string) {
console.log('type:' + type + ',string:' + string);
// Write debug information to console.log() or a div
},
onLoad: function() {
// Page load
}
});
// $('#snapBtn').on('click', function() {
// webcam.capture();
// });
function receiveMessageFromParent ( event ) {
if(event.data == 'releaseCamera'){
location.reload();
}else if(event.data = 'capture'){
webcam.capture();
}
//$('#base64image').attr('src', 'data:image/jpg;base64,' + event.data.data);
};
window.addEventListener('message', receiveMessageFromParent, false);
});
</script>
</body>
</html>

10881
public/faceLoginIE/jquery.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

99
public/faceLoginIE/jquery.webcam.js Normal file
View File

@ -0,0 +1,99 @@
/**
* @license jQuery webcam plugin v1.0.0 09/12/2010
* http://www.xarg.org/project/jquery-webcam-plugin/
*
* Copyright (c) 2010, Robert Eisele (robert@xarg.org)
* Dual licensed under the MIT or GPL Version 2 licenses.
**/
(function ($) {
var webcam = {
"extern": null, // external select token to support jQuery dialogs
"append": true, // append object instead of overwriting
"width": 320,
"height": 240,
"mode": "callback", // callback | save | stream
"swffile": "jscam.swf",
"quality": 85,
"debug": function () {},
"onCapture": function () {},
"onTick": function () {},
"onSave": function () {},
"onLoad": function () {}
};
window["webcam"] = webcam;
$["fn"]["webcam"] = function(options) {
if (typeof options === "object") {
for (var ndx in webcam) {
if (options[ndx] !== undefined) {
webcam[ndx] = options[ndx];
}
}
}
var source = '<object id="XwebcamXobjectX" type="application/x-shockwave-flash" data="'+webcam["swffile"]+'" width="'+webcam["width"]+'" height="'+webcam["height"]+'"><param name="movie" value="'+webcam["swffile"]+'" /><param name="FlashVars" value="mode='+webcam["mode"]+'&amp;quality='+webcam["quality"]+'" /><param name="allowScriptAccess" value="always" /></object>';
if (null !== webcam["extern"]) {
$(webcam["extern"])[webcam["append"] ? "append" : "html"](source);
} else {
this[webcam["append"] ? "append" : "html"](source);
}
var run = 3;
(_register = function() {
var cam = document.getElementById('XwebcamXobjectX');
if (cam && cam["capture"] !== undefined) {
/* Simple callback methods are not allowed :-/ */
webcam["capture"] = function(x) {
try {
return cam["capture"](x);
} catch(e) {}
}
webcam["save"] = function(x) {
try {
return cam["save"](x);
} catch(e) {}
}
webcam["setCamera"] = function(x) {
try {
return cam["setCamera"](x);
} catch(e) {}
}
webcam["getCameraList"] = function() {
try {
return cam["getCameraList"]();
} catch(e) {}
}
webcam["pauseCamera"] = function() {
try {
return cam["pauseCamera"]();
} catch(e) {}
}
webcam["resumeCamera"] = function() {
try {
return cam["resumeCamera"]();
} catch(e) {}
}
webcam["onLoad"]();
} else if (0 == run) {
webcam["debug"]("error", "Flash movie not yet registered!");
} else {
/* Flash interface not ready yet */
run--;
window.setTimeout(_register, 1000 * (4 - run));
}
})();
}
})(jQuery);

10
public/faceLoginIE/jquery.webcam.min.js vendored Normal file
View File

@ -0,0 +1,10 @@
/*
jQuery webcam plugin v1.0.0 09/12/2010
http://www.xarg.org/project/jquery-webcam-plugin/
Copyright (c) 2010, Robert Eisele (robert@xarg.org)
Dual licensed under the MIT or GPL Version 2 licenses.
*/
(function(f){var a={extern:null,append:!0,width:320,height:240,mode:"callback",swffile:"jscam.swf",quality:85,debug:function(){},onCapture:function(){},onTick:function(){},onSave:function(){},onLoad:function(){}};window.webcam=a;f.fn.webcam=function(b){if("object"===typeof b)for(var d in a)void 0!==b[d]&&(a[d]=b[d]);b='<object id="XwebcamXobjectX" type="application/x-shockwave-flash" data="'+a.swffile+'" width="'+a.width+'" height="'+a.height+'"><param name="movie" value="'+a.swffile+'" /><param name="FlashVars" value="mode='+
a.mode+"&amp;quality="+a.quality+'" /><param name="allowScriptAccess" value="always" /></object>';if(null!==a.extern)f(a.extern)[a.append?"append":"html"](b);else this[a.append?"append":"html"](b);var e=3;(_register=function(){var c=document.getElementById("XwebcamXobjectX");c&&void 0!==c.capture?(a.capture=function(a){try{return c.capture(a)}catch(b){}},a.save=function(a){try{return c.save(a)}catch(b){}},a.setCamera=function(a){try{return c.setCamera(a)}catch(b){}},a.getCameraList=function(){try{return c.getCameraList()}catch(a){}},
a.pauseCamera=function(){try{return c.pauseCamera()}catch(a){}},a.resumeCamera=function(){try{return c.resumeCamera()}catch(a){}},a.onLoad()):0==e?a.debug("error","Flash movie not yet registered!"):(e--,window.setTimeout(_register,1E3*(4-e)))})()}})(jQuery);

BIN
public/faceLoginIE/jscam.swf Normal file
View File

Binary file not shown.

BIN
public/faceLoginIE/jscam_canvas_only.swf Normal file
View File

Binary file not shown.

37
src/pages/userformal/faceLogin/FrameFaceLogin.tsx Normal file
View File

@ -0,0 +1,37 @@
import React from "react";
import FrameLoader from "./FrameLoader";
export default class FrameFaceLogin extends React.Component {
constructor(props:any) {
super(props);
this.state = {
transferData: {
image: ''
},
};
}
componentDidMount() {
// 接收Iframe传递的数据
window.addEventListener("message", (e) => {
const { image } = e.data || {}; //传递的数据
if (image) {
this.props.faceCompareEvent(image);
}
});
}
render() {
const { transferData } = this.state || {};
console.log(transferData, "数据");
return (
<div style={{ height: "100%" }}>
{/* 设置Iframe 盒子的宽度 */}
<div style={{ minHeight: "200px", position: "relative" }}>
{/* 这个是打包后的Iframe 地址：要到webpack中配置打包地址 */}
<FrameLoader url="/faceLoginIE/index.html" />
</div>
</div>
);
}
}

34
src/pages/userformal/faceLogin/FrameLoader.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from "react";
import ReactDOM from "react-dom";
import Iframe from "react-iframe";
export default class FrameLoader extends React.Component {
constructor(props:any) {
super(props);
this.state = {
iFrameHeight: this.props.height ? this.props.height : 0, // 设置iframe的高度
};
}
componentDidMount() {}
render() {
return (
<Iframe
id="faceLoginFrame"
onLoad={() => {
const obj = ReactDOM.findDOMNode(this);
this.setState({
iFrameHeight: obj.contentWindow.document.body.scrollHeight + "px",
});
}}
frameBorder="0"
height="100%"
width="100%"
position="absolute"
scrolling="no"
// 接收到的 Iframe 的URL地址
url={this.props.url}
/>
);
}
}

218
src/pages/userformal/faceLogin/index.tsx Normal file
View File

@ -0,0 +1,218 @@
import React, { useRef, useEffect, useState } from 'react';
import {Spin, Tabs, message } from 'antd';
import cookie from 'react-cookies';
import FrameFaceLogin from './FrameFaceLogin';
const FaceLoginNotIE: React.FC<{}> = () => {
const video = useRef(), canvas = useRef();
const { TabPane } = Tabs;
const whetherIE = useRef<boolean>(false)
const [spinning, setSping] = useState<boolean>(false);//加载遮罩
const onChange = (key: string) => {
console.log(key);
};
//初始化浏览器类型
const InitBrowser = () =>{
//取得浏览器的userAgent字符串
var userAgent = navigator.userAgent;
//判断是否IE<11
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
//判断是否IE的Edge浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE;
//判断是否IE11
var isIE11 = userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1;
if(isIE){
var reIE = new RegExp("MSIE(\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if(fIEVersion == 7){
return 7;
}else if(fIEVersion == 8){
return 8;
}else if(fIEVersion == 9){
return 9;
}else if(fIEVersion == 10){
return 10;
}else{
//IE版本<=7
return 6;
}
}else if(isEdge){
return 'edge';
}else if(isIE11){
//IE11
whetherIE.current = true;
return 11;
}else{
//不是IE浏览器
return -1;
}
}
//初始化video
const initMedia = () => {
if(!whetherIE.current){
InitUserMedia({video : {width: 480, height: 320}}, success, error);
}
};
//访问用户媒体设备的兼容方法
const InitUserMedia = (constraints: any, success: any, error: any) => {
if (navigator.mediaDevices.getUserMedia) {
//最新的标准API
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia(constraints,success, error);
} else if (navigator.mozGetUserMedia) {
//firfox浏览器
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
//旧版API
navigator.getUserMedia(constraints, success, error);
}
}
//调用媒体设备成功回调方法
const success = (stream: any) => {
//兼容webkit核心浏览器
const CompatibleURL = window.URL || window.webkitURL;
//将视频流设置为video元素的源
console.log(stream);
//video.src = CompatibleURL.createObjectURL(stream);
video.current.srcObject = stream;
video.current.play();
}
//调用媒体设备失败回调方法
const error = (error:any) => {
message.warn('无法获取到摄像头权限，请确认是否存在摄像头及是否授权使用摄像头');
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
}
//初始化
useEffect(() => {
cookie.remove('mall3_token');
sessionStorage.clear();
InitBrowser();
initMedia();
}, []);
const base64ToBlob = (base64:string) =>{
const parts = base64.split(";base64,");
const contentType = parts[0].split(":")[1];
const raw = window.atob(parts[1]);
const rawLength = raw.length;
const uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; i += 1) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
};
//人脸比对
const Recog=(image:any) =>{
if(canvas.current){
setSping(true);
const context = canvas.current.getContext('2d');
context.drawImage(video.current, 0, 0, 480, 320);
canvas.current.toBlob(function (result:any) {
var formData = new FormData();
formData.append('multipartFiles', result, 'upload_face.jpeg');
const url = 'http://127.0.0.1:8081/outer/v1.0/stock/logicStock/importStockDepotRelation';
window.fetch(url,{
method:'post',
mode:'cors',
body : formData
}).then(res => res.json()).then(res => {
if (null != res) {
setSping(false);
message.success('人脸比对成功');
var _html = document.getElementById('result');
var _data = eval("(" + res['data'] + ")");
var _similarity = _data['UNI_BSS_BODY']['FACE_COMPARE_RSP']['SIMILARITY'];
_html.innerText = '相似度：' + _similarity;
//关闭摄像头
//video.current.srcObject.getTracks()[0].stop();
} else {
setSping(false);
message.error('人脸比对失败');
}
}).catch(e =>{
console.log(e);
}).finally(() => {
setSping(false);
});
});
}else{
setSping(true);
const url = 'http://127.0.0.1:8081/outer/v1.0/stock/logicStock/rgbArray2Base64';
window.fetch(url,{
method:'post',
body : JSON.stringify({//post请求参数
type: 'pixel',
rgb: image
})
}).then(res => res.json()).then(res => {
const childFrameObj = document.getElementById('faceLoginFrame');
childFrameObj.contentWindow.postMessage(res, '*');
//base64图片进行人脸比对
var formData = new FormData();
formData.append('multipartFiles', base64ToBlob( 'data:image/jpg;base64,' + res.data), 'upload_face.jpeg');
console.log(3);
const url2 = 'http://127.0.0.1:8081/outer/v1.0/stock/logicStock/importStockDepotRelation';
window.fetch(url2,{
method:'post',
mode:'cors',
body : formData
}).then(res => res.json()).then(res => {
if (null != res) {
setSping(false);
message.success('人脸比对成功');
var _html = document.getElementById('result');
var _data = eval("(" + res['data'] + ")");
var _similarity = _data['UNI_BSS_BODY']['FACE_COMPARE_RSP']['SIMILARITY'];
_html.innerText = '相似度：' + _similarity;
//关闭摄像头
//video.current.srcObject.getTracks()[0].stop();
} else {
setSping(false);
message.error('人脸比对失败');
}
}).catch(e =>{
console.log(e);
}).finally(() => {
setSping(false);
});
})
}
}
if(!whetherIE.current){
return (
<Tabs defaultActiveKey="1" onChange={onChange}>
<TabPane tab="人脸识别登录" key="1">
<Spin spinning={spinning}>
<video ref={video} width="480" height="320"></video>
<div>
<button id="recog" onClick={() => Recog('')}>人脸识别</button>
</div>
<canvas id="canvas" ref={canvas} width="480" height="320"></canvas>
<h1 id='result'></h1>
</Spin>
</TabPane>
<TabPane tab="账号密码登录" key="2">
Content of Tab Pane 2
</TabPane>
</Tabs>
);
}else{
return(
<Tabs defaultActiveKey="1" onChange={onChange}>
<TabPane tab="人脸识别登录" key="1">
<Spin spinning={spinning}>
<FrameFaceLogin faceCompareEvent = {Recog}/>
<h1 id='result'></h1>
</Spin>
</TabPane>
<TabPane tab="账号密码登录" key="2">
Content of Tab Pane 2
</TabPane>
</Tabs>)
}
}
export default FaceLoginNotIE;

386
src/pages/userformal/login/index.tsx
View File

@ -1,27 +1,41 @@
import React, { useEffect, useState } from 'react';
import { Form, Button, Input, Row, Col, Modal, Spin, message } from 'antd';
import { UserOutlined, LockOutlined, SafetyCertificateOutlined } from '@ant-design/icons';
import React, { useEffect, useState, useRef } from 'react';
import { Form, Button, Input, Row, Col, Modal, Spin, message, Tabs } from 'antd';
import { UserOutlined, LockOutlined, SafetyCertificateOutlined, VideoCameraOutlined } from '@ant-design/icons';
import './style.less';
import { changePass } from './service';
import { changePass, rgbToBase64 } from './service';
import logo from '@/images/login/logoPic.png';
import { refreshTokenApi, ZjfakeAccountLogin } from '@/services/login';
import { refreshTokenApi, ZjfakeAccountLogin, ZjfakeFaceLogin } from '@/services/login';
import { history } from 'umi';
import cookie from 'react-cookies';
import moment from 'moment';
import FrameFaceLogin from '../faceLogin/FrameFaceLogin';
import { fromPairs } from 'lodash';
const layout = {
labelCol: { span: 7 },
wrapperCol: { span: 13 },
};
export interface RgbParams {
type: string;
image: string;
}
const Index: React.FC<{}> = () => {
const [form] = Form.useForm();
const [form2] = Form.useForm();
const [imgUrl, setImgUrl] = useState<any>('');
const [tmpToken, setTmpToken] = useState<any>('');
const remainingTime = 3 //刷新token的剩余时间，单位小时
const [changeForm] = Form.useForm();
const [isModalVisible, setIsModalVisible] = useState<boolean>(false)
const [spinning, setSping] = useState<boolean>(false);//加载遮罩
const video = useRef();
const whetherIE = useRef<boolean>(false);
const mediaStreamTrack = useRef<any>();
const { TabPane } = Tabs;
const [submitLoading, setSubmitLoading] = useState<boolean>(false);
const [faceLoginDisable, setFaceLoginDisable] = useState<boolean>(false);
const genRandomString = (len: number) => {
const text = 'abcdefghijklmnopqrstuvwxyz0123456789';
@ -74,6 +88,83 @@ const Index: React.FC<{}> = () => {
});
};
const onChange = (key: string) => {
if (key == '2') {
BrowserType();
InitMedia();
} else {
if (allowedToFaceLogin()) {
if (whetherIE.current) {
releaseCamera('faceLoginFrame');
} else {
mediaStreamTrack.current?.stop();
}
}
}
};
const releaseCamera = (id: string) => {
const childFrameObj = document.getElementById(id);
childFrameObj?.contentWindow?.postMessage('releaseCamera', '*');
}
const hanleFaceSubmit = async (multipartFiles: any, values: any) => {
let userName = form2.getFieldValue('userName');
if (whetherIE.current) {
if (!multipartFiles) {
const childFrameObj = document.getElementById('faceLoginFrame');
childFrameObj.contentWindow.postMessage('capture', '*');
} else {
await ZjfakeFaceLogin({ userName, multipartFiles }).then((res) => {
if (res?.success) {
if (moment(res?.data?.expiration).diff(moment(), 'hours') < remainingTime) {
refreshToken(res?.data)
} else {
releaseCamera('faceLoginFrame');
sessionStorage.setItem('Authorization', res?.data?.value);
sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
sessionStorage.setItem('scope', res?.data?.scope);
history.push('/redirect');
}
}
})
.finally(
() => { setSubmitLoading(false); }
);
}
}
else {
if (!multipartFiles) {
const canvas = document.createElement('canvas');
canvas.setAttribute('width', '300');
canvas.setAttribute('height', '200');
const context = canvas.getContext('2d');
context.drawImage(video.current, 0, 0, 300, 200);
canvas.toBlob(function (result: any) {
hanleFaceSubmit(result, null);
})
} else {
setSubmitLoading(true);
await ZjfakeFaceLogin({ userName, multipartFiles }).then((res) => {
if (res?.success) {
if (moment(res?.data?.expiration).diff(moment(), 'hours') < remainingTime) {
refreshToken(res?.data)
} else {
mediaStreamTrack.current?.stop();
sessionStorage.setItem('Authorization', res?.data?.value);
sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
sessionStorage.setItem('scope', res?.data?.scope);
history.push('/redirect');
}
}
})
.finally(
() => { setSubmitLoading(false); }
);
}
}
}
const handleOk = () => { // 确定修改密码
if (changeForm.getFieldValue("newPassword") !== changeForm.getFieldValue("newPassword1")) {
message.warn('两次密码输入不一致，请重新输入')
@ -100,11 +191,144 @@ const Index: React.FC<{}> = () => {
})
}
}
//浏览器类型
const BrowserType = () => {
//取得浏览器的userAgent字符串
var userAgent = navigator.userAgent;
//判断是否IE<11
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
//判断是否IE的Edge浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE;
//判断是否IE11
var isIE11 = userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1;
if (isIE) {
var reIE = new RegExp("MSIE(\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if (fIEVersion == 7) {
return 7;
} else if (fIEVersion == 8) {
return 8;
} else if (fIEVersion == 9) {
return 9;
} else if (fIEVersion == 10) {
return 10;
} else {
//IE版本<=7
return 6;
}
} else if (isEdge) {
return 'edge';
} else if (isIE11) {
//IE11
whetherIE.current = true;
return 11;
} else {
//不是IE浏览器
return -1;
}
}
//初始化video
const InitMedia = () => {
if (!whetherIE.current) {
InitUserMedia({ video: { width: 480, height: 320 } }, success, error);
}
};
//访问用户媒体设备的兼容方法
const InitUserMedia = (constraints: any, success: any, error: any) => {
if (navigator.mediaDevices.getUserMedia) {
//最新的标准API
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia(constraints, success, error);
} else if (navigator.mozGetUserMedia) {
//firfox浏览器
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
//旧版API
navigator.getUserMedia(constraints, success, error);
}
}
//调用媒体设备成功回调方法
const success = (stream: any) => {
var result = stream.getVideoTracks().some(function (track: any) {
return track.enabled && track.readyState === 'live';
});
if (result) {
//兼容webkit核心浏览器
const CompatibleURL = window.URL || window.webkitURL;
//将视频流设置为video元素的源
console.log(stream);
//video.src = CompatibleURL.createObjectURL(stream);
video.current.srcObject = stream;
mediaStreamTrack.current = stream.getTracks()[0];
video.current.play();
}
}
//调用媒体设备失败回调方法
const error = (error: any) => {
message.warn('无法获取到摄像头权限，请确认是否存在摄像头及是否授权使用摄像头');
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
}
//base64转blob
const base64ToBlob = (base64: string) => {
const parts = base64.split(";base64,");
const contentType = parts[0].split(":")[1];
const raw = window.atob(parts[1]);
const rawLength = raw.length;
const uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; i += 1) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
};
//RgbToBase64
const RgbToBase64 = async (image: any) => {
setSubmitLoading(true);
// await rgbToBase64({ image }).then(res => {
// const _blob = base64ToBlob('data:image/jpg;base64,' + res.data);
// hanleFaceSubmit(_blob, null);
// }).catch(e => {
// setSubmitLoading(false);
// });
console.log(1, image);
hanleFaceSubmit(base64ToBlob(image), null);
}
//是https或者是本地
const httpsOrLocal = () => {
let protocol = document.location.protocol;
if (protocol == 'https:') {
return true;
} else {
let host = window.location.hostname;
if (host == '127.0.0.1' || host == 'localhost') {
return true;
}
}
return false;
}
//是否允许人脸登录
const allowedToFaceLogin = () => {
let browseType = BrowserType()
if ((browseType == 11 || browseType == -1) && httpsOrLocal()) {
return true;
}
return false;
}
useEffect(() => {
cookie.remove('mall3_token');
sessionStorage.clear();
changeCaptcha();
if (!allowedToFaceLogin()) {
setFaceLoginDisable(true);
}
}, []);
return (
@ -117,75 +341,110 @@ const Index: React.FC<{}> = () => {
</div>
<div className="main">
<div className="text">
<h3>登 录</h3>
<Form
name="basic"
className="form-box"
initialValues={{ remember: true }}
form={form}
onFinish={handleSubmit}
// onFinishFailed={onFinishFailed}
>
<Form.Item
label=""
name="userName"
rules={[{ required: true, message: '请输入用户名!' }]}
>
<Input
prefix={
<UserOutlined style={{ fontSize: '18px' }} className="site-form-item-icon" />
}
placeholder="请输入用户名"
/>
</Form.Item>
<Form.Item
label=""
name="password"
rules={[{ required: true, message: '请输入密码!' }]}
>
<Input.Password
prefix={
<LockOutlined style={{ fontSize: '18px' }} className="site-form-item-icon" />
}
placeholder="请输入密码"
/>
</Form.Item>
<Row>
<Col span={14}>
<Tabs defaultActiveKey="1" onChange={onChange} size={'large'}>
<TabPane tab="账号密码登录" key="1">
<Form
name="basic"
className="form-box"
initialValues={{ remember: true }}
form={form}
onFinish={handleSubmit}
// onFinishFailed={onFinishFailed}
>
<Form.Item
label=""
name="captcha"
rules={[{ required: true, message: '请输入验证码!' }]}
name="userName"
rules={[{ required: true, message: '请输入用户名!' }]}
>
<Input
prefix={
<SafetyCertificateOutlined
style={{ fontSize: '18px' }}
className="site-form-item-icon"
/>
<UserOutlined style={{ fontSize: '18px' }} className="site-form-item-icon" />
}
placeholder="请输入验证码"
placeholder="请输入用户名"
/>
</Form.Item>
<Form.Item
label=""
name="password"
rules={[{ required: true, message: '请输入密码!' }]}
>
<Input.Password
prefix={
<LockOutlined style={{ fontSize: '18px' }} className="site-form-item-icon" />
}
placeholder="请输入密码"
/>
</Form.Item>
</Col>
<Col span={10}>
<img className="verification" onClick={() => changeCaptcha()} src={imgUrl} />
</Col>
</Row>
{/* <Form.Item className="remember" name="remember" valuePropName="checked">
<Checkbox>记住密码</Checkbox>
</Form.Item> */}
<Form.Item>
<Button type="primary" className="w100" htmlType="submit">
登 录
</Button>
</Form.Item>
</Form>
<Row>
<Col span={14}>
<Form.Item
label=""
name="captcha"
rules={[{ required: true, message: '请输入验证码!' }]}
>
<Input
prefix={
<SafetyCertificateOutlined
style={{ fontSize: '18px' }}
className="site-form-item-icon"
/>
}
placeholder="请输入验证码"
/>
</Form.Item>
</Col>
<Col span={10}>
<img className="verification" onClick={() => changeCaptcha()} src={imgUrl} />
</Col>
</Row>
{/* <Form.Item className="remember" name="remember" valuePropName="checked">
<Checkbox>记住密码</Checkbox>
</Form.Item> */}
<Form.Item>
<Button type="primary" className="w100" htmlType="submit">
登 录
</Button>
</Form.Item>
</Form>
</TabPane>
<TabPane tab="人脸识别登录" key="2" disabled={faceLoginDisable}>
<Form
name="basic2"
className="form-box"
initialValues={{ remember: true }}
form={form2}
onFinish={hanleFaceSubmit.bind(this, null)}
// onFinishFailed={onFinishFailed}
>
<Form.Item
label=""
name="userName"
rules={[{ required: true, message: '请输入用户名!' }]}
>
<Input
prefix={
<UserOutlined style={{ fontSize: '18px' }} className="site-form-item-icon" />
}
placeholder="请输入用户名"
/>
</Form.Item>
{/* 加载摄像头 */}
<Form.Item>
{!whetherIE.current ? (<video ref={video} width="382" height="200"></video>) : (<FrameFaceLogin faceCompareEvent={RgbToBase64} />)}
</Form.Item>
<Form.Item>
{/* onClick={() => {hanleFaceSubmit(null, null);}} */}
<Button type="primary" className="w100" loading={submitLoading} htmlType="submit">
{submitLoading ? '请稍候，正在验证中...' : '登 录'}
</Button>
</Form.Item>
</Form>
</TabPane>
</Tabs>
</div>
</div>
{/* <div className="footer">版权所有：中国联合网络通信有限公司</div> */}
<Modal
title="修改密码"
visible={isModalVisible}
@ -309,3 +568,4 @@ const Index: React.FC<{}> = () => {
};
export default Index;

16
src/pages/userformal/login/service.ts
View File

@ -8,4 +8,20 @@ export async function changePass(params: any) {
method: 'post',
params
});
}
/**
* rgb转base64
* @param params rgb字符串
* @returns
*/
export async function rgbToBase64(params: any) {
const _body = JSON.stringify({//post请求参数
type: 'pixel',
rgb: params.image
});
return request('/api/core-service-ebtp-userinfo/outer/v1/ebtp/face/rgbArray2Base64', {
method: 'post',
body:_body,
});
}

18
src/services/login.ts
View File

@ -8,6 +8,11 @@ export interface LoginParamsType {
tmpToken: string;
}
export interface FaceLoginParamsType {
userName: string;
multipartFiles: Blob;
}
const sm2 = require('sm-crypto').sm2;
const encrypt = getEncrypt();
@ -54,6 +59,19 @@ export async function ZjfakeAccountLogin(params: LoginParamsType) {
});
}
// 专家人脸登录
export async function ZjfakeFaceLogin(params: FaceLoginParamsType){
var formData = new FormData();
formData.append('idNo', params.userName);
formData.append('multipartFiles', params.multipartFiles, 'upload_face.jpeg');
return request('/api/core-service-ebtp-userinfo/outer/v1/ebtp/face/faceCompare', {
method: 'POST',
requestType: 'form',
mode:'cors',
body:formData
});
}
// 天宫云门户
export async function CloudfakeAccountLogin(params: LoginParamsType) {
// return request('/api/mall-auth/login', {

4
src/utils/request.ts
View File

@ -76,7 +76,9 @@ request.interceptors.request.use(async (url, options) => {
url.startsWith('/api/auth/reloadPartnerToken') ||
url.startsWith('/api/api/mall-expe') ||
url == '/api/core-service-ebtp-userinfo/v1/userpassword/validatePassword' ||
url.startsWith('/api/notification')
url.startsWith('/api/notification') ||
url == '/api/core-service-ebtp-userinfo/outer/v1/ebtp/face/faceCompare' ||
url == '/api/core-service-ebtp-userinfo/outer/v1/ebtp/face/rgbArray2Base64'
) {
headers = {
...options.headers,