@authing/react-ui-components 3.0.2-beta.9 → 3.1.1-rc.6

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

@@ -0,0 +1,154 @@
+import { requestClient } from './http'
+import {
+  Lang,
+  LoginMethods,
+  Protocol,
+} from '../../../components/AuthingGuard/types'
+import {
+  IAzureAdConnectionConfig,
+  ICasConnectionConfig,
+  ISamlConnectionConfig,
+  OIDCConnectionConfig,
+  SocialConnectionItem,
+} from './userPoolConfig'
+import { i18n } from '../locales'
+
+export enum ApplicationMfaType {
+  SMS = 'SMS',
+  EMAIL = 'EMAIL',
+  // OTP = 'OTP',
+  // FACE = 'FACE',
+  // FINGERPRINT = 'FINGERPRINT',
+}
+
+export const ApplicationMfaTypeLabel: () => Record<
+  ApplicationMfaType,
+  string
+> = () => ({
+  [ApplicationMfaType.SMS]: i18n.t('common.SMS'),
+  [ApplicationMfaType.EMAIL]: i18n.t('common.EmailVerification'),
+})
+
+export type QrcodeTabsSettings = Record<
+  LoginMethods,
+  Array<{
+    id: string
+    title: string
+    isDefault?: boolean
+  }>
+>
+
+export interface OidcClientMetadata {
+  grant_types: string[]
+  client_id: string
+  redirect_uris: string[]
+  scope: string
+  response_types: ResponseType[]
+}
+export interface InternalExtendsField {
+  type: 'internal'
+  name: string
+  label: string
+  inputType: string
+}
+
+export interface UserExtendsField {
+  type: 'user'
+  id: string
+  name: string
+  label: string
+  inputType: string
+}
+
+export type ExtendsField = InternalExtendsField | UserExtendsField
+
+export interface ApplicationPasswordTabConfig {
+  enabledLoginMethods?: PasswordLoginMethods[]
+}
+
+export interface Agreement {
+  id: number
+  title: string
+  required: boolean
+  lang: Lang
+}
+
+export type PasswordLoginMethods =
+  | 'username-password'
+  | 'email-password'
+  | 'phone-password'
+
+export interface ApplicationConfig {
+  id: string
+  cdnBase: string
+  userPoolId: string
+  rootUserPoolId: string
+  publicKey: string
+  // 登录框自定义 css 代码
+  css: string
+  name: string
+  logo: string
+  description?: string
+  redirectUris: string[]
+  registerDisabled: boolean
+  registerTabs: {
+    list: string[]
+    default: string
+    title: { [x: string]: string }
+  }
+
+  qrcodeTabsSettings: QrcodeTabsSettings
+
+  loginTabs: {
+    list: string[]
+    default: string
+    defaultV2?: string
+    title: { [x: string]: string }
+  }
+  socialConnections: SocialConnectionItem[]
+
+  extendsFieldsEnabled: boolean
+  extendsFields: ExtendsField[]
+
+  identityProviders: {
+    identifier: string
+    protocol: Protocol
+    displayName: string
+    logo: string
+    config:
+      | ISamlConnectionConfig
+      | OIDCConnectionConfig
+      | ICasConnectionConfig
+      | IAzureAdConnectionConfig
+  }[]
+
+  ssoPageComponentDisplay: {
+    autoRegisterThenLoginHintInfo: boolean
+    forgetPasswordBtn: boolean
+    idpBtns: boolean
+    loginBtn: boolean
+    loginByPhoneCodeTab: boolean
+    loginByUserPasswordTab: boolean
+    loginMethodNav: boolean
+    phoneCodeInput: boolean
+    registerBtn: boolean
+    registerByEmailTab: boolean
+    registerByPhoneTab: boolean
+    registerMethodNav: boolean
+    socialLoginBtns: boolean
+    userPasswordInput: boolean
+    wxMpScanTab: boolean
+  }
+
+  protocol: Protocol
+  oidcConfig: OidcClientMetadata
+  passwordTabConfig: ApplicationPasswordTabConfig
+
+  agreementEnabled: boolean
+  agreements: Agreement[]
+}
+
+export const fetchAppConfig = (appId: string) =>
+  requestClient.get<ApplicationConfig>(
+    `/api/v2/applications/${appId}/public-config`
+  )

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]
+}