Angular

Before you begin, follow the JavaScript integration guide to load the SDK, create the shared client module, and configure the TypeScript declarations. This page covers only Angular-specific initialization and usage.

Integration Steps

Load gld_v2.js from src/index.html and manage the instance through a root service:

// src/app/gee-guard.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class GeeGuardService {
  private instancePromise?: ReturnType<Window['loadGeelabGuard']>;

  preload(): ReturnType<Window['loadGeelabGuard']> {
    if (this.instancePromise) return this.instancePromise;

    const pending = window.loadGeelabGuard({
      publicKey: 'your_public_key',
      protocol: 'https://',
      apiServers: ['riskct-global.geelabapi.com'],
    });
    this.instancePromise = pending;
    pending.catch(() => {
      if (this.instancePromise === pending) this.instancePromise = undefined;
    });
    return pending;
  }

  async getToken() {
    const result = await (await this.preload()).get();
    if (!result || result.status !== 'success' || !result.data) {
      throw new Error('GeeLabGuard did not return a successful result');
    }
    const token = result.data.respondedGeeToken || result.data.geeToken;
    if (!token) throw new Error('GeeLabGuard did not return an available GeeToken');
    return { token, offline: Boolean(result.data.offline) };
  }
}

Also add the global declarations from Section 3. Preload the SDK from the root component:

// src/app/app.component.ts
import { Component } from '@angular/core';
import { GeeGuardService } from './gee-guard.service';

@Component({
  selector: 'app-root',
  template: '<router-outlet />',
})
export class AppComponent {
  constructor(geeGuard: GeeGuardService) {
    geeGuard.preload().catch(function (error) {
      console.error('GeeLabGuard initialization failed:', error);
    });
  }
}

Call the injected service from a business component:

import { GeeGuardService } from './gee-guard.service';

export class CheckoutComponent {
  constructor(private readonly geeGuard: GeeGuardService) {}

  async checkout() {
    const { token, offline } = await this.geeGuard.getToken();
    await fetch('/api/checkout', {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({ gee_token: token, offline }),
    });
  }
}

Angular

Integration Steps

On this page