メインコンテンツへスキップ

AI を使用して Auth0 を統合する

Claude Code、Cursor、GitHub Copilot などの AI コーディングアシスタントを使用している場合は、agent skills を使うことで、数分で Auth0 認証を自動的に追加できます。インストール:
npx skills add auth0/agent-skills --skill auth0-quickstart --skill auth0-maui
次に、AI アシスタントに次のように依頼します。
Add Auth0 authentication to my .NET MAUI app
AI アシスタントが、Auth0 アプリケーションの作成、認証情報の取得、Auth0 OidcClient MAUI SDK のインストール、コールバック URL の設定、ログイン / ログアウトフローの実装を自動的に行います。agent skills の完全なドキュメント →
このガイドでは、Auth0.OidcClient.MAUI SDK を使用して .NET MAUI アプリケーションに Auth0 を統合する方法を説明します。完了する頃には、単一のコードベースで Android、iOS、macOS、Windows において、ログイン、ログアウト、ユーザープロファイル情報の表示をサポートできるようになります。 このガイドでは、Auth0.OidcClient.MAUI バージョン 1.x を使用します。

​
前提条件

  • .NET 8 または .NET 9 SDK がインストールされていること (ダウンロード)
  • MAUI workload がインストールされていること
  • Auth0 アカウント を持っていること (無料でサインアップ)
  • Visual Studio 2022 (17.8 以降) 、JetBrains Rider、または .NET MAUI 拡張機能を備えた VS Code
環境を確認します。 
dotnet --version        # 8.x または 9.x であること
dotnet workload list    # maui が含まれていること
MAUI ワークロードが見つからない場合は、インストールします。 
dotnet workload install maui

​
はじめに

1

Auth0アプリケーションを設定する

MAUI アプリに必要な認証情報を取得できるよう、Auth0 アプリケーションを設定します。
  1. Auth0 Dashboard > Applications > Applications に移動します
  2. Create Application を選択します
  3. アプリの名前 (例: “My MAUI App”) を入力し、アプリケーションの種類として Native を選択して、Create をクリックします
  4. Application Details ページの Settings タブに移動します
  5. ドメイン と クライアントID の値を控えておきます。これらは後で使用します
