重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
umbraco-mfa-login-provider by umbraco/umbraco-cms-backoffice-skills
npx skills add https://github.com/umbraco/umbraco-cms-backoffice-skills --skill umbraco-mfa-login-providerMFA 登录提供程序是 Umbraco 中双因素认证(2FA)的 UI 组件。它为用户提供了启用/禁用和配置其 2FA 提供程序(例如 Google Authenticator、短信验证码)的界面。后端的 ITwoFactorProvider 必须在 C# 中单独配置 - 此扩展类型处理前端设置和配置 UI。
在实现之前,请务必获取最新文档:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
{
"name": "My MFA Provider",
"extensions": [
{
"type": "mfaLoginProvider",
"alias": "My.MfaProvider.Authenticator",
"name": "Authenticator App MFA",
"forProviderName": "Umbraco.GoogleAuthenticator",
"element": "/App_Plugins/MyMfa/mfa-setup.js",
"meta": {
"label": "Authenticator App"
}
}
]
}
import type { ManifestMfaLoginProvider } from '@umbraco-cms/backoffice/extension-registry';
const manifest: ManifestMfaLoginProvider = {
type: 'mfaLoginProvider',
alias: 'My.MfaProvider.Authenticator',
name: 'Authenticator MFA Provider',
forProviderName: 'Umbraco.GoogleAuthenticator', // 必须与后端提供程序名称匹配
element: () => import('./mfa-setup.element.js'),
meta: {
label: 'Authenticator App',
},
};
export const manifests = [manifest];
import { html, css, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';
import type { UmbMfaProviderConfigurationElementProps } from '@umbraco-cms/backoffice/user';
@customElement('my-mfa-setup')
export class MyMfaSetupElement extends UmbLitElement implements UmbMfaProviderConfigurationElementProps {
@property({ type: String })
providerName = '';
@property({ type: String })
displayName = '';
@property({ attribute: false })
callback!: (providerName: string, code: string, secret: string) => Promise<{ error?: string }>;
@property({ attribute: false })
close!: () => void;
@state()
private _loading = true;
@state()
private _secret = '';
@state()
private _qrCodeUrl = '';
@state()
private _code = '';
@state()
private _submitting = false;
#notificationContext?: typeof UMB_NOTIFICATION_CONTEXT.TYPE;
constructor() {
super();
this.consumeContext(UMB_NOTIFICATION_CONTEXT, (context) => {
this.#notificationContext = context;
});
}
async connectedCallback() {
super.connectedCallback();
await this.#loadSetupData();
}
async #loadSetupData() {
try {
// 从 API 获取设置数据
const response = await fetch(`/umbraco/management/api/v1/user/2fa/${this.providerName}/setup`);
const data = await response.json();
this._secret = data.secret;
this._qrCodeUrl = data.qrCodeSetupImageUrl;
} catch (error) {
this.#notificationContext?.peek('danger', { data: { message: 'Failed to load setup data' } });
} finally {
this._loading = false;
}
}
async #handleSubmit(e: SubmitEvent) {
e.preventDefault();
if (!this._code || this._code.length !== 6) {
this.#notificationContext?.peek('warning', { data: { message: 'Please enter a 6-digit code' } });
return;
}
this._submitting = true;
try {
const result = await this.callback(this.providerName, this._code, this._secret);
if (result.error) {
this.#notificationContext?.peek('danger', { data: { message: result.error } });
} else {
this.#notificationContext?.peek('positive', { data: { message: '2FA enabled successfully' } });
this.close();
}
} finally {
this._submitting = false;
}
}
render() {
if (this._loading) {
return html`<uui-loader></uui-loader>`;
}
return html`
<uui-form>
<form @submit=${this.#handleSubmit}>
<umb-body-layout headline="Set up ${this.displayName}">
<div id="main">
<p>Scan this QR code with your authenticator app:</p>
<div class="qr-container">
<img src=${this._qrCodeUrl} alt="QR Code" />
</div>
<p>Or enter this secret manually: <code>${this._secret}</code></p>
<uui-form-layout-item>
<uui-label slot="label" for="code" required>Verification Code</uui-label>
<uui-input
id="code"
type="text"
inputmode="numeric"
pattern="[0-9]*"
maxlength="6"
placeholder="000000"
.value=${this._code}
@input=${(e: InputEvent) => (this._code = (e.target as HTMLInputElement).value)}
required
></uui-input>
</uui-form-layout-item>
</div>
<div slot="actions">
<uui-button
label="Cancel"
look="secondary"
@click=${this.close}
></uui-button>
<uui-button
type="submit"
label="Enable"
look="primary"
color="positive"
?state=${this._submitting ? 'waiting' : undefined}
></uui-button>
</div>
</umb-body-layout>
</form>
</uui-form>
`;
}
static styles = css`
#main {
max-width: 400px;
margin: 0 auto;
text-align: center;
}
.qr-container {
margin: var(--uui-size-space-5) 0;
}
.qr-container img {
max-width: 200px;
border: 1px solid var(--uui-color-border);
border-radius: var(--uui-border-radius);
}
code {
display: block;
margin: var(--uui-size-space-3) 0;
padding: var(--uui-size-space-2);
background: var(--uui-color-surface-alt);
border-radius: var(--uui-border-radius);
font-family: monospace;
word-break: break-all;
}
`;
}
export default MyMfaSetupElement;
declare global {
interface HTMLElementTagNameMap {
'my-mfa-setup': MyMfaSetupElement;
}
}
// 如果不需要自定义 UI,可以使用内置的默认元素
// 只需注册不带自定义元素的清单 - Umbraco 会提供一个默认元素
const manifest: ManifestMfaLoginProvider = {
type: 'mfaLoginProvider',
alias: 'My.MfaProvider.Default',
name: 'Default MFA Provider',
forProviderName: 'Umbraco.GoogleAuthenticator',
// 未指定元素 - 使用默认元素
meta: {
label: 'Authenticator App',
},
};
// ITwoFactorProvider 实现
public class GoogleAuthenticatorProvider : ITwoFactorProvider
{
public string ProviderName => "Umbraco.GoogleAuthenticator";
public Task<bool> ValidateTwoFactorPIN(string secret, string code)
{
var twoFactorAuthenticator = new TwoFactorAuthenticator();
return Task.FromResult(
twoFactorAuthenticator.ValidateTwoFactorPIN(secret, code)
);
}
public Task<bool> ValidateTwoFactorSetup(string secret, string code)
{
return ValidateTwoFactorPIN(secret, code);
}
public async Task<object> GetSetupDataAsync(Guid userKey, IMemberService memberService)
{
var secret = Base32Encoding.ToString(Guid.NewGuid().ToByteArray());
var authenticator = new TwoFactorAuthenticator();
var setupInfo = authenticator.GenerateSetupCode(
"My App",
userKey.ToString(),
secret,
false
);
return new
{
secret,
qrCodeSetupImageUrl = setupInfo.QrCodeSetupImageUrl
};
}
}
// 在 Composer 中注册
public class MfaComposer : IComposer
{
public void Compose(IUmbracoBuilder builder)
{
var identityBuilder = new BackOfficeIdentityBuilder(builder.Services);
identityBuilder.AddTwoFactorProvider<GoogleAuthenticatorProvider>(
GoogleAuthenticatorProvider.Name
);
}
}
| 属性 | 类型 | 描述 |
|---|---|---|
providerName | string | 提供程序标识符 |
displayName | string | 人类可读的提供程序名称 |
callback | Function | 使用 code/secret 进行验证的回调函数 |
close | Function | 关闭设置模态框的函数 |
callback(providerName: string, code: string, secret: string): Promise<{ error?: string }>
如果验证失败,返回一个包含 error 属性的对象;如果成功,则返回空对象。
就是这样!请务必获取最新文档,保持示例简洁,生成完整可运行的代码。
每周安装次数
70
代码仓库
GitHub 星标数
14
首次出现
2026年2月4日
安全审计
安装于
github-copilot51
cursor23
opencode22
codex22
gemini-cli20
amp20
An MFA Login Provider is the UI component for Two-Factor Authentication (2FA) in Umbraco. It provides the interface for users to enable/disable and configure their 2FA provider (e.g., Google Authenticator, SMS codes). The backend ITwoFactorProvider must be configured separately in C# - this extension type handles the frontend setup and configuration UI.
Always fetch the latest docs before implementing:
{
"name": "My MFA Provider",
"extensions": [
{
"type": "mfaLoginProvider",
"alias": "My.MfaProvider.Authenticator",
"name": "Authenticator App MFA",
"forProviderName": "Umbraco.GoogleAuthenticator",
"element": "/App_Plugins/MyMfa/mfa-setup.js",
"meta": {
"label": "Authenticator App"
}
}
]
}
import type { ManifestMfaLoginProvider } from '@umbraco-cms/backoffice/extension-registry';
const manifest: ManifestMfaLoginProvider = {
type: 'mfaLoginProvider',
alias: 'My.MfaProvider.Authenticator',
name: 'Authenticator MFA Provider',
forProviderName: 'Umbraco.GoogleAuthenticator', // Must match backend provider name
element: () => import('./mfa-setup.element.js'),
meta: {
label: 'Authenticator App',
},
};
export const manifests = [manifest];
import { html, css, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';
import type { UmbMfaProviderConfigurationElementProps } from '@umbraco-cms/backoffice/user';
@customElement('my-mfa-setup')
export class MyMfaSetupElement extends UmbLitElement implements UmbMfaProviderConfigurationElementProps {
@property({ type: String })
providerName = '';
@property({ type: String })
displayName = '';
@property({ attribute: false })
callback!: (providerName: string, code: string, secret: string) => Promise<{ error?: string }>;
@property({ attribute: false })
close!: () => void;
@state()
private _loading = true;
@state()
private _secret = '';
@state()
private _qrCodeUrl = '';
@state()
private _code = '';
@state()
private _submitting = false;
#notificationContext?: typeof UMB_NOTIFICATION_CONTEXT.TYPE;
constructor() {
super();
this.consumeContext(UMB_NOTIFICATION_CONTEXT, (context) => {
this.#notificationContext = context;
});
}
async connectedCallback() {
super.connectedCallback();
await this.#loadSetupData();
}
async #loadSetupData() {
try {
// Fetch setup data from API
const response = await fetch(`/umbraco/management/api/v1/user/2fa/${this.providerName}/setup`);
const data = await response.json();
this._secret = data.secret;
this._qrCodeUrl = data.qrCodeSetupImageUrl;
} catch (error) {
this.#notificationContext?.peek('danger', { data: { message: 'Failed to load setup data' } });
} finally {
this._loading = false;
}
}
async #handleSubmit(e: SubmitEvent) {
e.preventDefault();
if (!this._code || this._code.length !== 6) {
this.#notificationContext?.peek('warning', { data: { message: 'Please enter a 6-digit code' } });
return;
}
this._submitting = true;
try {
const result = await this.callback(this.providerName, this._code, this._secret);
if (result.error) {
this.#notificationContext?.peek('danger', { data: { message: result.error } });
} else {
this.#notificationContext?.peek('positive', { data: { message: '2FA enabled successfully' } });
this.close();
}
} finally {
this._submitting = false;
}
}
render() {
if (this._loading) {
return html`<uui-loader></uui-loader>`;
}
return html`
<uui-form>
<form @submit=${this.#handleSubmit}>
<umb-body-layout headline="Set up ${this.displayName}">
<div id="main">
<p>Scan this QR code with your authenticator app:</p>
<div class="qr-container">
<img src=${this._qrCodeUrl} alt="QR Code" />
</div>
<p>Or enter this secret manually: <code>${this._secret}</code></p>
<uui-form-layout-item>
<uui-label slot="label" for="code" required>Verification Code</uui-label>
<uui-input
id="code"
type="text"
inputmode="numeric"
pattern="[0-9]*"
maxlength="6"
placeholder="000000"
.value=${this._code}
@input=${(e: InputEvent) => (this._code = (e.target as HTMLInputElement).value)}
required
></uui-input>
</uui-form-layout-item>
</div>
<div slot="actions">
<uui-button
label="Cancel"
look="secondary"
@click=${this.close}
></uui-button>
<uui-button
type="submit"
label="Enable"
look="primary"
color="positive"
?state=${this._submitting ? 'waiting' : undefined}
></uui-button>
</div>
</umb-body-layout>
</form>
</uui-form>
`;
}
static styles = css`
#main {
max-width: 400px;
margin: 0 auto;
text-align: center;
}
.qr-container {
margin: var(--uui-size-space-5) 0;
}
.qr-container img {
max-width: 200px;
border: 1px solid var(--uui-color-border);
border-radius: var(--uui-border-radius);
}
code {
display: block;
margin: var(--uui-size-space-3) 0;
padding: var(--uui-size-space-2);
background: var(--uui-color-surface-alt);
border-radius: var(--uui-border-radius);
font-family: monospace;
word-break: break-all;
}
`;
}
export default MyMfaSetupElement;
declare global {
interface HTMLElementTagNameMap {
'my-mfa-setup': MyMfaSetupElement;
}
}
// If you don't need custom UI, you can use the built-in default element
// Just register the manifest without a custom element - Umbraco provides a default
const manifest: ManifestMfaLoginProvider = {
type: 'mfaLoginProvider',
alias: 'My.MfaProvider.Default',
name: 'Default MFA Provider',
forProviderName: 'Umbraco.GoogleAuthenticator',
// No element specified - uses default
meta: {
label: 'Authenticator App',
},
};
// ITwoFactorProvider implementation
public class GoogleAuthenticatorProvider : ITwoFactorProvider
{
public string ProviderName => "Umbraco.GoogleAuthenticator";
public Task<bool> ValidateTwoFactorPIN(string secret, string code)
{
var twoFactorAuthenticator = new TwoFactorAuthenticator();
return Task.FromResult(
twoFactorAuthenticator.ValidateTwoFactorPIN(secret, code)
);
}
public Task<bool> ValidateTwoFactorSetup(string secret, string code)
{
return ValidateTwoFactorPIN(secret, code);
}
public async Task<object> GetSetupDataAsync(Guid userKey, IMemberService memberService)
{
var secret = Base32Encoding.ToString(Guid.NewGuid().ToByteArray());
var authenticator = new TwoFactorAuthenticator();
var setupInfo = authenticator.GenerateSetupCode(
"My App",
userKey.ToString(),
secret,
false
);
return new
{
secret,
qrCodeSetupImageUrl = setupInfo.QrCodeSetupImageUrl
};
}
}
// Register in Composer
public class MfaComposer : IComposer
{
public void Compose(IUmbracoBuilder builder)
{
var identityBuilder = new BackOfficeIdentityBuilder(builder.Services);
identityBuilder.AddTwoFactorProvider<GoogleAuthenticatorProvider>(
GoogleAuthenticatorProvider.Name
);
}
}
| Property | Type | Description |
|---|---|---|
providerName | string | The provider identifier |
displayName | string | Human-readable provider name |
callback | Function | Call with code/secret to validate |
close |
callback(providerName: string, code: string, secret: string): Promise<{ error?: string }>
Returns an object with an error property if validation failed, or empty object on success.
That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.
Weekly Installs
70
Repository
GitHub Stars
14
First Seen
Feb 4, 2026
Security Audits
Gen Agent Trust HubFailSocketPassSnykPass
Installed on
github-copilot51
cursor23
opencode22
codex22
gemini-cli20
amp20
Kubernetes健康检查配置指南:.NET与Python应用探针设置
223 周安装
Function |
| Close the setup modal |