@authing/vue-ui-components 4.4.0-alpha.7 → 4.4.2

package/README.md

@@ -0,0 +1,33 @@
+# Authing Vue UI Components
+
+[Authing](https://authing.cn) 是一个企业级身份认证提供商，其集成了 OAuth、LDAP、OIDC 等多种身份认证和授权解决方案。此仓库包含了 Authing 提供的一些 Vue UI 组件。
+
+## Guard
+
+Guard 是一种可嵌入的登录表单，可根据你的需求进行配置，建议用于单页面应用程序。 它使你可以轻松添加各种社会化登录方式，以便你的用户可以无缝登录，并且在不同平台拥有一致的登录体验。  
+Guard 拥有以下基本功能：
+
+- 登录：
+  - 账号密码登录（包括手机号 + 密码、邮箱 + 密码、用户名 + 密码）；
+  - 手机验证码登录；
+  - 微信小程序扫码登录（需先在后台配置）；
+  - APP 扫码登录（需要接入 APP 扫码登录）；
+  - 小程序扫码登录（需先在后台配置）；
+  - 社会化登录（需要配置社会化登录）；
+  - 企业身份源登录（需要配置企业身份源）；
+- 注册：
+  - 账号密码注册；
+  - 手机验证码注册；
+- 忘记密码以及重置密码；
+- MFA 认证；
+- 响应式特性（兼容移动端和 PC 端）；
+- 完整的 UI 自定义功能；
+- 兼容主流前端 UI 库：
+  - 原生 JavaScript 调用；
+  - Vue 组件；
+  - React 组件；
+  - Angular 组件。
+
+![Guard Demo](./static/images/guard-demo.jpg)
+
+详细使用文档请查看 [Guard for Web](https://docs.authing.cn/sdk/guard/#guard-for-vue)

package/components/Guard/index.js

@@ -0,0 +1,8 @@
+import Guard from './src/index.vue'
+import '@authing/native-js-ui-components/lib/index.min.css'
+
+Guard.install = (app) => {
+	app.component(Guard.name, Guard)
+}
+
+export default Guard

package/components/Guard/src/index.vue

@@ -0,0 +1,166 @@
+<template>
+  <div id="authing_guard_container" />
+</template>
+
+<script>
+import { Guard as NativeGuard, GuardEventsCamelToKebabMapping } from "@authing/native-js-ui-components";
+import "@authing/native-js-ui-components/lib/index.min.css";
+
+const callbackEvent = ["before-login", "before-register"];
+
+export default {
+  name: "Guard",
+  props: {
+    appId: {
+      type: String,
+      required: false,
+    },
+    tenantId: {
+      type: String,
+      required: false,
+    },
+
+    config: {
+      type: Object,
+      required: false,
+    },
+    authClient: {
+      type: Object,
+      required: false,
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    mode: {
+      type: String,
+      required: false, // normal(全屏) modal(弹窗)
+    },
+    autoRegister: {
+      type: Boolean,
+      required: false,
+    },
+    isSSO: {
+      type: Boolean,
+      required: false,
+    },
+    clickCloseable: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
+    escCloseable: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
+    onBeforeLogin: {
+      type: Function,
+      required: false,
+    },
+    onBeforeRegister: {
+      type: Function,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      localVisible: false,
+      guardInstance: null,
+      guarConfig: {},
+    };
+  },
+  computed: {
+    mergeConfig: function () {
+      return {
+        ...this.config,
+        appId: this.appId,
+        mode: this.mode ?? this.config?.mode,
+        autoRegister: this.autoRegister ?? this.config?.autoRegister,
+        isSSO: this.isSSO ?? this.config?.isSSO,
+        clickCloseable: this.clickCloseable ?? this.config?.clickCloseable,
+        escCloseable: this.escCloseable ?? this.config?.escCloseable,
+      };
+    },
+  },
+  watch: {
+    visible: {
+      immediate: true,
+      handler(val) {
+        if (val !== this.localVisible) {
+          this.localVisible = val;
+        }
+      },
+    },
+    localVisible: {
+      handler(val) {
+        if (val !== this.visible) {
+          this.$emit("visible", val);
+        }
+
+        if (val) {
+          this.show();
+        } else {
+          this.hide();
+        }
+      },
+    },
+  },
+  mounted() {
+    this.guardInstance = new NativeGuard({
+      appId: this.appId,
+      tenantId: this.tenantId,
+      config: this.mergeConfig,
+      authClient: this.authClient,
+    });
+
+    const evts = Object.values(GuardEventsCamelToKebabMapping);
+    const kebabToCamelMap = Object.entries(GuardEventsCamelToKebabMapping).reduce((acc, [camel, kebab]) => {
+      return Object.assign({}, acc, {
+        [kebab]: camel,
+      });
+    }, {});
+
+    const listeners = evts.reduce((acc, evtName) => {
+      return Object.assign({}, acc, {
+        [evtName]: (...rest) => {
+          if (evtName === "close") {
+            this.localVisible = false;
+          }
+          if (!callbackEvent.includes(evtName)) {
+            this.$emit(evtName, ...rest);
+          } else {
+            const camelEvtName = kebabToCamelMap[evtName];
+
+            if (this[camelEvtName]) {
+              return this[camelEvtName](...rest);
+            }
+            return true;
+          }
+        },
+      });
+    }, {});
+
+    evts.forEach((evtName) => this.guardInstance.on(evtName, listeners[evtName]));
+
+    if (this.localVisible) {
+      this.guardInstance.show();
+    }
+  },
+
+  beforeUnmount() {
+    this.guardInstance.unmountComponent();
+  },
+  beforeDestroy() {
+    this.guardInstance.unmountComponent();
+  },
+  methods: {
+    show() {
+      this.guardInstance.show();
+    },
+    hide() {
+      this.guardInstance.hide();
+    },
+  },
+};
+</script>

package/components/index.js

@@ -0,0 +1,26 @@
+// import AuthingGuard from './AuthingGuard'
+import Guard from './Guard'
+import '@authing/native-js-ui-components/lib/index.min.css'
+
+const components = [
+	// AuthingGuard,
+	Guard,
+]
+// 全局注册
+const install = (app) => {
+	components.forEach(component => {
+		app.component(component.name, component)
+	})
+}
+
+// 局部注册
+export {
+	install,
+	Guard,
+	// AuthingGuard
+}
+export default {
+	install,
+}
+
+export * from "@authing/native-js-ui-components";