@authing/react-ui-components 2.4.55-alpha.5 → 2.4.55-alpha.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authing/react-ui-components",
-  "version": "2.4.55-alpha.5",
+  "version": "2.4.55-alpha.6",
   "private": false,
   "main": "lib/index.min.js",
   "typings": "lib/index.d.ts",
@@ -185,4 +185,4 @@
     "webpack-manifest-plugin": "2.2.0",
     "workbox-webpack-plugin": "5.1.4"
   }
-}
+}

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

@@ -156,6 +156,9 @@ const useGuardConfig = () => {
       appConfig.loginTabs?.list ||
       defaultGuardConfig.loginMethods
 
+    // 扫码多源配置
+    const qrcodeTabsSettings = appConfig.qrcodeTabsSettings ?? {}
+
     // 账密登录的登录拆分
     const passwordLoginMethods =
       userConfig.passwordLoginMethods ||
@@ -165,7 +168,6 @@ const useGuardConfig = () => {
     // 默认登录方式
     const defaultLoginMethod =
       userConfig.defaultLoginMethod ||
-      appConfig.loginTabs?.defaultV2 ||
       appConfig.loginTabs?.default ||
       defaultGuardConfig.defaultLoginMethod
 
@@ -236,6 +238,7 @@ const useGuardConfig = () => {
         defaultRegisterMethod,
         enterpriseConnectionObjs,
         publicKey: appConfig.publicKey,
+        qrcodeTabsSettings,
         agreementEnabled: appConfig.agreementEnabled,
         agreements: appConfig.agreements,
         loginMethodTitleMapping: loginMethodTitleMapping,
@@ -244,8 +247,10 @@ const useGuardConfig = () => {
   }, [
     userConfig,
     appConfig.loginTabs?.list,
+    appConfig.loginTabs?.defaultV2,
     appConfig.loginTabs?.default,
     appConfig.loginTabs?.title,
+    appConfig.qrcodeTabsSettings,
     appConfig.passwordTabConfig?.enabledLoginMethods,
     appConfig.registerTabs?.list,
     appConfig.registerTabs?.default,

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

@@ -1,7 +1,7 @@
 import { message } from 'antd'
 import { User } from 'authing-js-sdk'
 import { FormInstance } from 'antd/lib/form'
-import React, { useCallback, useRef } from 'react'
+import React, { useCallback, useMemo, useRef } from 'react'
 
 import { useGuardContext } from '../../../context/global/context'
 import {
@@ -113,39 +113,40 @@ const useNormalLoginTabs = ({ onSuccess, onFail }: BaseFormProps) => {
   const {
     state: { config },
   } = useGuardContext()
-  const { loginMethods = [], loginMethodTitleMapping } = config
-
-  const tabs = loginMethods
-    .map((tab) => {
-      if (
-        !loginMethods.every(
-          (item) => !(item.split(':').length > 1 && item.split(':')[0] === tab)
-        )
+  const {
+    loginMethods = [],
+    loginMethodTitleMapping,
+    qrcodeTabsSettings,
+  } = config
+
+  let tabs: any[] = []
+
+  loginMethods.forEach((method: LoginMethods) => {
+    if (
+      [LoginMethods.WechatMpQrcode, LoginMethods.WxMinQr].includes(method) &&
+      qrcodeTabsSettings[method]
+    ) {
+      tabs.push(
+        ...qrcodeTabsSettings[method].map((idp) => {
+          console.log(idp)
+          return {
+            key: idp.id,
+            label: idp.title || loginMethodTitleMapping[method],
+            component: LOGIN_FORM_MAP[method]({
+              ...formProps,
+              idp,
+            }),
+          }
+        })
       )
-        return undefined
-
-      const idpId = tab.split(':').length > 1 ? tab.split(':')[1] : undefined
-
-      if (idpId) {
-        const type = tab.split(':')[0] as LoginMethods
-        return {
-          key: tab,
-          label: loginMethodTitleMapping[tab]!,
-          component: LOGIN_FORM_MAP[type]({
-            ...formProps,
-            idpId: idpId,
-          }),
-        }
-      } else {
-        return {
-          key: tab,
-          label: LOGIN_METHODS_MAP()?.[tab]!,
-          component: LOGIN_FORM_MAP[tab](formProps),
-        }
-      }
-    })
-    .filter((i) => i !== undefined)
-
+    } else {
+      tabs.push({
+        key: method,
+        label: LOGIN_METHODS_MAP()[method],
+        component: LOGIN_FORM_MAP[method](formProps),
+      })
+    }
+  })
   return {
     tabs,
   }
@@ -158,30 +159,37 @@ const SHOW_SOCIAL_LOGIN_TAB = [
 ]
 export const LoginLayout = () => {
   const {
-    state: { activeTabs },
+    state: { activeTabs, config },
     setValue,
   } = useGuardContext()
+  const { qrcodeTabsSettings } = config
 
   const { onFail, onSuccess } = useFormActions()
   const { tabs } = useNormalLoginTabs({ onSuccess, onFail })
 
+  const activeKey = useMemo(() => {
+    const activeTab = activeTabs[GuardScenes.Login]
+    if (
+      [LoginMethods.WechatMpQrcode, LoginMethods.WxMinQr].includes(activeTab) &&
+      qrcodeTabsSettings[activeTab]
+    ) {
+      return qrcodeTabsSettings[activeTab].find((item) => item.isDefault)?.id
+    }
+    return activeTab
+  }, [activeTabs, qrcodeTabsSettings])
+  console.log(activeKey)
+
   return (
     <>
       <AuthingTabs
-        tabs={
-          tabs as {
-            key: LoginMethods
-            label: string
-            component: JSX.Element
-          }[]
-        }
+        tabs={tabs}
         onTabClick={(t) =>
           setValue('activeTabs', {
             ...activeTabs,
             [GuardScenes.Login]: t,
           })
         }
-        activeKey={activeTabs[GuardScenes.Login]}
+        activeKey={activeKey}
       />
 
       {SHOW_SOCIAL_LOGIN_TAB.includes(activeTabs[GuardScenes.Login]) && (

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

@@ -1,5 +1,9 @@
 import { requestClient } from './http'
-import { Lang, Protocol } from '../../../components/AuthingGuard/types'
+import {
+  Lang,
+  LoginMethods,
+  Protocol,
+} from '../../../components/AuthingGuard/types'
 import {
   IAzureAdConnectionConfig,
   ICasConnectionConfig,
@@ -25,6 +29,15 @@ export const ApplicationMfaTypeLabel: () => Record<
   [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
@@ -83,6 +96,9 @@ export interface ApplicationConfig {
     default: string
     title: { [x: string]: string }
   }
+
+  qrcodeTabsSettings: QrcodeTabsSettings
+
   loginTabs: {
     list: string[]
     default: string

package/src/components/AuthingGuard/style.less

@@ -70,6 +70,7 @@
     }
   }
 }
+
 .authing-data-tips__top {
   position: relative;
   &::after {

package/src/components/AuthingGuard/types/GuardConfig.ts

@@ -13,6 +13,7 @@ import {
   ApplicationConfig,
   PasswordLoginMethods,
   Agreement,
+  QrcodeTabsSettings,
 } from '../../../components/AuthingGuard/api'
 import { Lang } from './Locales'
 
@@ -413,6 +414,7 @@ export interface GuardConfig extends UserConfig {
   agreementEnabled: boolean
   agreements: Agreement[]
   loginMethodTitleMapping: Record<string, string>
+  qrcodeTabsSettings: QrcodeTabsSettings
 }
 
 export interface LocalesConfig {

package/src/index.tsx

@@ -115,7 +115,7 @@ const App = () => {
         // onLoad={(a) => console.log(a, '加载完成')}
         // onPwdResetError={(e) => console.log(e)}
         appId="619c7976cd38c13a2222464f"
-        tenantId="619c864928b15c6421d12e35"
+        tenantId="61a5ed126cddae656cce9007"
         // appId="5fd877fb0ba0421962eced94"
         config={config}
       />