> ## 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. ページ上部に表示される **Domain** と **Client ID** を控えておきます。これらはコード内で使用します

    <Note>
      Domain と Client 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. dependency に関する確認メッセージが表示されたら承認します

    **または、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 アプリケーションの Client 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>
      ログインページが表示されない場合は、Domain と 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. Domain が正確に入力されていることを確認します (例: `mycompany.auth0.com`)
    3. ClientId が正確に入力されていることを確認します (スペースやタイプミスがないこと)
    4. Windows 10 (Fall Creators Update) 以降で実行していることを確認します
  </Accordion>

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

    **解決策:**

    1. Auth0 Dashboard > アプリケーション > あなたのアプリ > 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="ログイン時に無効なグラントエラーが発生する">
    **問題:** リフレッシュトークンの有効期限が切れているか、キャッシュされた資格情報が無効です。

    **解決策:**

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

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

    **解決策:**

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

***

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

これで、UWP アプリケーションに Auth0 連携が正しく実装されました。実装をさらに拡張するには、次のトピックをご覧ください。

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

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

  <Card title="Organizations" icon="building" href="/docs/ja-jp/manage-users/organizations">
    マルチテナントの B2B アプリケーションをサポートします
  </Card>

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

  <Card title="ロールベースのアクセス制御" icon="shield-halved" href="/docs/ja-jp/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="/docs/ja-jp/authenticate/protocols/openid-connect-protocol">
    Auth0 での OpenID Connect の仕組みを学ぶ
  </Card>

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