@authing/guard-angular
TypeScript icon, indicating that this package has built-in type declarations

5.3.6 • Public • Published

English | 简体中文


Guard is a portable authentication component provided by authing. You can embed it in any application to handle complex user authentication processes in one stop.

Prepare your Angular project and follow the guide to connect Guard to your Angular project!

Install

npm install --save @authing/guard-angular

Initialize

Key Type Default Requires
appId String - Y
host String - N
redirectUri String - N
mode normal / modal normal N
defaultScene GuardModuleType login N
tenantId String - N
lang zh-CN / en-US zh-CN N
isSSO Boolean true N
config Partial - N
// angular.json
{
  "projects": {
    "architect": {
      "build": {
        "styles": [
          "node_modules/@authing/guard-angular/dist/guard.min.css"
        ]
      }
    }
  }
}
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { GuardModule } from '@authing/guard-angular'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    GuardModule.forRoot({
      appId: '62e22721c889dd44bad1dda2',
      host: 'https://guard-test-2022.authing.cn',
      redirectUri: 'http://localhost:3000/callback'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }
// use Guard APIs in Components
import { Component } from '@angular/core'

import { GuardService } from '@authing/guard-angular'

@Component({
  selector: 'login-container',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  constructor (
    private guard: GuardService
  ) {}

  userInfo = ''

  ngOnInit () {
   console.log(this.guard.client)
  }
}

Guard for Angular provides three login modes

Embed mode

Render Guard component

import { Component } from '@angular/core'

import { GuardService } from '@authing/guard-angular'

@Component({
  selector: 'login-container',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  constructor (
    private guard: GuardService
  ) {}

  userInfo = ''

  ngOnInit () {
    this.guard.client.start('#guard-root')
  }
}

modal mode

When the parameter 'mode' of Guard instantiation is' modal ', the modal mode is started, and the following API can be used to display and hide the guard.

this.guard.client.show()
this.guard.client.hide()

Redirect mode

Login by code, redirect to login page

this.guard.client.startWithRedirect()

Auto handle redirect callback

this.guard.client.handleRedirectCallback()

Logout

this.guard.client.logout()

Regist events

this.guard.client.on('load', e => {
  console.log(e)
})

this.guard.client.on('login', userInfo => {
  console.log(userInfo)
})

// ......

Integrate authing js sdk instance

Guard integrated AuthenticationClient, so you can access all apis of AuthenticationClient, etc:

this.guard.client.getAuthClient().then(authClient => {
  authClient.registerByEmail()
  authClient.validateToken()
  // .......
})
// ....

Refer to Authentication SDK

Documentation

To check out live examples and docs, visit docs

Readme

Keywords

none

Package Sidebar

Install

npm i @authing/guard-angular

Weekly Downloads

153

Version

5.3.6

License

MIT

Unpacked Size

549 kB

Total Files

23

Last publish

Collaborators

  • authing