GitHub (GitHub App) サインインを .NET Core (Blazor Server) で構築する方法

新しい友達のために:

Logto は、モダンなアプリや SaaS 製品向けに設計された Auth0 の代替です。 Cloud とオープンソースの両方のサービスを提供し、アイデンティティと管理 (IAM) システムを迅速に立ち上げるのに役立ちます。認証 (Authentication)、認可 (Authorization)、マルチテナント管理をすべて一つにまとめて楽しんでください。

Logto Cloud で無料の開発テナントから始めることをお勧めします。これにより、すべての機能を簡単に探索できます。

この記事では、.NET Core (Blazor Server) と Logto を使用して、GitHub (GitHub App) サインイン体験（ユーザー認証 (Authentication)）を迅速に構築する手順を説明します。

前提条件

稼働中の Logto インスタンス。紹介ページをチェックして始めてください。
.NET Core (Blazor Server) の基本的な知識。
使用可能な GitHub (GitHub App) アカウント。

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

Logto は OpenID Connect (OIDC) 認証 (Authentication) と OAuth 2.0 認可 (Authorization) に基づいています。これは、複数のアプリケーション間でのフェデレーテッドアイデンティティ管理をサポートし、一般的にシングルサインオン (SSO) と呼ばれます。

あなたの Traditional web アプリケーションを作成するには、次の手順に従ってください：

Logto コンソールを開きます。「Get started」セクションで、「View all」リンクをクリックしてアプリケーションフレームワークのリストを開きます。あるいは、Logto Console > Applications に移動し、「Create application」ボタンをクリックします。
開いたモーダルで、左側のクイックフィルターチェックボックスを使用して、利用可能なすべての "Traditional web" フレームワークをフィルタリングするか、"Traditional web" セクションをクリックします。".Net Core (Blazor Server)" フレームワークカードをクリックして、アプリケーションの作成を開始します。
アプリケーション名を入力します。例：「Bookstore」と入力し、「Create application」をクリックします。

🎉 タダーン！Logto で最初のアプリケーションを作成しました。詳細な統合ガイドを含むお祝いページが表示されます。ガイドに従って、アプリケーションでの体験を確認してください。

.Net Core (Blazor Server) SDK を統合する

ヒント:

次のデモンストレーションは .NET Core 8.0 を基に構築されています。SDK は .NET 6.0 以上に対応しています。
.NET Core のサンプルプロジェクトは GitHub リポジトリで利用可能です。

インストール

プロジェクトに NuGet パッケージを追加します：

dotnet add package Logto.AspNetCore.Authentication

Logto 認証 (Authentication) を追加する

Startup.cs（または Program.cs）を開き、次のコードを追加して Logto 認証 (Authentication) サービスを登録します：

Program.cs
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"];
});

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

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

進む前に、.NET Core 認証 (Authentication) ミドルウェアにおける混乱しやすい用語を 2 つ明確にする必要があります：

CallbackPath: ユーザーがサインインした後に Logto がユーザーをリダイレクトする URI （Logto における「リダイレクト URI」）
RedirectUri: Logto 認証 (Authentication) ミドルウェアで必要なアクションが実行された後にリダイレクトされる URI

サインインプロセスは次のように示されます：

同様に、.NET Core にはサインアウトフローのための SignedOutCallbackPath と RedirectUri もあります。

明確にするために、これらを次のように呼びます：

使用する用語	.NET Core 用語
Logto リダイレクト URI	CallbackPath
Logto サインアウト後リダイレクト URI	SignedOutCallbackPath
アプリケーションリダイレクト URI	RedirectUri

この認証 (Authentication) プロセスは OpenID Connect (OIDC) プロトコルに従い、Logto はユーザーのサインインを保護するために厳格なセキュリティ対策を講じています。
複数のアプリがある場合、同じアイデンティティプロバイダー (Logto) を使用できます。ユーザーがあるアプリにサインインすると、Logto は別のアプリにアクセスした際に自動的にサインインプロセスを完了します。

リダイレクトベースのサインインの理論と利点について詳しく知るには、Logto サインイン体験の説明を参照してください。

リダイレクト URI を設定する

注記:

以下のコードスニペットでは、あなたのアプリが http://localhost:3000/ で実行されていると仮定しています。

