Angular

1. Install `angular-cli` to create an Angular project.

 npm install -g @angular/cli

2. Create a new project.

ng new <project-name>

3. Add the OneSDK package.

npm install @frankieone/one-sdk

Additional setup for Webpack bundler (skip this if you're not using Webpack).

Add the custom Webpack for angular-cli and Webpack loaders.

npm install -D @angular-builders/custom-webpack file-loader style-loader css-loader @types/react

Update the angular.json file to use a custom Webpack builder.

{
  ...
  "projects": {
    "<project-name>": {
      ...
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
			"customWebpackConfig": {
              "path": "./webpack.config.js"
            },
            ...
          },
          ...
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          ...
        }
      }

create a Webpack config file and add loaders.

// webpack.config.js

module.exports = {
  module: {
    rules: [
		{
			test: /\.svg$/,
			use: [
				{
					loader: 'file-loader',
					options: {
						name: 'assets/[name].[hash:8].[ext]'
					}
				}
			]
		},
		{
			test: /\.css$/,
			use: [
				{ loader: 'style-loader' },
				{ loader: 'css-loader' }
			],
			exclude: /src/
		}
	]
  }
}

4. Update tsconfig.json or tsconfig.app.json.

{
  ...
  "compilerOptions": {
	"allowSyntheticDefaultImports": true,
	"skipLibCheck": true,
	...
  },
  ...
}

5. Initialize OneSDK, and open `./src/app/app.component.ts`.

@Component({
	...
	templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
	async ngOnInit() { 
		const CUSTOMER_ID = '';
		const CUSTOMER_CHILD_ID = '';
		const API_KEY = '';
		const response = await fetch("https://backend.latest.frankiefinancial.io/auth/v2/machine-session", {
			method: "POST",
			headers: {
				authorization:
					"machine " +
					btoa([CUSTOMER_ID, CUSTOMER_CHILD_ID, API_KEY].filter(Boolean).join(":")),
				"Content-Type": "application/json"
			},
			body: JSON.stringify({
				permissions: {
					preset: "one-sdk",
					reference: `demo-${ new Date().toISOString() }`
				}
			})
		});
		
		const oneSdk = await OneSDK({
			session: await response.json(),
			recipe: {
				form: {
					provider: {
						name: 'react',
						googleApiKey: "AIzaSyC42YgNcCSadoy8dxDKKEXZohJU9B5eM2M"
					},
				}
			}
		});
		
		oneSdk.on('*', console.log);

		// declare component function
		const component = oneSdk.component as unknown as (arg0: any, arg1?: any) => any;

		// declare flow function
		const flow = oneSdk.flow as unknown as (arg0: any) => any;

		const oneSdkIndividual = oneSdk.individual();
		oneSdkIndividual.addConsent("general");
		oneSdkIndividual.addConsent("docs");
		oneSdkIndividual.addConsent("creditheader");
		await oneSdkIndividual.submit();

		const idv = flow("idv");
		const loading1 = component("form", { name: "LOADING", title: { label: "Loading..." }, descriptions: [{ label: "" }] });
		const loading2 = component("form", { name: "LOADING", title: { label: "Processing results..." }, descriptions: [{ label: "Hold tight, this can take up to 30 seconds. Please do not refresh this page or click the 'back' button on your browser." }] });
		const review = component("form", {
			name: "REVIEW",
			type: "ocr",
		});

		let before = true;
		idv.on("loading", (display: any) => {
			if (display) {
				if (before) {
					loading1.mount("#e2e-idv-loading1");
				}
			} else {
				if (before) {
					loading1.unmount();
				}
				before = false;
			}
		});

		idv.on("results", async ({ checkStatus }: { checkStatus: any; }) => {
			if (checkStatus) {
				console.log("results succesfful");
				loading2.unmount();
				review.mount("#e2e-idv-container");
			} else {
				console.log("no data returned");
			}
		});

		idv.on("error", ({ message, payload }: { message: any, payload: any; }) => {
			console.log("received error");
			console.log(message, payload);
		});


		idv.on("detection_complete", (message: any) => {
			console.log("capture finished");
			console.log(message);
			loading2.mount("#e2e-idv-loading2");
		});

		idv.on("*", (message: any) => {
			console.log(message);
		});

		review.on("form:review:ready", async (message: any) => {
			console.log(message);
		});

		idv.mount("#e2e-idv-container");
	}
}

6. Add the component into the template `./src/app/app.component.html`.

<div id="e2e-idv-container" style="min-width: 100vh; height: 85vh"></div>
<div id="e2e-idv-loading1"></div>
<div id="e2e-idv-loading2"></div>

7 Finally, run the project.

npm run start

1. Install angular-cli to create an Angular project.