Angular

开始前，请先按照 JavaScript 接入指南加载 SDK，并添加公共配置和 TypeScript 类型声明。本页使用 Root Service 管理 SDK 实例。

接入步骤

在 src/index.html 中加载 gld_v2.js，并使用 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 未返回成功结果');
    }
    const token = result.data.respondedGeeToken || result.data.geeToken;
    if (!token) throw new Error('GeeLabGuard 未返回可用的 GeeToken');
    return { token, offline: Boolean(result.data.offline) };
  }
}

项目还应添加第 3 节的全局类型声明。在根组件中预加载：

// 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 初始化失败:', error);
    });
  }
}

业务组件通过注入的 Service 调用：

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

接入步骤

On this page