@authing/react-ui-components 3.0.1-beta.1 → 3.0.1-rc.3

package/src/components/AuthingGuard/api/http.ts

@@ -0,0 +1,88 @@
+import qs from 'qs'
+import { i18n } from '../locales'
+
+export const requestClient = async (...rest: Parameters<typeof fetch>) => {
+  const res = await fetch(...rest)
+  return res.json()
+}
+
+export interface AuthingResponse<T = any> {
+  code: number
+  message?: string
+  data?: T
+}
+
+requestClient.get = async <T>(
+  path: string,
+  query: Record<string, any> = {},
+  init?: RequestInit
+): Promise<AuthingResponse<T>> => {
+  const headers: Record<string, any> = {
+    ...init?.headers,
+    'Content-Type': 'application/json',
+    [requestClient.langHeader]: i18n.language,
+  }
+
+  if (requestClient.tenantId !== '')
+    headers[requestClient.tenantHeader] = requestClient.tenantId
+
+  const res = await fetch(
+    `${requestClient.baseUrl}${path}${qs.stringify(query, {
+      addQueryPrefix: true,
+    })}`,
+    {
+      ...init,
+      credentials: 'include',
+      headers,
+    }
+  )
+
+  return res.json()
+}
+
+requestClient.post = async <T>(
+  path: string,
+  data: any,
+  config?: {
+    headers: any
+  }
+): Promise<AuthingResponse<T>> => {
+  const headers: Record<string, any> = {
+    ...config?.headers,
+    'Content-Type': 'application/json',
+    [requestClient.langHeader]: i18n.language,
+  }
+
+  if (requestClient.tenantId !== '')
+    headers[requestClient.tenantHeader] = requestClient.tenantId
+
+  const res = await fetch(`${requestClient.baseUrl}${path}`, {
+    method: 'POST',
+    body: JSON.stringify(data),
+    credentials: 'include',
+    headers: headers,
+  })
+  return res.json()
+}
+
+requestClient.baseUrl = ''
+requestClient.setBaseUrl = (base: string) => {
+  requestClient.baseUrl = base.replace(/\/$/, '')
+}
+const DEFAULT_LANG_HEADER = 'x-authing-lang'
+const DEFAULT_TENANT_HEADER = 'x-authing-app-tenant-idåå'
+requestClient.langHeader = DEFAULT_LANG_HEADER
+requestClient.tenantHeader = DEFAULT_TENANT_HEADER
+requestClient.tenantId = ''
+
+requestClient.setLangHeader = (key: string | undefined) => {
+  requestClient.langHeader = key || DEFAULT_LANG_HEADER
+}
+
+requestClient.setTenantHeader = (key: string | undefined) => {
+  requestClient.tenantHeader = key || DEFAULT_LANG_HEADER
+}
+
+requestClient.setTenantId = (tenantId: string) => {
+  requestClient.tenantId = tenantId
+}

package/src/components/AuthingGuard/api/index.ts

@@ -0,0 +1,3 @@
+export * from './sso'
+export * from './appConfig'
+export * from './userPoolConfig'

package/src/components/AuthingGuard/api/sso.ts

@@ -0,0 +1,29 @@
+import { User } from '../types'
+import { requestClient } from './http'
+
+export interface SessionData {
+  session: null | {
+    _id: string
+    cookie: {
+      originalMaxAge: number
+      expires: Date
+      secure: boolean
+      httpOnly: boolean
+      path: string
+      sameSite: string
+    }
+    appId?: string
+    type: string
+    userId: string
+  }
+  userInfo?: User
+}
+
+export const trackSession = () =>
+  requestClient.get<SessionData>(
+    `/cas/session`,
+    {},
+    {
+      credentials: 'include',
+    }
+  )

package/src/components/AuthingGuard/api/userPoolConfig.ts

