Angular
Here’s how to create an Angular starter project and integrate OneSDK package modules. This will give you a solid foundation to build with OneSDK and Angular.
1. Install angular-cli
to create an Angular project.
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
.
./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
.
./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
Updated 5 days ago