Blazor Server アプリケーションにログインを追加する

このガイドでは、Auth0.AspNetCore.Authentication SDK を使用して、新規または既存の Blazor Server アプリケーションに Auth0 を統合する方法を説明します。

AI を使って Auth0 を統合する

Claude Code、Cursor、GitHub Copilot などの AI コーディングアシスタントを使えば、agent skills を利用して、数分で Auth0 認証を自動追加できます。

インストール:

npx skills add auth0/agent-skills --skill auth0

続いて、AI アシスタントに次のように依頼します。

Add Auth0 authentication to my Blazor Server app

AI アシスタントが、Auth0 アプリケーションの作成、資格情報の取得、Auth0 ASP.NET Core Authentication SDK のインストール、認証ミドルウェアの構成、ログイン/ログアウト フローの実装を自動で行います。agent skills の完全なドキュメント →

前提条件: 始める前に、以下がインストールされていることを確認してください。

• .NET SDK 8.0 以降
• お好みのコードエディター (Visual Studio、VS Code、または Rider)
• Auth0 アカウント (無料でサインアップ)

​

はじめに

Auth0 を使用すると、認証をすばやく追加し、アプリケーションからユーザープロファイル情報にアクセスできるようになります。このガイドでは、Auth0.AspNetCore.Authentication SDK を使用して、Auth0 を新規または既存の Blazor Server アプリケーションに統合する方法を説明します。

1. 新しいプロジェクトを作成

   このQuickstart向けに新しいBlazor Serverプロジェクトを作成する

   dotnet new blazor -n SampleBlazorApp --interactivity Server
   

   プロジェクトを開く

   cd SampleBlazorApp
   
2. Auth0 SDKをインストールする

   dotnet add package Auth0.AspNetCore.Authentication
   
3. Auth0 アプリケーションを設定する

   次に、Auth0 テナントで新しいアプリケーションを作成し、プロジェクトに設定を追加します。

   CLIコマンドを実行してAuth0 アプリケーションを自動的に設定する方法と、Auth0 Dashboardから手動で行う方法のいずれかを選択できます。

   CLI

   プロジェクトのルートディレクトリで次のシェルコマンドを実行し、Auth0 アプリケーションを作成して appsettings.json を更新します。

   Mac

   # Auth0 CLIをインストールする（未インストールの場合）
   brew tap auth0/auth0-cli && brew install auth0
   
   # Auth0 アプリケーションを設定し、appsettings.jsonを生成する
   auth0 qs setup --app --type regular --framework aspnet-blazor --port 5000 --name "My Blazor Server App"
   

   このコマンドは以下を実行します：

   1. 認証済みかどうかを確認します (必要に応じてログインを求められます)
   2. http://localhost:5000 用に構成されたAuth0 Regular Web Applicationを作成します
   3. appsettings.json を Auth0:Domain、Auth0:ClientId、Auth0:ClientSecret で更新します

   Auth0 Dashboard

   始める前に、プロジェクトのルートディレクトリにある appsettings.json を作成または更新してください

   appsettings.json

   {
     "Logging": {
       "LogLevel": {
         "Default": "Information",
         "Microsoft.AspNetCore": "Warning"
       }
     },
     "AllowedHosts": "*",
     "Auth0": {
       "Domain": "YOUR_AUTH0_DOMAIN",
       "ClientId": "YOUR_CLIENT_ID",
       "ClientSecret": "YOUR_CLIENT_SECRET"
     }
   }
   

   1. Auth0 Dashboardを開きます
   2. Applications → Applications → Create Application をクリックします
   3. アプリケーション名 (例: “My Blazor App”) を入力します
   4. アプリケーションの種類として Regular Web Application を選択します
   5. Create をクリックします
   6. Settings タブを開きます
   7. appsettings.json ファイル内の YOUR_AUTH0_DOMAIN、YOUR_CLIENT_ID、YOUR_CLIENT_SECRET を、ダッシュボードの Domain、Client ID、Client Secret の値に置き換えます

   コールバックURLを設定する：

   設定タブで、以下のURLを設定してください：

   • 許可するコールバック URL: http://localhost:5000/callback
   • 許可するログアウト URL: http://localhost:5000
   • 許可する Web オリジン: http://localhost:5000

   変更を保存をクリックします

   重要: 接続を設定し、Auth0 Dashboard の Connections タブでお使いのアプリケーションに対してその接続を有効にしてください。