まず、Logto リダイレクト URI を設定しましょう。次の URI を Logto アプリケーション詳細ページの「リダイレクト URI」リストに追加します：

http://localhost:3000/Callback

Logto サインアウト後リダイレクト URI を設定するには、次の URI を Logto アプリケーション詳細ページの「サインアウト後リダイレクト URI」リストに追加します：

http://localhost:3000/SignedOutCallback

デフォルトパスを変更する

Logto リダイレクト URI にはデフォルトパス /Callback があり、Logto サインアウト後リダイレクト URI にはデフォルトパス /SignedOutCallback があります。

特別な要件がない場合は、そのままにしておくことができます。変更したい場合は、LogtoOptions の CallbackPath と SignedOutCallbackPath プロパティを設定できます：

Program.cs
builder.Services.AddLogtoAuthentication(options =>
{
  // 他の設定...
  options.CallbackPath = "/Foo";
  options.SignedOutCallbackPath = "/Bar";
});

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

ルートを追加する

Blazor Server は SignalR を使用してサーバーとクライアント間で通信するため、HTTP コンテキストを直接操作するメソッド（チャレンジやリダイレクトの発行など）は、Blazor コンポーネントから呼び出された場合、期待通りに動作しません。

これを正しく行うためには、サインインとサインアウトのリダイレクト用に 2 つのエンドポイントを明示的に追加する必要があります：

Program.cs
app.MapGet("/SignIn", async context =>
{
    if (!(context.User?.Identity?.IsAuthenticated ?? false))
    {
        await context.ChallengeAsync(new AuthenticationProperties { RedirectUri = "/" });
    } else {
        context.Response.Redirect("/");
    }
});

app.MapGet("/SignOut", async context =>
{
    if (context.User?.Identity?.IsAuthenticated ?? false)
    {
        await context.SignOutAsync(new AuthenticationProperties { RedirectUri = "/" });
    } else {
        context.Response.Redirect("/");
    }
});

これで、これらのエンドポイントにリダイレクトしてサインインとサインアウトをトリガーできます。

サインイン / サインアウトボタンを実装する

Razor コンポーネントに次のコードを追加します：

Components/Pages/Index.razor
@using Microsoft.AspNetCore.Components.Authorization
@using System.Security.Claims
@inject AuthenticationStateProvider AuthenticationStateProvider
@inject NavigationManager NavigationManager

@* ... *@

<p>認証 (Authentication) 済み: @User.Identity?.IsAuthenticated</p>
@if (User.Identity?.IsAuthenticated == true)
{
    <button @onclick="SignOut">サインアウト</button>
}
else
{
    <button @onclick="SignIn">サインイン</button>
}

@* ... *@

@code {
    private ClaimsPrincipal? User { get; set; }

    protected override async Task OnInitializedAsync()
    {
        var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
        User = authState.User;
    }

    private void SignIn()
    {
        NavigationManager.NavigateTo("/SignIn", forceLoad: true);
    }

    private void SignOut()
    {
        NavigationManager.NavigateTo("/SignOut", forceLoad: true);
    }
}

説明：

インジェクトされた AuthenticationStateProvider は、現在のユーザーの認証 (Authentication) 状態を取得し、User プロパティを設定するために使用されます。
SignIn と SignOut メソッドは、それぞれサインインおよびサインアウトのエンドポイントにユーザーをリダイレクトするために使用されます。Blazor Server の性質上、リダイレクションをトリガーするために NavigationManager を強制ロードで使用する必要があります。

ページは、ユーザーが認証 (Authentication) されていない場合は「サインイン」ボタンを表示し、認証 (Authentication) されている場合は「サインアウト」ボタンを表示します。

`<AuthorizeView />` コンポーネント

代わりに、AuthorizeView コンポーネントを使用して、ユーザーの認証 (Authentication) 状態に基づいてコンテンツを条件付きでレンダリングすることができます。このコンポーネントは、認証 (Authentication) 済みユーザーと未認証ユーザーに異なるコンテンツを表示したい場合に便利です。

Razor コンポーネントに次のコードを追加します：

Components/Pages/Index.razor
@using Microsoft.AspNetCore.Components.Authorization

@* ... *@

