Angular

1
@Component({
2
  selector: 'app-root',
3
  templateUrl: './app.component.html'
4
})
5
export class AppComponent implements OnInit {
6
  async ngOnInit() {
7
    await this.initializeOneSDK();
8
  }
9
10
  private async initializeOneSDK() {
11
    const session = await this.getSessionToken();
12
    const oneSdk = await this.setupSDK(session);
13
    await this.configureSDK(oneSdk);
14
  }
15
16
  private async getSessionToken() {
17
    const config = {
18
      CUSTOMER_ID: '',
19
      CUSTOMER_CHILD_ID: '',
20
      API_KEY: ''
21
    };
22
23
    const response = await fetch(
24
      "https://backend.latest.frankiefinancial.io/auth/v2/machine-session",
25
      {
26
        method: "POST",
27
        headers: {
28
          authorization: "machine " + btoa([
29
            config.CUSTOMER_ID,
30
            config.CUSTOMER_CHILD_ID,
31
            config.API_KEY
32
          ].filter(Boolean).join(":")),
33
          "Content-Type": "application/json"
34
        },
35
        body: JSON.stringify({
36
          permissions: {
37
            preset: "one-sdk",
38
            reference: `demo-${new Date().toISOString()}`
39
          }
40
        })
41
      }
42
    );
43
44
    return response.json();
45
  }
46
47
  private async setupSDK(session: any) {
48
    return await OneSDK({
49
      session,
50
      recipe: {
51
        form: {
52
          provider: {
53
            name: 'react',
54
            googleApiKey: "YOUR_GOOGLE_API_KEY"
55
          },
56
        }
57
      }
58
    });
59
  }
60
61
  private async configureSDK(oneSdk: any) {
62
    // Setup event logging
63
    oneSdk.on('*', console.log);
64
65
    // Initialize individual flow
66
    const individual = oneSdk.individual();
67
    await this.setupConsent(individual);
68
69
    // Configure IDV flow
70
    await this.setupIDVFlow(oneSdk);
71
  }
72
73
  private async setupConsent(individual: any) {
74
    individual.addConsent("general");
75
    individual.addConsent("docs");
76
    individual.addConsent("creditheader");
77
    await individual.submit();
78
  }
79
80
  private async setupIDVFlow(oneSdk: any) {
81
    const component = oneSdk.component as unknown as (arg0: any, arg1?: any) => any;
82
    const flow = oneSdk.flow as unknown as (arg0: any) => any;
83
84
    const idv = flow("idv");
85
    const loading1 = component("form", {
86
      name: "LOADING",
87
      title: { label: "Loading..." },
88
      descriptions: [{ label: "" }]
89
    });
90
91
    const loading2 = component("form", {
92
      name: "LOADING",
93
      title: { label: "Processing results..." },
94
      descriptions: [{
95
        label: "Hold tight, this can take up to 30 seconds. Please don't refresh this page."
96
      }]
97
    });
98
99
    const review = component("form", {
100
      name: "REVIEW",
101
      type: "ocr"
102
    });
103
104
    this.setupIDVEventHandlers(idv, loading1, loading2, review);
105
    idv.mount("#e2e-idv-container");
106
  }
107
108
  private setupIDVEventHandlers(idv: any, loading1: any, loading2: any, review: any) {
109
    let before = true;
110
111
    idv.on("loading", (display: boolean) => {
112
      if (display && before) {
113
        loading1.mount("#e2e-idv-loading1");
114
      } else if (before) {
115
        loading1.unmount();
116
        before = false;
117
      }
118
    });
119
120
    idv.on("results", async ({ checkStatus }: { checkStatus: boolean }) => {
121
      if (checkStatus) {
122
        loading2.unmount();
123
        review.mount("#e2e-idv-container");
124
      }
125
    });
126
127
    idv.on("detection_complete", () => {
128
      loading2.mount("#e2e-idv-loading2");
129
    });
130
131
    // Error handling
132
    idv.on("error", ({ message, payload }: { message: string, payload: any }) => {
133
      console.error("IDV Error:", message, payload);
134
    });
135
  }
136
}