@zoyafng/guard-vue3 5.3.10-hb.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Authing
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,169 @@
+<div align=center>
+  <img width="300" src="https://files.authing.co/authing-console/authing-logo-new-20210924.svg" />
+</div>
+
+<br />
+
+English | [简体中文](./README.zh_CN.md)
+
+<br />
+
+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 Vue3 project and follow the guide to connect Guard to your Vue3 project!
+
+## Install
+
+``` shell
+npm install --save @zoyafng/guard-vue3
+```
+
+## 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<IGuardConfig>| - | N |
+
+
+``` javascript
+// From CDN
+const guard = new GuardFactory.Guard({
+  appId: '62e22721c889dd44bad1dda2',
+  host: 'https://guard-test-2022.authing.cn',
+  redirectUri: 'http://localhost:3000/callback'
+})
+
+// From npm
+import { createApp } from 'vue'
+
+import { GuardPlugin } from '@zoyafng/guard-vue3'
+
+import '@zoyafng/guard-vue3/dist/esm/guard.min.css'
+
+import App from './App.vue'
+
+const app = createApp(App)
+
+app.use(
+  createGuard({
+    appId: '62e22721c889dd44bad1dda2',
+    host: 'https://guard-test-2022.authing.cn',
+    redirectUri: 'http://localhost:3000/callback'
+  })
+)
+```
+
+``` html
+// use Guard APIs in Components
+
+// Composition API
+<script scoped setup>
+import { useGuard } from '@zoyafng/guard-vue3'
+
+const guard = useGuard()
+
+guard.start('#home-container')
+</script>
+
+
+// Options API
+<script scoped>
+export default {
+  mounted () {
+    this.$guard.start('#home-container')
+  }
+}
+</script>
+```
+
+## Guard for Vue3 provides three login modes
+
+### Embed mode
+
+Render Guard component
+
+``` javascript
+import { onMounted } from 'vue'
+
+import { useGuard } from '@zoyafng/guard-vue3'
+
+const guard = useGuard()
+
+onMounted(() => {
+  guard.start('#home-container')
+})
+```
+
+### 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.
+
+``` javascript
+
+guard.show()
+```
+
+``` javascript
+guard.hide()
+```
+
+### Redirect mode
+
+Login by code, redirect to login page
+
+``` javascript
+guard.startWithRedirect()
+```
+
+Auto handle redirect callback
+
+``` javascript
+guard.handleRedirectCallback()
+```
+
+Logout
+
+``` javascript
+guard.logout()
+```
+
+## Regist events
+
+``` javascript
+guard.on('load', e => {
+  console.log(e)
+})
+
+guard.on('login', userInfo => {
+  console.log(userInfo)
+})
+
+// ......
+```
+
+## Integrate authing js sdk instance
+
+Guard integrated AuthenticationClient, so you can access all apis of AuthenticationClient, etc:
+
+``` javascript
+guard.getAuthClient().then(authClient => {
+  authClient.registerByEmail()
+  authClient.validateToken()
+  // ..........
+})
+// ....
+```
+
+Refer to [Authentication SDK](https://docs.authing.cn/v2/reference/sdk-for-node/authentication/) 
+
+## 📚 Documentation
+
+To check out live examples and docs, visit [docs](https://docs.authing.cn/v2/reference/guard/v3/spa.html)

package/README.zh_CN.md

@@ -0,0 +1,168 @@
+<div align=center>
+  <img width="300" src="https://files.authing.co/authing-console/authing-logo-new-20210924.svg" />
+</div>
+
+<br />
+
+简体中文 | [English](./README.md)
+
+<br />
+
+Guard 是 Authing 提供的一种轻便的认证组件，你可以把它嵌入在你任何的 SPA（Single Page Application）应用中，一站式处理复杂的用户认证流程。
+
+准备好你的 Vue3 项目，跟随引导将 Guard 接入到你的 Vue3 项目中吧！
+
+## 安装
+
+``` shell
+npm install --save @zoyafng/guard-vue3
+```
+
+## 初始化
+
+|字段|类型|默认是|必传
+|-----|----|----|----|
+|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<IGuardConfig>| - | 否 |
+
+
+``` javascript
+// 使用 CDN
+const guard = new GuardFactory.Guard({
+  appId: '62e22721c889dd44bad1dda2',
+  host: 'https://guard-test-2022.authing.cn',
+  redirectUri: 'http://localhost:3000/callback'
+})
+
+// 使用 npm
+import { createApp } from 'vue'
+
+import { GuardPlugin } from '@zoyafng/guard-vue3'
+
+import '@zoyafng/guard-vue3/dist/esm/guard.min.css'
+
+import App from './App.vue'
+
+const app = createApp(App)
+
+app.use(
+  createGuard({
+    appId: '62e22721c889dd44bad1dda2',
+    host: 'https://guard-test-2022.authing.cn',
+    redirectUri: 'http://localhost:3000/callback'
+  })
+)
+```
+
+``` html
+// 组件中使用 Guard 的 API
+
+// Composition API
+<script scoped setup>
+import { useGuard } from '@zoyafng/guard-vue3'
+
+const guard = useGuard()
+
+guard.start('#home-container')
+</script>
+
+
+// Options API
+<script scoped>
+export default {
+  mounted () {
+    this.$guard.start('#home-container')
+  }
+}
+</script>
+```
+
+## Guard 提供三种登录模式
+
+### 嵌入模式
+
+渲染 Guard 组件
+
+``` javascript
+import { onMounted } from 'vue'
+
+import { useGuard } from '@zoyafng/guard-vue3'
+
+const guard = useGuard()
+
+onMounted(() => {
+  guard.start('#home-container')
+})
+```
+
+### 弹窗模式
+
+当 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/spa.html)