@@ -0,0 +1,112 @@
+import { Lang, Protocol } from '../../../components/AuthingGuard/types'
+import { SocialConnectionProvider } from 'authing-js-sdk'
+
+export interface OIDCConnectionConfig {
+  issuerUrl: string
+  authorizationEdpoint: string
+  responseType: string
+  mode: OIDCConnectionMode
+  clientId: string
+  clientSecret: string
+  scopes: string
+  redirectUri: string
+}
+
+export interface IOAuthConnectionConfig {
+  authEndPoint: string
+  tokenEndPoint: string
+  scope: string
+  clientId: string
+  clientSecret: string
+  authUrlTemplate: string
+  codeToTokenScript: string
+  tokenToUserInfoScript: string
+  tokenToUserInfoScriptFuncId: string
+  codeToTokenScriptFuncId: string
+  authUrl?: string // 根据模板拼接出来的授权 url
+}
+
+export interface IAzureAdConnectionConfig {
+  microsoftAzureAdDomain: string
+  clientId: string
+  syncUserProfileOnLogin: string
+  emailVerifiedDefault: boolean
+  authorizationUrl: string
+  callbackUrl: string
+}
+
+export enum OIDCConnectionMode {
+  FRONT_CHANNEL = 'FRONT_CHANNEL',
+  BACK_CHANNEL = 'BACK_CHANNEL',
+}
+
+export interface ISamlConnectionConfig {
+  signInEndPoint: string
+  samlRequest?: string
+
+  // saml assertion 验签公钥
+
+  samlIdpCert: string
+
+  // saml request 验签公钥
+
+  samlSpCert: string
+
+  // saml request 签名私钥
+
+  samlSpKey: string
+
+  signOutEndPoint: string
+
+  signSamlRequest: boolean
+
+  signatureAlgorithm: string
+
+  digestAlgorithm: string
+
+  protocolBinding: string
+}
+
+export interface ICasConnectionConfig {
+  casConnectionLoginUrl: string
+}
+export interface SocialConnectionItem {
+  name: string
+  displayName: string
+  logo: string
+  description: string
+  identifier: string
+  provider: SocialConnectionProvider
+  authorizationUrl: string
+  tooltip: Record<Lang, string>
+}
+
+export interface EnterpriseConnectionItem {
+  id: string
+  createdAt: Date
+  updatedAt: Date
+  userPoolId: string
+  protocol: Protocol
+  identifier: string
+  displayName: string
+  logo: string
+  enabled: boolean
+  config:
+    | OIDCConnectionConfig
+    | ISamlConnectionConfig
+    | ICasConnectionConfig
+    | IAzureAdConnectionConfig
+    | IOAuthConnectionConfig
+}
+
+export interface UserPoolConfig {
+  name: string
+  logo: string
+  socialConnections: SocialConnectionItem[]
+  enterpriseConnections: EnterpriseConnectionItem[]
+}
+
+// export const fetchUserPoolConfig = (userPoolId: string) =>
+//   requestClient.get<UserPoolConfig>(
+//     `/api/v2/userpools/${userPoolId}/public-config`
+//   )

package/src/components/AuthingGuard/constants.ts

@@ -0,0 +1,107 @@
+import {
+  GuardMode,
+  UserConfig,
+  GuardScenes,
+  LoginMethods,
+  RegisterMethods,
+  LocalesConfig,
+} from '../../components/AuthingGuard/types'
+import { i18n } from './locales'
+
+// 个人版 OTP MFA 的 error code
+export const OTP_MFA_CODE = 1635
+// 企业版手机和短信验证吗 MFA 的 error code
+export const APP_MFA_CODE = 1636
+
+// 需要验证吗
+export const NEED_CAPTCHA = 2000
+
+export const LOGIN_METHODS_MAP = () => ({
+  [LoginMethods.Password]: i18n.t('login.pwdLogin'),
+  [LoginMethods.PhoneCode]: i18n.t('login.verifyCodeLogin'),
+  [LoginMethods.AppQr]: i18n.t('login.appScanLogin'),
+  [LoginMethods.WxMinQr]: i18n.t('login.scanLogin'),
+  [LoginMethods.LDAP]: i18n.t('login.ldapLogin'),
+  [LoginMethods.AD]: i18n.t('login.adLogin'),
+  [LoginMethods.WechatMpQrcode]: i18n.t('login.wechatmpQrcode'),
+})
+
+export const REGISTER_METHODS_MAP = () => ({
+  [RegisterMethods.Email]: i18n.t('login.emailRegister'),
+  [RegisterMethods.Phone]: i18n.t('login.phoneRegister'),
+})
+
+// 某些社会化登录会在 tabs 中显示，或者无法在 Guard 中使用，所以底部不显示了
+export const HIDE_SOCIALS = [
+  'wechat:miniprogram:app-launch',
+  'wechat:miniprogram:qrconnect',
+  'wechat:webpage-authorization',
+  'wechat:miniprogram:default',
+  'wechatwork:addressbook',
+  'wechat:mobile',
+]
+
+// 企业版 MFA 支持的方式
+export enum ApplicationMfaType {
+  SMS = 'SMS',
+  EMAIL = 'EMAIL',
+  // OTP = 'OTP',
+  // FACE = 'FACE',
+  // FINGERPRINT = 'FINGERPRINT',
+}
+
+export const defaultGuardConfig: Partial<UserConfig> = {
+  isSSO: false,
+  title: 'Authing',
+  text: {
+    loginTabs: LOGIN_METHODS_MAP(),
+    loginBtn: {
+      normal: '登录',
+      loading: '登录',
+    },
+    registerBtn: {
+      normal: '注册',
+      loading: '注册',
+    },
+  },
+  escCloseable: true,
+  autoRegister: false,
+  clickCloseable: true,
+  mode: GuardMode.Normal,
+  disableRegister: false,
+  disableResetPwd: false,
+  defaultScenes: GuardScenes.Login,
+  appHost: 'https://core.authing.cn',
+  defaultLoginMethod: LoginMethods.Password,
+  defaultRegisterMethod: RegisterMethods.Email,
+  loginMethods: [LoginMethods.Password, LoginMethods.PhoneCode],
+  registerMethods: [RegisterMethods.Email, RegisterMethods.Phone],
+  logo:
+    'https://files.authing.co/user-contents/photos/0a4c99ff-b8ce-4030-aaaf-584c807cb21c.png',
+  passwordLoginMethods: [
+    'email-password',
+    'username-password',
+    'phone-password',
+  ],
+}
+
+export const defaultLocalesConfig: LocalesConfig = {
+  defaultLang: 'zh-CN',
+  isShowChange: false,
+}
+
+export const defaultHeaders: {
+  'userpool-id': string
+  'app-id': string
+  'sdk-version': string
+  'request-from': string
+  'tenant-id': string
+  lang: string
+} = {
+  'userpool-id': 'x-authing-userpool-id',
+  'app-id': 'x-authing-app-id',
+  'tenant-id': 'x-authing-app-tenant-id',
+  'request-from': 'x-authing-request-from',
+  'sdk-version': 'x-authing-sdk-version',
+  lang: 'x-authing-lang',
+}

