@authing/react-ui-components 3.0.1-alpha.3 → 3.0.1-beta.0

package/es/MFA/core/face.js

@@ -0,0 +1,358 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import "antd/lib/message/style";
+import _message from "antd/lib/message";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _setInterval from "@babel/runtime-corejs3/core-js-stable/set-interval";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { detectSingleFace } from 'face-api.js';
+import { useGuardHttp } from '../../_utils/guradHttp';
+import { FACE_SCORE, devicesConstraints, dataURItoBlob, getCurrentFaceDetectionNet, getFaceDetectorOptions, isFaceDetectionModelLoaded } from './face_deps';
+import { ImagePro } from '../../ImagePro';
+import SubmitButton from '../../SubmitButton';
+import { faceErrorMessage } from '../../_utils/errorFace';
+
+var useDashoffset = function useDashoffset(percent) {
+  // 接受 0 - 1，返回 0-700 之间的偏移量
+  var offset = percent * 7; // 在识别成功的时候，返回绿色
+
+  var dashStyle = {};
+  return {
+    offset: offset,
+    dashStyle: dashStyle
+  };
+};
+
+export var MFAFace = function MFAFace(props) {
+  var _useGuardHttp = useGuardHttp(),
+      postForm = _useGuardHttp.postForm,
+      post = _useGuardHttp.post;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var _useState = useState('ready'),
+      _useState2 = _slicedToArray(_useState, 2),
+      faceState = _useState2[0],
+      setFaceState = _useState2[1]; // ready, identifying, retry
+
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      percent = _useState4[0],
+      setPercent = _useState4[1]; // 识别进度（相似性）
+
+
+  var videoRef = useRef(null);
+  var canvasRef = useRef(null);
+  var interval = useRef();
+  var p1 = useRef(); // p1 key
+
+  var p2 = useRef(); // p2 key
+
+  var cooldown = useRef(6); // p2 cooldown, * 500ms
+
+  var cdnBase = props.config.__publicConfig__.cdnBase;
+
+  var _useDashoffset = useDashoffset(percent),
+      offset = _useDashoffset.offset,
+      dashStyle = _useDashoffset.dashStyle; // 预加载数据
+
+
+  useEffect(function () {
+    // 载入 cdn
+    var cdnContext = getCurrentFaceDetectionNet().loadFromUri("".concat(cdnBase, "/face-api/v1/tiny_face_detector_model-weights_manifest.json"));
+    cdnContext.then(function (result) {// setLoading(false)
+    });
+
+    if (faceState !== 'identifying') {
+      return; // 不存在 video dom，不要去尝试了
+    }
+
+    var devicesContext = navigator.mediaDevices.getUserMedia(devicesConstraints);
+    devicesContext.then(function (stream) {
+      videoRef.current.srcObject = stream;
+    }).catch(function (e) {
+      var msg = faceErrorMessage(e);
+
+      _message.error(t(msg)); // 没有设备，或没有授权
+      // console.error(e)
+      // setVideoType(VideoAction.ERROR)
+      // setProgressStatus('exception')
+      // setPercent(100)
+      // setVideoError(e.message)
+
+    });
+    return function () {
+      interval.current && clearInterval(interval.current);
+    };
+  }, [faceState, interval, props.config, cdnBase, t]); // 监听 faceState
+
+  useEffect(function () {
+    if (faceState === 'identifying' || faceState === 'retry') {
+      props.setShowMethods(false);
+    } else {
+      props.setShowMethods(true);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [faceState]); // 上传文件
+
+  var uploadImage = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(blob) {
+      var _result$data;
+
+      var formData, url, result, key;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              formData = new FormData();
+              formData.append('folder', 'photos');
+              formData.append('file', blob, 'personal.jpeg');
+              url = '/api/v2/upload?folder=photos&private=true';
+              _context.next = 6;
+              return postForm(url, formData);
+
+            case 6:
+              result = _context.sent;
+              key = (_result$data = result.data) === null || _result$data === void 0 ? void 0 : _result$data.key;
+              return _context.abrupt("return", key);
+
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function uploadImage(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(); // get base 64
+
+
+  var getBase64 = function getBase64(videoDom) {
+    var canvas = canvasRef.current;
+    var ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(videoDom, 0, 0, canvas.width, canvas.height);
+    var base64Data = canvas.toDataURL('image/jpeg', 1.0);
+    return base64Data;
+  };
+
+  var faceLogin = function faceLogin(result) {
+    var code = result.code,
+        data = result.data,
+        message = result.message;
+
+    if (code === 1700 || code === 1701 || code === 1702) {
+      p1.current = undefined;
+      p2.current = undefined;
+      interval.current = undefined;
+      cooldown.current = 6;
+      setFaceState('retry');
+    }
+
+    props.mfaLogin(code, data, message);
+  };
+
+  var faceBind = function faceBind() {
+    var url = '/api/v2/mfa/face/associate';
+    var data = {
+      photoA: p1.current,
+      photoB: p2.current
+    };
+    var mfaToken = props.initData.mfaToken;
+    var config = {
+      headers: {
+        authorization: mfaToken
+      }
+    };
+    post(url, data, config).then(function (result) {
+      faceLogin(result);
+    });
+  };
+
+  var faceCheck = function faceCheck() {
+    var url = '/api/v2/mfa/face/verify';
+    var data = {
+      photo: p1.current
+    };
+    var mfaToken = props.initData.mfaToken;
+    var config = {
+      headers: {
+        authorization: mfaToken
+      }
+    };
+    post(url, data, config).then(function (result) {
+      // 如果是 1702，那么久绑定一个
+      faceLogin(result);
+    });
+  }; // bind 的情况
+
+
+  var goToBindScene = function goToBindScene(key) {
+    if (!p1.current) {
+      p1.current = key;
+    } else {
+      if (cooldown.current > 0) {
+        cooldown.current -= 1;
+      }
+
+      if (cooldown.current <= 0) {
+        p2.current = key; // 彻底上传完了，应该走验证了
+
+        interval.current && clearInterval(interval.current);
+        faceBind();
+      }
+    }
+  }; // goToCheck 的情况
+
+
+  var goToCheckScene = function goToCheckScene(key) {
+    p1.current = key;
+    interval.current && clearInterval(interval.current);
+    faceCheck();
+  }; // 识别成功，自动前进到下一个步骤
+
+
+  var quitIdentifying = function quitIdentifying(blob) {
+    setPercent(100);
+    uploadImage(blob).then(function (key) {
+      var _props$initData;
+
+      if (((_props$initData = props.initData) === null || _props$initData === void 0 ? void 0 : _props$initData.faceMfaEnabled) === true) {
+        goToCheckScene(key);
+      } else {
+        goToBindScene(key);
+      }
+    });
+  };
+
+  var autoShoot = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var videoDom, options, result, base64Data, blob;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!interval.current) {
+              interval.current = _setInterval(function () {
+                return autoShoot();
+              }, 500);
+            }
+
+            videoDom = videoRef.current;
+
+            if (!(videoDom !== null && videoDom !== void 0 && videoDom.paused || videoDom !== null && videoDom !== void 0 && videoDom.ended || !isFaceDetectionModelLoaded())) {
+              _context2.next = 4;
+              break;
+            }
+
+            return _context2.abrupt("return");
+
+          case 4:
+            options = getFaceDetectorOptions();
+            _context2.next = 7;
+            return detectSingleFace(videoDom, options);
+
+          case 7:
+            result = _context2.sent;
+
+            if (result) {
+              if (result.score > FACE_SCORE) {
+                base64Data = getBase64(videoDom);
+                blob = dataURItoBlob(base64Data);
+                quitIdentifying(blob); // 识别成功，退出识别
+              } else {
+                // 识别失败，但是有结果，设置相似性
+                setPercent(function () {
+                  return result.score / FACE_SCORE * 100;
+                }); // console.log('识别失败，但是有结果，设置相似性', percent)
+              }
+            } else {
+              setPercent(10);
+            } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+
+          case 9:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })), []);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+    className: "authing-g2-mfa-title"
+  }, t('common.faceText1')), /*#__PURE__*/React.createElement("p", {
+    className: "authing-g2-mfa-tips"
+  }, t('common.faceText2')), faceState === 'ready' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ImagePro, {
+    className: "g2-mfa-face-image",
+    width: 247,
+    height: 131,
+    src: "".concat(cdnBase, "/face.png"),
+    alt: ""
+  }), /*#__PURE__*/React.createElement(SubmitButton, {
+    onClick: function onClick() {
+      // 设置状态之前 校验是否支持面容 （api 和 设备）
+      // TODO 之后添加人脸识别插件支持 减小包体积
+      if (navigator.mediaDevices) {
+        setFaceState('identifying');
+        autoShoot();
+      } else {
+        _message.error(t('login.mediaDevicesSupport'));
+      }
+    },
+    text: t('common.faceText3'),
+    className: "mfa-face"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "g2-mfa-face-identifying",
+    style: {
+      display: faceState !== 'ready' ? 'flex' : 'none'
+    }
+  }, /*#__PURE__*/React.createElement("video", {
+    className: "video-round",
+    ref: videoRef // onLoadedMetadata={() => onIdentify()}
+    ,
+    id: "inputVideo",
+    autoPlay: true,
+    muted: true,
+    playsInline: true
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "video-round mesh",
+    style: {
+      display: faceState === 'retry' ? 'flex' : 'none'
+    },
+    onClick: function onClick() {
+      setFaceState('identifying');
+      setPercent(0);
+      autoShoot();
+    }
+  }, t('common.faceText4')), /*#__PURE__*/React.createElement("div", {
+    className: "video-round ring"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: 240,
+    height: 240,
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("circle", {
+    className: "svg-circle-running",
+    style: dashStyle,
+    strokeDasharray: 700 // 根据周长做 0-700 之间的数值表示准确率
+    ,
+    strokeDashoffset: 700 - offset // 处理这个 offset, 0-700之间的数
+    ,
+    cx: 120,
+    cy: 120,
+    r: 110
+  })))), /*#__PURE__*/React.createElement("canvas", {
+    style: {
+      width: 210,
+      height: 210,
+      opacity: 0,
+      position: 'absolute',
+      display: 'none'
+    },
+    ref: canvasRef
+  }));
+};

