From 0a9e524bba8b9cc8d531ce051b25e48e3c2c9a71 Mon Sep 17 00:00:00 2001 From: Levhita Date: Fri, 14 Jun 2024 14:02:10 -0600 Subject: [PATCH 1/7] add fakebackend remove old sessions file --- .env.example | 5 +++++ fake_backend.js | 57 +++++++++++++++++++++++++++++++++++++++++++++++++ main.js | 15 ++++++------- session.js | 29 ------------------------- 4 files changed, 69 insertions(+), 37 deletions(-) create mode 100644 fake_backend.js delete mode 100644 session.js diff --git a/.env.example b/.env.example index fc9f8d3..f2b9453 100644 --- a/.env.example +++ b/.env.example @@ -1,3 +1,8 @@ VITE_TOKEN_SERVER_URL=/api VITE_API_URL=https://demo-api.incodesmile.com/0 VITE_SDK_URL=https://sdk.incode.com/sdk/onBoarding-1.71.1.js + +# HERE ONLY FOR DEMO PURPOSES, THE APIKEY AND THE FLOW_ID SHOULD NEVER BE IN THE FRONTEND. +VITE_FAKE_BACKEND_APIURL=https://demo-api.incodesmile.com +VITE_FAKE_BACKEND_APIKEY= +VITE_FAKE_BACKEND_FLOW_ID= diff --git a/fake_backend.js b/fake_backend.js new file mode 100644 index 0000000..6749523 --- /dev/null +++ b/fake_backend.js @@ -0,0 +1,57 @@ +const apiurl = import.meta.env.VITE_FAKE_BACKEND_APIURL; +const flowid = import.meta.env.VITE_FAKE_BACKEND_FLOWID; +const apikey = import.meta.env.VITE_FAKE_BACKEND_APIKEY + +const defaultHeader = { + 'Content-Type': "application/json", + 'x-api-key': apikey, + 'api-version': '1.0' +}; + +// Call Incode's `omni/start` API to create an Incode session which will include a +// token in the response. +const fakeBackendStart = async function() { + const url = `${apiurl}/omni/start`; + const params = { + configurationId: flowid, + // language: "en-US", + // redirectionUrl: "https://example.com?custom_parameter=some+value", + // externalCustomerId: "the id of the customer in your system", + }; + + let response; + try { + response = await fetch(url, { method: 'POST', body: JSON.stringify(params), headers: defaultHeader}); + if (!response.ok) { + throw new Error('Request failed with code ' + response.status) + } + } catch(e) { + throw new Error('HTTP Post Error: ' + e.message) + } + + // The session response has many values, but you should only pass the token to the frontend. + const {token} = await response.json(); + return {token}; +} + +// Finishes the session started at /start +const fakeBackendFinish = async function(token) { + const url = `${apiurl}/omni/finish-status`; + + let sessionHeaders = {...defaultHeader}; + sessionHeaders['X-Incode-Hardware-Id'] = token; + + let response; + try { + response = await fetch(url, {method: 'GET', headers: sessionHeaders}); + if (!response.ok) { + throw new Error('Request failed with code ' + response.status) + } + } catch(e) { + throw new Error('HTTP Post Error: ' + e.message) + } + const {redirectionUrl, action} = await response.json(); + return {redirectionUrl, action}; +} + +export {fakeBackendStart, fakeBackendFinish}; \ No newline at end of file diff --git a/main.js b/main.js index cf02238..3312041 100644 --- a/main.js +++ b/main.js @@ -1,4 +1,4 @@ -import { startOnboardingSession, finishOnboardingSession } from './session' +import { fakeBackendStart, fakeBackendFinish } from './fake_backend' let incode; let incodeSession; @@ -25,7 +25,8 @@ function captureIdFrontSide() { }); } -function captureIdBackSide() { +function captureIdBackSide(response) { + console.log(response); incode.renderCamera("back", container, { onSuccess: processId, onError: showError, @@ -53,12 +54,10 @@ function captureSelfie() { }); } - - function finishOnboarding() { // Finishing the session works along with the configuration in the flow // webhooks and business rules are ran here. - finishOnboardingSession(incodeSession.token) + fakeBackendFinish(incodeSession.token) .then((response) => { console.log(response); const container = document.getElementById("finish-container"); @@ -70,8 +69,7 @@ function finishOnboarding() { } async function app() { - try { - // Create the instance of incode linked to a client + try { const apiURL = import.meta.env.VITE_API_URL; incode = window.OnBoarding.create({ apiURL: apiURL @@ -80,7 +78,8 @@ async function app() { // Create the single session container.innerHTML = "

Creating session...