Settings タブで Application URIs までスクロールし、次の URL を設定します。.NET MAUI アプリでは、HTTP URL ではなくカスタム URI スキーム (例: myapp://callback) を使用します。Allowed Callback URLs:
myapp://callback
許可されたログアウトURL:
myapp://callback
アプリ固有のスキームを選択します。たとえば、com.mycompany.myapp://callback のような逆順ドメイン名が適しています。
変更を保存 を選択します。
Auth0 に Native アプリケーションがあり、ドメイン と クライアントID を控えており、コールバック URL とログアウト URL が設定されていることを確認します。
2

MAUI プロジェクトを作成する

すでに .NET MAUI プロジェクトがある場合は、ステップ 3 に進んでください。ない場合は、.NET CLI を使用して作成してください。
dotnet new maui -n MyMauiApp
cd MyMauiApp
3

Auth0 MAUI SDKをインストールする

Auth0.OidcClient.MAUI NuGet パッケージをプロジェクトに追加します。
dotnet add package Auth0.OidcClient.MAUI
パッケージがエラーなくインストールされたことを確認するために、dotnet restore を実行します。
4

プラットフォーム別のコールバック処理を設定する

.NET MAUI アプリでは、認証後にシステム ブラウザーからアプリにリダイレクトできるよう、各プラットフォームでコールバック ハンドラーを登録する必要があります。対象とする各プラットフォームの手順に従ってください。
Platforms/Android/WebAuthenticatorActivity.cs に新しいファイルを作成します。
Platforms/Android/WebAuthenticatorActivity.cs
using Android.App;
using Android.Content;
using Android.Content.PM;

namespace MyMauiApp.Platforms.Android;

[Activity(NoHistory = true, LaunchMode = LaunchMode.SingleTop, Exported = true)]
[IntentFilter(new[] { Intent.ActionView },
              Categories = new[] { Intent.CategoryDefault, Intent.CategoryBrowsable },
              DataScheme = CALLBACK_SCHEME)]
public class WebAuthenticatorActivity : Microsoft.Maui.Authentication.WebAuthenticatorCallbackActivity
{
    const string CALLBACK_SCHEME = "myapp";
}
myapp は、手順 1 で設定した URI スキームに置き換えてください。
CALLBACK_SCHEME の値は、RedirectUri のスキーム、および Auth0 の Allowed Callback URLs と完全に一致している必要があります。
5

ログインとログアウトを追加する

ログイン/ログアウトのロジックを含む ViewModel、UI 用の XAML ページ、それらを関連付けるコードビハインド ファイルの 3 つのファイルを作成または変更する必要があります。
ViewModels/MainPageViewModel.cs に ViewModel を作成します。
ViewModels/MainPageViewModel.cs
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Input;
using Auth0.OidcClient;

namespace MyMauiApp.ViewModels;

public class MainPageViewModel : INotifyPropertyChanged
{
    private readonly Auth0Client _client;
    private string _name;
    private string _email;
    private bool _isAuthenticated;

    public event PropertyChangedEventHandler PropertyChanged;

    public string Name
    {
        get => _name;
        set { _name = value; OnPropertyChanged(); }
    }

    public string Email
    {
        get => _email;
        set { _email = value; OnPropertyChanged(); }
    }

    public bool IsAuthenticated
    {
        get => _isAuthenticated;
        set
        {
            _isAuthenticated = value;
            OnPropertyChanged();
            OnPropertyChanged(nameof(IsNotAuthenticated));
        }
    }

    public bool IsNotAuthenticated => !IsAuthenticated;

    public ICommand LoginCommand { get; }
    public ICommand LogoutCommand { get; }

    public MainPageViewModel(Auth0Client client)
    {
        _client = client;
        LoginCommand = new Command(async () => await LoginAsync());
        LogoutCommand = new Command(async () => await LogoutAsync());
    }

    private async Task LoginAsync()
    {
        var loginResult = await _client.LoginAsync();

        if (loginResult.IsError)
        {
            if (loginResult.Error == "UserCancel")
                return; // ユーザーがブラウザーを閉じた場合 — エラーではありません

            await Shell.Current.DisplayAlert("Login failed", loginResult.Error, "OK");
            return;
        }

        // IDトークンからユーザープロファイルの claims を読み取る
        Name = loginResult.User.FindFirst(c => c.Type == "name")?.Value;
        Email = loginResult.User.FindFirst(c => c.Type == "email")?.Value;
        IsAuthenticated = true;
    }

    private async Task LogoutAsync()
    {
        await _client.LogoutAsync();

        Name = null;
        Email = null;
        IsAuthenticated = false;
    }

    private void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}
これで、プロジェクトにはログイン コマンドとログアウト コマンドを持つ ViewModel、データ バインディングされた XAML ページ、それらを接続するコードビハインドがそろいました。
6

サービスを登録して、Auth0 クライアントをインスタンス化する

次に、MauiProgram.cs で依存性注入を使用して Auth0Client、ViewModel、ページを登録します。これにより各要素が連携され、Auth0 クライアントが ViewModel に、ViewModel がページに注入されます。
MauiProgram.cs
using Auth0.OidcClient;
using MyMauiApp.ViewModels;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        // 手順1の認証情報でAuth0クライアントを設定する
        builder.Services.AddSingleton(new Auth0Client(new Auth0ClientOptions
        {
            Domain = "{yourDomain}",
            ClientId = "{yourClientId}",
            RedirectUri = "myapp://callback",
            PostLogoutRedirectUri = "myapp://callback"
        }));

        // Register the page and ViewModel created in Step 5
        builder.Services.AddTransient<MainPage>();
        builder.Services.AddTransient<MainPageViewModel>();

        return builder.Build();
    }
}
{yourDomain} と {yourClientId} は、Auth0 のアプリケーション設定 (ステップ 1) の値に置き換えてください。 RedirectUri と PostLogoutRedirectUri は MAUI アプリでは必須です。Auth0 Dashboard で入力したものと同じコールバック URL を使用してください。
7

アプリを起動する

.NET MAUI アプリケーションをビルドして実行する想定されるフロー:
  1. アプリが起動し、ログイン ボタンが表示されます
  2. ログイン をタップすると、Auth0 Universal Login がシステム ブラウザーで開きます
  3. 認証を完了します (サインアップまたはログイン)
  4. ブラウザーからアプリにリダイレクトされます
  5. アプリに名前とメールアドレス、および ログアウト ボタンが表示されます
これで、.NET MAUI アプリケーションで Auth0 のログイン機能が完全に動作するようになりました。

​
トラブルシューティング

症状: ブラウザーに「Callback URL mismatch. The provided redirect_uri is not in the list of allowed callback URLs.」と表示されます。修正方法:
  1. コード内の Client ID が、Auth0 Dashboard で設定したアプリケーションのものと一致していることを確認します
  2. Allowed Callback URLs フィールドをクリアし、myapp://callback を手動で入力し直します。コピー＆ペーストすると、末尾に見えない空白や改行が入り込むことがあります
  3. 完全に一致していることを確認します。末尾のスラッシュなし、英小文字のみ、空白なしです
  4. Dashboard で Save Changes を選択し、値が保存されていることを確認します
  5. ブラウザーのアドレスバーで redirect_uri クエリパラメーターを確認し、アプリが実際に何を送信しているかを確認します
