@authing/react-ui-components 3.0.1-beta.4 → 3.0.1-rc.3

package/es/MFA/core/face.js

@@ -1,358 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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;
-}>;