.NET MAUI アプリケーションにログインを追加する

このガイドでは、Auth0.OidcClient.MAUI SDK を使用して .NET MAUI アプリケーションに Auth0 を統合する方法を説明します。

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 ワークロード がインストールされていること
• 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 アプリでは、認証後にシステム ブラウザーからアプリにリダイレクトできるよう、各プラットフォームでコールバック ハンドラーを登録する必要があります。対象とする各プラットフォームの手順に従ってください。

   Android

   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 と完全に一致している必要があります。

   Windows

   Windows での Auth0 コールバック フローは URI プロトコルのアクティブ化に依存しているため、アプリを パッケージ化 (MSIX) する必要があります。既定の .NET MAUI テンプレートではパッケージ化されたアプリが作成されるため、dotnet new maui または Visual Studio の MAUI テンプレートを使用した場合は変更不要です。

   .csproj に <WindowsPackageType>None</WindowsPackageType> が含まれている場合、アプリは 非パッケージ化 されており、プロトコルのアクティブ化は機能しません。その行を削除するか、<WindowsPackageType>MSIX</WindowsPackageType> に設定して、パッケージ化されたアプリを使用してください。詳しくは、.NET MAUI の Windows パッケージ化に関するドキュメントを参照してください。

   必要な変更は 2 つあります。URI プロトコルを登録し、プロトコルのアクティブ化を処理します。

   1. Platforms/Windows/Package.appxmanifest でプロトコルを登録します。 既存の <Application> 要素内に <Extensions> ブロックを追加します。

   Platforms/Windows/Package.appxmanifest

   <Applications>
     <Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="$targetentrypoint$">
       <Extensions>
         <uap:Extension Category="windows.protocol">
           <uap:Protocol Name="myapp"/>
         </uap:Extension>
       </Extensions>
     </Application>
   </Applications>
   

   2. Platforms/Windows/App.xaml.cs でアクティブ化を処理します。 コンストラクターの先頭行に CheckRedirectionActivation の呼び出しを追加します。

   Platforms/Windows/App.xaml.cs

   public App()
   {
       if (Auth0.OidcClient.Platforms.Windows.Activator.Default.CheckRedirectionActivation())
           return;
   
       this.InitializeComponent();
   }
   

   iOS / macOS

   プラットフォーム固有の設定は不要です。SDK は MAUI の WebAuthenticator を通じて ASWebAuthenticationSession を自動的に使用します。

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

   ログイン/ログアウトのロジックを含む ViewModel、UI 用の XAML ページ、それらを関連付けるコードビハインド ファイルの 3 つのファイルを作成または変更する必要があります。

   MainPageViewModel.cs

   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));
       }
   }
   

   MainPage.xaml

   MainPage.xaml で UI を設定します。

   MainPage.xaml

   <?xml version="1.0" encoding="utf-8" ?>
   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="MyMauiApp.MainPage">
   
       <VerticalStackLayout Spacing="20" Padding="30" VerticalOptions="Center">
   
           <!-- ログアウト中に表示 -->
           <Button Text="Log In"
                   Command="{Binding LoginCommand}"
                   IsVisible="{Binding IsNotAuthenticated}" />
   
           <!-- ログイン中に表示 -->
           <Label Text="{Binding Name, StringFormat='Welcome, {0}!'}"
                  IsVisible="{Binding IsAuthenticated}"
                  FontSize="24"
                  HorizontalOptions="Center" />
   
           <Label Text="{Binding Email}"
                  IsVisible="{Binding IsAuthenticated}"
                  HorizontalOptions="Center" />
   
           <Button Text="Log Out"
                   Command="{Binding LogoutCommand}"
                   IsVisible="{Binding IsAuthenticated}" />
   
       </VerticalStackLayout>
   </ContentPage>
   

   MainPage.xaml.cs

   MainPage.xaml.cs で BindingContext を設定します。

   MainPage.xaml.cs

   namespace MyMauiApp;
   
   public partial class MainPage : ContentPage
   {
       public MainPage(MainPageViewModel viewModel)
       {
           InitializeComponent();
           BindingContext = viewModel;
       }
   }
   

   これで、プロジェクトにはログイン コマンドとログアウト コマンドを持つ 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 のログイン機能が完全に動作するようになりました。

---

​

トラブルシューティング

コールバックURLの不一致

症状: ブラウザーに「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 クエリパラメーターを確認し、アプリが実際に何を送信しているかを確認します

Android: アプリがブラウザーから戻らない

症状: ログインのためにブラウザーは開きますが、アプリにリダイレクトされません。

修正方法:

1. WebAuthenticatorActivity.cs の DataScheme が RedirectUri のスキームと一致していることを確認します
2. Activity に Exported = true が設定されていることを確認します
3. Auth0 Dashboard の Allowed Callback URLs が完全に一致していることを確認します

Windows: ログインがハングしたように見える

症状: ブラウザーは開きますが、元のアプリに戻る代わりにアプリの2つ目のインスタンスが起動します。

修正方法: Auth0.OidcClient.Platforms.Windows.Activator.Default.CheckRedirectionActivation() が、Platforms/Windows/App.xaml.cs の App コンストラクター内で 必ず最初の行 として呼び出されていること、および Package.appxmanifest のプロトコル名がコールバック URI のスキームと一致していることを確認してください。

Windows: プロトコルのアクティブ化が機能しない

症状: ログイン後、ブラウザーにエラーが表示されるか何も起こらず、アプリがコールバックを受信しません。

修正方法: アプリは パッケージ化された (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 を呼び出す

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");

組織（B2B/エンタープライズ）

特定の 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)
}

Universal Login をカスタマイズする

色、ロゴ、テキストなどを含め、Auth0 のログインページをブランドに合わせて調整できます。

詳細については、Customize Universal Login を参照してください。

---

​

追加リソース

SDK リポジトリ

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

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

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

PKCE フロー

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

コミュニティフォーラム

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