Knit Webapp

Knit UI Component with AngularJS

Suggest Edits

Import the web component in your html file

Firstly we need to import the web component through JS file link using a <script> tag inside <head>.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular App</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script type="module" src="https://af1.getknit.dev/knit-ui-comp.js" ></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

📘

Make sure to import the web component script as a module

Make sure to include type="module" in the script tag.

Declare the component and required functions

Declare the knit-auth component in app.component.html and attach functions for custom events emitted from the knit-auth component. 

<knit-auth  [authSessionToken]="token" (onNewSession)="onNewSession()" (onFinish)="onFinish($event)"  (onDeactivate)="onDeactivate($event)" (onKnitClose)="onKnitClose($event)">
<!-- Set skipIntro attribute to disable the introduction screen -->
<!-- <knit-auth  [authSessionToken]="token" [skipIntro]="true" (onNewSession)="onNewSession()" (onFinish)="onFinish($event)" (onDeactivate)="onDeactivate($event)" (onKnitClose)="onKnitClose($event)"> -->
   <!-- Declare a clickable element (preferably a button)  as child that has a slot attribute with value 'trigger' -->
  <button slot="trigger">Integrate with Knit</button>
</knit-auth>

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
	// Knit Auth component won't open with a empty session token
  token = '';
  //Set the token once the component has initialised
  ngOnInit(): void {
    this.onNewSession();
  }
  // Backend call to generate & get the authSessionToken
  onNewSession(): void {
    // Hit the backend to generate authSessionToken
    fetch('https://yourbackend.com/getSessionToken', { method: 'GET' })
      .then((res) => res.json())
      .then((r) => {
        this.token = r.token;
      });
  }
  // Upon finishing the integration flow
  onFinish(event: Event): void {
    // integrationDetails is emitted through onFinish  custom event
    console.log((<CustomEvent>event)['detail']['integrationDetails']);
  }
  
  // Upon deactivate of integration
  onDeactivate(event: Event): void {
    // integrationDetails is emitted through onDeactivate custom event
    console.log((<CustomEvent>event)['detail']['integrationDetails']);
  }
  
  // Upon closing of the knit-auth component
  onKnitClose(event: Event): void {
    console.log((<CustomEvent>event)['detail']['knitClosed']);
  }
}

Include CUSTOM_ELEMENTS_SCHEMA in module schemas

CUSTOM_ELEMENTS_SCHEMA from @angular/core is required because knit-auth is a custom web component.

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Things to consider:

  • Pass any element ( preferably a button ) as a child to the knit-auth component, with slot="trigger attribute. This element will open the UI Auth component when clicked.
  • Assign functions to onNewSession, onFinish, onDeactivate and onKnitClose events emitted from the knit-auth component. onNewSession should call your backend to get a new auth session token, if need be.
  • Pass session token that you received from your backend to the authSessionToken property of the knit-auth component through the onNewSession function.
  • If you want to disable the introduction screen, set skipIntro attribute to true.
  • Upon completion of the integration setup flow, an integrationDetails object is emitted through the onFinish event, you can access the integrationDetails using e['detail']['integrationDetails'].
  • Upon deactivation of the integration, an integrationDetails object is emitted through the onDeactivate event, you can access the integrationDetails using e['detail']['integrationDetails'].
  • Upon closing of the knit-auth component, onKnitClose event is emitted.

Updated 8 months ago

What’s Next