Logto は、モダンなアプリや SaaS 製品向けに設計された Auth0 の代替です。 Cloud と オープンソース の両方のサービスを提供し、アイデンティティと管理 (IAM) システムを迅速に立ち上げるのをサポートします。 認証 (Authentication)、認可 (Authorization)、マルチテナント管理を すべて一つに まとめて楽しめます。
Logto Cloud で無料の開発テナントから始めることをお勧めします。これにより、すべての機能を簡単に探索できます。
この記事では、.NET Core (Blazor WebAssembly) と Logto を使用して、Naver サインイン体験（ユーザー認証 (Authentication)）を迅速に構築する手順を説明します。
前提条件
- 実行中の Logto インスタンス。始めるには 紹介ページ をご覧ください。
- .NET Core (Blazor WebAssembly) の基本的な知識。
- 使用可能な Naver アカウント。
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 のサインインページにリダイレクトされます。
- サインインすると、アプリケーションに戻り、サインアウトボタンが表示されます。
- サインアウトボタンをクリックして、トークンストレージをクリアし、サインアウトします。
Naver コネクターを追加する
迅速なサインインを可能にし、ユーザーのコンバージョンを向上させるために、アイデンティティプロバイダー (IdP) として .NET Core (Blazor WebAssembly) を接続します。Logto ソーシャルコネクターは、いくつかのパラメーター入力を許可することで、この接続を数分で確立するのに役立ちます。
ソーシャルコネクターを追加するには、次の手順に従ってください：
- Console > Connectors > Social Connectors に移動します。
- 「ソーシャルコネクターを追加」をクリックし、「Naver」を選択します。
- README ガイドに従い、必要なフィールドを完了し、設定をカスタマイズします。
インプレースコネクターガイドに従っている場合は、次のセクションをスキップできます。
Naver login を設定する
現在、開発者サイトは韓国語のみサポートしています
現在、Naver Developers サイトは韓国語のみをサポートしています。翻訳ツールの使用を検討してください。
本番環境について
- 本番環境では、Naver チームからのレビューを受ける必要があります。
そうでない場合、登録されたユーザーのみがサインインできます。
맴버관리(Member Manage)メニューからテスターを追加できます。
- レビューを受けるには、アプリケーションプロジェクト設定の
API 설정(API Setting)から애플리케이션 개발 상태(Application Devlopment Status)を確認してください。
Naver Developers でプロジェクトを設定する
- Naver Developers を訪問し、Naver アカウントでサインインします。
- メニューから Application -> 어플리케이션 등록 をクリックして新しいプロジェクトを作成します。
- 以下の手順に従ってアプリケーションを作成します。
アプリケーション名 (어플리케이션 이름)
어플리케이션 이름にアプリケーション名を入力します（この名前はユーザーがサインインする際に表示されます）。
API 使用 (사용 API)
사용 API(API Usage)で네이버 로그인(Naver Login)を選択します。권한(Role)から이메일 주소(Email Address), 별명(Nickname), 프로필 사진(Profile Image)を필수(Neccessary)としてチェックします（これらのオプションをオプションとして추가(Add)としてチェックすることもできますが、ユーザーから情報を取得することはできません）。
サインインオープン API サービス環境 (로그인 오픈 API 서비스 환경)
로그인 오픈 API 서비스 환경(Sign in Open API Service Environment)には、PC웹(PC Web)と모바일웹(Mobile Web)の 2 つの環境を追加します。
PC Web (PC 웹)
서비스 URL(Service URL)にはhttp(s)://YOUR_URLを入力します（例： https://logto.io）。네이버 로그인(Naver Login) Callback URLにはhttp(s)://YOUR_URL/callback/${connector_id}を入力します（例： https://logto.io/callback/${connector_id}）。
Mobile Web (Mobile 웹)
서비스 URL(Service URL)にはhttp(s)://YOUR_URLを入力します（例： https://logto.io）。네이버 로그인(Naver Login) Callback URLにはhttp(s)://YOUR_URL/callback/${connector_id}を入力します（例： https://logto.io/callback/${connector_id}）。
connector_id は Logto 管理コンソールのコネクター詳細ページの上部バーで確認できます。
Logto の設定
設定タイプ
| 名前 | タイプ |
|---|---|
| clientId | string |
| clientSecret | string |
clientId
clientId はプロジェクトの Client ID です。
（Naver developers のプロジェクトの 애플리케이션 정보(Application Info) から確認できます。）
clientSecret
clientSecret はプロジェクトの Client Secret です。
（Naver developers のプロジェクトの 애플리케이션 정보(Application Info) から確認できます。）
設定を保存する
Logto コネクター設定エリアで必要な値をすべて記入したことを確認してください。「保存して完了」または「変更を保存」をクリックすると、Naver コネクターが利用可能になります。
サインイン体験で Naver コネクターを有効にする
ソーシャルコネクターを正常に作成すると、サインイン体験で「Naver で続行」ボタンとして有効にすることができます。
- コンソール > サインイン体験 > サインアップとサインイン に移動します。
- （オプション）ソーシャルログインのみが必要な場合は、サインアップ識別子に「該当なし」を選択します。
- 設定済みの Naver コネクターを「ソーシャルサインイン」セクションに追加します。
テストと検証
.NET Core (Blazor WebAssembly) アプリに戻ります。これで Naver を使用してサインインできるはずです。お楽しみください！
さらなる読み物
エンドユーザーフロー：Logto は、MFA やエンタープライズシングルサインオン (SSO) を含む即時使用可能な認証 (Authentication) フローを提供し、アカウント設定、セキュリティ検証、マルチテナント体験の柔軟な実装のための強力な API を備えています。
認可 (Authorization)：認可 (Authorization) は、ユーザーが認証 (Authentication) された後に行えるアクションやアクセスできるリソースを定義します。ネイティブおよびシングルページアプリケーションの API を保護し、ロールベースのアクセス制御 (RBAC) を実装する方法を探ります。
組織 (Organizations)：特にマルチテナント SaaS や B2B アプリで効果的な組織機能は、テナントの作成、メンバー管理、組織レベルの RBAC、およびジャストインタイムプロビジョニングを可能にします。
顧客 IAM シリーズ：顧客（または消費者）アイデンティティとアクセス管理に関する連続ブログ投稿で、101 から高度なトピックまでを網羅しています。