4. 認証を設定する

   Program.cs を更新して、Auth0 の認証を構成します:

   Program.cs

   using Auth0.AspNetCore.Authentication;
   using SampleBlazorApp.Components;
   
   var builder = WebApplication.CreateBuilder(args);
   
   // Auth0認証を追加する
   builder.Services.AddAuth0WebAppAuthentication(options =>
   {
       options.Domain = builder.Configuration["Auth0:Domain"];
       options.ClientId = builder.Configuration["Auth0:ClientId"];
       options.ClientSecret = builder.Configuration["Auth0:ClientSecret"];
   });
   
   // RazorコンポーネントとBlazor Serverを追加する
   builder.Services.AddRazorComponents()
       .AddInteractiveServerComponents();
   
   // カスケード認証状態を追加する
   builder.Services.AddCascadingAuthenticationState();
   
   // 認証エンドポイント用のRazor Pagesを追加する
   builder.Services.AddRazorPages();
   
   var app = builder.Build();
   
   if (!app.Environment.IsDevelopment())
   {
       app.UseExceptionHandler("/Error", createScopeForErrors: true);
       app.UseHsts();
   }
   
   app.UseHttpsRedirection();
   app.UseAntiforgery();
   
   app.UseAuthentication();
   app.UseAuthorization();
   
   app.MapStaticAssets();
   app.MapRazorComponents<App>()
       .AddInteractiveServerRenderMode();
   
   // 認証用のRazor Pagesをマップする
   app.MapRazorPages();
   
   app.Run();
   

   注意: ミドルウェアの順序は重要です。UseAuthentication() は UseAuthorization() より前に呼び出す必要があります。

5. LoginページとLogoutページを追加

   ユーザーが認証できるように、Login ページと Logout ページを作成します。

   まず、Pages フォルダーとファイルを作成します。

   Mac/Linux

   mkdir -p Pages && touch Pages/Login.cshtml Pages/Login.cshtml.cs Pages/Logout.cshtml Pages/Logout.cshtml.cs Pages/_ViewImports.razor
   

   Windows (PowerShell)

   New-Item -ItemType Directory -Force -Path Pages; New-Item -ItemType File -Force -Path Pages/Login.cshtml, Pages/Login.cshtml.cs, Pages/Logout.cshtml, Pages/Logout.cshtml.cs, Pages/_ViewImports.razor
   

   次に、以下のコードスニペットを追加します。

6. プロファイルページの作成とレイアウトの更新

   ユーザー名とclaimsを表示するカスタムのユーザープロファイルページを作成し、レイアウトを更新してLogin/Logoutリンクを追加します。

   まず、Profileコンポーネントを作成します。

   Mac/Linux

   touch Components/Pages/Profile.razor
   

   Windows (PowerShell)

   New-Item -ItemType File -Force -Path Components/Pages/Profile.razor
   

   次に、以下のコードスニペットを追加します。MainLayout のコードは、レイアウトの他の部分はそのままにして、先頭のセクションに追加してください。

7. アプリケーションを起動する

   dotnet run
   

   アプリケーションが起動し、待ち受け中のURLが表示されるはずです：

   info: Microsoft.Hosting.Lifetime[14]
         Now listening on: http://localhost:5000
   

   ブラウザーを開いて http://localhost:5000 にアクセスします。ナビゲーションの Login リンクをクリックします。Auth0 のログインページにリダイレクトされます。 ログインすると、アプリケーションにリダイレクトされ、ナビゲーションに自分の名前が表示されます。

チェックポイント

これで、Auth0 で保護された完全に機能する Blazor Server アプリケーションが http://localhost:5000 で動作しているはずです。ユーザーはログインし、プロファイルを表示し、ログアウトできます。

---

​

高度な使い方

Login パラメーターをカスタマイズする

Auth0 のログインページにカスタムパラメーターを渡せます。

Pages/Login.cshtml.cs

public async Task OnGet(string redirectUri = "/")
{
    var authenticationProperties = new LoginAuthenticationPropertiesBuilder()
        .WithRedirectUri(redirectUri)
        .WithParameter("screen_hint", "signup")  // サインアップページを表示
        .WithParameter("ui_locales", "es")       // 言語をスペイン語に設定
        .Build();

    await HttpContext.ChallengeAsync(Auth0Constants.AuthenticationScheme, authenticationProperties);
}

