umbraco-auth-provider

Umbraco 認証プロバイダー

これは何ですか？

認証プロバイダーは、Umbraco バックオフィスに対する外部ログイン（OAuth/SSO）を可能にします。バックエンドの認証プロバイダーに接続する UI コンポーネント（ログインボタン）を提供します。バックエンドは C# で別途設定する必要があります。この拡張タイプはフロントエンドの表示と動作を処理します。一般的なプロバイダーには Google、Microsoft、GitHub、およびカスタム OAuth プロバイダーがあります。

ドキュメント

実装する前に、常に最新のドキュメントを取得してください:

• 外部ログインプロバイダー: https://docs.umbraco.com/umbraco-cms/run-in-production/security/external-login-providers
• 拡張タイプ: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types
• 基盤: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation

ワークフロー

1. ドキュメントを取得 - 上記の URL に対して WebFetch を使用します
2. 質問する - どの OAuth プロバイダーですか？ カスタム UI は必要ですか？ 自動リダイレクトは必要ですか？
3. バックエンドを設定 - まず C# 認証プロバイダーをセットアップします
4. フロントエンドファイルを生成 - マニフェスト + オプションのカスタム要素を作成します
5. 説明 - 作成された内容とテスト方法を示します

最小限の例

デフォルトボタンを含むマニフェスト (umbraco-package.json)

{
  "name": "My Auth Provider",
  "extensions": [
    {
      "type": "authProvider",
      "alias": "My.AuthProvider.GitHub",
      "name": "GitHub Login",
      "forProviderName": "Umbraco.GitHub",
      "meta": {
        "label": "Login with GitHub",
        "defaultView": {
          "icon": "icon-github",
          "color": "default",
          "look": "secondary"
        }
      }
    }
  ]
}

マニフェスト (TypeScript)

import type { ManifestAuthProvider } from '@umbraco-cms/backoffice/extension-registry';

const manifest: ManifestAuthProvider = {
  type: 'authProvider',
  alias: 'My.AuthProvider.Google',
  name: 'Google Login',
  forProviderName: 'Umbraco.Google', // Must match backend provider name
  meta: {
    label: 'Sign in with Google',
    defaultView: {
      icon: 'icon-google',
      color: 'default',
      look: 'outline',
    },
    behavior: {
      autoRedirect: false,
      popupTarget: 'umbracoAuthPopup',
      popupFeatures: 'width=600,height=600,menubar=no,location=no',
    },
    linking: {
      allowManualLinking: true,
    },
  },
};

export const manifests = [manifest];

カスタムログインボタン要素

import type { ManifestAuthProvider } from '@umbraco-cms/backoffice/extension-registry';

const manifest: ManifestAuthProvider = {
  type: 'authProvider',
  alias: 'My.AuthProvider.Custom',
  name: 'Custom SSO Login',
  forProviderName: 'Umbraco.CustomSSO',
  element: () => import('./custom-auth-button.element.js'),
  meta: {
    label: 'Enterprise SSO',
  },
};

カスタムボタン要素 (custom-auth-button.element.ts)

import { html, css, customElement, property } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';

@customElement('my-custom-auth-button')
export class MyCustomAuthButtonElement extends UmbLitElement {
  @property({ type: String })
  providerName = '';

  @property({ type: String })
  displayName = '';

  #handleClick() {
    // Dispatch event to trigger auth flow
    this.dispatchEvent(
      new CustomEvent('auth-request', {
        bubbles: true,
        composed: true,
        detail: { providerName: this.providerName },
      })
    );
  }

  render() {
    return html`
      <button @click=${this.#handleClick}>
        <img src="/App_Plugins/MyAuth/logo.svg" alt="" />
        <span>${this.displayName}</span>
      </button>
    `;
  }

  static styles = css`
    button {
      display: flex;
      align-items: center;
      gap: var(--uui-size-space-3);
      width: 100%;
      padding: var(--uui-size-space-4);
      border: 1px solid var(--uui-color-border);
      border-radius: var(--uui-border-radius);
      background: var(--uui-color-surface);
      cursor: pointer;
    }

    button:hover {
      background: var(--uui-color-surface-alt);
    }

    img {
      width: 24px;
      height: 24px;
    }
  `;
}

export default MyCustomAuthButtonElement;

自動リダイレクトプロバイダー (シングルサインオン)

const manifest: ManifestAuthProvider = {
  type: 'authProvider',
  alias: 'My.AuthProvider.EnterpriseSSO',
  name: 'Enterprise SSO',
  forProviderName: 'Umbraco.EnterpriseSSO',
  meta: {
    label: 'Enterprise Login',
    behavior: {
      autoRedirect: true, // Automatically redirects to provider
    },
  },
};

バックエンドの C# 設定 (参考用)

// Composer to register the provider
public class GitHubAuthenticationComposer : IComposer
{
    public void Compose(IUmbracoBuilder builder)
    {
        builder.AddBackOfficeExternalLogins(logins =>
        {
            logins.AddBackOfficeLogin(
                backOfficeAuthenticationBuilder =>
                {
                    backOfficeAuthenticationBuilder.AddGitHub(
                        backOfficeAuthenticationBuilder.SchemeForBackOffice("Umbraco.GitHub")!,
                        options =>
                        {
                            options.ClientId = "your-client-id";
                            options.ClientSecret = "your-client-secret";
                            options.CallbackPath = "/umbraco-github-signin";
                        });
                },
                options =>
                {
                    options.AutoLinkOptions = new ExternalSignInAutoLinkOptions(
                        autoLinkExternalAccount: true,
                        defaultUserGroups: new[] { "admin" }
                    );
                });
        });
    }
}

メタプロパティ

プロパティ	説明
label	ボタンのテキスト
defaultView.icon	ボタンのアイコン
defaultView.color	ボタンの色 (default、positive、warning、danger)
defaultView.look	ボタンのスタイル (default、primary、secondary、outline)
behavior.autoRedirect	ログインページでプロバイダーへ自動リダイレクト
behavior.popupTarget	ポップアップのウィンドウ名
behavior.popupFeatures	ポップアップウィンドウの機能
linking.allowManualLinking	既存アカウントへのリンクを許可

一般的なアイコン

• icon-google - Google
• icon-microsoft - Microsoft
• icon-github - GitHub
• icon-facebook - Facebook
• icon-twitter / icon-x - Twitter/X
• icon-cloud - 汎用 OAuth

以上です！ 常に最新のドキュメントを取得し、例は最小限に保ち、完全に動作するコードを生成してください。