Smartbridge Angular SDK

Installation

• Install Package: npm install @netrist-smartbridge/smartbridge

• Import modules in app.module.ts (You will also need to import HttpClientModule and NgbModule as dependencies):

// ...
import { CacLoginButtonModule } from '@netrist-smartbridge/smartbridge';
import { CacButtonModule } from '@netrist-smartbridge/smartbridge';
import { HttpClientModule } from '@angular/common/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  // ...
  imports: [
    // ...
    CacLoginButtonModule,
    CacButtonModule,
    HttpClientModule,
    NgbModule
  ], 
  // ...
})

Buttons

This sdk contains two button components for integrating with the Smartbridge platform

• CAC Login Button
  • <cac-login-button></cac-login-button>
  • For integration with Smartbridge's CAC login flow.
• CAC Button
  • <cac-button></cac-button>
  • For integration with Smartbridge's associate CAC and register CAC flows.

CAC Login Button

This button allows for a streamlined login process with CAC using Smartbridge.

Usage

Inputs:

• cacLoginUrl (Required): URL for the Smartbridge CAC Login endpoint

  cacLoginUrl='example.netristsmartbridge.com/cac-login'

• callbackUrl (Required): URL where the results will be POSTed.

  callbackUrl='netrist.com'

• clientId (Required): The Client ID specifically being used for Authorization header on the callback

  clientId='clientId-1234'

• style: any styling need for the login button in JSON format.

  style={
          'padding': '10px',
          'margin': '5px'
         }

• text: text displayed on the button. Defaults to 'Login with CAC' if none is entered.

  text='CAC Login'

Outputs:

• response: JSON containing whether the authentication was successful, and a JWT from the transaction.
  • emitted as a javaScript '$event' upon clicking the button.
  • example:
    • successful cac login (success = true)

    {
      'success' : 'true',
      'jwt' : 'xyz...'
    }

    • unsuccessful cac login (success = false)

    {
      'success' : 'false',
      'jwt' : 'xyz...',
      'error' : 'description of error'
    }

    • A failed request will bring up an error modal.

Example:

<cac-login-button
[style]="{'padding': '10px', 'background-color': 'blue', 'color': 'white'}"
[cacLoginUrl]="'https://example.com/cac-login'"
[callbackUrl]="'https://example.com/login'"
[clientId]="'angularClientId'"
[text]="'CAC Login'"
(response)="onLoginResponse($event)"
>
</cac-login-button> 

• Note: "onLoginResponse($event)" is simply an example function that takes the response JSON as an argument. Such a function would be implemented by the SDK user.

CAC Button

This button allows for a streamlined cac association or registration process with CAC using Smartbridge.

Usage

Inputs:

• cacUrl (Required): URL for the Smartbridge CAC endpoint

  cacUrl='example.netristsmartbridge.com/cac'

• callbackUrl (Required): URL where the results will be POSTed.

  callbackUrl='netrist.com'

• clientId (Required): The Client ID specifically being used for Authorization header on the callback

  clientId='clientId-1234'

• style: any styling need for the CAC button in JSON format.

  style={
          'padding': '10px',
          'margin': '5px'
         }

• text: text displayed on the button. Defaults to 'Associate a CAC' if none is entered.

  text='Register a CAC'

Outputs:

• response: JSON containing whether the authentication was successful, and a JWT from the transaction.
  • emitted as a javaScript '$event' upon clicking the button.
  • example:
    • successful CAC association (success = true):

    {
      'success' : 'true',
      'jwt' : 'xyz...'
    }

    • unsuccessful CAC association (success = false):

    {
      'success' : 'false',
      'jwt' : 'xyz...',
      'error' : 'description of error'
    }

    • A failed request will bring up an error modal.

Example:

    <cac-button
    [style]="{'padding': '10px', 'background-color': 'green', 'color': 'white'}"
    [callbackUrl]="'https://example.com/associateCac'"
    [cacUrl]="'https://example.com/cac'"
    [clientId]="'angularClientId'"
    [text]="'Register a CAC'"
    (response)="onCACResponse($event)"
    >
    </cac-button>

• Note: "onCACResponse($event)" is simply an example function that takes the response JSON as an argument. Such a function would be implemented by the SDK user.