API 呼び出し用にトークンを保存する

ユーザーに代わって外部 API を呼び出す必要がある場合は、トークンを取得して保存できます。

Program.cs

builder.Services.AddAuth0WebAppAuthentication(options =>
{
    options.Domain = builder.Configuration["Auth0:Domain"];
    options.ClientId = builder.Configuration["Auth0:ClientId"];
    options.ClientSecret = builder.Configuration["Auth0:ClientSecret"];
})
.WithAccessToken(options =>
{
    options.Audience = "https://your-api.example.com";
    options.UseRefreshTokens = true;
});

次に、アクセストークンを取得します。

var accessToken = await HttpContext.GetTokenAsync("access_token");

// アクセストークンを使って API を呼び出す
var client = new HttpClient();
client.DefaultRequestHeaders.Authorization = 
    new AuthenticationHeaderValue("Bearer", accessToken);

var response = await client.GetAsync("https://your-api.example.com/data");
var data = await response.Content.ReadAsStringAsync();

Organizations を設定する

B2B シナリオ向けに organization のサポートを設定します。

Program.cs

builder.Services.AddAuth0WebAppAuthentication(options =>
{
    options.Domain = builder.Configuration["Auth0:Domain"];
    options.ClientId = builder.Configuration["Auth0:ClientId"];
    options.ClientSecret = builder.Configuration["Auth0:ClientSecret"];
    options.Organization = builder.Configuration["Auth0:Organization"];
});

または、ログイン時に organization を指定します。

Pages/Login.cshtml.cs

var authenticationProperties = new LoginAuthenticationPropertiesBuilder()
    .WithOrganization("org_abc123")
    .WithRedirectUri("/")
    .Build();

---

​

よくある問題

構成を取得できない

問題: Unable to obtain configuration from: https://your-tenant.auth0.com/.well-known/openid-configuration

解決策: Domain が正しく、https:// を含んでいないことを確認してください。authority はライブラリによって自動的に構築されます。

{
  "Auth0": {
    "Domain": "your-tenant.auth0.com"  // 正しい - プロトコルなし
  }
}

あわせて、次の点も確認してください。

• Domain 値の末尾にスラッシュが付いていない
• アプリケーションから Auth0 にアクセスできるインターネット接続がある
• Domain 形式がテナントのリージョンと一致している (.auth0.com, .us.auth0.com, .eu.auth0.com)

構成値が見つからない

問題: ArgumentNullException: Value cannot be null. (Parameter 'Domain') または同様のエラー。

解決策: appsettings.json に Domain、ClientId、ClientSecret を含む Auth0 セクションがあることを確認してください。また、構成が正しく読み込まれていることも確認してください。

Program.cs

builder.Services.AddAuth0WebAppAuthentication(options =>
{
    options.Domain = builder.Configuration["Auth0:Domain"]
        ?? throw new InvalidOperationException("Auth0:Domain is required");
    options.ClientId = builder.Configuration["Auth0:ClientId"]
        ?? throw new InvalidOperationException("Auth0:ClientId is required");
    options.ClientSecret = builder.Configuration["Auth0:ClientSecret"]
        ?? throw new InvalidOperationException("Auth0:ClientSecret is required");
});

ミドルウェアの順序の問題

問題: 構成が正しいにもかかわらず、認証が機能しない。

解決策: ミドルウェアが正しい順序で配置されていることを確認してください。UseAuthentication() は UseAuthorization() より前に記述する必要があります。

Program.cs

app.UseRouting();
app.UseAuthentication();  // UseAuthorization より前に記述する必要があります
app.UseAuthorization();
app.MapControllerRoute(...);

---

​

追加リソース

GitHub リポジトリ

ソースコードと Issue トラッカー

API リファレンス

詳細な API ドキュメント

コミュニティフォーラム

Auth0 コミュニティからサポートを受ける

---

​

サンプルアプリケーション

以下に、Auth0 と ASP.NET Core MVC の連携を示すサンプルアプリケーションがあります。

ASP.NET Core Blazor アプリ

ログイン、ログアウト、ユーザープロファイルなどの例が含まれています。

クローンして実行します:

git clone https://github.com/auth0-samples/auth0-aspnetcore-blazor-server-samples/tree/main/Quickstart/Sample

# appsettings.jsonをAuth0の設定で更新する
dotnet run

---