<AuthorizeView>
    <Authorized>
        <p>Name: @User?.Identity?.Name</p>
        @* 認証 (Authentication) 済みユーザー向けのコンテンツ *@
    </Authorized>
    <NotAuthorized>
        @* 未認証ユーザー向けのコンテンツ *@
    </NotAuthorized>
</AuthorizeView>

@* ... *@

AuthorizeView コンポーネントは、Task<AuthenticationState> 型のカスケードパラメーターを必要とします。このパラメーターを取得する直接的な方法は、<CascadingAuthenticationState> コンポーネントを追加することです。ただし、Blazor Server の性質上、レイアウトやルートコンポーネントに単純にコンポーネントを追加することはできません（期待通りに動作しない可能性があります）。代わりに、ビルダー (Program.cs または Startup.cs) に次のコードを追加してカスケードパラメーターを提供します：

Program.cs
builder.Services.AddCascadingAuthenticationState();

その後、AuthorizeView コンポーネントを必要とするすべてのコンポーネントで使用できます。

チェックポイント: アプリケーションをテストする

これで、アプリケーションをテストできます：

アプリケーションを実行すると、サインインボタンが表示されます。
サインインボタンをクリックすると、SDK がサインインプロセスを初期化し、Logto のサインインページにリダイレクトされます。
サインインすると、アプリケーションに戻り、サインアウトボタンが表示されます。
サインアウトボタンをクリックして、トークンストレージをクリアし、サインアウトします。

GitHub (GitHub App) コネクターを追加する

迅速なサインインを有効にし、ユーザーコンバージョンを向上させるために、アイデンティティプロバイダー (IdP) として .Net Core (Blazor Server) を接続します。Logto ソーシャルコネクターは、いくつかのパラメーター入力を許可することで、この接続を数分で確立するのに役立ちます。

ソーシャルコネクターを追加するには、次の手順に従ってください：

Console > Connectors > Social Connectors に移動します。
「Add social connector」をクリックし、「GitHub (GitHub App)」を選択します。
README ガイドに従い、必要なフィールドを完了し、設定をカスタマイズします。

注記:

インプレースコネクターガイドに従っている場合は、次のセクションをスキップできます。

GitHub (GitHub App) を設定する

ステップ 1: GitHub App を作成する

GitHub を認証 (Authentication) プロバイダーとして利用する前に、GitHub 上で GitHub App を作成し、OAuth 2.0 資格情報を取得する必要があります。

GitHub にアクセスし、アカウントでサインインします。必要に応じて新しいアカウントを作成してください。
Settings > Developer settings > GitHub Apps に移動します。
New GitHub App をクリックして新しいアプリケーションを登録します：
- GitHub App name：アプリの一意な名前を入力します。名前は 34 文字以内で、GitHub 全体で一意である必要があります。
- Homepage URL：アプリケーションのホームページ URL を入力します。
- Callback URL：Logto の GitHub コネクターから Callback URI をコピーし、ここに貼り付けます。必要に応じて複数のコールバック URL を追加できます。ユーザーが GitHub でサインインした後、ここに認可コード付きでリダイレクトされ、Logto が認証 (Authentication) を完了します。
- Expire user authorization tokens：この項目は チェックしたまま（推奨）にします。これにより、トークンの有効期限とリフレッシュトークンが有効になり、セキュリティが強化されます。
- Request user authorization (OAuth) during installation：インストール時にユーザーにアプリの認可を求めたい場合は、オプションでチェックします。
- Webhook：Webhook イベントが不要な場合は Active のチェックを外します。認証 (Authentication) のみの用途では通常 Webhook は不要です。
Permissions でアプリに必要な権限を設定します（詳細は下記ステップ 2 を参照）。
Where can this GitHub App be installed? では、どの GitHub アカウントのユーザーでも認証 (Authentication) に利用できるようにしたい場合は Any account を選択します。
Create GitHub App をクリックして GitHub App を作成します。

注記:

OAuth Apps とは異なり、GitHub Apps は広範なスコープではなく細かな権限で管理されます。アプリ作成時に GitHub ダッシュボードで権限を設定し、ユーザーは認可 (Authorization) 時に特定のリポジトリへのアクセスを許可します。

GitHub Apps のセットアップ詳細については Registering a GitHub App を参照してください。

ステップ 2: GitHub で権限を設定する