package/src/components/AuthingGuard/hooks/index.tsx

@@ -0,0 +1,70 @@
+import {
+  AuthenticationClient,
+  AuthenticationClientOptions,
+} from 'authing-js-sdk'
+import { defaultGuardConfig } from '../constants'
+
+let authClient: AuthenticationClient | null = null
+
+export interface AuthClientConfig extends AuthenticationClientOptions {
+  /**
+   * @deprecated 使用 appHost
+   */
+  appDomain?: string
+  /**
+   * @deprecated 无需传入
+   */
+  isSSO?: boolean
+  /**
+   * @deprecated 使用 appHost
+   */
+  host?: string
+}
+
+export const initAuthClient = (config: AuthClientConfig) => {
+  if (authClient) {
+    return authClient
+  }
+
+  const { appHost, appDomain, host } = config
+
+  /**
+   * 兼容之前的参数
+   */
+  let realHost
+  if (appHost) {
+    realHost = appHost
+  } else if (appDomain) {
+    const parsedUrl = new URL(host || defaultGuardConfig.appHost!)
+    realHost = `${parsedUrl.protocol}//${appDomain}${
+      parsedUrl.port ? ':' + parsedUrl.port : ''
+    }`
+  } else if (host) {
+    realHost = host
+  } else {
+    realHost = defaultGuardConfig.appHost
+  }
+  config.appHost = realHost!
+
+  authClient = new AuthenticationClient(config)
+
+  return authClient
+}
+
+export const useAuthing = (config?: AuthClientConfig) => {
+  return { authClient: getAuthClient(config) }
+}
+
+export const getAuthClient = (config?: AuthClientConfig) => {
+  if (!authClient && !config) {
+    throw new Error(
+      'Please `initAuthClient` first or pass `AuthClientConfig` to useAuthing.'
+    )
+  }
+
+  if (config) {
+    initAuthClient(config)
+  }
+
+  return authClient
+}

package/src/components/AuthingGuard/hooks/useScreenSize.tsx

@@ -0,0 +1,68 @@
+import { useState, useEffect } from 'react'
+// import { inRange, debounce } from 'lodash'
+
+function debounce(fn: Function, delay: number, immediate = true) {
+  let timer: any
+
+  return function (this: any) {
+    let context = this
+    let args = arguments
+    timer && clearTimeout(timer)
+
+    if (immediate && !timer) {
+      fn.apply(context, args)
+    }
+
+    timer = setTimeout(function () {
+      fn.apply(context, args)
+    }, delay)
+  }
+}
+
+function inRange(n: number, start: number, end?: number): boolean {
+  if (end || end === 0) {
+    return n >= start && n <= end
+  }
+  return n >= start
+}
+
+export enum ScreenSize {
+  Mobile = 'mobile',
+  Desktop = 'desktop',
+}
+export const SCREEN_SIZE_RANG: {
+  size: ScreenSize
+  range: [number, number]
+}[] = [
+  {
+    size: ScreenSize.Mobile,
+    range: [0, 719],
+  },
+  {
+    size: ScreenSize.Desktop,
+    range: [720, Infinity],
+  },
+]
+
+export const getScreenSize = () => {
+  const viewportWidth = document.body.clientWidth
+  return (
+    SCREEN_SIZE_RANG.find((item) => inRange(viewportWidth, ...item.range))
+      ?.size ?? ScreenSize.Desktop
+  )
+}
+
+export const useScreenSize = () => {
+  const [screenSize, setScreenSize] = useState(getScreenSize)
+
+  useEffect(() => {
+    const onResize = debounce(() => {
+      setScreenSize(getScreenSize())
+    }, 200)
+    window.addEventListener('resize', onResize)
+
+    return () => window.removeEventListener('resize', onResize)
+  }, [])
+
+  return [screenSize]
+}

