日本語
  • asp-net-core
  • c-sharp
  • チュートリアル
  • auth
  • 認証
  • oauth
  • oidc
  • identity

Logtoを利用したASP.NET Core認証を構築する

Logto SDKを統合してASP.NET Coreでユーザー認証フローを構築する方法を学びましょう。

Gao
Gao
Founder

はじめに

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

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

前提条件

開始する前に、以下のものが必要です：

Logtoアプリケーションを作成する

開始するには、「伝統的なウェブ」タイプでLogtoアプリケーションを作成します。Logtoアプリケーションを作成するには、以下の手順に従ってください：

  1. Logto Consoleにサインインします。
  2. 左のナビゲーションバーで、Applicationsをクリックします。
  3. Create applicationをクリックします。
  4. 開いたページで、"Traditional web app"セクションを見つけ、"ASP.NET Core"カードを探します。
  5. Start buildingをクリックし、アプリケーションの名前を入力します。
  6. Createをクリックします。

その後、ASP.NET CoreアプリケーションにLogto SDKを統合するプロセスを案内するインタラクティブなチュートリアルが表示されるはずです。以下の内容は将来の参照のためのものとなります。

Logto Cloudのインタラクティブチュートリアルを試す

Logto SDKとの統合

インストール

ASP.NET Coreの最小サポートバージョンは6.0であることに注意してください。

Logto認証ミドルウェアを追加する

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

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

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

サインイン

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

Logtoでサインインするには、ChallengeAsyncメソッドを使うことができます：

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

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

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

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

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

Logtoアプリケーション詳細ページの値を適宜更新するようにしてください。

サインアウト

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

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

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

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

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

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

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

Logtoアプリケーション詳細ページの値を適宜更新してください。

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

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

次に、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アプリケーションに戻ります。

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

追加の読み物

Logtoを今すぐ試す