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

![](https://storage.googleapis.com/zenn-user-upload/a9624f9a5d8b-20240725.webp)

## はじめに

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

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

## 前提条件

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

- Logto アカウント。お持ちでない場合は、[無料でサインアップ](https://cloud.logto.io/)できます。
- .NET 開発環境と ASP.NET Core プロジェクト。お持ちでない場合は、[.NET をインストール](https://dotnet.microsoft.com/download)し、プロジェクトを設定するために [ASP.NET のチュートリアル](https://dotnet.microsoft.com/en-us/apps/aspnet)に従ってください。

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

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

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

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



## Logto SDK の統合

### インストール

```bash
dotnet add package Logto.AspNetCore.Authentication
```

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

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

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

```csharp
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` メソッドを使用します：

```csharp
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` プロパティを設定できます：

```csharp
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` メソッドを使用します：

```csharp
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` プロパティを設定できます：

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

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

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

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

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

```csharp
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 アプリケーションにリダイレクトされます。

統合中に問題が発生した場合は、contact@logto.io までメールでお問い合わせいただくか、[Discord サーバー](https://discord.gg/UEPaF3j5e6)に参加してください！

## さらに読む

- [サインインエクスペリエンスのカスタマイズ](https://docs.logto.io/docs/recipes/customize-sie/)
- [コネクタの設定](https://docs.logto.io/docs/recipes/configure-connectors/)
- [API の保護](https://docs.logto.io/docs/recipes/protect-your-api/)


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