@ descope/tenant- profile-widget (英语)

设置

创建一个 .env 文件

在部件包中创建 .env 包含的文件;

DESCOPE_BASE_URL=   # env base url
DESCOPE_PROJECT_ID= # project ID
DESCOPE_WIDGET_ID=  # default: tenant-profile-widget
DESCOPE_TENANT_ID=  # tenant id
DEBUG_MODE=         # "true" / "false", default: "false"
DESCOPE_THEME=      # "light" / "dark" / "os", default: "light"

示例

// replace x.x.x with the latest release of the widget: https://www.npmjs.com/package/@descope/tenant-profile-widget
<script src="https://descopecdn.com/npm/@descope/[email protected]/dist/index.js"></script>
<descope-tenant-profile-widget
  base-url="<DESCOPE_BASE_URL>"
  project-id="<DESCOPE_PROJECT_ID>"
  tenant="<DESCOPE_TENANT_ID>"
  debug="<DEBUG_MODE>"
  theme="<DESCOPE_THEME>"
  widget-id="<DESCOPE_WIDGET_ID>"
></descope-tenant-profile-widget>

<script>
  function onLogout(error) {
    window.location.reload();
  }
  const descopeWidgetEle = document.getElementsByTagName('descope-tenant-profile-widget')[0];
  descopeWidgetEle.logout = onLogout;
</script>

认证

要使用部件, 您必须登录 如果您没有得到认证, 登录流程将先运行, 登录后将打开部件

启动部件

运行 npm start 启动部件.

建筑

项目结构

• /app - 包含 index.html
• /lib - 部件的源代码
• lib/widget - 与部件有关的执行
• lib/widget/api - 与API通话有关的逻辑
• lib/widget/mixins - 部件特定逻辑
• lib/widget/state - 国家管理逻辑

API 密码

混合

部件由混音组成,每个混音包含特定的逻辑部分,有时会曝光一个可用于其他混音的API.

混音可以由相上而下组成,这样我们就可以通过将几个混音组合在一起来创造出新的混音.

混合创建者

创建混音符的函数,可以得到配置,并返回混音符的函数.

单通混音

由于混合剂是可相容的,在某些情况下我们希望确保混合剂只装入一次. 例如:当它的逻辑不需要在由不同的混合体组成时运行多次时.

对于本案,我们有一个包装功能(createSingletonMixin),以确保混合剂只装入一次,无论会装入多少次.

混音器应该用 createSingletonMixin 包装功能,除非有多次运行混音逻辑的原因.

状态

我们正在使用几种工具来处理部件的状态:

• Redux 工具箱 用于部件的状态管理.
• 雷杜克·通克(Redux Thunk) aPI的电话和Aync操作
• 重新选择 在不发生变异状态时,不撞击性能或触发状态再重新计算.

司机

一个抽象层,为组件提供 API,并能够处理部件内组件之间的相互作用.

使用驱动器的动机是将部件的代码从组件的执行中解开,因此重要的是只使用驱动器与组件互动(而不是依赖组件的执行细节).

德维

使用模拟屏幕

由于屏幕被动态获取, 当为部件开发新屏幕时, 您可能想要使用模拟模板 。 为此,只需将呼叫改为: fetchWidgetPage 包含您 HTML 的字符串.