症状: ログインのためにブラウザーは開きますが、アプリにリダイレクトされません。修正方法:
  1. WebAuthenticatorActivity.cs の DataScheme が RedirectUri のスキームと一致していることを確認します
  2. Activity に Exported = true が設定されていることを確認します
  3. Auth0 Dashboard の Allowed Callback URLs が完全に一致していることを確認します
症状: ブラウザーは開きますが、元のアプリに戻る代わりにアプリの2つ目のインスタンスが起動します。修正方法: Auth0.OidcClient.Platforms.Windows.Activator.Default.CheckRedirectionActivation() が、Platforms/Windows/App.xaml.cs の App コンストラクター内で 必ず最初の行 として呼び出されていること、および Package.appxmanifest のプロトコル名がコールバック URI のスキームと一致していることを確認してください。
症状: ログイン後、ブラウザーにエラーが表示されるか何も起こらず、アプリがコールバックを受信しません。修正方法: アプリは パッケージ化された (MSIX) アプリケーションである必要があります。.csproj ファイルに <WindowsPackageType> 要素があるか確認してください。
  • None に設定されている場合、プロトコルのアクティブ化は利用できません。その行を削除するか、<WindowsPackageType>MSIX</WindowsPackageType> に変更してください。
  • 要素が存在しない場合、アプリは既定でパッケージ化されています。Package.appxmanifest にステップ 4 の <uap:Protocol> 拡張機能が含まれていることを確認してください。
症状: name、email、または picture クレームが loginResult.User に含まれていません。修正方法: openid profile email が Auth0ClientOptions.Scope に含まれていることを確認してください。スコープをカスタマイズしている場合は、openid が常に含まれていることを確認してください。

​
次のステップ

これで、.NET MAUI アプリで動作する Auth0 統合が完成しました。実装をさらに拡張するには、次のトピックを確認してください。
Auth0 MAUI SDK は、ユーザーに再度プロンプトを表示することなくセッションをサイレントに更新するためのリフレッシュトークンをサポートしています。

​
リフレッシュトークンを有効にする

Scope プロパティに offline_access を追加します。
builder.Services.AddSingleton(new Auth0Client(new Auth0ClientOptions
{
    Domain = "{yourDomain}",
    ClientId = "{yourClientId}",
    RedirectUri = "myapp://callback",
    PostLogoutRedirectUri = "myapp://callback",
    Scope = "openid profile email offline_access"
}));

​
リフレッシュトークンを使用する

ログイン後にリフレッシュトークンを保存し、それを使ってセッションをサイレントに更新します。
// ログイン後
var refreshToken = loginResult.RefreshToken;

// 後でセッションを更新
var refreshResult = await _client.RefreshTokenAsync(refreshToken);

if (!refreshResult.IsError)
{
    var newAccessToken = refreshResult.AccessToken;
    var newIdToken = refreshResult.IdentityToken;
}
ログイン後に RefreshToken が null の場合は、Auth0 Dashboard の API 設定で Allow Offline Access が有効になっていることを確認してください (audience パラメーターを使用している場合) 。
API 用にスコープ設定されたアクセストークンを取得するには、Scope を設定し、LoginAsync() に audience パラメーターを渡します。
var loginResult = await _client.LoginAsync(new
{
    audience = "https://myapi.example.com"
});

// アクセストークンはこの API 用にスコープ設定されます
var accessToken = loginResult.AccessToken;

var httpClient = new HttpClient();
httpClient.DefaultRequestHeaders.Authorization =
    new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", accessToken);

var response = await httpClient.GetAsync("https://myapi.example.com/posts");
特定の Auth0 組織内でユーザーを認証します。
var loginResult = await _client.LoginAsync(new
{
    organization = "org_abc123"
});
詳細については、組織 を参照してください。
MaxAge を使用すると、指定した時間の経過後に再認証を強制できます。
new Auth0ClientOptions
{
    Domain = "{yourDomain}",
    ClientId = "{yourClientId}",
    RedirectUri = "myapp://callback",
    PostLogoutRedirectUri = "myapp://callback",
    MaxAge = TimeSpan.FromMinutes(30)
}
色、ロゴ、テキストなどを含め、Auth0 のログインページをブランドに合わせて調整できます。詳細については、Customize Universal Login を参照してください。

​
追加リソース

SDK リポジトリ

ソースコード、サンプル、API リファレンス

トークンのベストプラクティス

トークンのセキュリティに関するベストプラクティス

PKCE フロー

ネイティブアプリで安全に認証する方法

コミュニティフォーラム

Auth0 コミュニティでサポートを受ける