GitHub Apps は OAuth スコープの代わりに細かな権限で管理されます。GitHub App の作成または編集時に GitHub ダッシュボードで権限を設定 する必要があります。これらの権限によってアプリがアクセスできるデータが決まります。

GitHub App の権限の理解

権限は 3 種類に分類されます：

リポジトリ権限：リポジトリレベルのリソース（コード、課題、プルリクエストなど）へのアクセス
組織権限：組織レベルのリソース（メンバー、チーム、プロジェクトなど）へのアクセス
アカウント権限：ユーザーアカウントデータ（メール、プロフィール、フォロワーなど）へのアクセス

各権限ごとに次のいずれかを選択できます：

No access：このリソースにアクセスできません
Read-only：このリソースを読み取りのみ可能
Read & write：このリソースの読み取りと変更が可能

認証 (Authentication) 用の推奨権限

基本的な「GitHub でサインイン」機能には、最低限次の アカウント権限 を設定してください：

権限	アクセスレベル	目的
Email addresses	Read-only	アカウント作成のためにユーザーのメールアドレスを取得

ヒント:

GitHub Apps は、ユーザーの代理で動作する場合、公開プロフィール情報の読み取り権限を暗黙的に持っています。ユーザー名、アバター、公開プロフィール URL などの基本的なプロフィールデータについては明示的な権限リクエストは不要です。

API アクセス用の追加権限

認証 (Authentication) 以外で GitHub API へのアクセスが必要な場合は、GitHub ダッシュボードで該当する権限を追加してください。よくある例は以下の通りです：

権限タイプ	権限	アクセスレベル	ユースケース
リポジトリ	Contents	Read-only / Read & write	リポジトリのファイルやコードへのアクセス
リポジトリ	Issues	Read & write	課題の作成と管理
リポジトリ	Pull requests	Read & write	プルリクエストの作成と管理
リポジトリ	Metadata	Read-only	リポジトリのメタデータへのアクセス（多くの操作で必須）
組織	Members	Read-only	組織メンバーの一覧取得
アカウント	Followers	Read-only	ユーザーのフォロワーやフォロー中ユーザーへのアクセス

これは一部の例であり、GitHub Apps ではさらに多くの細かな権限がサポートされています。完全な一覧は Permissions required for GitHub Apps を参照してください。

OAuth Apps との主な違い:

OAuth Apps では Logto コネクターでスコープを設定しますが、GitHub App の権限はすべて GitHub ダッシュボードで管理します。Logto の GitHub コネクターの Scope フィールドは空のままで構いません — GitHub Apps では従来の OAuth スコープは使用しません。

必要な権限を GitHub 側で設定し、ユーザーは認可 (Authorization) 時にアクセス許可を求められます。

ステップ 3: Logto コネクターを設定する

GitHub App を作成したら、その設定ページにリダイレクトされ、資格情報を取得できます。

GitHub App の設定ページで Client ID をコピーし、Logto の clientId フィールドに貼り付けます。
Client secrets で Generate a new client secret をクリックします。生成されたシークレットをコピーし、Logto の clientSecret フィールドに貼り付けます。
Logto で Save and Done をクリックし、アイデンティティシステムと GitHub を接続します。

警告:

Client secret は安全に保管し、クライアントサイドのコードで絶対に公開しないでください。GitHub の client secret は紛失した場合に復元できません — 新たに生成する必要があります。

注記:

GitHub App の Client ID は App ID とは異なります。必ず設定ページに「Client ID」と表示されているものを使用してください（App ID ではありません）。

ステップ 4: 一般設定

GitHub への接続を妨げることはありませんが、エンドユーザーの認証 (Authentication) 体験に影響する一般的な設定をいくつか紹介します。

プロフィール情報の同期

GitHub コネクターでは、GitHub のユーザー情報から Logto ユーザープロフィールへの同期方法（name、avatar、email など）を設定できます。次のオプションから選択してください：

サインアップ時のみ同期：ユーザーが初めてサインインしたときにプロフィール情報を一度だけ取得します。
サインイン時に常に同期：ユーザーがサインインするたびにプロフィール情報を更新します。

GitHub API へのアクセス用トークンの保存（オプション）

GitHub API へのアクセスやユーザー認可での操作（ソーシャルサインインやアカウント連携経由）を行いたい場合は、Logto でトークン保存を有効にしてください：