"; try { - incodeSession = await startOnboardingSession(); + incodeSession = await fakeBackendStart(); + console.log(incodeSession); } catch(e) { showError(e); return; diff --git a/session.js b/session.js deleted file mode 100644 index 4ddcc90..0000000 --- a/session.js +++ /dev/null @@ -1,29 +0,0 @@ -const tokenServerURL= import.meta.env.VITE_TOKEN_SERVER_URL; - -const startOnboardingSession = async function() { - // Connect with your backend service and retreive the Session Token - const response = await fetch(`${tokenServerURL}/start`); - if (!response.ok) { - const data = await response.json(); - throw new Error(data.error); - } - - return await response.json(); -} - -const finishOnboardingSession = async function(token) { - // Connect with your backend service to finish the session - const response = await fetch(`${tokenServerURL}/finish`, { - method: "POST", - body: JSON.stringify({token}) - }); - - if (!response.ok) { - const data = await response.json(); - throw new Error(data.error); - } - - return await response.json(); -} - -export {startOnboardingSession, finishOnboardingSession}; From 5e507f891fb14fdad75f0a75551ee5e55eeef28b Mon Sep 17 00:00:00 2001 From: Levhita Date: Fri, 14 Jun 2024 14:02:18 -0600 Subject: [PATCH 2/7] update readme --- README.md | 29 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 926db02..0b85cd9 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Onboarding Core Vanilla Javascript Example -This examples runs the basic create session -> frontId -> backID -> -processId -> Selfie -> getFinishStatus flow, the code is simple enough to insert or remove any step for testing or creating proof of concepts. +This examples runs the basic create session in backend -> frontId -> backID -> +processId -> Selfie -> finish status in backend flow, the code is simple enough to insert or remove any step for testing or creating proof of concepts. # Requirements Vite requires Node.js version 14.18+, 16+. some templates require a higher Node.js version to work, please upgrade if your package manager warns about it. @@ -10,22 +10,21 @@ Run `npm install` # Config Copy `.env.example` to `.env.local` and add your local values ``` -VITE_TOKEN_SERVER_URL=/api VITE_API_URL=https://demo-api.incodesmile.com/0 -VITE_SDK_URL=https://sdk.incode.com/sdk/onBoarding-1.70.0.js +VITE_SDK_URL=https://sdk.incode.com/sdk/onBoarding-1.71.0.js + +# HERE ONLY FOR DEMO PURPOSES, THE APIKEY AND THE FLOW_ID SHOULD NEVER BE IN THE FRONTEND. +VITE_FAKE_BACKEND_APIURL=https://demo-api.incodesmile.com +VITE_FAKE_BACKEND_APIKEY= +VITE_FAKE_BACKEND_FLOW_ID= ``` Remember the Flow holds the backend counter part of the process, some configurations there might affect the behavior of the WebSDK here. -# Backend Server -A backend server that will generate the url is needed for this sample, -luckily for you we already have sample server NodeJS, please reffer to our documentation on subject: -[Backend Sample Server](https://developer.incode.com/docs/code-samples-for-web-integrations#backend-sample-server) - -In order to simplfy development, this repo is configured to reverse -proxy a local backend server (`http://localhost:3000`) in the `/api` -url like `https://:5173/api`, if you want to point your -frontend development to a backend server deployed elsewhere, change -the VITE_TOKEN_SERVER_URL to the full url of such server. +# Fake Backend Server +Starting and Finishing the session must be done in the backend, to simplify development this +sample includes a fake_backend.js file that does this in the frontend, please be advised to +replace this with a proper backend for your production runs. the APIKEY should never be +exposed in the frontend. # Run Vite is configured to serve the project using https and and expose him self, so you can easily test with your mobile phone on the local network. @@ -39,7 +38,7 @@ run `npm run build` A new build will be created in `/dist` you can serve that build everywhere just remember to serve with https. -# Testing especific versions locally +# Testing especific versions of the webSDK locally You can save the specific version needed under `/public` and change the `VITE_SDK_URL` variable on `.env.local` to something like: ``` From 97103eef3845400ec616250599f1751a265c8496 Mon Sep 17 00:00:00 2001 From: Levhita Date: Fri, 14 Jun 2024 14:02:25 -0600 Subject: [PATCH 3/7] remove reverse proxy --- vite.config.js | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/vite.config.js b/vite.config.js index 3a7ceae..f6783bb 100644 --- a/vite.config.js +++ b/vite.config.js @@ -3,16 +3,7 @@ import mkcert from 'vite-plugin-mkcert' export default defineConfig({ server: { - https: true, - proxy: { - '/api': { - target: 'http://localhost:3000', - changeOrigin: true, - secure: false, - ws: true, - rewrite: (path) => path.replace(/^\/api/, ''), - } - } + https: true }, plugins: [ mkcert() ] -}) \ No newline at end of file +}); \ No newline at end of file From 62a39dce8d20a4cad0cc2fb7b3ec57b57bcdfe46 Mon Sep 17 00:00:00 2001 From: Levhita Date: Fri, 14 Jun 2024 14:06:26 -0600 Subject: [PATCH 4/7] removing logs --- main.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/main.js b/main.js index 3312041..bc6c56f 100644 --- a/main.js +++ b/main.js @@ -26,7 +26,6 @@ function captureIdFrontSide() { } function captureIdBackSide(response) { - console.log(response); incode.renderCamera("back", container, { onSuccess: processId, onError: showError, @@ -79,7 +78,6 @@ async function app() { container.innerHTML = "

