前额巨角

Frontegg是一个网络平台,SaaS公司可以在此设置其完全管理,可伸缩和品牌意识的-SaaS功能,并整合到其SaaS门户网站中,最多有5行代码.

第3.0.1版以来的变化

如果你从 @frontegg/angular 版本2或更早,您可以找到 这里的移民指南

1. 安装Frontegg图书馆

运行以下命令以安装 Frontegg 角库 :

npm install @frontegg/angular

2. 配置

1. 添加 FronteggAppModule 改为 AppModule.imports[]
2. 添加 FronteggComponent 改为 AppModule.entryComponents[]

/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CommonModule } from '@angular/common';
import { FronteggAppModule, FronteggComponent } from '@frontegg/angular';

@NgModule({
  declarations: [AppComponent],
  imports: [
    CommonModule,
    BrowserModule,
    AppRoutingModule,

    /** 1. Import Frontegg Module **/
    FronteggAppModule.forRoot(
      {
        contextOptions: {
          baseUrl: 'https://[YOUR_SUBDOMAIN].frontegg.com',
          clientId: '[YOUR_CLIENT_ID]'
        },
      }
    ),
  ],

  /** 2. Add Frontetgg Component to your entryComponents **/
  entryComponents: [FronteggComponent],

  bootstrap: [AppComponent],
})
export class AppModule { }

连接您的应用程序靴子组件 fronteggService 以查看前置加载状态

//app.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FronteggAuthService, FronteggAppService } from '@frontegg/angular';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnDestroy {
  isLoading = true;
  loadingSubscription: Subscription;
  constructor(private fronteggAppService: FronteggAppService) {
    this.loadingSubscription = fronteggAppService.isLoading$.subscribe((isLoading) => this.isLoading = isLoading)
  }
  ngOnDestroy(): void {
    this.loadingSubscription.unsubscribe()
  }
}

把你的申请包起来 *ngIf="!isLoading" 选择器以确保您有正确的上下文

<!-- app.component.html -->

<div *ngIf="!isLoading">
    <router-outlet></router-outlet>
</div>

3. 了解用户背景

Frontegg通过 a 显示用户上下文和认证状态 FronteggAppService您可以通过 FronteggAppService. 获得纪念 用户状态、 SSO 状态、 MFA 状态等认证子状态使用 FronteggAuthService 如下所示: 样本 :

// app.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { FronteggAuthService, FronteggAppService } from '@frontegg/angular';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, OnDestroy {
  isLoading = true;
  loadingSubscription: Subscription;
  user?: any;

  constructor(
    private fronteggAuthService: FronteggAuthService, 
    private fronteggAppService: FronteggAppService) {
    this.loadingSubscription = 
      fronteggAppService.isLoading$.subscribe((isLoading) => this.isLoading = isLoading)
  }

  ngOnInit(): void {
    this.fronteggAuthService?.user$.subscribe((user) => {
      this.user = user
    })
  }

  ngOnDestroy(): void {
    this.loadingSubscription.unsubscribe()
  }
}

更新 app.component.html 显示用户名和外观:

<!-- app.component.html-->

<div *ngIf="!isLoading">
    <img src={{user?.profilePictureUrl}} alt={{user?.name}} />
    <div>User name: {{user?.name}}</div>
</div>

4. 在您的路由模块中添加 FronteggAuthGuard

使用 FronteggAuthGuard 如果用户未认证并试图到达私人路线,则将用户重定向到登录页面.

// app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProtectedAppComponent } from './components/protected.component';
import { NotFoundComponent } from './components/not-found.component';
import { HomeComponent } from './components/home.component';
import { UsersComponent } from './components/users.component';
import { FronteggAuthGuard } from '@frontegg/angular';

/** Option to protect a specific route **/
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'test-private-route', canActivate: [FronteggAuthGuard], component: ProtectedAppComponent },
  { path: '**', component: NotFoundComponent },
]

/** Option to protect all routes **/
const routes: Routes = [
  {
    path: '',
    canActivate: [FronteggAuthGuard],
    children: [
      { path: '', component: HomeComponent },
      { path: 'users', component: UsersComponent },
      { path: '**', component: NotFoundComponent },
    ]
  },
]

@NgModule({
  declarations: [ProtectedAppComponent, HomeComponent, UsersComponent, NotFoundComponent],
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

5. 运行 App, 注册和登录

我们都准备好了 让我们运行应用程序 并看到Frontegg行动.

npm run serve

好极了 Frontegg现在和你的应用软件结合了!

在您的应用程序中添加了登录和登录路径 :

注册屏幕将在http://localhost:4200/account/sign-up上公布

登录屏幕将在 http://localhost:4200/account/login 上显示

如果您已经登录, 请访问 http://localhost: 4200/ account/logout并登录出 .

通过注册和登录来尝试一下.

试试看! 开通http://localhost:8080/account/sign-up 与您的第一个用户签约.

Frontegg 管理员门户整合

为了让终端用户能够控制安全设置、配置、团队管理等等,下一步将 要嵌入 Admin Portal 在您的申请.

对于Frontegg 管理员门户集成,我们将导入FronteggAppService 从 frontegg-app 软件包和 使用情况 showAdminPortal 方法.

import { Component, OnInit } from '@angular/core';
import { FronteggAppService } from '@frontegg/angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {

  constructor(private fronteggAppService: FronteggAppService) { }

  showApp(): void {
    this.fronteggAppService?.showAdminPortal()
  }
}

6. 慢慢来!