前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载导读Security2faSetup是 wp-calypsoWordPress.com 的 JavaScript 与 API 驱动前端中负责**引导用户从零启用两步认证Two-Step Authentication / 2FA**的核心子组件。它被安全设置页Two-Step 区块在用户尚未开启 2FA 时渲染通过一个清晰的分步状态机串联「选择认证方式 → 输入手机号 / 扫码绑定 → 输入并校验动态码 → 生成备份码」四个阶段。读完本文你将掌握该组件的状态流转设计、五种步骤常量的含义、各子组件的职责分工以及其背后调用 WordPress.com REST 接口/me/two-step/*、/me/settings的完整实现链路。组件定位谁在使用 Security2faSetup在 client/me/security-2fa-setup/README.md 中该组件被描述为Used by Security2fa, this child component allows the user to setup 2fa.由 Security2fa 使用这个子组件允许用户设置 2FA。在实际代码中真正的宿主组件是 client/me/two-step/index.jsx。它通过 Redux selectorisTwoStepEnabled判断当前用户的 2FA 状态未开启渲染Security2faSetup onFinished{ this.onSetupFinished } /已开启渲染Security2faDisable onFinished{ this.onDisableFinished } /。从 client/me/security/controller.jsx 可以看到/me/security/two-step路由由twoStep控制器懒加载await import( calypso/me/two-step )TwoStep组件并由 client/me/security/index.js 注册路由同时将/me/security/two-step-auth重定向到/me/security/two-step。TwoStep页面自身还有三个保护性逻辑client/me/two-step/index.jsx顶部渲染QueryUserSettings与ReauthRequired确保用户设置已加载、且通过 re-auth 校验componentDidMount/componentDidUpdate中若用户邮箱未验证则强制跳回/me/securityisFetchingUserSettings为 true 时先渲染占位文本避免闪烁。此外TwoStep还在 2FA 已开启的前提下渲染Security2faKey2FA 密钥、Security2faBackupCodes备份码管理与AppPasswords应用专用密码等区块——Security2faSetup只是整个 Two-Step 安全体系的第一环启用环节。状态机设计五种步骤常量与流转Security2faSetup是 class 组件client/me/security-2fa-setup/index.jsx模块顶部导出了 5 个供外部复用的步骤常量常量值含义SMS_BASED_2FA_SETUP_ENTER_PHONE_STEPsms-settings输入手机号码SMS 流程第一步SMS_BASED_2FA_SETUP_VALIDATE_CODE_STEPsms-based通过短信验证码校验SMS 流程第二步APP_BASED_2FA_VALIDATE_STEPapp-based通过身份验证器 App 校验App 流程DISPLAY_BACKUP_CODES_STEPbackup-codes生成并展示备份码INITIAL_SETUP_STEPinitial-setup初始选择界面其中INITIAL_SETUP_STEP与APP_BASED_2FA_VALIDATE_STEP同时被 client/me/security-2fa-initial-setup/index.jsx 复用说明这些常量属于跨模块共享的「步骤协议」。组件的初始状态client/me/security-2fa-setup/index.jsx#L24-L27为state { step: INITIAL_SETUP_STEP, authMethod: APP_BASED_2FA_VALIDATE_STEP, };step决定当前渲染哪一个子组件authMethod记录本次启用所选择的认证方式App 或 SMS二者共同驱动完整流程初始选择INITIAL_SETUP_STEP渲染Security2faInitialSetup选择认证方式onInitialSetupSuccess( event, authMethod )将step与authMethod同步为所选方式——选择 App 则进入app-based选择 SMS 则先进入sms-settings验证阶段onVerifyByApp/onVerifyBySMS分别把step切到app-based或sms-based验证成功onSetupSuccess将step置为backup-codes流程完成onFinished先派发successNotice提示 Successfully enabled Two-Step Authentication.duration 4000ms再回调父组件传入的onFinished父组件随即fetchUserSettings()刷新用户设置让整个页面切换到「已启用」视图。onCancelSetup用于任何一步取消时回到初始选择页step: INITIAL_SETUP_STEP因此用户在中途退出后可重新选择认证方式。渲染上step INITIAL_SETUP_STEP时不带标题卡片其余步骤统一用CompactCard展示当前步骤标题如Enter phone number、Verify code、Generate backup codesCard内渲染对应子组件client/me/security-2fa-setup/index.jsx#L125-L130switch的default分支返回null。第一步选择认证方式Security2faInitialSetupclient/me/security-2fa-initial-setup/index.jsx 渲染一段说明文案 两个VerticalNavItemEnhanced导航项Set up using an appgridicon 为phone点击后以APP_BASED_2FA_VALIDATE_STEP回调onSuccess文案说明使用 App 生成动态验证码Set up using SMSgridicon 为comment点击后以SMS_BASED_2FA_SETUP_ENTER_PHONE_STEP回调onSuccess文案说明通过短信接收验证码。每个点击都会通过gaRecordEvent( Me, Clicked On 2fa Get Started Button )上报 Google Analyticsclient/me/security-2fa-initial-setup/index.jsx#L16-L22。SMS 流程手机号设置Security2faSMSSettings用户选择 SMS 后首先进入 client/me/security-2fa-sms-settings/index.jsx。该组件挂载QuerySmsCountries拉取可发送短信的国家列表并通过 Redux selectorgetCountries( state, sms )注入countriesList用FormPhoneInput让用户选择国家区号并输入手机号初始化时从userSettings.two_step_sms_country/two_step_sms_phone_number回填已有号码isValid: true校验逻辑getSubmitDisabled正在保存设置、或手机号为空/未输入时禁用提交按钮表单提供两个动作Continue主按钮isPrimaryonVerifyBySMS→ 保存手机号后进入短信验证码校验CancelonCancel回到初始选择页。保存动作的底层实现是 Redux thunk client/state/user-settings/thunks/save-two-step-sms-settings.jssubmitSMSSettings先检查phoneNumber.isValid若号码与已存储的完全相同则直接跳转否则调用saveTwoStepSMSSettings( countryCode, phoneNumber )该 thunk 构造{ two_step_sms_country, two_step_sms_phone_number }通过wp.req.put( /me/settings, settings )持久化成功派发saveUserSettingsSuccess失败则派发saveUserSettingsFailure并重新抛出错误错误信息在表单中以is-errorNotice 呈现。注意submitSMSSettings( verifyByApp true )还支持「保存号码后改用 App 验证」的旁路onVerifyByApp这在 UI 上为「设置完成前切换方式」保留了扩展点。验证阶段扫码 / 短信验证码Security2faEnable无论 App 还是 SMS 流程最终校验都汇聚到 client/me/security-2fa-enable/index.jsx通过isSmsFlowprop 区分两种模式默认falseApp 模式method: scancomponentDidMount请求wp.req.get( /me/two-step/app-auth-setup/ )取回otpauth_uri与time_code两个字段client/me/security-2fa-enable/index.jsx#L51-L66使用qrcode.react的QRCodeSVG将otpauth_uri渲染为 150×150 的二维码未取到数据时显示is-placeholder占位类并展示OneTimeCode一次性手动录入码client/me/security-2fa-enable/one-time-code.tsx方便无法扫码的 App 手动输入引导文案Use your authenticator app to scan the QR code or enter this one time code:与Enter the six digit code from the app.。SMS 模式method: sms挂载时立即调用requestSMS()通过twoStepAuthorization.sendSMSCode()请求/me/two-step/sms/new发送短信验证码client/me/security-2fa-enable/index.jsx#L82-L89发送成功后 60 秒内禁止重复发送setTimeout( this.allowSMSRequests, 60000 )并显示提示A code has been sent to your device via SMS. You may request another code after one minute.底部提供Resend Code按钮点击调用onResendCode受smsRequestsAllowed状态控制。验证码提交输入框为FormVerificationCodeInputname 为verificationCode聚焦时上报gaRecordEvent( Me, Focused On 2fa Enable Verification Code Input )getFormDisabled()submittingCode或验证码去除空格后长度不足 6 位时禁用Enable按钮提交后onBeginCodeValidation构造{ code, action: enable-two-step }调用twoStepAuthorization.validateCode( args, callback )client/me/security-2fa-enable/index.jsx#L127-L134。validateCode的底层实现在 client/lib/two-step-authorization/index.js#L132-L170向/me/two-step/validatePOST请求前先code.replace( /\s/g, )去除验证码中的空白字符成功后调用bumpTwoStepAuthMCStat上报 MC/Tracks 事件enable-two-step动作对应enable-2fa-successful失败对应enable-2fa-failed-invalid-code并执行refreshDataOnSuccessfulAuth()——若此前处于 re-auth 状态会同步派发accountRecoverySettingsFetch()、fetchUserSettings()与requestConnectedApplications()最后清除two_step_reauthorization_required标记。失败时若 API 未报错但data.success为 false则置invalidCode true并展示You entered an invalid code. Please try again.。整个TwoStepAuthorization单例client/lib/two-step-authorization/index.js还封装了sendSMSCode对rate_limited错误上报sms-code-send-throttled并置smsResendThrottled、isReauthRequired、isTwoStepSMSEnabled、isSecurityKeyEnabled等状态查询方法这些方法在TwoStep页面与登录页复用。收尾生成备份码Security2faSetupBackupCodes验证通过后进入 client/me/security-2fa-setup-backup-codes/index.jsx挂载时调用wp.req.post( /me/two-step/backup-codes/new )生成一批一次性备份码成功后上报 MC 统计new-backup-codes-success将返回的data.codes交给Security2faBackupCodesList渲染展示showList页面文案解释了备份码的用途手机丢失、被盗甚至「被洗衣机洗了」时用于恢复账户获取失败时展示不可关闭的错误 Notice并提供联系支持链接CALYPSO_CONTACT用户确认后点击完成onFinished回到组件顶层Security2faSetup.onFinished触发成功提示并通知父组件刷新设置。组件装配方式与复用约定Security2faSetup的默认导出client/me/security-2fa-setup/index.jsx#L134为export default connect( null, { successNotice } )( localize( Security2faSetup ) );即通过localize注入translatei18n通过connect注入successNoticeaction组件自身只要求父组件提供onFinished回调PropTypes 标记为isRequired。5 个步骤常量从calypso/me/security-2fa-setup模块导出被Security2faInitialSetup直接 import 使用后续新增 2FA 子流程时应继续复用这些常量保持状态协议一致。样式方面client/me/security-2fa-initial-setup/style.scss、client/me/security-2fa-enable/style.scss 与 client/me/security-2fa-sms-settings/style.scss 分别管理初始选择、验证表单与手机号设置的外观含security-2fa-enable__qr-code.is-placeholder等加载态类。涉及的关键接口与调用链小结阶段组件相对路径REST / Redux 调用选择方式client/me/security-2fa-initial-setup/index.jsxgaRecordEvent分析上报手机号设置client/me/security-2fa-sms-settings/index.jsxQuerySmsCountrieswp.req.put( /me/settings, { two_step_sms_country, two_step_sms_phone_number } )验证client/me/security-2fa-enable/index.jsxGET /me/two-step/app-auth-setup/POST /me/two-step/sms/newPOST /me/two-step/validateactionenable-two-step备份码client/me/security-2fa-setup-backup-codes/index.jsxPOST /me/two-step/backup-codes/new通用封装client/lib/two-step-authorization/index.jsvalidateCode/sendSMSCode/ MCTracks 统计 / re-auth 状态刷新从源码结构看Security2faSetup采用的「步骤常量 switch 渲染 回调链」模式是 wp-calypso 中典型的多步向导wizard实现范式状态全部收敛在父组件子组件通过onSuccess/onCancel/onFinished回调通知父级推进从而实现子组件的高内聚与可独立测试。若要为 2FA 增加新的认证方式如安全密钥/WebAuthn只需新增步骤常量与子组件并在顶层switch中接入即可——现有代码中TwoStepAuthorization已具备loginUserWithSecurityKey等 WebAuthn 方法为后续扩展预留了空间。赞分享前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载相关推荐wp-calypso 安全中心组件剖析Security2faInitialSetup 与两步认证2FA激活流程首步实现wp calypso 安全中心组件剖析Security2faInitialSetup 与两步认证2FA激活流程首步实现 本文围绕 wp calypso 仓前端CMSwp-calypso SupportArticleDialog 组件解析在 Calypso 内联展示 WordPress.com 支持文档的完整实现指南wp calypso SupportArticleDialog 组件解析在 Calypso 内联展示 WordPress.com 支持文档的完整实现指南 导读前端CMSWordPress.com 前端组件解析AkismetIcon 图标组件在 wp-calypso 中的实现与使用WordPress.com 前端组件解析AkismetIcon 图标组件在 wp calypso 中的实现与使用 本文以 wp calypso 仓库中的 cl前端CMS上一篇一学就会用猫抓浏览器嗅探插件告别网页资源下载烦恼下一篇ik_llama.cpp 可选 MLA 机制深度解析-mla/--mla-use 的设计权衡与运行期开关创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
wp-calypso Security2faSetup 组件解析：WordPress.com 两步认证（2FA）的完整启用流程实现
前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载导读Security2faSetup是 wp-calypsoWordPress.com 的 JavaScript 与 API 驱动前端中负责**引导用户从零启用两步认证Two-Step Authentication / 2FA**的核心子组件。它被安全设置页Two-Step 区块在用户尚未开启 2FA 时渲染通过一个清晰的分步状态机串联「选择认证方式 → 输入手机号 / 扫码绑定 → 输入并校验动态码 → 生成备份码」四个阶段。读完本文你将掌握该组件的状态流转设计、五种步骤常量的含义、各子组件的职责分工以及其背后调用 WordPress.com REST 接口/me/two-step/*、/me/settings的完整实现链路。组件定位谁在使用 Security2faSetup在 client/me/security-2fa-setup/README.md 中该组件被描述为Used by Security2fa, this child component allows the user to setup 2fa.由 Security2fa 使用这个子组件允许用户设置 2FA。在实际代码中真正的宿主组件是 client/me/two-step/index.jsx。它通过 Redux selectorisTwoStepEnabled判断当前用户的 2FA 状态未开启渲染Security2faSetup onFinished{ this.onSetupFinished } /已开启渲染Security2faDisable onFinished{ this.onDisableFinished } /。从 client/me/security/controller.jsx 可以看到/me/security/two-step路由由twoStep控制器懒加载await import( calypso/me/two-step )TwoStep组件并由 client/me/security/index.js 注册路由同时将/me/security/two-step-auth重定向到/me/security/two-step。TwoStep页面自身还有三个保护性逻辑client/me/two-step/index.jsx顶部渲染QueryUserSettings与ReauthRequired确保用户设置已加载、且通过 re-auth 校验componentDidMount/componentDidUpdate中若用户邮箱未验证则强制跳回/me/securityisFetchingUserSettings为 true 时先渲染占位文本避免闪烁。此外TwoStep还在 2FA 已开启的前提下渲染Security2faKey2FA 密钥、Security2faBackupCodes备份码管理与AppPasswords应用专用密码等区块——Security2faSetup只是整个 Two-Step 安全体系的第一环启用环节。状态机设计五种步骤常量与流转Security2faSetup是 class 组件client/me/security-2fa-setup/index.jsx模块顶部导出了 5 个供外部复用的步骤常量常量值含义SMS_BASED_2FA_SETUP_ENTER_PHONE_STEPsms-settings输入手机号码SMS 流程第一步SMS_BASED_2FA_SETUP_VALIDATE_CODE_STEPsms-based通过短信验证码校验SMS 流程第二步APP_BASED_2FA_VALIDATE_STEPapp-based通过身份验证器 App 校验App 流程DISPLAY_BACKUP_CODES_STEPbackup-codes生成并展示备份码INITIAL_SETUP_STEPinitial-setup初始选择界面其中INITIAL_SETUP_STEP与APP_BASED_2FA_VALIDATE_STEP同时被 client/me/security-2fa-initial-setup/index.jsx 复用说明这些常量属于跨模块共享的「步骤协议」。组件的初始状态client/me/security-2fa-setup/index.jsx#L24-L27为state { step: INITIAL_SETUP_STEP, authMethod: APP_BASED_2FA_VALIDATE_STEP, };step决定当前渲染哪一个子组件authMethod记录本次启用所选择的认证方式App 或 SMS二者共同驱动完整流程初始选择INITIAL_SETUP_STEP渲染Security2faInitialSetup选择认证方式onInitialSetupSuccess( event, authMethod )将step与authMethod同步为所选方式——选择 App 则进入app-based选择 SMS 则先进入sms-settings验证阶段onVerifyByApp/onVerifyBySMS分别把step切到app-based或sms-based验证成功onSetupSuccess将step置为backup-codes流程完成onFinished先派发successNotice提示 Successfully enabled Two-Step Authentication.duration 4000ms再回调父组件传入的onFinished父组件随即fetchUserSettings()刷新用户设置让整个页面切换到「已启用」视图。onCancelSetup用于任何一步取消时回到初始选择页step: INITIAL_SETUP_STEP因此用户在中途退出后可重新选择认证方式。渲染上step INITIAL_SETUP_STEP时不带标题卡片其余步骤统一用CompactCard展示当前步骤标题如Enter phone number、Verify code、Generate backup codesCard内渲染对应子组件client/me/security-2fa-setup/index.jsx#L125-L130switch的default分支返回null。第一步选择认证方式Security2faInitialSetupclient/me/security-2fa-initial-setup/index.jsx 渲染一段说明文案 两个VerticalNavItemEnhanced导航项Set up using an appgridicon 为phone点击后以APP_BASED_2FA_VALIDATE_STEP回调onSuccess文案说明使用 App 生成动态验证码Set up using SMSgridicon 为comment点击后以SMS_BASED_2FA_SETUP_ENTER_PHONE_STEP回调onSuccess文案说明通过短信接收验证码。每个点击都会通过gaRecordEvent( Me, Clicked On 2fa Get Started Button )上报 Google Analyticsclient/me/security-2fa-initial-setup/index.jsx#L16-L22。SMS 流程手机号设置Security2faSMSSettings用户选择 SMS 后首先进入 client/me/security-2fa-sms-settings/index.jsx。该组件挂载QuerySmsCountries拉取可发送短信的国家列表并通过 Redux selectorgetCountries( state, sms )注入countriesList用FormPhoneInput让用户选择国家区号并输入手机号初始化时从userSettings.two_step_sms_country/two_step_sms_phone_number回填已有号码isValid: true校验逻辑getSubmitDisabled正在保存设置、或手机号为空/未输入时禁用提交按钮表单提供两个动作Continue主按钮isPrimaryonVerifyBySMS→ 保存手机号后进入短信验证码校验CancelonCancel回到初始选择页。保存动作的底层实现是 Redux thunk client/state/user-settings/thunks/save-two-step-sms-settings.jssubmitSMSSettings先检查phoneNumber.isValid若号码与已存储的完全相同则直接跳转否则调用saveTwoStepSMSSettings( countryCode, phoneNumber )该 thunk 构造{ two_step_sms_country, two_step_sms_phone_number }通过wp.req.put( /me/settings, settings )持久化成功派发saveUserSettingsSuccess失败则派发saveUserSettingsFailure并重新抛出错误错误信息在表单中以is-errorNotice 呈现。注意submitSMSSettings( verifyByApp true )还支持「保存号码后改用 App 验证」的旁路onVerifyByApp这在 UI 上为「设置完成前切换方式」保留了扩展点。验证阶段扫码 / 短信验证码Security2faEnable无论 App 还是 SMS 流程最终校验都汇聚到 client/me/security-2fa-enable/index.jsx通过isSmsFlowprop 区分两种模式默认falseApp 模式method: scancomponentDidMount请求wp.req.get( /me/two-step/app-auth-setup/ )取回otpauth_uri与time_code两个字段client/me/security-2fa-enable/index.jsx#L51-L66使用qrcode.react的QRCodeSVG将otpauth_uri渲染为 150×150 的二维码未取到数据时显示is-placeholder占位类并展示OneTimeCode一次性手动录入码client/me/security-2fa-enable/one-time-code.tsx方便无法扫码的 App 手动输入引导文案Use your authenticator app to scan the QR code or enter this one time code:与Enter the six digit code from the app.。SMS 模式method: sms挂载时立即调用requestSMS()通过twoStepAuthorization.sendSMSCode()请求/me/two-step/sms/new发送短信验证码client/me/security-2fa-enable/index.jsx#L82-L89发送成功后 60 秒内禁止重复发送setTimeout( this.allowSMSRequests, 60000 )并显示提示A code has been sent to your device via SMS. You may request another code after one minute.底部提供Resend Code按钮点击调用onResendCode受smsRequestsAllowed状态控制。验证码提交输入框为FormVerificationCodeInputname 为verificationCode聚焦时上报gaRecordEvent( Me, Focused On 2fa Enable Verification Code Input )getFormDisabled()submittingCode或验证码去除空格后长度不足 6 位时禁用Enable按钮提交后onBeginCodeValidation构造{ code, action: enable-two-step }调用twoStepAuthorization.validateCode( args, callback )client/me/security-2fa-enable/index.jsx#L127-L134。validateCode的底层实现在 client/lib/two-step-authorization/index.js#L132-L170向/me/two-step/validatePOST请求前先code.replace( /\s/g, )去除验证码中的空白字符成功后调用bumpTwoStepAuthMCStat上报 MC/Tracks 事件enable-two-step动作对应enable-2fa-successful失败对应enable-2fa-failed-invalid-code并执行refreshDataOnSuccessfulAuth()——若此前处于 re-auth 状态会同步派发accountRecoverySettingsFetch()、fetchUserSettings()与requestConnectedApplications()最后清除two_step_reauthorization_required标记。失败时若 API 未报错但data.success为 false则置invalidCode true并展示You entered an invalid code. Please try again.。整个TwoStepAuthorization单例client/lib/two-step-authorization/index.js还封装了sendSMSCode对rate_limited错误上报sms-code-send-throttled并置smsResendThrottled、isReauthRequired、isTwoStepSMSEnabled、isSecurityKeyEnabled等状态查询方法这些方法在TwoStep页面与登录页复用。收尾生成备份码Security2faSetupBackupCodes验证通过后进入 client/me/security-2fa-setup-backup-codes/index.jsx挂载时调用wp.req.post( /me/two-step/backup-codes/new )生成一批一次性备份码成功后上报 MC 统计new-backup-codes-success将返回的data.codes交给Security2faBackupCodesList渲染展示showList页面文案解释了备份码的用途手机丢失、被盗甚至「被洗衣机洗了」时用于恢复账户获取失败时展示不可关闭的错误 Notice并提供联系支持链接CALYPSO_CONTACT用户确认后点击完成onFinished回到组件顶层Security2faSetup.onFinished触发成功提示并通知父组件刷新设置。组件装配方式与复用约定Security2faSetup的默认导出client/me/security-2fa-setup/index.jsx#L134为export default connect( null, { successNotice } )( localize( Security2faSetup ) );即通过localize注入translatei18n通过connect注入successNoticeaction组件自身只要求父组件提供onFinished回调PropTypes 标记为isRequired。5 个步骤常量从calypso/me/security-2fa-setup模块导出被Security2faInitialSetup直接 import 使用后续新增 2FA 子流程时应继续复用这些常量保持状态协议一致。样式方面client/me/security-2fa-initial-setup/style.scss、client/me/security-2fa-enable/style.scss 与 client/me/security-2fa-sms-settings/style.scss 分别管理初始选择、验证表单与手机号设置的外观含security-2fa-enable__qr-code.is-placeholder等加载态类。涉及的关键接口与调用链小结阶段组件相对路径REST / Redux 调用选择方式client/me/security-2fa-initial-setup/index.jsxgaRecordEvent分析上报手机号设置client/me/security-2fa-sms-settings/index.jsxQuerySmsCountrieswp.req.put( /me/settings, { two_step_sms_country, two_step_sms_phone_number } )验证client/me/security-2fa-enable/index.jsxGET /me/two-step/app-auth-setup/POST /me/two-step/sms/newPOST /me/two-step/validateactionenable-two-step备份码client/me/security-2fa-setup-backup-codes/index.jsxPOST /me/two-step/backup-codes/new通用封装client/lib/two-step-authorization/index.jsvalidateCode/sendSMSCode/ MCTracks 统计 / re-auth 状态刷新从源码结构看Security2faSetup采用的「步骤常量 switch 渲染 回调链」模式是 wp-calypso 中典型的多步向导wizard实现范式状态全部收敛在父组件子组件通过onSuccess/onCancel/onFinished回调通知父级推进从而实现子组件的高内聚与可独立测试。若要为 2FA 增加新的认证方式如安全密钥/WebAuthn只需新增步骤常量与子组件并在顶层switch中接入即可——现有代码中TwoStepAuthorization已具备loginUserWithSecurityKey等 WebAuthn 方法为后续扩展预留了空间。赞分享前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载相关推荐wp-calypso 安全中心组件剖析Security2faInitialSetup 与两步认证2FA激活流程首步实现wp calypso 安全中心组件剖析Security2faInitialSetup 与两步认证2FA激活流程首步实现 本文围绕 wp calypso 仓前端CMSwp-calypso SupportArticleDialog 组件解析在 Calypso 内联展示 WordPress.com 支持文档的完整实现指南wp calypso SupportArticleDialog 组件解析在 Calypso 内联展示 WordPress.com 支持文档的完整实现指南 导读前端CMSWordPress.com 前端组件解析AkismetIcon 图标组件在 wp-calypso 中的实现与使用WordPress.com 前端组件解析AkismetIcon 图标组件在 wp calypso 中的实现与使用 本文以 wp calypso 仓库中的 cl前端CMS上一篇一学就会用猫抓浏览器嗅探插件告别网页资源下载烦恼下一篇ik_llama.cpp 可选 MLA 机制深度解析-mla/--mla-use 的设计权衡与运行期开关创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
