> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

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

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

export const HowToSchema = () => <script type="application/ld+json">
    {'{"@context":"https://schema.org","@type":"HowTo"}'}
  </script>;

<HowToSchema />

<Accordion title="AI を使用して Auth0 を統合する" icon="microchip-ai" iconType="solid" defaultOpen>
  Claude Code、Cursor、GitHub Copilot などの AI コーディングアシスタントを使用している場合は、[agent skills](https://agentskills.io/home) を使うことで、数分で Auth0 認証を自動的に追加できます。

  **インストール:**

  ```bash theme={null}
  npx skills add auth0/agent-skills --skill auth0-quickstart --skill auth0-maui
  ```

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

  ```text theme={null}
  Add Auth0 authentication to my .NET MAUI app
  ```

  AI アシスタントが、Auth0 アプリケーションの作成、認証情報の取得、Auth0 OidcClient MAUI SDK のインストール、コールバック URL の設定、ログイン / ログアウトフローの実装を自動的に行います。[agent skills の完全なドキュメント →](/ja/docs/quickstart/agent-skills)
</Accordion>

このガイドでは、[Auth0.OidcClient.MAUI SDK](https://github.com/auth0/auth0-oidc-client-net) を使用して .NET MAUI アプリケーションに Auth0 を統合する方法を説明します。完了する頃には、単一のコードベースで **Android**、**iOS**、**macOS**、**Windows** において、ログイン、ログアウト、ユーザープロファイル情報の表示をサポートできるようになります。

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

<Note>
  ## 前提条件

  * **.NET 8 または .NET 9 SDK** がインストールされていること ([ダウンロード](https://dotnet.microsoft.com/download))
  * **MAUI ワークロード** がインストールされていること
  * **Auth0 アカウント** を持っていること ([無料でサインアップ](https://auth0.com/signup))
  * **Visual Studio 2022** (17.8 以降) 、**JetBrains Rider**、または .NET MAUI 拡張機能を備えた **VS Code**
</Note>

環境を確認します。

```shellscript theme={null}
dotnet --version        # 8.x または 9.x であること
dotnet workload list    # maui が含まれていること
```

MAUI ワークロードが見つからない場合は、インストールします。

```shellscript theme={null}
dotnet workload install maui
```

<div id="get-started">
  ## はじめに
</div>

<Steps>
  <Step title="Auth0アプリケーションを設定する" stepNumber={1}>
    MAUI アプリに必要な認証情報を取得できるよう、Auth0 アプリケーションを設定します。

    1. **[Auth0 Dashboard](https://manage.auth0.com/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:**

    ```text theme={null}
    myapp://callback
    ```

    **許可されたログアウトURL:**

    ```text theme={null}
    myapp://callback
    ```

    <Tip>
      アプリ固有のスキームを選択します。たとえば、`com.mycompany.myapp://callback` のような逆順ドメイン名が適しています。
    </Tip>

    **変更を保存** を選択します。

    <Check>
      Auth0 に Native アプリケーションがあり、**ドメイン** と **クライアントID** を控えており、コールバック URL とログアウト URL が設定されていることを確認します。
    </Check>
  </Step>

  <Step title="MAUI プロジェクトを作成する" stepNumber={2}>
    すでに .NET MAUI プロジェクトがある場合は、ステップ 3 に進んでください。ない場合は、.NET CLI を使用して作成してください。

    ```shellscript theme={null}
    dotnet new maui -n MyMauiApp
    cd MyMauiApp
    ```
  </Step>

  <Step title="Auth0 MAUI SDKをインストールする" stepNumber={3}>
    `Auth0.OidcClient.MAUI` NuGet パッケージをプロジェクトに追加します。

    ```shellscript theme={null}
    dotnet add package Auth0.OidcClient.MAUI
    ```

    <Check>
      パッケージがエラーなくインストールされたことを確認するために、`dotnet restore` を実行します。
    </Check>
  </Step>

  <Step title="プラットフォーム別のコールバック処理を設定する" stepNumber={4}>
    .NET MAUI アプリでは、認証後にシステム ブラウザーからアプリにリダイレクトできるよう、各プラットフォームでコールバック ハンドラーを登録する必要があります。対象とする各プラットフォームの手順に従ってください。

    <Tabs>
      <Tab title="Android">
        `Platforms/Android/WebAuthenticatorActivity.cs` に新しいファイルを作成します。

        ```csharp Platforms/Android/WebAuthenticatorActivity.cs lines theme={null}
        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 スキームに置き換えてください。

        <Note>
          `CALLBACK_SCHEME` の値は、`RedirectUri` のスキーム、および Auth0 の **Allowed Callback URLs** と完全に一致している必要があります。
        </Note>
      </Tab>

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

        <Info>
          `.csproj` に `<WindowsPackageType>None</WindowsPackageType>` が含まれている場合、アプリは **非パッケージ化** されており、プロトコルのアクティブ化は機能しません。その行を削除するか、`<WindowsPackageType>MSIX</WindowsPackageType>` に設定して、パッケージ化されたアプリを使用してください。詳しくは、[.NET MAUI の Windows パッケージ化に関するドキュメント](https://learn.microsoft.com/en-us/dotnet/maui/windows/deployment-overview)を参照してください。
        </Info>

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

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

        ```xml Platforms/Windows/Package.appxmanifest lines theme={null}
        <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` の呼び出しを追加します。

        ```csharp Platforms/Windows/App.xaml.cs lines theme={null}
        public App()
        {
            if (Auth0.OidcClient.Platforms.Windows.Activator.Default.CheckRedirectionActivation())
                return;

            this.InitializeComponent();
        }
        ```
      </Tab>

      <Tab title="iOS / macOS">
        プラットフォーム固有の設定は不要です。SDK は MAUI の `WebAuthenticator` を通じて `ASWebAuthenticationSession` を自動的に使用します。
      </Tab>
    </Tabs>
  </Step>

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

    <Tabs>
      <Tab title="MainPageViewModel.cs">
        `ViewModels/MainPageViewModel.cs` に ViewModel を作成します。

        ```csharp ViewModels/MainPageViewModel.cs lines theme={null}
        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));
            }
        }
        ```
      </Tab>

      <Tab title="MainPage.xaml">
        `MainPage.xaml` で UI を設定します。

        ```xml MainPage.xaml lines theme={null}
        <?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>
        ```
      </Tab>

      <Tab title="MainPage.xaml.cs">
        `MainPage.xaml.cs` で `BindingContext` を設定します。

        ```csharp MainPage.xaml.cs lines theme={null}
        namespace MyMauiApp;

        public partial class MainPage : ContentPage
        {
            public MainPage(MainPageViewModel viewModel)
            {
                InitializeComponent();
                BindingContext = viewModel;
            }
        }
        ```
      </Tab>
    </Tabs>

    <Check>
      これで、プロジェクトにはログイン コマンドとログアウト コマンドを持つ ViewModel、データ バインディングされた XAML ページ、それらを接続するコードビハインドがそろいました。
    </Check>
  </Step>

  <Step title="サービスを登録して、Auth0 クライアントをインスタンス化する" stepNumber={6}>
    次に、`MauiProgram.cs` で依存性注入を使用して `Auth0Client`、ViewModel、ページを登録します。これにより各要素が連携され、Auth0 クライアントが ViewModel に、ViewModel がページに注入されます。

    ```csharp MauiProgram.cs lines theme={null}
    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 を使用してください。
  </Step>

  <Step title="アプリを起動する" stepNumber={7}>
    .NET MAUI アプリケーションをビルドして実行する

    **想定されるフロー:**

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

<Check>
  これで、.NET MAUI アプリケーションで Auth0 のログイン機能が完全に動作するようになりました。
</Check>

***

<div id="troubleshooting">
  ## トラブルシューティング
</div>

<AccordionGroup>
  <Accordion title="コールバック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` クエリパラメーターを確認し、アプリが実際に何を送信しているかを確認します
  </Accordion>

  <Accordion title="Android: アプリがブラウザーから戻らない">
    **症状**: ログインのためにブラウザーは開きますが、アプリにリダイレクトされません。

    **修正方法:**

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

  <Accordion title="Windows: ログインがハングしたように見える">
    **症状**: ブラウザーは開きますが、元のアプリに戻る代わりにアプリの2つ目のインスタンスが起動します。

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

  <Accordion title="Windows: プロトコルのアクティブ化が機能しない">
    **症状**: ログイン後、ブラウザーにエラーが表示されるか何も起こらず、アプリがコールバックを受信しません。

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

    * `None` に設定されている場合、プロトコルのアクティブ化は利用できません。その行を削除するか、`<WindowsPackageType>MSIX</WindowsPackageType>` に変更してください。
    * 要素が存在しない場合、アプリは既定でパッケージ化されています。`Package.appxmanifest` にステップ 4 の `<uap:Protocol>` 拡張機能が含まれていることを確認してください。
  </Accordion>

  <Accordion title="ユーザープロファイルにクレームがない">
    **症状**: `name`、`email`、または `picture` クレームが `loginResult.User` に含まれていません。

    **修正方法:** `openid profile email` が `Auth0ClientOptions.Scope` に含まれていることを確認してください。スコープをカスタマイズしている場合は、`openid` が常に含まれていることを確認してください。
  </Accordion>
</AccordionGroup>

***

<div id="next-steps">
  ## 次のステップ
</div>

これで、.NET MAUI アプリで動作する Auth0 統合が完成しました。実装をさらに拡張するには、次のトピックを確認してください。

<Accordion title="リフレッシュトークン">
  Auth0 MAUI SDK は、ユーザーに再度プロンプトを表示することなくセッションをサイレントに更新するためのリフレッシュトークンをサポートしています。

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

  `Scope` プロパティに `offline_access` を追加します。

  ```csharp expandable lines theme={null}
  builder.Services.AddSingleton(new Auth0Client(new Auth0ClientOptions
  {
      Domain = "{yourDomain}",
      ClientId = "{yourClientId}",
      RedirectUri = "myapp://callback",
      PostLogoutRedirectUri = "myapp://callback",
      Scope = "openid profile email offline_access"
  }));
  ```

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

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

  ```csharp expandable lines theme={null}
  // ログイン後
  var refreshToken = loginResult.RefreshToken;

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

  if (!refreshResult.IsError)
  {
      var newAccessToken = refreshResult.AccessToken;
      var newIdToken = refreshResult.IdentityToken;
  }
  ```

  <Info>
    ログイン後に `RefreshToken` が `null` の場合は、Auth0 Dashboard の API 設定で **Allow Offline Access** が有効になっていることを確認してください (`audience` パラメーターを使用している場合) 。
  </Info>
</Accordion>

<Accordion title="保護された API を呼び出す">
  API 用にスコープ設定されたアクセストークンを取得するには、`Scope` を設定し、`LoginAsync()` に `audience` パラメーターを渡します。

  ```csharp expandable lines theme={null}
  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");
  ```
</Accordion>

<Accordion title="組織（B2B/エンタープライズ）">
  特定の Auth0 組織内でユーザーを認証します。

  ```csharp expandable lines theme={null}
  var loginResult = await _client.LoginAsync(new
  {
      organization = "org_abc123"
  });
  ```

  詳細については、[組織](/ja/docs/manage-users/organizations) を参照してください。
</Accordion>

<Accordion title="再認証を強制する">
  `MaxAge` を使用すると、指定した時間の経過後に再認証を強制できます。

  ```csharp expandable lines theme={null}
  new Auth0ClientOptions
  {
      Domain = "{yourDomain}",
      ClientId = "{yourClientId}",
      RedirectUri = "myapp://callback",
      PostLogoutRedirectUri = "myapp://callback",
      MaxAge = TimeSpan.FromMinutes(30)
  }
  ```
</Accordion>

<Accordion title="Universal Login をカスタマイズする">
  色、ロゴ、テキストなどを含め、Auth0 のログインページをブランドに合わせて調整できます。

  詳細については、[Customize Universal Login](/ja/docs/customize/universal-login-pages) を参照してください。
</Accordion>

***

<div id="additional-resources">
  ## 追加リソース
</div>

<CardGroup cols={3}>
  <Card title="SDK リポジトリ" icon="github" href="https://github.com/auth0/auth0-oidc-client-net">
    ソースコード、サンプル、API リファレンス
  </Card>

  <Card title="トークンのベストプラクティス" icon="key" href="/ja/docs/secure/tokens/token-best-practices">
    トークンのセキュリティに関するベストプラクティス
  </Card>

  <Card title="PKCE フロー" icon="shield" href="/ja/docs/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce">
    ネイティブアプリで安全に認証する方法
  </Card>

  <Card title="コミュニティフォーラム" icon="comments" href="https://community.auth0.com/">
    Auth0 コミュニティでサポートを受ける
  </Card>
</CardGroup>