Skip to content

Commit f19c623

Browse files
phpmapsphpmaps
committed
Initial commit
Initial commit Web SDK Example project 0.0.1 Update file structure Update README.md added vite example Update README.md Update README.md default styles - renamed onboarding to incode - replaced create call with call to token server -nlah
0 parents  commit f19c623

File tree

18 files changed

+1442
-0
lines changed

18 files changed

+1442
-0
lines changed

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.env
3+
package-lock.json
4+
.gitignore
5+
.DS_Store

‎README.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<img src="https://incode.com/wp-content/uploads/2022/12/cropped-favicon.jpg?w=96" alt="Incode Logo" title="Incode Developer Sample | JavaScript & Typescript" align="right" height="96" width="96"/>
2+
3+
# Incode Javascript Samples
4+
5+
Incode Web SDK samples for Identity Verification:
6+
7+
* [Web SDK | Getting Started][getting_started_doc]
8+
* [Web SDK | Release Notes][release_notes_doc]
9+
10+
11+
[getting_started_doc]: https://docs.incode.com/docs/web/integration-guide/getting_started
12+
[release_notes_doc]: https://docs.incode.com/docs/web/release-notes
13+
14+
15+
## Setup
16+
17+
18+
### Prerequisites
19+
20+
1. Install [Node.js][node] (See sample folder for recommended version)
21+
1. Clone this repository:
22+
23+
git clone https://github.com/Incode-Technologies-Example-Repos/nodejs-samples.git
24+
25+
26+
[node]: https://nodejs.org/
27+
28+
### How to run a sample
29+
30+
1. Change directory to one of the sample folders, e.g. `token-server`:
31+
32+
cd <repo root directory>/<sample folder>
33+
34+
1. Install the sample's dependencies (see the sample's README for details):
35+
36+
npm install
37+
38+
1. Run the sample:
39+
40+
npm run start
41+
42+
## Other samples
43+
44+
The [Vanilla Example][vanilla_sample] is a frontend sample written without frameworks. It's a vanilla example of our Web SDK.
45+
46+
The [React Example][react_sample] is a frontend React JS implementation sample.
47+
48+
[vanilla_sample]: https://github.com/IncodeTechnologies/web-sdk-example
49+
[react_sample]: https://github.com/IncodeTechnologies/welcome-react-example

‎sample-implementation/.env.example‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Incode API URL for demo or saas environment
2+
VITE_INCODE_API_URL="[INCODE API URL]"
3+
4+
# Incode API Key. Provided by Incode
5+
VITE_INCODE_API_KEY="[YOUR API KEY]"
6+
7+
# Web SDK URL. Check our latest version here:
8+
# https://docs.incode.com/docs/web/release-notes/
9+
VITE_INCODE_WEB_SDK_URL="[LATEST SDK VERSION URL]"
10+
11+
# Dev server config values (only for localhost).
12+
VITE_INCODE_OMNI_PATH="/omni"
13+
VITE_SDK_ENDPOINT="/"

‎sample-implementation/README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Incode Web SDK integration example (Vanilla JS)
2+
3+
## Run the project
4+
5+
After cloning/downloading this project:
6+
7+
- Run `npm install`
8+
- Create your `.env` file based on the `.env.example` file`, and change the values for the ones provided by Incode.
9+
- Run `npm start` To start the app.
10+
- Test the application in your browser: [https://localhost:5173/](https://localhost:5173/)
11+
12+
## About the Incode Web SDK
13+
Please read [our official documentation](https://docs.incode.com/docs/web/integration-guide/getting_started)
14+
15+
## Author
16+
© Incode Technologies Inc. All rights reserved.

‎sample-implementation/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en" translate="no">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/png+xml" href="/favicon.png" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<script src="%VITE_INCODE_WEB_SDK_URL%" defer></script>
8+
<script type="module" src="/main.js" defer></script>
9+
<title>Incode Web SDK Integration Example</title>
10+
</head>
11+
<body>
12+
<section id="incode-container"></section>
13+
</body>
14+
</html>

‎sample-implementation/main.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import "./styles.css";
2+
import sessionMock from './session-mock.js';
3+
let incode;
4+
let session;
5+
6+
const container = document.querySelector("#incode-container");
7+
8+
function initializeIncodeSDK() {
9+
return window.OnBoarding.create({
10+
apiURL: import.meta.env.VITE_SDK_ENDPOINT,
11+
});
12+
}
13+
14+
function createIncodeSession() {
15+
//emulate backend request
16+
return sessionMock;
17+
}
18+
19+
function captureIdFrontSide() {
20+
incode.renderCamera("front", container, {
21+
onSuccess: captureIdBackSide,
22+
onError: console.log,
23+
token: session,
24+
numberOfTries: 3,
25+
showTutorial: true,
26+
showCustomCameraPermissionScreen: true,
27+
});
28+
}
29+
30+
function captureIdBackSide() {
31+
incode.renderCamera("back", container, {
32+
onSuccess: processId,
33+
onError: console.log,
34+
token: session,
35+
numberOfTries: 3,
36+
showTutorial: true,
37+
showCustomCameraPermissionScreen: true,
38+
});
39+
}
40+
41+
function processId() {
42+
return incode
43+
.processId({ token: session.token })
44+
.then(() => {
45+
captureSelfie();
46+
})
47+
.catch((error) => {
48+
console.log(error);
49+
});
50+
}
51+
52+
function captureSelfie() {
53+
incode.renderCamera("selfie", container, {
54+
onSuccess: finishOnboarding,
55+
onError: console.log,
56+
token: session,
57+
numberOfTries: 3,
58+
showCustomCameraPermissionScreen: true,
59+
});
60+
}
61+
62+
//add then & catch
63+
function finishOnboarding() {
64+
incode
65+
.getFinishStatus(null, { token: session.token })
66+
.then((response) => {
67+
console.log(response);
68+
})
69+
.catch((error) => {
70+
console.log(error);
71+
});
72+
}
73+
74+
async function app() {
75+
incode = initializeIncodeSDK();
76+
session = await createIncodeSession();
77+
await incode.sendGeolocation({ token: session.token }).catch((error) => {
78+
console.log(error);
79+
});
80+
81+
captureIdFrontSide();
82+
}
83+
84+
document.addEventListener("DOMContentLoaded", app);

‎sample-implementation/package.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "incode-web-sdk-examples",
3+
"private": true,
4+
"version": "0.0.1",
5+
"type": "module",
6+
"scripts": {
7+
"start": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"devDependencies": {
12+
"vite": "^4.2.0",
13+
"vite-plugin-mkcert": "^1.13.4"
14+
}
15+
}

‎sample-implementation/public/favicon.png‎

12.6 KB
Loading

‎sample-implementation/session-mock.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/*
2+
How to create Incode Onboarding sessions:
3+
https://docs.incode.com/docs/omni-api/api/onboarding#start-onboarding
4+
*/
5+
6+
export default {
7+
token: "Session token from /omni/start"
8+
}

‎sample-implementation/styles.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/*
2+
Add your customization styles here. Learn more:
3+
https://docs.incode.com/docs/web/customization
4+
*/
5+
:root{
6+
--font:sans-serif
7+
}
8+
9+
*{
10+
font-family: var(--font);
11+
}

0 commit comments

Comments
 (0)