Logto で ASP.NET Core 認証を構築する

はじめに

• Logto は、顧客のアイデンティティインフラを最小限の労力で構築するためのモダンな Auth0 の代替品です。ユーザー名、メール、電話番号、Google や GitHub などの人気のあるソーシャルサインインを含むさまざまなサインイン方法をサポートしています。
• ASP.NET Core は、モダンでクラウドベースのインターネット接続アプリケーションを構築するためのクロスプラットフォーム、高パフォーマンス、オープンソースのフレームワークです。

このチュートリアルでは、Logto SDK を統合することで、ASP.NET Core のユーザー認証フローを構築する方法を説明します。このチュートリアルでは、プログラミング言語として C# を使用します。

前提条件

開始する前に、以下を確認してください：

• Logto アカウント。お持ちでない場合は、無料でサインアップできます。
• .NET 開発環境と ASP.NET Core プロジェクト。お持ちでない場合は、.NET をインストールし、プロジェクトを設定するために ASP.NET のチュートリアルに従ってください。

Logto アプリケーションの作成

まず、「従来の Web」タイプの Logto アプリケーションを作成します。以下の手順に従って Logto アプリケーションを作成してください：

1. Logto コンソールにサインインします。
2. 左側のナビゲーションバーで アプリケーション をクリックします。
3. アプリケーションの作成 をクリックします。
4. 開いたページで「従来の Web アプリ」セクションを見つけ、「ASP.NET Core」カードを見つけます。
5. 構築を開始 をクリックし、アプリケーションの名前を入力します。
6. 作成 をクリックします。

その後、Logto SDK を ASP.NET Core アプリケーションに統合する手順をガイドするインタラクティブチュートリアルが表示されます。以下の内容は将来の参照用です。

Logto SDK の統合

インストール

dotnet add package Logto.AspNetCore.Authentication

サポートされている最小の ASP.NET Core バージョンは 6.0 です。

Logto 認証ミドルウェアの追加

Startup.cs（または Program.cs）を開き、Logto 認証ミドルウェアを登録するための以下のコードを追加します：

using Logto.AspNetCore.Authentication;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddLogtoAuthentication(options =>
{
  options.Endpoint = builder.Configuration["Logto:Endpoint"]!;
  options.AppId = builder.Configuration["Logto:AppId"]!;
  options.AppSecret = builder.Configuration["Logto:AppSecret"];
});

app.UseAuthentication();

AddLogtoAuthentication メソッドは以下のことを行います：

• デフォルトの認証スキームを LogtoDefaults.CookieScheme に設定します。
• デフォルトのチャレンジスキームを LogtoDefaults.AuthenticationScheme に設定します。
• デフォルトのサインアウトスキームを LogtoDefaults.AuthenticationScheme に設定します。
• 認証スキームにクッキーと OpenID Connect 認証ハンドラーを追加します。

サインイン

Logto アプリケーションの詳細ページの Redirect URIs リストに以下の URI を追加します：

http://<your-web-app-uri>/Callback

Logto でサインインするには、ChallengeAsync メソッドを使用します：

await HttpContext.ChallengeAsync(new AuthenticationProperties
{
  RedirectUri = "/"
});

ChallengeAsync メソッドはユーザーを Logto サインインページにリダイレクトします。

RedirectUri プロパティは認証後にユーザーをウェブアプリケーションにリダイレクトするために使用されます。Logto アプリケーションの詳細ページで設定したリダイレクト URI とは異なることに注意してください：

1. Logto アプリケーションの詳細ページのリダイレクト URI は、ユーザーがサインインした後に Logto がユーザーをリダイレクトする URI です。
2. RedirectUri プロパティは、Logto 認証ミドルウェアで必要なアクションが実行された後にリダイレクトされる URI です。

アクションの順序は 1 -> 2 です。明確にするために、Logto アプリケーションの詳細ページのリダイレクト URI を Logto リダイレクト URI と呼び、RedirectUri プロパティを アプリケーションリダイレクト URI と呼びます。

Logto リダイレクト URI はデフォルトで /Callback の値を持っており、特別な要件がない限りそのままにしておくことができます。変更する場合は、LogtoOptions の CallbackPath プロパティを設定できます：