Creating session...

"; try { incodeSession = await fakeBackendStart(); - console.log(incodeSession); } catch(e) { showError(e); return; From 38a71653b92b625d2a02e1fbee3425affa36e8a2 Mon Sep 17 00:00:00 2001 From: Levhita Date: Fri, 14 Jun 2024 14:40:05 -0600 Subject: [PATCH 5/7] corrected .env.example --- .env.example | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.env.example b/.env.example index f2b9453..86056bc 100644 --- a/.env.example +++ b/.env.example @@ -1,8 +1,7 @@ -VITE_TOKEN_SERVER_URL=/api VITE_API_URL=https://demo-api.incodesmile.com/0 VITE_SDK_URL=https://sdk.incode.com/sdk/onBoarding-1.71.1.js # HERE ONLY FOR DEMO PURPOSES, THE APIKEY AND THE FLOW_ID SHOULD NEVER BE IN THE FRONTEND. VITE_FAKE_BACKEND_APIURL=https://demo-api.incodesmile.com VITE_FAKE_BACKEND_APIKEY= -VITE_FAKE_BACKEND_FLOW_ID= +VITE_FAKE_BACKEND_FLOWID= From 5c8f8595ab596dcf828eb91dbed86c7150edd717 Mon Sep 17 00:00:00 2001 From: Levhita Date: Tue, 16 Jul 2024 15:44:18 -0600 Subject: [PATCH 6/7] no reload --- .env.example | 2 +- index.html | 2 +- main.js | 16 ++++++++++++---- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/.env.example b/.env.example index 86056bc..bc3d917 100644 --- a/.env.example +++ b/.env.example @@ -1,5 +1,5 @@ VITE_API_URL=https://demo-api.incodesmile.com/0 -VITE_SDK_URL=https://sdk.incode.com/sdk/onBoarding-1.71.1.js +VITE_SDK_URL=https://sdk.incode.com/sdk/onBoarding-1.73.1.js # HERE ONLY FOR DEMO PURPOSES, THE APIKEY AND THE FLOW_ID SHOULD NEVER BE IN THE FRONTEND. VITE_FAKE_BACKEND_APIURL=https://demo-api.incodesmile.com diff --git a/index.html b/index.html index 3df5a9d..f9eaea2 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - Vite WebSDK Example + Onboarding Core Javascript Example
diff --git a/main.js b/main.js index bc6c56f..c9c6bb6 100644 --- a/main.js +++ b/main.js @@ -21,7 +21,14 @@ function captureIdFrontSide() { onError: showError, token: incodeSession, numberOfTries: 3, - showTutorial: true + showTutorial: true, + onRestartOnboarding: () => { + console.log('Clicked Retry'); + container.innerHTML=""; + captureIdFrontSide(); + document.querySelector('.ReactModalPortal').remove(); + }, + showCustomCameraPermissionScreen: true, }); } @@ -31,7 +38,7 @@ function captureIdBackSide(response) { onError: showError, token: incodeSession, numberOfTries: 3, - showTutorial: true + showTutorial: true, }); } @@ -49,7 +56,7 @@ function captureSelfie() { onError: showError, token: incodeSession, numberOfTries: 3, - showTutorial: true + showTutorial: true, }); } @@ -85,7 +92,8 @@ async function app() { // Empty the container and start the flow container.innerHTML = ""; - saveDeviceData(); + //saveDeviceData(); + captureIdFrontSide(); } catch (e) { console.dir(e); container.innerHTML = "

Something Went Wrong

"; From 77bfdc23d565dfd0268ff3defe216750c0420326 Mon Sep 17 00:00:00 2001 From: Levhita Date: Tue, 16 Jul 2024 16:02:22 -0600 Subject: [PATCH 7/7] full removal --- main.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/main.js b/main.js index c9c6bb6..1cb1160 100644 --- a/main.js +++ b/main.js @@ -27,6 +27,10 @@ function captureIdFrontSide() { container.innerHTML=""; captureIdFrontSide(); document.querySelector('.ReactModalPortal').remove(); + document.querySelector(".ReactModal__Body--open").classList.remove("ReactModal__Body--open"); + document.querySelector('body').removeAttribute("style"); + document.querySelectorAll('[data-react-modal-body-trap]').forEach((elem) => elem.remove()); + document.querySelector('portal').remove(); }, showCustomCameraPermissionScreen: true, });