Logto は、モダンなアプリや SaaS 製品向けに設計された Auth0 の代替です。 Cloud と オープンソース の両方のサービスを提供し、アイデンティティと管理 (IAM) システムを迅速に立ち上げるのをサポートします。 認証 (Authentication)、認可 (Authorization)、マルチテナント管理を すべて一つに まとめて楽しめます。
Logto Cloud で無料の開発テナントから始めることをお勧めします。これにより、すべての機能を簡単に探索できます。
この記事では、.NET Core (Blazor WebAssembly) と Logto を使用して、OAuth2 サインイン体験（ユーザー認証 (Authentication)）を迅速に構築する手順を説明します。
前提条件
- 実行中の Logto インスタンス。始めるには 紹介ページ をご覧ください。
- .NET Core (Blazor WebAssembly) の基本的な知識。
- 使用可能な OAuth2 アカウント。
Logto でアプリケーションを作成する
Logto は OpenID Connect (OIDC) 認証 (Authentication) と OAuth 2.0 認可 (Authorization) に基づいています。複数のアプリケーション間でのフェデレーテッドアイデンティティ管理をサポートしており、一般的にシングルサインオン (SSO) と呼ばれます。
あなたの シングルページアプリ アプリケーションを作成するには、次の手順に従ってください：
- Logto コンソール を開きます。「Get started」セクションで「View all」リンクをクリックしてアプリケーションフレームワークのリストを開きます。あるいは、Logto Console > Applications に移動し、「Create application」ボタンをクリックします。
- 開いたモーダルで、左側のクイックフィルターチェックボックスを使用して、すべての利用可能な "シングルページアプリ" フレームワークをフィルタリングするか、"シングルページアプリ" セクションをクリックします。".NET Core (Blazor WebAssembly)" フレームワークカードをクリックして、アプリケーションの作成を開始します。
- アプリケーション名を入力します。例：「Bookstore」と入力し、「Create application」をクリックします。
🎉 タダーン！Logto で最初のアプリケーションを作成しました。詳細な統合ガイドを含むお祝いページが表示されます。ガイドに従って、アプリケーションでの体験がどのようになるかを確認してください。
.NET Core (Blazor WebAssembly) SDK を統合する
- 以下のデモンストレーションは、.NET Core 8.0 と Blorc.OpenIdConnect に基づいて構築されています。
- .NET Core のサンプルプロジェクトは GitHub リポジトリ で入手可能です。
インストール
プロジェクトに NuGet パッケージを追加します：
dotnet add package Blorc.OpenIdConnect
スクリプト参照を追加する
index.html ファイルに Blorc.Core/injector.js を含めます：
<head>
<!-- ... -->
<script src="_content/Blorc.Core/injector.js"></script>
<!-- ... -->
</head>
サービスを登録する
次のコードを Program.cs ファイルに追加します：
using Blorc.OpenIdConnect;
using Blorc.Services;
builder.Services.AddBlorcCore();
builder.Services.AddAuthorizationCore();
builder.Services.AddBlorcOpenIdConnect(
options =>
{
builder.Configuration.Bind("IdentityServer", options);
});
var webAssemblyHost = builder.Build();
await webAssemblyHost
.ConfigureDocumentAsync(async documentService =>
{
await documentService.InjectBlorcCoreJsAsync();
await documentService.InjectOpenIdConnectAsync();
});
await webAssemblyHost.RunAsync();
Microsoft.AspNetCore.Components.WebAssembly.Authentication パッケージを使用する必要はありません。Blorc.OpenIdConnect パッケージが認証 (Authentication) プロセスを処理します。
リダイレクト URI を設定する
詳細に入る前に、エンドユーザーの体験について簡単に説明します。サインインプロセスは次のように簡略化できます：
- あなたのアプリがサインインメソッドを呼び出します。
- ユーザーは Logto のサインインページにリダイレクトされます。ネイティブアプリの場合、システムブラウザが開かれます。
- ユーザーがサインインし、あなたのアプリにリダイレクトされます（リダイレクト URI として設定されています）。
リダイレクトベースのサインインについて
- この認証 (Authentication) プロセスは OpenID Connect (OIDC) プロトコルに従い、Logto はユーザーのサインインを保護するために厳格なセキュリティ対策を講じています。
- 複数のアプリがある場合、同じアイデンティティプロバイダー (Logto) を使用できます。ユーザーがあるアプリにサインインすると、Logto は別のアプリにアクセスした際に自動的にサインインプロセスを完了します。
リダイレクトベースのサインインの理論と利点について詳しく知るには、Logto サインイン体験の説明を参照してください。
以下のコードスニペットでは、あなたのアプリが http://localhost:3000/ で実行されていると仮定しています。
リダイレクト URI を設定する
Logto Console のアプリケーション詳細ページに移動します。リダイレクト URI http://localhost:3000/callback を追加します。
サインインと同様に、ユーザーは共有セッションからサインアウトするために Logto にリダイレクトされるべきです。完了したら、ユーザーをあなたのウェブサイトに戻すと良いでしょう。例えば、http://localhost:3000/ をサインアウト後のリダイレクト URI セクションとして追加します。
その後、「保存」をクリックして変更を保存します。
アプリケーションを設定する
次のコードを appsettings.json ファイルに追加します：
{
// ...
IdentityServer: {
Authority: 'https://<your-logto-endpoint>/oidc',
ClientId: '<your-logto-app-id>',
PostLogoutRedirectUri: 'http://localhost:3000/',
RedirectUri: 'http://localhost:3000/callback',
ResponseType: 'code',
Scope: 'openid profile', // 必要に応じてスコープを追加
},
}
RedirectUri と PostLogoutRedirectUri を Logto アプリケーション設定の許可されたリダイレクト URI のリストに追加することを忘れないでください。これらはどちらも WASM アプリケーションの URL です。
AuthorizeView コンポーネントを追加する
認証 (Authentication) が必要な Razor ページに AuthorizeView コンポーネントを追加します。Home.razor ページであると仮定します：
@using Microsoft.AspNetCore.Components.Authorization
@page "/"
<AuthorizeView>
<Authorized>
@* サインイン済みビュー *@
<button @onclick="OnLogoutButtonClickAsync">
サインアウト
</button>
</Authorized>
<NotAuthorized>
@* 未認証ビュー *@
<button @onclick="OnLoginButtonClickAsync">
サインイン
</button>
</NotAuthorized>
</AuthorizeView>
認証 (Authentication) を設定する
Home.razor.cs ファイルに（存在しない場合は作成して）次のコードを追加します：
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Blorc.OpenIdConnect;
using Microsoft.AspNetCore.Components.Authorization;
[Authorize]
public partial class Home : ComponentBase
{
[Inject]
public required IUserManager UserManager { get; set; }
public User<Profile>? User { get; set; }
[CascadingParameter]
protected Task<AuthenticationState>? AuthenticationStateTask { get; set; }
protected override async Task OnInitializedAsync()
{
User = await UserManager.GetUserAsync<User<Profile>>(AuthenticationStateTask!);
}
private async Task OnLoginButtonClickAsync(MouseEventArgs obj)
{
await UserManager.SignInRedirectAsync();
}
private async Task OnLogoutButtonClickAsync(MouseEventArgs obj)
{
await UserManager.SignOutRedirectAsync();
}
}
ユーザーが認証 (Authentication) されると、User プロパティにユーザー情報が設定されます。
チェックポイント: アプリケーションをテストする
これで、アプリケーションをテストできます：
- アプリケーションを実行すると、サインインボタンが表示されます。
- サインインボタンをクリックすると、SDK がサインインプロセスを初期化し、Logto のサインインページにリダイレクトされます。
- サインインすると、アプリケーションに戻り、サインアウトボタンが表示されます。
- サインアウトボタンをクリックして、トークンストレージをクリアし、サインアウトします。
OAuth2 コネクターを追加する
迅速なサインインを可能にし、ユーザーのコンバージョンを向上させるために、アイデンティティプロバイダー (IdP) として .NET Core (Blazor WebAssembly) を接続します。Logto ソーシャルコネクターは、いくつかのパラメーター入力を許可することで、この接続を数分で確立するのに役立ちます。
ソーシャルコネクターを追加するには、次の手順に従ってください：
- Console > Connectors > Social Connectors に移動します。
- 「ソーシャルコネクターを追加」をクリックし、「OAuth2」を選択します。
- README ガイドに従い、必要なフィールドを完了し、設定をカスタマイズします。
インプレースコネクターガイドに従っている場合は、次のセクションをスキップできます。
標準 OAuth 2.0 アプリ を設定する
OAuth アプリを作成する
このページを開いたときには、接続したいソーシャルアイデンティティプロバイダーがすでに決まっていると考えています。最初に行うべきことは、そのアイデンティティプロバイダーが OAuth プロトコルをサポートしていることを確認することです。これは有効なコネクターを設定するための前提条件です。その後、アイデンティティプロバイダーの指示に従って、OAuth 認可のための関連アプリを登録および作成します。
コネクターを設定する
セキュリティ上の考慮から、"Authorization Code" グラントタイプのみをサポートしており、これは Logto のシナリオに完全に適合します。
clientId と clientSecret は、OAuth アプリの詳細ページで見つけることができます。
clientId: クライアント ID は、認可サーバーへの登録時にクライアントアプリケーションを識別する一意の識別子です。この ID は、認可サーバーがクライアントアプリケーションのアイデンティティを確認し、その特定のクライアントアプリケーションに関連付けられた認可されたアクセス トークンを関連付けるために使用されます。
clientSecret: クライアントシークレットは、登録時に認可サーバーからクライアントアプリケーションに発行される秘密のキーです。クライアントアプリケーションは、この秘密キーを使用して、アクセス トークンを要求する際に認可サーバーに対して自分自身を認証します。クライアントシークレットは機密情報と見なされ、常に安全に保たれるべきです。
tokenEndpointAuthMethod: トークンエンドポイント認証方法は、クライアントアプリケーションがアクセス トークンを要求する際に認可サーバーに対して自分自身を認証するために使用されます。サポートされている方法を確認するには、OAuth 2.0 サービスプロバイダーの OpenID Connect ディスカバリエンドポイントで利用可能な token_endpoint_auth_methods_supported フィールドを参照するか、OAuth 2.0 サービスプロバイダーが提供する関連ドキュメントを参照してください。
clientSecretJwtSigningAlgorithm (オプション): tokenEndpointAuthMethod が client_secret_jwt の場合にのみ必要です。クライアントシークレット JWT 署名アルゴリズムは、トークンリクエスト中に認可サーバーに送信される JWT をクライアントアプリケーションが署名するために使用されます。
scope: スコープパラメータは、クライアントアプリケーションがアクセスを要求しているリソースと権限のセットを指定するために使用されます。スコープパラメータは通常、特定の権限を表す値のスペースで区切られたリストとして定義されます。たとえば、スコープ値が "read write" の場合、クライアントアプリケーションがユーザーのデータへの読み取りおよび書き込みアクセスを要求していることを示すかもしれません。
ソーシャルベンダーのドキュメントで authorizationEndpoint、tokenEndpoint、userInfoEndpoint を見つけることが期待されます。
authenticationEndpoint: このエンドポイントは、認証 (Authentication) プロセスを開始するために使用されます。認証 (Authentication) プロセスには通常、ユーザーがログインし、クライアントアプリケーションがユーザーのリソースにアクセスするための認可を与えることが含まれます。
tokenEndpoint: このエンドポイントは、クライアントアプリケーションが要求されたリソースにアクセスするために使用できるアクセス トークンを取得するために使用されます。クライアントアプリケーションは通常、アクセス トークンを受け取るために、グラントタイプと認可コードを含むリクエストをトークンエンドポイントに送信します。
userInfoEndpoint: このエンドポイントは、クライアントアプリケーションがユーザーのフルネーム、メールアドレス、またはプロフィール写真などの追加情報を取得するために使用されます。ユーザー情報エンドポイントは通常、クライアントアプリケーションがトークンエンドポイントからアクセス トークンを取得した後にアクセスされます。
Logto は、通常標準ではないソーシャルベンダーのプロファイルからのマッピングをカスタマイズできる profileMap フィールドも提供しています。キーは Logto の標準ユーザープロファイルフィールド名であり、対応する値はソーシャルプロファイルのフィールド名であるべきです。現在の段階では、Logto はソーシャルプロファイルから 'id'、'name'、'avatar'、'email'、'phone' のみを考慮し、'id' のみが必須で、他はオプションフィールドです。
responseType と grantType は、認可コードグラントタイプでのみ固定値にできるため、オプションとし、デフォルト値が自動的に入力されます。
たとえば、Google ユーザープロファイルのレスポンス を見つけることができ、そのため profileMap は次のようになります：
{
"id": "sub",
"avatar": "picture"
}
カスタマイズパラメータを配置するためのオプションの customConfig キーを提供しています。
各ソーシャルアイデンティティプロバイダーは、OAuth 標準プロトコルに独自のバリエーションを持つことがあります。希望するソーシャルアイデンティティプロバイダーが OAuth 標準プロトコルに厳密に従っている場合、customConfig を気にする必要はありません。
設定タイプ
| 名前 | タイプ | 必須 |
|---|---|---|
| authorizationEndpoint | string | true |
| userInfoEndpoint | string | true |
| clientId | string | true |
| clientSecret | string | true |
| tokenEndpointResponseType | enum | false |
| responseType | string | false |
| grantType | string | false |
| tokenEndpoint | string | false |
| scope | string | false |
| customConfig | Record<string, string> | false |
| profileMap | ProfileMap | false |
| ProfileMap フィールド | タイプ | 必須 | デフォルト値 |
|---|---|---|---|
| id | string | false | id |
| name | string | false | name |
| avatar | string | false | avatar |
| string | false | ||
| phone | string | false | phone |
設定を保存する
Logto コネクター設定エリアで必要な値をすべて記入したことを確認してください。「保存して完了」または「変更を保存」をクリックすると、OAuth2 コネクターが利用可能になります。
サインイン体験で OAuth2 コネクターを有効にする
ソーシャルコネクターを正常に作成すると、サインイン体験で「OAuth2 で続行」ボタンとして有効にすることができます。
- コンソール > サインイン体験 > サインアップとサインイン に移動します。
- （オプション）ソーシャルログインのみが必要な場合は、サインアップ識別子に「該当なし」を選択します。
- 設定済みの OAuth2 コネクターを「ソーシャルサインイン」セクションに追加します。
テストと検証
.NET Core (Blazor WebAssembly) アプリに戻ります。これで OAuth2 を使用してサインインできるはずです。お楽しみください！
さらなる読み物
エンドユーザーフロー：Logto は、MFA やエンタープライズシングルサインオン (SSO) を含む即時使用可能な認証 (Authentication) フローを提供し、アカウント設定、セキュリティ検証、マルチテナント体験の柔軟な実装のための強力な API を備えています。
認可 (Authorization)：認可 (Authorization) は、ユーザーが認証 (Authentication) された後に行えるアクションやアクセスできるリソースを定義します。ネイティブおよびシングルページアプリケーションの API を保護し、ロールベースのアクセス制御 (RBAC) を実装する方法を探ります。
組織 (Organizations)：特にマルチテナント SaaS や B2B アプリで効果的な組織機能は、テナントの作成、メンバー管理、組織レベルの RBAC、およびジャストインタイムプロビジョニングを可能にします。
顧客 IAM シリーズ：顧客（または消費者）アイデンティティとアクセス管理に関する連続ブログ投稿で、101 から高度なトピックまでを網羅しています。