UNPKG

tethysfaceid

Version:

1,018 lines (851 loc) 3.67 MB
exports.ids = [8]; exports.modules = { /***/ "0G5g": /***/ (function(module, exports, __webpack_require__) { "use strict"; exports.__esModule = true; exports.default = void 0; const requestIdleCallback = typeof self !== 'undefined' && self.requestIdleCallback || function (cb) { let start = Date.now(); return setTimeout(function () { cb({ didTimeout: false, timeRemaining: function () { return Math.max(0, 50 - (Date.now() - start)); } }); }, 1); }; var _default = requestIdleCallback; exports.default = _default; /***/ }), /***/ "8OQS": /***/ (function(module, exports) { function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } module.exports = _objectWithoutPropertiesLoose; /***/ }), /***/ "Aiso": /***/ (function(module, exports, __webpack_require__) { module.exports = __webpack_require__("dQHF") /***/ }), /***/ "Py5Z": /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; // ESM COMPAT FLAG __webpack_require__.r(__webpack_exports__); // EXTERNAL MODULE: external "react/jsx-runtime" var jsx_runtime_ = __webpack_require__("F5FC"); // EXTERNAL MODULE: external "antd" var external_antd_ = __webpack_require__("Exp3"); // CONCATENATED MODULE: ./common/utils.js const handleError = e => { console.log(e); }; const getConfig = () => { const config = { headers: { Accept: 'application/json', 'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/json', 'access-control-allow-credentials': 'true' } }; return config; }; // EXTERNAL MODULE: external "react" var external_react_ = __webpack_require__("cDcd"); // EXTERNAL MODULE: external "@ant-design/icons" var icons_ = __webpack_require__("nZwT"); // CONCATENATED MODULE: ./components/LogInForm/logInComponent.js function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } const LogInComponent = ({ onLogIn, loading }) => { const layout = { labelCol: { span: 24 }, wrapperCol: { span: 24 } }; return /*#__PURE__*/Object(jsx_runtime_["jsx"])(external_antd_["Card"], { children: /*#__PURE__*/Object(jsx_runtime_["jsxs"])(external_antd_["Form"], _objectSpread(_objectSpread({}, layout), {}, { name: "basic", initialValues: { remember: true }, onFinish: onLogIn, children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])(external_antd_["Form"].Item, { label: "Username", name: "username", rules: [{ required: true, message: 'Please input your username!' }], children: /*#__PURE__*/Object(jsx_runtime_["jsx"])(external_antd_["Input"], {}) }), /*#__PURE__*/Object(jsx_runtime_["jsx"])(external_antd_["Form"].Item, { label: "Password", name: "password", rules: [{ required: true, message: 'Please input your password!' }], children: /*#__PURE__*/Object(jsx_runtime_["jsx"])(external_antd_["Input"].Password, {}) }), /*#__PURE__*/Object(jsx_runtime_["jsx"])(external_antd_["Form"].Item, { children: /*#__PURE__*/Object(jsx_runtime_["jsxs"])(external_antd_["Button"], { loading: loading, type: "primary", block: true, htmlType: "submit", className: "margin-top-3x-desktop margin-top-2x-mobile margin-right-3x-desktop margin-right-2x-mobile", children: ["LogIn", /*#__PURE__*/Object(jsx_runtime_["jsx"])(icons_["LoginOutlined"], {})] }) })] })) }); }; /* harmony default export */ var logInComponent = (LogInComponent); // EXTERNAL MODULE: external "axios" var external_axios_ = __webpack_require__("zr5I"); var external_axios_default = /*#__PURE__*/__webpack_require__.n(external_axios_); // CONCATENATED MODULE: ./common/apiConstants.js const LOGIN = 'https://cors-anywhere.herokuapp.com/https://auon7ei0z2.execute-api.us-east-2.amazonaws.com/prod/loginuser'; // 'https://auon7ei0z2.execute-api.us-east-2.amazonaws.com/prod/loginuser', const FACE_COMPARE = 'https://cors-anywhere.herokuapp.com/https://meza8z760k.execute-api.us-east-2.amazonaws.com/default/facecompare'; const ACCESS_KEY = '9a23ad06e00c048f4aebfbcf7d1928acc'; const LiCENCE_KEY = '001-593-3147'; // CONCATENATED MODULE: ./components/LogInForm/loginServices.js const logInUser = ({ username, password }) => { const jsonData = { username, password }; return external_axios_default.a.post(LOGIN, jsonData, getConfig()); }; // EXTERNAL MODULE: external "antd/lib/avatar/avatar" var avatar_ = __webpack_require__("wfCx"); var avatar_default = /*#__PURE__*/__webpack_require__.n(avatar_); // CONCATENATED MODULE: ./components/Status/userStatus.js const UserStatus = ({ data = {}, status }) => { const { username, urlPictureUser, region, country, email, gender } = data || {}; const title = /*#__PURE__*/Object(jsx_runtime_["jsxs"])("div", { className: "text-regular", children: [status === 'Matched' ? 'Welcome' : 'Oops!', " ", /*#__PURE__*/Object(jsx_runtime_["jsx"])("span", { className: "primary", children: username }), ", Your face authentication ", status === 'Matched' ? 'was Successful.' : 'Failed!'] }); return /*#__PURE__*/Object(jsx_runtime_["jsxs"])("div", { children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])(external_antd_["Card"], { children: /*#__PURE__*/Object(jsx_runtime_["jsx"])(external_antd_["Result"] // status={status === 'Matched' ? "success" : 'error'} , { subTitle: title, className: "no-padding", icon: status === 'Matched' ? /*#__PURE__*/Object(jsx_runtime_["jsx"])(icons_["SmileOutlined"], {}) : /*#__PURE__*/Object(jsx_runtime_["jsx"])(icons_["FrownOutlined"], {}), extra: [status === 'Matched' && /*#__PURE__*/Object(jsx_runtime_["jsx"])(external_antd_["Divider"], {}, "DIVIDER"), status === 'Matched' && /*#__PURE__*/Object(jsx_runtime_["jsxs"])(external_antd_["Row"], { children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])(external_antd_["Col"], { span: 8, xs: 24, md: 8, children: /*#__PURE__*/Object(jsx_runtime_["jsx"])(avatar_default.a, { size: { xs: 100, sm: 100, md: 150, lg: 150, xl: 150, xxl: 150 }, src: urlPictureUser, style: { border: '1px solid #03224c' }, className: "space-bottom" }) }), /*#__PURE__*/Object(jsx_runtime_["jsxs"])(external_antd_["Col"], { span: 16, xs: 24, sm: 13, md: 12, className: "left", style: { margin: '0 auto', textTransform: 'capitalize' }, children: [/*#__PURE__*/Object(jsx_runtime_["jsxs"])(external_antd_["Row"], { className: "space-top extra-short", children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])(external_antd_["Col"], { span: 5, xs: 12, className: "secondary", children: "UserName :" }), /*#__PURE__*/Object(jsx_runtime_["jsx"])(external_antd_["Col"], { span: 6, xs: 12, style: { textTransform: "initial" }, children: username })] }), /*#__PURE__*/Object(jsx_runtime_["jsxs"])(external_antd_["Row"], { className: "space-top extra-short", children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])(external_antd_["Col"], { span: 5, xs: 12, className: "secondary", children: "Email :" }), /*#__PURE__*/Object(jsx_runtime_["jsx"])(external_antd_["Col"], { span: 6, xs: 12, style: { textTransform: "initial" }, children: email })] }), /*#__PURE__*/Object(jsx_runtime_["jsxs"])(external_antd_["Row"], { className: "space-top extra-short", children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])(external_antd_["Col"], { span: 5, xs: 12, className: "secondary", children: "Gender :" }), /*#__PURE__*/Object(jsx_runtime_["jsx"])(external_antd_["Col"], { span: 6, xs: 12, children: gender })] }), /*#__PURE__*/Object(jsx_runtime_["jsxs"])(external_antd_["Row"], { className: "space-top extra-short", children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])(external_antd_["Col"], { span: 5, xs: 12, className: "secondary", children: "Country :" }), /*#__PURE__*/Object(jsx_runtime_["jsx"])(external_antd_["Col"], { span: 6, xs: 12, children: country })] }), /*#__PURE__*/Object(jsx_runtime_["jsxs"])(external_antd_["Row"], { className: "space-top extra-short", children: [/*#__PURE__*/Object(jsx_runtime_["jsx"])(external_antd_["Col"], { span: 5, xs: 12, className: "secondary", children: "Region :" }), /*#__PURE__*/Object(jsx_runtime_["jsx"])(external_antd_["Col"], { span: 6, xs: 12, children: region })] })] })] }, "row")] }) }), status !== 'Matched' && /*#__PURE__*/Object(jsx_runtime_["jsx"])("a", { href: "/login", children: /*#__PURE__*/Object(jsx_runtime_["jsx"])(external_antd_["Button"], { type: "primary", block: true, children: " Try Again " }) })] }); }; /* harmony default export */ var Status_userStatus = (UserStatus); // CONCATENATED MODULE: ./common/Config.js var Config_Config = function () { // ------------------------------------- // REQUIRED // Available at https://dev.facetec.com/#/account // NOTE: This field is auto-populated by the FaceTec SDK Configuration Wizard. var DeviceKeyIdentifier = "dZ8k2xxyoeb50uRS0AnkSmDejrFL4pZM"; // ------------------------------------- // REQUIRED // The URL to call to process FaceTec SDK Sessions. // In Production, you likely will handle network requests elsewhere and without the use of this variable. // See https://dev.facetec.com/#/security-best-practices for more information. // NOTE: This field is auto-populated by the FaceTec SDK Configuration Wizard. var BaseURL = "https://api.facetec.com/api/v3/biometrics"; // ------------------------------------- // REQUIRED // The FaceMap Encryption Key you define for your application. // Please see https://dev.facetec.com/#/licensing-and-encryption-keys for more information. // NOTE: This field is auto-populated by the FaceTec SDK Configuration Wizard. var PublicFaceMapEncryptionKey = "-----BEGIN PUBLIC KEY-----\n" + "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA5PxZ3DLj+zP6T6HFgzzk\n" + "M77LdzP3fojBoLasw7EfzvLMnJNUlyRb5m8e5QyyJxI+wRjsALHvFgLzGwxM8ehz\n" + "DqqBZed+f4w33GgQXFZOS4AOvyPbALgCYoLehigLAbbCNTkeY5RDcmmSI/sbp+s6\n" + "mAiAKKvCdIqe17bltZ/rfEoL3gPKEfLXeN549LTj3XBp0hvG4loQ6eC1E1tRzSkf\n" + "GJD4GIVvR+j12gXAaftj3ahfYxioBH7F7HQxzmWkwDyn3bqU54eaiB7f0ftsPpWM\n" + "ceUaqkL2DZUvgN0efEJjnWy5y1/Gkq5GGWCROI9XG/SwXJ30BbVUehTbVcD70+ZF\n" + "8QIDAQAB\n" + "-----END PUBLIC KEY-----"; return { DeviceKeyIdentifier, BaseURL, PublicFaceMapEncryptionKey }; }(); // EXTERNAL MODULE: ./core-sdk/FaceTecSDK.js/FaceTecSDK.js var FaceTecSDK = __webpack_require__("bPGA"); // CONCATENATED MODULE: ./components/LivenessCheck/processors/LivenessCheckProcessor.js function LivenessCheckProcessor_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } // // Welcome to the annotated FaceTec Device SDK core code for performing secure Liveness Checks! // // // This is an example self-contained class to perform Liveness Checks with the FaceTec SDK. // You may choose to further componentize parts of this in your own Apps based on your specific requirements. // class LivenessCheckProcessor_LivenessCheckProcessor { // // DEVELOPER NOTE: These properties are for demonstration purposes only so the Sample App can get information about what is happening in the processor. // In the code in your own App, you can pass around signals, flags, intermediates, and results however you would like. // constructor(sessionToken, sampleAppControllerReference, data, onContinue) { LivenessCheckProcessor_defineProperty(this, "latestNetworkRequest", new XMLHttpRequest()); LivenessCheckProcessor_defineProperty(this, "success", void 0); LivenessCheckProcessor_defineProperty(this, "sampleAppControllerReference", void 0); LivenessCheckProcessor_defineProperty(this, "data", void 0); // // DEVELOPER NOTE: These properties are for demonstration purposes only so the Sample App can get information about what is happening in the processor. // In the code in your own App, you can pass around signals, flags, intermediates, and results however you would like. // this.success = false; this.sampleAppControllerReference = sampleAppControllerReference; this.data = data; this.continue = onContinue, // // Part 1: Starting the FaceTec Session // // Required parameters: // - FaceTecFaceScanProcessor: A class that implements FaceTecFaceScanProcessor, which handles the FaceScan when the User completes a Session. In this example, "this" implements the class. // - sessionToken: A valid Session Token you just created by calling your API to get a Session Token from the Server SDK. // new FaceTecSDK["FaceTecSDK"].FaceTecSession(this, sessionToken); } // // Part 2: Handling the Result of a FaceScan // processSessionResultWhileFaceTecSDKWaits(sessionResult, faceScanResultCallback) { // // DEVELOPER NOTE: These properties are for demonstration purposes only so the Sample App can get information about what is happening in the processor. // In the code in your own App, you can pass around signals, flags, intermediates, and results however you would like. // this.sampleAppControllerReference.setLatestSessionResult(sessionResult); // // Part 3: Handles early exit scenarios where there is no FaceScan to handle -- i.e. User Cancellation, Timeouts, etc. // if (sessionResult.status !== FaceTecSDK["FaceTecSDK"].FaceTecSessionStatus.SessionCompletedSuccessfully) { external_antd_["message"].error("Session was not completed successfully, cancelling. Status: " + sessionResult.status, 3); this.latestNetworkRequest.abort(); faceScanResultCallback.cancel(); return; } // IMPORTANT: FaceTecSDK.FaceTecSessionStatus.SessionCompletedSuccessfully DOES NOT mean the Liveness Check was Successful. // It simply means the User completed the Session and a 3D FaceScan was created. You still need to perform the Liveness Check on your Servers. // // Part 4: Get essential data off the FaceTecSessionResult // const { id, username } = this.data; var parameters = { // faceScan: sessionResult.faceScan, // auditTrailImage: sessionResult.auditTrail[0], pic: sessionResult.lowQualityAuditTrail[0], // sessionId: sessionResult.sessionId, id, username }; // // Part 5: Make the Networking Call to Your Servers. Below is just example code, you are free to customize based on how your own API works. // this.latestNetworkRequest = new XMLHttpRequest(); this.latestNetworkRequest.open("POST", FACE_COMPARE, true); this.latestNetworkRequest.setRequestHeader("licence", LiCENCE_KEY); this.latestNetworkRequest.setRequestHeader("Content-Type", "application/json"); this.latestNetworkRequest.setRequestHeader("access_key", ACCESS_KEY); // TODO: Make this prettier and more consolidated and perhaps less things to do here. this.latestNetworkRequest.setRequestHeader("X-Device-Key", Config_Config.DeviceKeyIdentifier); this.latestNetworkRequest.setRequestHeader("X-User-Agent", FaceTecSDK["FaceTecSDK"].createFaceTecAPIUserAgentString(sessionResult.sessionId)); this.latestNetworkRequest.onreadystatechange = () => { // // Part 6: In our Sample, we evaluate a boolean response and treat true as success, false as "User Needs to Retry", // and handle all other non-nominal responses by cancelling out. You may have different paradigms in your own API and are free to customize based on these. // if (this.latestNetworkRequest.readyState === XMLHttpRequest.DONE) { try { var responseJSON = JSON.parse(this.latestNetworkRequest.responseText); // // DEVELOPER NOTE: These properties are for demonstration purposes only so the Sample App can get information about what is happening in the processor. // In the code in your own App, you can pass around signals, flags, intermediates, and results however you would like. // this.sampleAppControllerReference.setLatestServerResult(responseJSON); if (responseJSON.Similarity === true) { // CASE: Success! The Liveness Check was performed and the User Proved Liveness. // // DEVELOPER NOTE: These properties are for demonstration purposes only so the Sample App can get information about what is happening in the processor. // In the code in your own App, you can pass around signals, flags, intermediates, and results however you would like. // this.success = true; // Demonstrates dynamically setting the Success Screen Message. FaceTecSDK["FaceTecSDK"].FaceTecCustomization.setOverrideResultScreenSuccessMessage("Liveness\nConfirmed"); faceScanResultCallback.succeed(); this.continue('Matched'); external_antd_["message"].success(responseJSON.message); } else if (responseJSON.Similarity === false || responseJSON.message) { // CASE: In our Sample code, "success" being present and false means that the User Needs to Retry. // Real Users will likely succeed on subsequent attempts after following on-screen guidance. // Attackers/Fraudsters will continue to get rejected. faceScanResultCallback.cancel(); this.continue('NotMatched'); if (responseJSON.message) { external_antd_["message"].error(responseJSON.message); } } else { faceScanResultCallback.retry(); external_antd_["message"].info("User needs to retry, invoking retry.", 3); } // else { // // CASE: UNEXPECTED response from API. Our Sample Code keys of a success boolean on the root of the JSON object --> You define your own API contracts with yourself and may choose to do something different here based on the error. // message.info("Unexpected API response, cancelling out.", 3); // faceScanResultCallback.cancel(); // } } catch { // CASE: Parsing the response into JSON failed --> You define your own API contracts with yourself and may choose to do something different here based on the error. Solid server-side code should ensure you don't get to this case. faceScanResultCallback.cancel(); external_antd_["message"].error("Exception while handling API response, cancelling out.", 3); } } }; this.latestNetworkRequest.onerror = function () { // CASE: Network Request itself is erroring --> You define your own API contracts with yourself and may choose to do something different here based on the error. console.log("XHR error, cancelling."); faceScanResultCallback.cancel(); }; // // Part 7: Demonstrates updating the Progress Bar based on the progress event. // this.latestNetworkRequest.upload.onprogress = function name(event) { var progress = event.loaded / event.total; faceScanResultCallback.uploadProgress(progress); }; // // Part 8: Actually send the request. // var jsonStringToUpload = JSON.stringify(parameters); this.latestNetworkRequest.send(jsonStringToUpload); // // Part 9: For better UX, update the User if the upload is taking a while. You are free to customize and enhance this behavior to your liking. // setTimeout(() => { if (this.latestNetworkRequest.readyState === XMLHttpRequest.DONE) { return; } faceScanResultCallback.uploadMessageOverride("Still Uploading..."); }, 6000); } // // Part 10: This function gets called after the FaceTec SDK is completely done. There are no parameters because you have already been passed all data in the processSessionWhileFaceTecSDKWaits function and have already handled all of your own results. // onFaceTecSDKCompletelyDone() { // // DEVELOPER NOTE: onFaceTecSDKCompletelyDone() is called after you signal the FaceTec SDK with success() or cancel(). // Calling a custom function on the Sample App Controller is done for demonstration purposes to show you that here is where you get control back from the FaceTec SDK. // this.sampleAppControllerReference.onComplete(); } // // DEVELOPER NOTE: This public convenience method is for demonstration purposes only so the Sample App can get information about what is happening in the processor. // In your code, you may not even want or need to do this. // isSuccess() { return this.success; } } // CONCATENATED MODULE: ./components/LivenessCheck/utilities/faceMapAppUtilities.js var FaceMapAppUtillities = function () { var currentTheme = "Sample Bank"; function displayStatus(status, method) { if (method) { method(status, 3); } else { external_antd_["message"].info(status, 3); } } function showMainUI() { document.querySelector(".wrapping-box-container").style.opacity = 1; FaceMapAppUtillities.enableAllButtons(); } // Disable buttons to prevent hammering, fade out main interface elements, and shuffle the guidance images. function fadeOutMainUIAndPrepareForSession() { disableAllButtons(); document.querySelector(".wrapping-box-container").style.opacity = 0; } function disableAllButtons() { document.querySelectorAll("button").forEach(function (button) { button.disabled = true; }); } function enableAllButtons() { document.querySelectorAll("button").forEach(function (button) { button.disabled = false; }); } function handleErrorGettingServerSessionToken() { fadeInMainUI(); enableAllButtons(); displayStatus("Session could not be started due to an unexpected issue during the network request."); } function generateUUId() { //@ts-ignore return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)); } function formatUIForDevice() { if (isLikelyMobileDevice()) { // Adjust button sizing document.querySelectorAll(".controls > button").forEach(function (element) {// if (element.className === "big-button") { // (element).style.height = "40px"; // (element).style.fontSize = "18px"; // } // else if (element.className === "medium-button") { // (element).style.height = "30px"; // (element).style.fontSize = "14px"; // } // (element).style.width = "220px"; }); // Hide border around control panel // (document.getElementById("controls")).style.borderColor = "transparent"; // Hide status label text background and decrease label font size // (document.getElementById("status")).style.backgroundColor = "transparent"; // (document.getElementById("status")).style.fontSize = "12px"; // Center control interface on screen // (document.getElementsByClassName("wrapping-box-container")[0]).style.top = "50%"; // (document.getElementsByClassName("wrapping-box-container")[0]).style.left = "50%"; // (document.getElementsByClassName("wrapping-box-container")[0]).style.transform = "translate(-50%, -50%)"; } } function isLikelyMobileDevice() { var isMobileDeviceUA = !!/Android|iPhone|iPad|iPod|IEMobile|Mobile|mobile/i.test(navigator.userAgent || ""); // ChromeOS/Chromebook detection. if (isMobileDeviceUA && (navigator.userAgent.indexOf("CrOS") != -1 || navigator.userAgent.indexOf("Chromebook") != -1)) { isMobileDeviceUA = false; } // Mobile device determination based on portrait / landscape and user agent. if (screen.width < screen.height || isMobileDeviceUA) { // Assume mobile device when in portrait mode or when determined by the user agent. return true; } else { return false; } } function configureGuidanceScreenTextForDevice() { if (isLikelyMobileDevice()) { // using strings with breaks for Ready Screen text on mobile devices Config.currentCustomization.guidanceCustomization.readyScreenHeaderAttributedString = "Get Ready For<br/>Your Video Selfie"; Config.currentCustomization.guidanceCustomization.readyScreenSubtextAttributedString = "Please Frame Your Face In<br/>The Small Oval, Then The Big Oval"; } FaceTecSDK["FaceTecSDK"].setCustomization(Config.currentCustomization); } return { displayStatus, showMainUI, fadeOutMainUIAndPrepareForSession, disableAllButtons, enableAllButtons, generateUUId, formatUIForDevice, handleErrorGettingServerSessionToken, configureGuidanceScreenTextForDevice, isLikelyMobileDevice }; }(); // CONCATENATED MODULE: ./components/LivenessCheck/utilities/themeHelpers.js const ThemeHelpers = () => { var currentTheme = "Sample Bank"; var themeResourceDirectory = "resources/themes/"; function setAppTheme(theme) { Config_Config.currentCustomization = getCustomizationForTheme(theme); var currentLowLightCustomization = getLowLightCustomizationForTheme(theme); FaceTecSDK["FaceTecSDK"].setCustomization(Config_Config.currentCustomization); FaceTecSDK["FaceTecSDK"].setLowLightCustomization(currentLowLightCustomization); } function getCustomizationForTheme(theme = 'Sample Bank') { var currentCustomization = new FaceTecSDK["FaceTecSDK"].FaceTecCustomization(); if (FaceMapAppUtillities.isLikelyMobileDevice()) { // using strings with breaks for Ready Screen text on mobile devices currentCustomization.guidanceCustomization.readyScreenHeaderAttributedString = "Get Ready For<br/>Your Video Selfie"; currentCustomization.guidanceCustomization.readyScreenSubtextAttributedString = "Please Frame Your Face In<br/>The Small Oval, Then The Big Oval"; } var retryScreenSlideshowImages = [themeResourceDirectory + "FaceTec_ideal_1.png", themeResourceDirectory + "FaceTec_ideal_2.png", themeResourceDirectory + "FaceTec_ideal_3.png", themeResourceDirectory + "FaceTec_ideal_4.png", themeResourceDirectory + "FaceTec_ideal_5.png"]; var primaryColor = "#03224c"; var primaryColorDark = "#000025"; var backgroundColor = "white"; // navy var font = "'Source Sans Pro', Helvetica, sans-serif"; // Initial Loading Animation Customization currentCustomization.initialLoadingAnimationCustomization.customAnimation = null; currentCustomization.initialLoadingAnimationCustomization.animationRelativeScale = 1.0; currentCustomization.initialLoadingAnimationCustomization.backgroundColor = primaryColor; currentCustomization.initialLoadingAnimationCustomization.foregroundColor = backgroundColor; currentCustomization.initialLoadingAnimationCustomization.messageTextColor = primaryColor; currentCustomization.initialLoadingAnimationCustomization.messageFont = font; currentCustomization.initialLoadingAnimationCustomization.messageTextSpacing = "normal"; currentCustomization.initialLoadingAnimationCustomization.messageTextSize = "16px"; // Overlay Customization currentCustomization.overlayCustomization.backgroundColor = backgroundColor; currentCustomization.overlayCustomization.showBrandingImage = true; currentCustomization.overlayCustomization.brandingImage = themeResourceDirectory + "sample-bank/sample_bank_logo.png"; // Guidance Customization currentCustomization.guidanceCustomization.backgroundColors = backgroundColor; currentCustomization.guidanceCustomization.foregroundColor = primaryColor; currentCustomization.guidanceCustomization.headerFont = font; currentCustomization.guidanceCustomization.headerTextSpacing = "normal"; currentCustomization.guidanceCustomization.headerTextSize = "20px"; currentCustomization.guidanceCustomization.subtextFont = font; currentCustomization.guidanceCustomization.subtextTextSpacing = "normal"; currentCustomization.guidanceCustomization.subtextTextSize = "12px"; currentCustomization.guidanceCustomization.buttonFont = font; currentCustomization.guidanceCustomization.buttonTextSpacing = "normal"; currentCustomization.guidanceCustomization.buttonTextSize = "16px"; currentCustomization.guidanceCustomization.buttonTextNormalColor = backgroundColor; currentCustomization.guidanceCustomization.buttonBackgroundNormalColor = primaryColor; currentCustomization.guidanceCustomization.buttonTextHighlightColor = backgroundColor; currentCustomization.guidanceCustomization.buttonBackgroundHighlightColor = primaryColorDark; currentCustomization.guidanceCustomization.buttonTextDisabledColor = "rgba(29, 23, 79, 0.3)"; currentCustomization.guidanceCustomization.buttonBackgroundDisabledColor = primaryColor; currentCustomization.guidanceCustomization.buttonBorderColor = backgroundColor; currentCustomization.guidanceCustomization.buttonBorderWidth = "2px"; currentCustomization.guidanceCustomization.buttonCornerRadius = "2px"; currentCustomization.guidanceCustomization.buttonRelativeWidth = "1.0"; currentCustomization.guidanceCustomization.buttonRelativeWidthOnDesktop = "0.5"; currentCustomization.guidanceCustomization.readyScreenOvalFillColor = "rgba(255, 255, 255, 0.2)"; currentCustomization.guidanceCustomization.readyScreenTextBackgroundColor = backgroundColor; currentCustomization.guidanceCustomization.readyScreenTextBackgroundCornerRadius = "2px"; currentCustomization.guidanceCustomization.retryScreenImageBorderColor = primaryColor; currentCustomization.guidanceCustomization.retryScreenImageBorderWidth = "2px"; currentCustomization.guidanceCustomization.retryScreenImageCornerRadius = "2px"; currentCustomization.guidanceCustomization.retryScreenOvalStrokeColor = primaryColor; currentCustomization.guidanceCustomization.retryScreenSlideshowImages = retryScreenSlideshowImages; currentCustomization.guidanceCustomization.retryScreenSlideshowInterval = "1500ms"; currentCustomization.guidanceCustomization.enableRetryScreenSlideshowShuffle = false; currentCustomization.guidanceCustomization.enableRetryScreenBulletedInstructions = true; currentCustomization.guidanceCustomization.cameraPermissionsScreenImage = themeResourceDirectory + "sample-bank/camera_white_navy.png"; // ID Scan Customization currentCustomization.idScanCustomization.showSelectionScreenBrandingImage = false; currentCustomization.idScanCustomization.selectionScreenBrandingImage = ""; currentCustomization.idScanCustomization.selectionScreenBackgroundColors = backgroundColor; currentCustomization.idScanCustomization.reviewScreenBackgroundColors = backgroundColor; currentCustomization.idScanCustomization.captureScreenForegroundColor = backgroundColor; currentCustomization.idScanCustomization.reviewScreenForegroundColor = backgroundColor; currentCustomization.idScanCustomization.selectionScreenForegroundColor = primaryColor; currentCustomization.idScanCustomization.headerFont = font; currentCustomization.idScanCustomization.headerTextSpacing = "normal"; currentCustomization.idScanCustomization.headerTextSize = "20px"; currentCustomization.idScanCustomization.subtextFont = font; currentCustomization.idScanCustomization.subtextTextSpacing = "normal"; currentCustomization.idScanCustomization.subtextTextSize = "12px"; currentCustomization.idScanCustomization.buttonFont = font; currentCustomization.idScanCustomization.buttonTextSpacing = "normal"; currentCustomization.idScanCustomization.buttonTextSize = "16px"; currentCustomization.idScanCustomization.buttonTextNormalColor = backgroundColor; currentCustomization.idScanCustomization.buttonBackgroundNormalColor = primaryColor; currentCustomization.idScanCustomization.buttonTextHighlightColor = backgroundColor; currentCustomization.idScanCustomization.buttonBackgroundHighlightColor = "rgba(255, 255, 255, 0.8)"; currentCustomization.idScanCustomization.buttonTextDisabledColor = "rgba(29, 23, 79, 0.3)"; currentCustomization.idScanCustomization.buttonBackgroundDisabledColor = primaryColor; currentCustomization.idScanCustomization.buttonBorderColor = backgroundColor; currentCustomization.idScanCustomization.buttonBorderWidth = "2px"; currentCustomization.idScanCustomization.buttonCornerRadius = "2px"; currentCustomization.idScanCustomization.buttonRelativeWidth = "1.0"; currentCustomization.idScanCustomization.buttonRelativeWidthOnDesktop = "0.5"; currentCustomization.idScanCustomization.captureScreenTextBackgroundColor = primaryColor; currentCustomization.idScanCustomization.captureScreenTextBackgroundBorderColor = backgroundColor; currentCustomization.idScanCustomization.captureScreenTextBackgroundBorderWidth = "2px"; currentCustomization.idScanCustomization.captureScreenTextBackgroundCornerRadius = "2px"; currentCustomization.idScanCustomization.reviewScreenTextBackgroundColor = primaryColor; currentCustomization.idScanCustomization.reviewScreenTextBackgroundBorderColor = backgroundColor; currentCustomization.idScanCustomization.reviewScreenTextBackgroundBorderWidth = "2px"; currentCustomization.idScanCustomization.reviewScreenTextBackgroundBorderCornerRadius = "2px"; currentCustomization.idScanCustomization.captureScreenBackgroundColor = backgroundColor; currentCustomization.idScanCustomization.captureFrameStrokeColor = primaryColor; currentCustomization.idScanCustomization.captureFrameStrokeWidth = "2px"; currentCustomization.idScanCustomization.captureFrameCornerRadius = "12px"; // Result Screen Customization currentCustomization.resultScreenCustomization.backgroundColors = backgroundColor; currentCustomization.resultScreenCustomization.foregroundColor = primaryColor; currentCustomization.resultScreenCustomization.messageFont = font; currentCustomization.resultScreenCustomization.messageTextSpacing = "normal"; currentCustomization.resultScreenCustomization.messageTextSize = "16px"; currentCustomization.resultScreenCustomization.activityIndicatorColor = primaryColor; currentCustomization.resultScreenCustomization.customActivityIndicatorImage = themeResourceDirectory + "sample-bank/activity_indicator_navy.png"; currentCustomization.resultScreenCustomization.customActivityIndicatorRotationInterval = "1s"; currentCustomization.resultScreenCustomization.customActivityIndicatorAnimation = null; currentCustomization.resultScreenCustomization.resultAnimationBackgroundColor = "transparent"; currentCustomization.resultScreenCustomization.resultAnimationForegroundColor = primaryColor; currentCustomization.resultScreenCustomization.resultAnimationSuccessBackgroundImage = themeResourceDirectory + "sample-bank/reticle_navy.png"; currentCustomization.resultScreenCustomization.resultAnimationUnsuccessBackgroundImage = themeResourceDirectory + "sample-bank/reticle_navy.png"; currentCustomization.resultScreenCustomization.customResultAnimationSuccess = null; currentCustomization.resultScreenCustomization.customResultAnimationUnsuccess = null; currentCustomization.resultScreenCustomization.showUploadProgressBar = true; currentCustomization.resultScreenCustomization.uploadProgressTrackColor = "rgba(255, 255, 255, 0.2)"; currentCustomization.resultScreenCustomization.uploadProgressFillColor = primaryColor; currentCustomization.resultScreenCustomization.animationRelativeScale = 1.0; // Feedback Customization currentCustomization.feedbackCustomization.backgroundColor = primaryColor; currentCustomization.feedbackCustomization.textColor = backgroundColor; currentCustomization.feedbackCustomization.textFont = font; currentCustomization.feedbackCustomization.textSpacing = "normal"; currentCustomization.feedbackCustomization.textSize = "18px"; currentCustomization.feedbackCustomization.cornerRadius = "2px"; currentCustomization.feedbackCustomization.shadow = "none"; currentCustomization.feedbackCustomization.relativeWidth = "1.0"; currentCustomization.feedbackCustomization.relativeWidthOnDesktop = "0.5"; // Frame Customization currentCustomization.frameCustomization.backgroundColor = backgroundColor; currentCustomization.frameCustomization.borderColor = backgroundColor; currentCustomization.frameCustomization.borderWidth = "2px"; currentCustomization.frameCustomization.borderCornerRadius = "2px"; currentCustomization.frameCustomization.shadow = "none"; // Oval Customization currentCustomization.ovalCustomization.strokeColor = primaryColor; currentCustomization.ovalCustomization.progressColor1 = "rgba(255, 255, 255, 0.8)"; currentCustomization.ovalCustomization.progressColor2 = "rgba(255, 255, 255, 0.8)"; // Cancel Button Customization currentCustomization.cancelButtonCustomization.customImage = themeResourceDirectory + "sample-bank/cancel_navy.png"; currentCustomization.cancelButtonCustomization.location = FaceTecSDK["FaceTecSDK"].FaceTecCancelButtonLocation.TopLeft; return currentCustomization; } function getLowLightCustomizationForTheme(theme) { var currentLowLightCustomization = getCustomizationForTheme(theme); var retryScreenSlideshowImages = [themeResourceDirectory + "FaceTec_ideal_1.png", themeResourceDirectory + "FaceTec_ideal_2.png", themeResourceDirectory + "FaceTec_ideal_3.png", themeResourceDirectory + "FaceTec_ideal_4.png", themeResourceDirectory + "FaceTec_ideal_5.png"]; var primaryColor = "white"; var backgroundColor = "rgb(29, 23, 79)"; // navy // Overlay Customization currentLowLightCustomization.overlayCustomization.brandingImage = themeResourceDirectory + "sample-bank/sample_bank_logo.png"; // Guidance Customization currentLowLightCustomization.guidanceCustomization.foregroundColor = backgroundColor; currentLowLightCustomization.guidanceCustomization.buttonTextNormalColor = primaryColor; currentLowLightCustomization.guidanceCustomization.buttonBackgroundNormalColor = backgroundColor; currentLowLightCustomization.guidanceCustomization.buttonTextHighlightColor = primaryColor; currentLowLightCustomization.guidanceCustomization.buttonBackgroundHighlightColor = "rgba(29, 23, 79, 0.8)"; currentLowLightCustomization.guidanceCustomization.buttonTextDisabledColor = "rgba(255, 255, 255, 0.3)"; currentLowLightCustomization.guidanceCustomization.buttonBackgroundDisabledColor = backgroundColor; currentLowLightCustomization.guidanceCustomization.buttonBorderColor = backgroundColor; currentLowLightCustomization.guidanceCustomization.readyScreenOvalFillColor = "rgba(255, 255, 255, 0.2)"; currentLowLightCustomization.guidanceCustomization.readyScreenTextBackgroundColor = primaryColor; currentLowLightCustomization.guidanceCustomization.retryScreenImageBorderColor = backgroundColor; currentLowLightCustomization.guidanceCustomization.retryScreenOvalStrokeColor = primaryColor; currentLowLightCustomization.guidanceCustomization.retryScreenSlideshowImages = retryScreenSlideshowImages; // ID Scan Customization currentLowLightCustomization.idScanCustomization.selectionScreenBrandingImage = ""; currentLowLightCustomization.idScanCustomization.captureScreenForegroundColor = backgroundColor; currentLowLightCustomization.idScanCustomization.reviewScreenForegroundColor = backgroundColor; currentLowLightCustomization.idScanCustomization.selectionScreenForegroundColor = backgroundColor; currentLowLightCustomization.idScanCustomization.buttonTextNormalColor = primaryColor; currentLowLightCustomization.idScanCustomization.buttonBackgroundNormalColor = backgroundColor; currentLowLightCustomization.idScanCustomization.buttonTextHighlightColor = primaryColor; currentLowLightCustomization.idScanCustomization.buttonBackgroundHighlightColor = "rgba(29, 23, 79, 0.8)"; currentLowLightCustomization.idScanCustomization.buttonTextDisabledColor = "rgba(255, 255, 255, 0.3)"; currentLowLightCustomization.idScanCustomization.buttonBackgroundDisabledColor = backgroundColor; currentLowLightCustomization.idScanCustomization.buttonBorderColor = backgroundColor; currentLowLightCustomization.idScanCustomization.captureScreenTextBackgroundColor = primaryColor; currentLowLightCustomization.idScanCustomization.captureScreenTextBackgroundBorderColor = backgroundColor; currentLowLightCustomization.idScanCustomization.reviewScreenTextBackgroundColor = primaryColor; currentLowLightCustomization.idScanCustomization.reviewScreenTextBackgroundBorderColor = backgroundColor; currentLowLightCustomization.idScanCustomization.captureFrameStrokeColor = primaryColor; // Result Screen Customization currentLowLightCustomization.resultScreenCustomization.foregroundColor = backgroundColor; currentLowLightCustomization.resultScreenCustomization.activityIndicatorColor = backgroundColor; currentLowLightCustomization.resultScreenCustomization.customActivityIndicatorImage = themeResourceDirectory + "sample-bank/activity_indicator_navy.png"; currentLowLightCustomization.resultScreenCustomization.customActivityIndicatorAnimation = null; currentLowLightCustomization.resultScreenCustomization.resultAnimationBackgroundColor = "transparent"; currentLowLightCustomization.resultScreenCustomization.resultAnimationForegroundColor = backgroundColor; currentLowLightCustomization.resultScreenCustomization.resultAnimationSuccessBackgroundImage = themeResourceDirectory + "sample-bank/reticle_navy.png"; currentLowLightCustomization.resultScreenCustomization.resultAnimationUnsuccessBackgroundImage = themeResourceDirectory + "sample-bank/reticle_navy.png"; currentLowLightCustomization.resultScreenCustomization.customResultAnimationSuccess = null; currentLowLightCustomization.resultScreenCustomization.customResultAnimationUnsuccess = null; currentLowLightCustomization.resultScreenCustomization.uploadProgressTrackColor = "rgba(0, 0, 0, 0.2)"; currentLowLightCustomization.resultScreenCustomization.uploadProgressFillColor = backgroundColor; // Feedback Customization currentLowLightCustomization.feedbackCustomization.backgroundColor = backgroundColor; currentLowLightCustomization.feedbackCustomization.textColor = primaryColor; // Frame Customization currentLowLightCustomization.frameCustomization.borderColor = backgroundColor; // Oval Customization currentLowLightCustomization.ovalCustomization.strokeColor = backgroundColor; currentLowLightCustomization.ovalCustomization.progressColor1 = "rgba(29, 23, 79, 0.8)"; currentLowLightCustomization.ovalCustomization.progressColor2 = "rgba(29, 23, 79, 0.8)"; // Cancel Button Customization currentLowLightCustomization.cancelButtonCustomization.customImage = themeResourceDirectory + "sample-bank/cancel_navy.png"; return currentLowLightCustomization; } setAppTheme(); }; // CONCATENATED MODULE: ./components/LivenessCheck/liveness.js var Liveness = function () { var latestEnrollmentIdentifier = ""; var latestSessionResult = null; var latestIDScanResult = null; var latestProcessor; // Wait for onload to be complete before attempting to access the Browser SDK. window.onload = function () { // Set a the directory path for other FaceTec Browser SDK Resources. FaceTecSDK["FaceTecSDK"].setResourceDirectory("/resources"); // Set the directory path for required FaceTec Browser SDK images. FaceTecSDK["FaceTecSDK"].setImagesDirectory("/FaceTec_images"); // Initialize FaceTec Browser SDK and configure the UI features. FaceTecSDK["FaceTecSDK"].initializeInDevelopmentMode(Config_Config.DeviceKeyIdentifier, Config_Config.PublicFaceMapEncryptionKey, function (initializedSuccessfully) { if (initializedSuccessfully) { ThemeHelpers(); FaceMapAppUtillities.enableAllButtons(); } FaceMapAppUtillities.displayStatus(FaceTecSDK["FaceTecSDK"].getFriendlyDescriptionForFaceTecSDKStatus(FaceTecSDK["FaceTecSDK"].getStatus()), external_antd_["message"].success); }); FaceMapAppUtillities.formatUIForDevice(); }; // Initiate a 3D Liveness Check. function onLivenessCheckPressed(data, onContinue) { FaceMapAppUtillities.fadeOutMainUIAndPrepareForSession(); // Get a Session Token from the FaceTec SDK, then start the 3D Liveness Check. getSessionToken(function (sessionToken) { latestProcessor = new LivenessCheckProcessor_LivenessCheckProcessor(sessionToken, Liveness, data, onContinue); }); } // Show the final result and transition back into the main interface. function onComplete() { FaceMapAppUtillities.showMainUI(); if (!latestProcessor.isSuccess()) { // Reset the enrollment identifier. latestEnrollmentIdentifier = ""; // Show early exit message to screen. If this occurs, please check logs. // FaceMapAppUtillities.displayStatus("Complete your face scan first!"); return; } // Show successful message to screen // FaceMapAppUtillities.displayStatus("Success", message.success); } // Get the Session Token from the server function getSessionToken(sessionTokenCallback) { var XHR = new XMLHttpRequest(); XHR.open("GET", Config_Config.BaseURL + "/session-token"); XHR.setRequestHeader("X-Device-Key", Config_Config.DeviceKeyIdentifier); XHR.setRequestHeader("X-User-Agent", FaceTecSDK["FaceTecSDK"].createFaceTecAPIUserAgentString("")); XHR.onreadystatechange = function () { if (this.readyState === XMLHttpRequest.DONE) { var sessionToken = ""; try { // Attempt to get the sessionToken from the response object. sessionToken = JSON.parse(this.responseText).sessionToken; // Something went wrong in parsing the response. Return an error. if (typeof sessionToken !== "string") { onServerSessionTokenError(); return; } } catch { // Something went wrong in parsing the response. Return an error. onServerSessionTokenError(); return; } sessionTokenCallback(sessionToken); } }; XHR.onerror = function () { onServerSessionTokenError(); }; XHR.send(); } function onServerSessionTokenError() { FaceMapAppUtillities.handleErrorGettingServerSessionToken(); } // // DEVELOPER NOTE: This is a convenience function for demonstration purposes only so the Sample App can have access to the latest session results. // In your code, you may not even want or need to do this. // function setLatestSessionResult(sessionResult) { latestSessionResult = sessionResult; } function setIDScanResult(idScanResult) { latestIDScanResult = idScanResult; } function getLatestEnrollmentIdentifier() { return latestEnrollmentIdentifier; } function setLatestServerResult(responseJSON) {} return { onLivenessCheckPressed, onComplete,