.NET MAUI アプリケーションにLogin機能を追加する

このガイドでは、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

次に、AI アシスタントに次のように依頼します:

Add Auth0 authentication to my .NET MAUI app

AI アシスタントが、Auth0 アプリケーションの作成、資格情報の取得、Auth0 OidcClient MAUI SDK のインストール、コールバック URL の設定、Login/ログアウト フローの実装を自動的に行います。agent skills の完全なドキュメント →

このガイドでは、Auth0.OidcClient.MAUI SDK を使用して、.NET MAUI アプリケーションに Auth0 を統合する方法を紹介します。この手順を終えると、単一のコードベースで Android、iOS、macOS、Windows に対応し、Login、ログアウト、ユーザープロファイル情報の表示をアプリでサポートできるようになります。

このガイドでは、Auth0.OidcClient.MAUI バージョン 1.x を使用します。

​

前提条件

• .NET 8 または .NET 9 SDK がインストールされていること (ダウンロード)
• .NET MAUI ワークロード がインストールされていること
• Auth0 アカウント を持っていること (無料でサインアップ)
• .NET MAUI 拡張機能を備えた Visual Studio 2022 (17.8 以降) 、JetBrains Rider、または VS Code

環境を確認します。

dotnet --version        # 8.x または 9.x であること
dotnet workload list    # maui が含まれていること

MAUI ワークロードがない場合は、インストールしてください。

dotnet workload install maui

​

はじめに

1. Auth0アプリケーションの設定

   MAUI アプリに必要な資格情報を取得できるよう、Auth0 アプリケーションを設定します。

   1. Auth0 Dashboard > アプリケーション > アプリケーション に移動します
   2. Create Application を選択します
   3. アプリの名前 (例: “My MAUI App”) を入力し、アプリケーションの種類として Native を選択して、Create をクリックします
   4. Application Details ページの Settings タブに移動します
   5. Domain と Client 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 にネイティブアプリケーションがあり、Domain と Client 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. ログインとログアウトを追加

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

   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 トークンからユーザープロファイルのクレームを読み取る
           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"
           }));
   
           // ステップ5で作成したページとViewModelを登録する
           builder.Services.AddTransient<MainPage>();
           builder.Services.AddTransient<MainPageViewModel>();
   
           return builder.Build();
       }
   }
   

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

7. アプリを実行する

   .NET MAUI アプリケーションをビルドして実行する

   想定される流れ:

   1. アプリが起動し、Log In ボタンが表示される
   2. Log In をタップすると → システムブラウザーで Auth0 Universal Login が開く
   3. 認証を完了する (サインアップまたはログイン)
   4. ブラウザーからアプリにリダイレクトされる
   5. アプリに名前とメールアドレスが表示され、Log Out ボタンも表示される

これで、.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. Auth0 Dashboard で Save Changes を選択し、値が正しく保存されていることを確認します
5. ブラウザのアドレスバーで redirect_uri クエリパラメータを確認し、アプリケーションが実際に何を送信しているかを確認します

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

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

修正方法:

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

Windows: login が止まったように見える

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

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

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

症状: login 後、ブラウザにエラーが表示されるか何も起こらず、アプリがコールバックを受け取りません。

修正方法: アプリは パッケージ化された (MSIX) アプリケーションである必要があります。.csproj ファイルに <WindowsPackageType> 要素があるか確認してください。

• None に設定されている場合、プロトコル アクティブ化は利用できません。その行を削除するか、<WindowsPackageType>MSIX</WindowsPackageType> に変更してください。
• 要素が存在しない場合、アプリは既定で既にパッケージ化されています。Package.appxmanifest に Step 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 設定で オフラインアクセスの許可 が有効になっていることを確認してください (audience パラメーターを使用している場合) 。

保護された API を呼び出す

API 用にスコープされたアクセストークンを取得するには、Scope を設定し、audience パラメーターを LoginAsync() に渡します。

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

Organizations (B2B/enterprise)

特定の Auth0 Organization 内でユーザーを認証します。

var loginResult = await _client.LoginAsync(new
{
    organization = "org_abc123"
});

詳しくは、Organizations を参照してください。

再認証を強制する

指定した時間が経過した後に再認証を強制するには、MaxAge を使用します。

new Auth0ClientOptions
{
    Domain = "{yourDomain}",
    ClientId = "{yourClientId}",
    RedirectUri = "myapp://callback",
    PostLogoutRedirectUri = "myapp://callback",
    MaxAge = TimeSpan.FromMinutes(30)
}

Universal Login をカスタマイズする

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

詳しくは、Universal Login をカスタマイズする を参照してください。

---

​

追加リソース

SDK リポジトリ

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

Token Best Practices

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

PKCE フロー

ネイティブアプリが安全に認証を行う方法

コミュニティフォーラム

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