¶ 将 Guard 接入到单页 Web 应用

// main.ts
import { createApp } from 'vue'

import { createGuard } from '@authing/guard-vue3'

import '@authing/guard-vue3/dist/esm/guard.min.css'

import App from './App.vue'

const app = createApp(App)

app.use(
  createGuard({
    appId: 'AUTHING_APP_ID'
  })
)

// 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: 'AUTHING_APP_ID'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

export default {
  created () {
    console.log('guard instance: ', this.$guard)
  }
}

// Composition API 
import { useGuard } from '@authing/guard-vue3'

const guard = useGuard()

console.log('guard instance: ', guard)

// Options API
export default {
  created () {
    console.log('guard instance: ', this.$guard)
  }
}

// Angular 组件中使用 Guard API
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 (
    // // 使用 Angular 依赖注入，获取 Guard 实例
    private guard: GuardService
  ) {}

  userInfo = ''

  ngOnInit () {
   console.log('guard instance: ', this.guard.client)
  }
}

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').then(userInfo => {
      this.userInfo = userInfo
    })
  }

  unmountGuard () {
    this.guard.client.unmount()
  }
}

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
  ) {}

  ngOnInit () {
    this.guard.client.start('#guard').then(userInfo => {
      console.log(userInfo)
    })
  }

  showGuard () {
    // 展示 Guard 弹窗
    this.guard.client.show()
  },

  hideGuard () {
    // 隐藏 Guard 弹窗
    this.guard.client.hide()
  }
}

// Callback.tsx
import React, { useEffect } from 'react'

import { useHistory } from 'react-router-dom'

import { useGuard } from '@authing/guard-react'

export default function Callback() {
  const history = useHistory()
  const guard = useGuard()

  const handleCallback = async () => {
    await guard.handleRedirectCallback()
    history.replace('/personal')
  }

  useEffect(() => {
    handleCallback()
  })

  return <div>This is Callback page</div>
}

// Login.vue
export default {
  created () {
    this.startWithRedirect()
  },
  methods: {
    startWithRedirect () {
      this.$guard.startWithRedirect()
    }
  }
}

// Callback.vue
export default {
  created () {
    this.handleRedirectCallback()
  },
  methods: {
    async handleAuthingLoginCallback () {
      await this.$guard.handleRedirectCallback()
      this.$router.replace({
        name: 'Personal'
      })
    }
  }
}

// Login.vue
import { onMounted } from 'vue'
import { useGuard } from '@authing/guard-vue3'

const guard = useGuard()

const startWithRedirect = () => guard.startWithRedirect()

onMounted(() => {
  startWithRedirect()
})

// Callback.vue
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useGuard } from '@authing/guard-vue3'

const router = useRouter()
const guard = useGuard()

const handleRedirectCallback = async () => {
  await guard.handleRedirectCallback()
  router.replace({
    name: 'Personal'
  })
}

onMounted(() => {
  handleRedirectCallback()
})

// Login.ts
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
  ) {}

  startWithRedirect () {
    this.guard.client.startWithRedirect()
  }
}

// Callback.ts
import { Component } from '@angular/core'

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

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

  async handleRedirectCallback () {
    await this.guard.client.handleRedirectCallback()

    this.router.navigateByUrl('personal', {
      replaceUrl: true
    })
  }
}

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 = null

  async getUserInfo () {
    this.userInfo = await this.guard.client.trackSession()
  }
}

export default {
  methods: {
    onLogout () {
      this.$guard.logout()
    }
  }
}

import { onMounted } from 'vue'
import { useGuard } from '@authing/guard-vue3'

const guard = useGuard()

const onLogout = () => guard.logout()

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
  ) {}

  onLogout () {
    this.guard.client.logout()
  }
}

export default {
  methods: {
    startRegister () {
      this.$guard.startRegister()
    }
  }
}

import { onMounted } from 'vue'
import { useGuard } from '@authing/guard-vue3'

const guard = useGuard()

const startRegister = () => guard.startRegister()

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
  ) {}

  startRegister () {
    this.guard.client.startRegister()
  }
}

export default {
  methods: {
    checkLoginStatus () {
      guard.checkLoginStatus().then(user => {
        // 如果是未登录状态，user 为 undefined
        console.log(user)
      })
    }
  }
}

import { onMounted } from 'vue'
import { useGuard } from '@authing/guard-vue3'

const guard = useGuard()

const checkLoginStatus = () => {
  guard.checkLoginStatus().then(user => {
    // 如果是未登录状态，user 为 undefined
    console.log(user)
  })
}

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
  ) {}

  checkLoginStatus () {
    guard.checkLoginStatus().then(user => {
      // 如果是未登录状态，user 为 undefined
      console.log(user)
    })
  }
}

export default {
  data: {
    lang: 'zh-CN'
  },
  methods: {
    changeLang () {
      this.lang = this.lang === 'zh-CN' ? 'en-US' : 'zh-CN'
      this.$guard.changeLang(lang)
    }
  }
}

import { onMounted } from 'vue'
import { useGuard } from '@authing/guard-vue3'

const guard = useGuard()

let lang = 'zh-CN'

const changeLang = () => {
  lang = lang === 'zh-CN' ? 'en-US' : 'zh-CN'
  guard.changeLang(lang)
}

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
    private
  ) {}

  lang = 'zh-CN'

  changeLang () {
    this.lang = this.lang === 'zh-CN' ? 'en-US' : 'zh-CN'
    this.guard.client.changeLang(this.lang)
  }
}

export default {
  data: {
    lang: 'zh-CN'
  },
  methods: {
    changeLang () {
      this.$guard.changeContentCSS('body {background: red}')
    }
  }
}

import { onMounted } from 'vue'
import { useGuard } from '@authing/guard-vue3'

const guard = useGuard()

const changeLang = () => guard.changeContentCSS('body {background: red}')

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
    private
  ) {}

  lang = 'zh-CN'

  changeLang () {
    this.guard.client.changeContentCSS('body {background: red}')
  }
}

// main.js
import * as facePlugin from 'face-api.js'

import Vue from 'vue'
import { GuardPlugin } from '@authing/guard-vue2'

import '@authing/guard-vue2/dist/esm/guard.min.css'

Vue.use(GuardPlugin, {
  appId: 'AUTHING_APP_ID',
  facePlugin: facePlugin
})

// main.ts
import { createApp } from 'vue'

import { createGuard } from '@authing/guard-vue3'

import '@authing/guard-vue3/dist/esm/guard.min.css'

import * as facePlugin from 'face-api.js'

import App from './App.vue'

const app = createApp(App)

app.use(
  createGuard({
    appId: 'AUTHING_APP_ID',
    facePlugin: facePlugin
  })
)

// 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'

import * as facePlugin from 'face-api.js'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    GuardModule.forRoot({
      appId: 'AUTHING_APP_ID',
      facePlugin: facePlugin
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

export default {
  mounted () {
    this.$guard.on('event-name', () => {
      console.log('........')
    })
  }
}

import { onMounted } from 'vue'
import { useGuard } from '@authing/guard-vue3'

const guard = useGuard()

onMounted(() => {
  guard.on('event-name', () => {
    console.log('........')
  })
})

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
  ) {}

  ngOnInit () {
    this.guard.client.on('event-name', () => {
      console.log('........')
    })
  }
}

export default {
  created () {
    this.$guard.getAuthClient().then(authClient => {
      authClient.registerByEmail()
      authClient.validateToken()
      // ........
    })
  }
}

import { onMounted } from 'vue'
import { useGuard } from '@authing/guard-vue3'

const guard = useGuard()

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

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
  ) {}

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