GitHub App の設定（ステップ 2）で必要な権限を設定します。
Logto の GitHub コネクターで Store tokens for persistent API access を有効にします。Logto はアクセストークンとリフレッシュトークンの両方を Secret Vault に安全に保存します。

注記:

GitHub Apps は常にリフレッシュトークンを発行するため、Logto は両方のトークンを自動的に保存します。アクセストークンは 8 時間で期限切れになりますが、Logto はリフレッシュトークンを使って新しいアクセストークンを取得でき、最大 6 か月間 API アクセスが途切れません。

ステップ 5: 統合のテスト（オプション）

本番運用前に、GitHub App 統合をテストしてください：

Logto の開発テナントでコネクターを利用します。
ユーザーが GitHub でサインインできることを確認します。
認可 (Authorization) 時に正しい権限がユーザーに求められることを確認します。
トークン保存を有効にした場合、アクセストークン（およびリフレッシュトークン）が正しく保存されていることを確認します。
保存されたトークンを使って API コールをテストし、権限が期待通りに機能しているか確認します。

GitHub Apps は、どの GitHub ユーザーアカウントでもすぐに利用できます。他のプラットフォームのようにテストユーザーやアプリ承認は不要です。ただし、アプリが組織にインストールされている場合は、組織オーナーによるインストール承認が必要な場合があります。

設定を保存する

Logto コネクター設定エリアで必要な値をすべて記入したことを確認してください。「保存して完了」または「変更を保存」をクリックすると、GitHub (GitHub App) コネクターが利用可能になります。

ソーシャルコネクターを正常に作成したら、サインイン体験で「GitHub (GitHub App) で続行」ボタンとして有効にすることができます。

Console > サインイン体験 > サインアップとサインインに移動します。
（オプション）ソーシャルログインのみが必要な場合は、サインアップ識別子に「該当なし」を選択します。
設定済みの GitHub (GitHub App) コネクターを「ソーシャルサインイン」セクションに追加します。

テストと検証

.NET Core (Blazor Server) アプリに戻ります。これで GitHub (GitHub App) を使用してサインインできるはずです。お楽しみください！

さらなる読み物

エンドユーザーフロー：Logto は、MFA やエンタープライズシングルサインオン (SSO) を含む即時使用可能な認証 (Authentication) フローを提供し、アカウント設定、セキュリティ検証、マルチテナント体験の柔軟な実装のための強力な API を備えています。

認可 (Authorization)：認可 (Authorization) は、ユーザーが認証 (Authentication) された後に行えるアクションやアクセスできるリソースを定義します。ネイティブおよびシングルページアプリケーションの API を保護し、ロールベースのアクセス制御 (RBAC) を実装する方法を探ります。

組織 (Organizations)：特にマルチテナント SaaS や B2B アプリで効果的な組織機能は、テナントの作成、メンバー管理、組織レベルの RBAC、およびジャストインタイムプロビジョニングを可能にします。

顧客 IAM シリーズ：顧客（または消費者）アイデンティティとアクセス管理に関する連続ブログ投稿で、101 から高度なトピックまでを網羅しています。

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

.Net Core (Blazor Server) SDK を統合する​

インストール​

Logto 認証 (Authentication) を追加する​

サインインおよびサインアウトフロー​

リダイレクトベースのサインインについて​

リダイレクト URI を設定する​

デフォルトパスを変更する​

ルートを追加する​

サインイン / サインアウトボタンを実装する​

<AuthorizeView /> コンポーネント​

チェックポイント: アプリケーションをテストする​

GitHub (GitHub App) コネクターを追加する​

GitHub (GitHub App) を設定する​

ステップ 1: GitHub App を作成する​

ステップ 2: GitHub で権限を設定する​

GitHub App の権限の理解​

認証 (Authentication) 用の推奨権限​

API アクセス用の追加権限​

ステップ 3: Logto コネクターを設定する​

ステップ 4: 一般設定​

プロフィール情報の同期​

GitHub API へのアクセス用トークンの保存（オプション）​

ステップ 5: 統合のテスト（オプション）​

設定を保存する​

サインイン体験で GitHub (GitHub App) コネクターを有効にする​

テストと検証​

さらなる読み物​