package/src/components/AuthingGuard/index.tsx

@@ -0,0 +1,134 @@
+import { ConfigProvider, message } from 'antd'
+import React, { FC } from 'react'
+import { AuthenticationClient } from 'authing-js-sdk'
+
+import { GuardContext } from '../../context/global/context'
+import { GuardScenes } from '../../components/AuthingGuard/types'
+import { requestClient } from '../../components/AuthingGuard/api/http'
+import {
+  defaultGuardConfig,
+  OTP_MFA_CODE,
+  APP_MFA_CODE,
+  defaultLocalesConfig,
+  defaultHeaders,
+} from '../../components/AuthingGuard/constants'
+import { GuardLayout } from '../../components/AuthingGuard/GuardLayout'
+import {
+  UserConfig,
+  GuardEventsHandler,
+} from '../../components/AuthingGuard/types/GuardConfig'
+
+import './style.less'
+import { initI18n } from './locales'
+const PREFIX_CLS = 'authing-ant'
+
+message.config({
+  prefixCls: `${PREFIX_CLS}-message`,
+})
+
+interface AuthingGuardProps extends GuardEventsHandler {
+  appId: string
+  tenantId?: string
+  config?: UserConfig
+  visible?: boolean
+  className?: string
+  id?: string
+}
+
+export const AuthingGuard: FC<AuthingGuardProps> = ({
+  appId,
+  tenantId,
+  config = {},
+  visible,
+  className,
+  id,
+  ...guardEvents
+}) => {
+  const {
+    apiHost,
+    appDomain,
+    appHost,
+    defaultLoginMethod = defaultGuardConfig.defaultLoginMethod,
+    defaultScenes = defaultGuardConfig.defaultScenes,
+    defaultRegisterMethod = defaultGuardConfig.defaultRegisterMethod,
+    lang,
+    localesConfig = defaultLocalesConfig,
+    headers = defaultHeaders,
+  } = config
+
+  initI18n(localesConfig, lang)
+
+  let realHost: string | undefined
+  if (appHost) {
+    realHost = appHost
+  } else if (appDomain) {
+    const parsedUrl = new URL(defaultGuardConfig.appHost!)
+    realHost = `${parsedUrl.protocol}//${appDomain}${
+      parsedUrl.port ? ':' + parsedUrl.port : ''
+    }`
+  } else {
+    realHost = apiHost || defaultGuardConfig.appHost!
+  }
+
+  requestClient.setBaseUrl(realHost)
+  requestClient.setLangHeader(headers?.lang)
+
+  if (tenantId) {
+    requestClient.setTenantHeader(headers?.['tenant-id'])
+    requestClient.setTenantId(tenantId)
+  }
+
+  const authClient = new AuthenticationClient({
+    appHost: realHost!,
+    appId,
+    tenantId,
+    requestFrom: 'ui-components',
+    lang: localesConfig.defaultLang ?? lang,
+    headers,
+    onError: (code, msg: any) => {
+      if (code === 2020) {
+        return
+      }
+      if ([OTP_MFA_CODE, APP_MFA_CODE].includes(code)) {
+        message.info(msg)
+        return
+      }
+      message.error(msg)
+    },
+  })
+
+  const activeTabs = {
+    [GuardScenes.Login]: defaultLoginMethod,
+    [GuardScenes.Register]: defaultRegisterMethod,
+  }
+
+  return (
+    <ConfigProvider prefixCls={PREFIX_CLS}>
+      <GuardContext
+        value={{
+          authClient,
+          config: { ...config },
+          userConfig: config,
+          appId,
+          guardScenes: defaultScenes,
+          activeTabs,
+          guardTitle: config.title,
+          mfaData: {
+            mfaToken: '',
+          },
+          guardEvents,
+          localesConfig: config.localesConfig,
+          realHost: realHost,
+        }}
+      >
+        <GuardLayout
+          id={id}
+          className={className}
+          visible={visible}
+          lang={lang}
+          userConfig={config}
+        />
+      </GuardContext>
+    </ConfigProvider>
+  )
+}