​
Prerequisites

​
Install

Innerworks collects data in your application’s runtime so that we can provide you with analytics for fraud and bot prevention.

npm i @innerworks-me/iw-auth-sdk

​
Import

First, import the SDK, do this in the file for the page you’ve identified to send metrics from.

import { InnerworksMetrics } from "@innerworks/iw-auth-sdk";

​
Configure

Configure the InnerworksMetrics class and begin collecting metrics in ngAfterViewInit:

  • appId - your project ID from Innerworks

  • detectionType - The type of detection (and therefore metric collection) that is required. Options are ‘BotDetection’, ‘VPN’, ‘Fingerprinting’.

  • signInButtonDomSelector - a DOM ID from the button you will use to submit data, this is so the SDK can pull mouse movement and click data from interactions with the button.

  • logLevel (optional) - set the minimum log level, requires ones of trace, debug, info, warn, error, silent.

  • silentLogs (optional) - boolean value to mute all logs from SDK

innerworksMetrics: InnerworksMetrics | null = null;

ngAfterViewInit(): void {
  this.innerworksMetrics = new InnerworksMetrics({
    appId: 'your-project-id',
    detectionType: 'BotDetection',
    signInButtonDomSelector: '#button-id',
    logLevel: 'error',
    silentLogs: true
  });
}

signInButtonDomSelector is only required if detectionType == 'BotDetection'

The signInButtonDomSelector should match an id in a button component for example

<button type="submit" id="button-id" class="submit-button">

​
Send

On a key interaction on the page (like a sign in), send the metrics to Innerworks by calling innerworksMetrics.send.

Be aware you need to pass a unique ID at this point. This allows Innerworks to uniquely link a user with their data. You need to ensure that you are able to retrieve the user ID at this point.

if (innerworksMetrics) {
  const metricsSendSuccess = await innerworksMetrics.send("UNIQUE_ID");
}

​
Full Example

import { AfterViewInit, Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { InnerworksMetrics } from '@innerworks-me/iw-auth-sdk';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-demo-page',
  templateUrl: './demo-page.component.html',
  styleUrls: ['./demo-page.component.css']
})
export class DemoPageComponent implements AfterViewInit {
  userName: string = '';
  password: string = '';
  innerworksMetrics: InnerworksMetrics | null = null;
  authError: string | null = null;
  authSuccess: boolean = false;
  loginForm: FormGroup;
  loading: boolean = false;

  constructor(private fb: FormBuilder) {
      this.loginForm = this.fb.group({
        username: ['', Validators.required],
        password: ['', Validators.required]
      });
  }

  ngAfterViewInit(): void {
    this.innerworksMetrics = new InnerworksMetrics({
      appId: 'your-project-id',
      signInButtonDomSelector: '#button-id',
      logLevel: 'error',
      silentLogs: true
    });
  }  

  async handleSubmit() {
    if (this.loginForm.valid) {
      this.loading = true;
      const username = this.loginForm.get('username')?.value;
      const password = this.loginForm.get('password')?.value;
  
      const id = this.mockAuthenticator(username, password);
  
      if (id) {
        this.authError = null;
        if (this.innerworksMetrics) {
          const metricsSendSuccess = await this.innerworksMetrics.send(id);
          if (metricsSendSuccess) {
            this.authSuccess = true;
          } else {
            this.authError = "Error when sending innerworks metrics";
          }
        } else {
          this.authError = "Innerworks SDK is not defined";
        }
    } else {
        this.authError = "Username or Password Incorrect";
    }
      this.loading = false;
    }
  }

  mockAuthenticator(username: string, password: string): string | null {
    if (username === "test-username" && password === "password") {
      return "mock-user-id";
    }
    return null;
  }
}