builder.Services.AddLogtoAuthentication(options =>
{
  options.CallbackPath = "/SomeOtherCallbackPath";
});

Logto アプリケーションの詳細ページで値を更新することを忘れないでください。

Note: Logto アプリケーションの詳細ページに アプリケーションリダイレクト URI を設定する必要はありません

サインアウト

Logto アプリケーションの詳細ページの Post sign-out redirect URIs リストに以下の URI を追加します：

http://<your-web-app-uri>/SignedOutCallback

Logto でサインアウトするには、SignOutAsync メソッドを使用します：

await HttpContext.SignOutAsync(new AuthenticationProperties
{
  RedirectUri = "/"
});

SignOutAsync メソッドは認証クッキーをクリアし、ユーザーを Logto サインアウトページにリダイレクトします。

RedirectUri プロパティはサインアウト後にユーザーをウェブアプリケーションにリダイレクトするために使用されます。Logto アプリケーションの詳細ページで設定したサインアウト後のリダイレクト URI とは異なることに注意してください：

1. Logto アプリケーションの詳細ページのサインアウト後のリダイレクト URI は、ユーザーがサインアウトした後に Logto がユーザーをリダイレクトする URI です。
2. RedirectUri プロパティは、Logto 認証ミドルウェアで必要なアクションが実行された後にリダイレクトされる URI です。

アクションの順序は 1 -> 2 です。明確にするために、Logto アプリケーションの詳細ページのサインアウト後のリダイレクト URI を Logto サインアウト後リダイレクト URI と呼び、RedirectUri プロパティを アプリケーションサインアウト後リダイレクト URI と呼びます。

Logto サインアウト後リダイレクト URI はデフォルトで /SignedOutCallback の値を持っており、特別な要件がない限りそのままにしておくことができます。変更する場合は、LogtoOptions の SignedOutCallbackPath プロパティを設定できます：

builder.Services.AddLogtoAuthentication(options =>
{
  options.SignedOutCallbackPath = "/SomeOtherSignedOutCallbackPath";
});

Logto アプリケーションの詳細ページで値を更新することを忘れないでください

Note: Logto アプリケーションの詳細ページに アプリケーションサインアウト後リダイレクト URI を設定する必要はありません。

サインイン/サインアウトボタンの実装 (Razor ページ)

まず、PageModel にハンドラメソッドを追加します。例えば：

public class IndexModel : PageModel
{
  public async Task OnPostSignInAsync()
  {
    await HttpContext.ChallengeAsync(new AuthenticationProperties
    {
      RedirectUri = "/"
    });
  }

  public async Task OnPostSignOutAsync()
  {
    await HttpContext.SignOutAsync(new AuthenticationProperties
    {
      RedirectUri = "/"
    });
  }
}

次に、Razor ページ (html) にボタンを追加します：

<p>Is authenticated: @User.Identity?.IsAuthenticated</p>
<form method="post">
  @if (User.Identity?.IsAuthenticated == true)
  {
    <button type="submit" asp-page-handler="SignOut">Sign out</button>
  } else {
    <button type="submit" asp-page-handler="SignIn">Sign in</button>
  }
</form>

ユーザーが認証されていない場合、「Sign in」ボタンが表示され、認証されている場合は「Sign out」ボタンが表示されます。

チェックポイント: Web アプリケーションの実行

ここで、Web アプリケーションを実行し、Logto を使用してサインイン/サインアウトを試してみましょう：

1. ブラウザで Web アプリケーションを開くと、「Is authenticated: False」と「Sign in」ボタンが表示されます。
2. 「Sign in」ボタンをクリックすると、Logto サインインページにリダイレクトされます。
3. サインイン後、Web アプリケーションにリダイレクトされ、「Is authenticated: True」と「Sign out」ボタンが表示されます。
4. 「Sign out」ボタンをクリックすると、Logto サインアウトページにリダイレクトされ、その後 Web アプリケーションにリダイレクトされます。

統合中に問題が発生した場合は、[e-mail] までメールでお問い合わせいただくか、Discord サーバーに参加してください！

さらに読む

• サインインエクスペリエンスのカスタマイズ
• コネクタの設定
• API の保護

X: https://x.com/logto_io
YouTube: https://youtu.be/@logto-io
GitHub: https://github.com/logto-io