> ## 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.

# UWP アプリケーションにログイン機能を追加する

> Auth0.OidcClient.UWP SDK を使用して、Universal Windows Platform アプリケーションに Auth0 を統合します

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

<HowToSchema />

<div id="add-login-to-your-uwp-application">
  # UWP アプリケーションにログイン機能を追加する
</div>

このガイドでは、Auth0.OidcClient.UWP SDK を使用して Universal Windows Platform (UWP) アプリケーションに Auth0 を統合する方法を説明します。このガイドを完了すると、アプリでログイン、ログアウト、ユーザープロファイル情報の表示ができるようになります。

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

***

<div id="prerequisites">
  ## 前提条件
</div>

開始する前に、以下を用意してください。

* **Visual Studio 2019 (16.11+) または Visual Studio 2022** (「Universal Windows Platform Development」ワークロードがインストールされていること)
* **Windows 10 SDK 10.0.16299** 以降 (UWP ワークロードと一緒にインストールされます)
* **Auth0 アカウント** ([無料でサインアップ](https://auth0.com/signup))

***

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

<Steps>
  <Step title="Auth0 アプリケーションを設定する" stepNumber={1}>
    UWP アプリが接続できるように、Auth0 Dashboard で Auth0 アプリケーションを設定する必要があります。

    1. [Auth0 Dashboard](https://manage.auth0.com/) に移動し、ログインします
    2. 左側のサイドバーで **Applications > Applications** を開きます
    3. **Create Application** を選択します
    4. アプリケーションの名前を入力します (例: "My UWP App")
    5. アプリケーションタイプとして **Native** を選択します
    6. **Create** を選択します
    7. Application Details ページの **Settings** タブを開きます
    8. ページ上部にある **ドメイン** と **クライアントID** を控えておきます。これらはコード内で必要です

    <Note>
      ドメインとクライアントID の値を控えておいてください。後で必要になります
    </Note>

    次に、コールバック URL を設定します。

    1. **Settings** タブで下にスクロールし、**Application URIs** まで移動します
    2. **Allowed Callback URLs** フィールドに次を入力します: `https://{yourDomain}/mobile`
       * 例: `https://mycompany.auth0.com/mobile`
    3. **Allowed Logout URLs** フィールドに、同じ URL `https://{yourDomain}/mobile` を入力します
    4. **Save Changes** を選択します

    <Note>
      コールバック URL パターン `https://{yourDomain}/mobile` は、Auth0 におけるネイティブアプリケーションの標準です。UWP アプリがリダイレクトを自動的に処理するため、追加の設定は不要です。
    </Note>
  </Step>

  <Step title="UWP プロジェクトを作成する" stepNumber={2}>
    すでに UWP プロジェクトがある場合は、手順 3 に進んでください。

    1. Visual Studio を開きます
    2. **File > New > Project** を選択します
    3. "UWP" を検索し、**Blank App (Universal Windows)** を選択します
    4. プロジェクトに名前を付けます (たとえば "Auth0Sample")
    5. **Next** を選択します
    6. "Minimum version" で **Windows 10 (version 1909)** 以降を選択します
    7. "Target version" で、利用可能な最新バージョン (現在は Windows 11) を選択します
    8. **Create** を選択します

    Visual Studio により、基本的な `MainPage.xaml` と `MainPage.xaml.cs` を含む UWP プロジェクトが作成されます。
  </Step>

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

    **Package Manager UI を使用する方法 (推奨) :**

    1. Solution Explorer でプロジェクトを右クリックします
    2. **Manage NuGet Packages** を選択します
    3. **Browse** タブを開きます
    4. "Auth0.OidcClient.UWP" を検索します
    5. 最新バージョンを選択し、**Install** をクリックします
    6. 表示される依存関係のプロンプトを承諾します

    **または、Package Manager Console を使用する方法:**

    ```powershell theme={null}
    Install-Package Auth0.OidcClient.UWP
    ```

    **または、dotnet CLI を使用する場合:**

    ```bash theme={null}
    dotnet add package Auth0.OidcClient.UWP
    ```

    インストールがエラーなく完了したことを確認してください。エラーメッセージが表示された場合は、インターネット接続を確認して、再試行してください。
  </Step>

  <Step title="メインページにログイン機能とログアウト機能を追加する" stepNumber={4}>
    次に、アプリにログイン ボタンとログアウト ボタンを追加します。`MainPage.xaml` と `MainPage.xaml.cs` を更新します。

    まず、`MainPage.xaml` を更新します。

    ```xaml theme={null}
    <?xml version="1.0" encoding="utf-8"?>
    <Page
        x:Class="Auth0Sample.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <StackPanel Padding="20" VerticalAlignment="Center" HorizontalAlignment="Center">
            <TextBlock Text="Auth0 UWP Sample" FontSize="28" Margin="0,0,0,20" />
            
            <Button x:Name="LoginButton" Click="LoginButton_Click" Content="Login" Padding="10" />
            <Button x:Name="LogoutButton" Click="LogoutButton_Click" Content="Logout" Padding="10" Margin="0,10,0,0" />
            
            <TextBlock x:Name="UserInfoText" Margin="0,20,0,0" FontSize="14" TextWrapping="Wrap" />
        </StackPanel>
    </Page>
    ```

    次に、`MainPage.xaml.cs` を更新します。

    ```csharp theme={null}
    using Auth0.OidcClient;
    using System;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;

    namespace Auth0Sample
    {
        public sealed partial class MainPage : Page
        {
            private Auth0Client _auth0Client;

            public MainPage()
            {
                InitializeComponent();
                InitializeAuth0();
            }

            private void InitializeAuth0()
            {
                _auth0Client = new Auth0Client(new Auth0ClientOptions
                {
                    Domain = "{yourDomain}",
                    ClientId = "{yourClientId}",
                    RedirectUri = "https://{yourDomain}/mobile",
                    PostLogoutRedirectUri = "https://{yourDomain}/mobile"
                });
            }

            private async void LoginButton_Click(object sender, RoutedEventArgs e)
            {
                try
                {
                    var loginResult = await _auth0Client.LoginAsync();

                    if (loginResult.IsError)
                    {
                        if (loginResult.Error == "UserCancel")
                        {
                            UserInfoText.Text = "Login cancelled";
                            return;
                        }

                        UserInfoText.Text = $"Login failed: {loginResult.Error}";
                        return;
                    }

                    var userEmail = loginResult.User.FindFirst("email")?.Value ?? "Unknown";
                    var userName = loginResult.User.FindFirst("name")?.Value ?? "User";

                    UserInfoText.Text = $"Welcome, {userName}!\nEmail: {userEmail}";

                    LoginButton.Visibility = Visibility.Collapsed;
                    LogoutButton.Visibility = Visibility.Visible;
                }
                catch (Exception ex)
                {
                    UserInfoText.Text = $"Error: {ex.Message}";
                }
            }

            private async void LogoutButton_Click(object sender, RoutedEventArgs e)
            {
                try
                {
                    await _auth0Client.LogoutAsync();

                    UserInfoText.Text = "You have been logged out";
                    LoginButton.Visibility = Visibility.Visible;
                    LogoutButton.Visibility = Visibility.Collapsed;
                }
                catch (Exception ex)
                {
                    UserInfoText.Text = $"Logout error: {ex.Message}";
                }
            }
        }
    }
    ```

    コード内のプレースホルダーを置き換えてください。

    * `{yourDomain}` - ご利用のAuth0ドメイン (例: `mycompany.auth0.com`)
    * `{yourClientId}` - Auth0アプリケーションのクライアントID
    * `Auth0Sample` - 実際のプロジェクト名 (UWPプロジェクト名と一致させてください)
  </Step>

  <Step title="アプリを実行する" stepNumber={5}>
    **F5** キーを押すか、**Debug > Start Debugging** を選択して、アプリを起動します。

    **期待される動作:**

    1. UWP アプリが起動し、"Login" ボタンが表示される
    2. **Login** をタップすると → Auth0 のログインページを表示するブラウザー ウィンドウが開く
    3. Auth0 の認証情報を入力する (またはテストアカウントを作成する)
    4. ログイン後、ブラウザーは自動的に閉じる
    5. アプリに名前とメールアドレスが表示される
    6. ボタンが "Logout" に変わる
    7. **Logout** をタップすると → ブラウザーが一時的に開き、その後閉じる
    8. ボタンが再び "Login" に戻る

    <Tip>
      ログインページが表示されない場合は、ドメインと ClientId が正しいこと、Auth0 Dashboard の Allowed Callback URL が `https://{yourDomain}/mobile` と一致していること、およびインターネット接続が有効であることを確認してください。
    </Tip>
  </Step>
</Steps>

<Check>
  **チェックポイント**

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

***

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

<AccordionGroup>
  <Accordion title="ログインページが開かない">
    **問題:** ネットワーク接続に問題があるか、設定が正しくありません。

    **解決策:**

    1. インターネット接続を確認します
    2. ドメインが完全に正しいことを確認します (例: `mycompany.auth0.com`)
    3. ClientId が完全に正しいことを確認します (スペースやタイプミスがないこと)
    4. Windows 10 (Fall Creators Update) 以降で実行していることを確認します
  </Accordion>

  <Accordion title="コールバック URL の不一致エラー">
    **問題:** Auth0 アプリケーションのリダイレクト URL が、コード内の URL と一致していません。

    **解決策:**

    1. Auth0 Dashboard > Applications > Your App > Settings に移動します
    2. "Application URIs" までスクロールします
    3. "Allowed Callback URLs" に `https://{yourDomain}/mobile` が含まれていることを確認します
    4. これがコード内の `RedirectUri` と完全に一致していることを確認します
    5. 変更した場合は **Save Changes** をクリックします
  </Accordion>

  <Accordion title="ログイン後にアプリケーションがクラッシュする">
    **問題:** using ステートメントが不足しているか、名前空間の参照が正しくありません。

    **解決策:**

    1. MainPage.xaml.cs の先頭に `using Auth0.OidcClient;` があることを確認します
    2. ソリューションをリビルドします (Build > Rebuild Solution)
  </Accordion>

  <Accordion title="ログイン中に invalid grant エラーが発生する">
    **問題:** リフレッシュトークンの有効期限が切れているか、キャッシュされた認証情報が無効です。

    **解決策:**

    1. **Logout** をタップしてキャッシュされたトークンを消去します
    2. もう一度 **Login** をタップして再認証します
    3. 問題が解決しない場合は、Auth0 Dashboard に移動してアプリのリフレッシュトークンを削除します
  </Accordion>

  <Accordion title="ユーザー情報が表示されない">
    **問題:** `profile` スコープがリクエストされていないため、ユーザー claims を利用できません。

    **解決策:**

    1. profile スコープをリクエストするように Auth0ClientOptions を更新します:
       ```csharp theme={null}
       var options = new Auth0ClientOptions
       {
           Domain = "{yourDomain}",
           ClientId = "{yourClientId}",
           Scope = "openid profile email" // この行を追加します
       };
       ```
    2. 更新後のスコープを取得するため、ログアウトしてから再度ログインします
  </Accordion>
</AccordionGroup>

***

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

これで、UWP アプリケーションで動作する Auth0 統合が完成しました。実装をさらに拡張するには、次のトピックを参照してください。

<CardGroup cols={2}>
  <Card title="保護された API を呼び出す" icon="plug" href="/ja/docs/quickstart/backend/nodejs#call-your-api">
    アクセストークンを使用して、バックエンド API へのリクエストを認証します
  </Card>

  <Card title="リフレッシュトークン" icon="rotate" href="/ja/docs/secure/tokens/refresh-tokens">
    アプリの再起動後もユーザーセッションを維持します
  </Card>

  <Card title="組織" icon="building" href="/ja/docs/manage-users/organizations">
    マルチテナントの B2B アプリケーションに対応します
  </Card>

  <Card title="Universal Login をカスタマイズする" icon="paintbrush" href="/ja/docs/authenticate/login/auth0-universal-login">
    Auth0 のログインページを自社のブランドに合わせます
  </Card>

  <Card title="ロールベースアクセス制御" icon="shield-halved" href="/ja/docs/manage-users/access-control/rbac">
    ロールに基づいてユーザーの権限を制御します
  </Card>
</CardGroup>

***

<div id="additional-resources">
  ## 参考資料
</div>

<CardGroup cols={3}>
  <Card title="Auth0 OIDC Client" icon="github" href="https://github.com/auth0/auth0-oidc-client-net">
    GitHub の SDK ソースコードとドキュメント
  </Card>

  <Card title="OpenID Connect" icon="book" href="/ja/docs/authenticate/protocols/openid-connect-protocol">
    Auth0 における OpenID Connect の仕組みを学ぶ
  </Card>

  <Card title="アクセストークンのベストプラクティス" icon="key" href="/ja/docs/secure/tokens/access-tokens">
    アクセストークンのセキュリティのベストプラクティス
  </Card>
</CardGroup>