简体中文 | [English](./README.md)
Guard 是 Authing 提供的一种轻便的认证组件，你可以把它嵌入在你任何的 SPA（Single Page Application）应用中，一站式处理复杂的用户认证流程。
准备好你的 原生 JavaScript 项目，跟随引导将 Guard 接入到你的 原生 JavaScript 项目中吧！
## 安装
使用 CDN:
``` html
```
使用 NPM:
``` shell
npm install --save @authing/guard
```
## 初始化
|字段|类型|默认是|必传
|-----|----|----|----|
|appId|String| - |是|
|host|String| - |否|
|redirectUri|String| - |否|
|mode|normal / modal|normal|否|
|defaultScene|GuardModuleType|login|否|
|tenantId|String| - | 否 |
|lang|zh-CN / en-US|zh-CN| 否 |
|isSSO|Boolean|true| 否 |
|config|Partial| - | 否 |
``` javascript
// 使用 CDN
const guard = new GuardFactory.Guard({
appId: '62e22721c889dd44bad1dda2',
host: 'https://guard-test-2022.authing.cn',
redirectUri: 'http://localhost:3000/callback'
})
// 使用 npm
const guard = new Guard({
appId: '62e22721c889dd44bad1dda2',
host: 'https://guard-test-2022.authing.cn',
redirectUri: 'http://localhost:3000/callback'
})
```
## Guard 提供三种登录模式
### 嵌入模式
渲染 Guard 组件
``` javascript
guard.start('#root').then(userInfo => {
console.log(userInfo)
})
```
### 弹窗模式
当 Guard 实例化的参数 `mode` 为 `modal` 时，将启动模态模式，下面的 API 可用于显示和隐藏 Guard。
``` javascript
guard.show()
```
``` javascript
guard.hide()
```
### 跳转模式
使用 code 码登录，跳转到登录页面
``` javascript
guard.startWithRedirect()
```
code 换 token，自动处理页面重定向
``` javascript
guard.handleRedirectCallback()
```
登出
``` javascript
guard.logout()
```
## 注册事件
``` javascript
guard.on('load', e => {
console.log(e)
})
guard.on('login', userInfo => {
console.log(userInfo)
})
// ......
```
## 集成 Authing JS SDK
Guard 集成了 AuthenticationClient，所以你可以访问 AuthenticationClient 的所有 api 等等:
``` javascript
guard.getAuthClient().then(authClient => {
authClient.registerByEmail()
authClient.validateToken()
// .........
})
// ....
```
参考 [Authentication SDK](https://docs.authing.cn/v2/reference/sdk-for-node/authentication/)
## 文档
参考详细文档说明 [docs](https://docs.authing.cn/v2/reference/guard/v3/mpa.html)