package/es/MFA/core/face_deps.d.ts

@@ -0,0 +1,12 @@
+import { TinyFaceDetectorOptions } from 'face-api.js';
+export declare const devicesConstraints: {
+    video: {
+        width: number;
+        height: number;
+    };
+};
+export declare const FACE_SCORE = 0.65;
+export declare function getFaceDetectorOptions(): TinyFaceDetectorOptions;
+export declare function getCurrentFaceDetectionNet(): import("face-api.js").TinyFaceDetector;
+export declare function isFaceDetectionModelLoaded(): boolean;
+export declare function dataURItoBlob(base64Data: any): Blob;

package/es/MFA/core/face_deps.js

@@ -0,0 +1,39 @@
+import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
+import { nets, TinyFaceDetectorOptions } from 'face-api.js';
+var inputSize = 512;
+var scoreThreshold = 0.5;
+export var devicesConstraints = {
+  video: {
+    width: 210,
+    height: 210
+  }
+};
+export var FACE_SCORE = 0.65;
+export function getFaceDetectorOptions() {
+  return new TinyFaceDetectorOptions({
+    inputSize: inputSize,
+    scoreThreshold: scoreThreshold
+  });
+}
+export function getCurrentFaceDetectionNet() {
+  return nets.tinyFaceDetector;
+}
+export function isFaceDetectionModelLoaded() {
+  return !!getCurrentFaceDetectionNet().params;
+}
+export function dataURItoBlob(base64Data) {
+  var _context;
+
+  var byteString;
+  if (_indexOfInstanceProperty(_context = base64Data.split(',')[0]).call(_context, 'base64') >= 0) byteString = atob(base64Data.split(',')[1]);else byteString = unescape(base64Data.split(',')[1]);
+  var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
+  var ia = new Uint8Array(byteString.length);
+
+  for (var i = 0; i < byteString.length; i++) {
+    ia[i] = byteString.charCodeAt(i);
+  }
+
+  return new Blob([ia], {
+    type: mimeString
+  });
+}

package/es/MFA/core/sms.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { MFAConfig } from '../interface';
+export interface BindMFASmsProps {
+    mfaToken: string;
+    onBind: (phone: string) => void;
+    config: any;
+}
+export declare const BindMFASms: React.FC<BindMFASmsProps>;
+export interface VerifyMFASmsProps {
+    mfaToken: string;
+    phone: string;
+    onVerify: (code: number, data: any) => void;
+    sendCodeRef: React.RefObject<HTMLButtonElement>;
+    codeLength: number;
+}
+export declare const VerifyMFASms: React.FC<VerifyMFASmsProps>;
+export declare const MFASms: React.FC<{
+    mfaToken: string;
+    phone?: string;
+    mfaLogin: any;
+    config: MFAConfig;
+}>;