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

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

​

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

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

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

---

​

前提条件

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

• Visual Studio 2019 (16.11+) または Visual Studio 2022 (「Universal Windows Platform Development」ワークロードがインストールされていること)
• Windows 10 SDK 10.0.16299 以降 (UWP ワークロードと一緒にインストールされます)
• Auth0 アカウント (無料で登録)

---

​

始めましょう

1. Auth0アプリケーションを設定する

   UWP アプリを接続できるようにするには、Auth0 Dashboard で Auth0 アプリケーションを設定する必要があります。

   1. Auth0 Dashboard にアクセスしてログインします
   2. 左側のサイドバーで Applications > Applications を開きます
   3. Create Application を選択します
   4. アプリケーション名を入力します (例: “My UWP App”)
   5. アプリケーションの種類として Native を選択します
   6. Create を選択します
   7. Application Details ページの Settings タブを開きます
   8. ページ上部に表示される Domain と Client ID を控えておきます。これらはコード内で使用します

   Domain と Client ID の値を控えておいてください。後で必要になります

   次に、コールバック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 を選択します

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

2. UWP プロジェクトを作成する

   すでに 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 プロジェクトが作成されます。

3. Auth0 SDK をインストール

   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 を使用する方法:

   Install-Package Auth0.OidcClient.UWP
   

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

   dotnet add package Auth0.OidcClient.UWP
   

   インストールが正常に完了したことを確認してください。エラーメッセージが表示された場合は、インターネット接続を確認して、もう一度お試しください。

4. メインページにログインとログアウトを追加する

   今度は、アプリにログイン ボタンとログアウト ボタンを追加します。MainPage.xaml と MainPage.xaml.cs を更新してください。

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

   <?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 を更新します。

   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 プロジェクト名と一致させてください)
5. アプリを起動する

   アプリを起動するには、F5 キーを押すか、Debug > Start Debugging を選択します。

   期待される動作:

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

   ログインページが表示されない場合は、Domain と ClientId が正しいこと、Auth0 Dashboard の Allowed Callback URL が https://{yourDomain}/mobile と一致していること、またインターネット接続が正常に機能していることを確認してください。

確認

これで、UWP アプリケーションで Auth0 のログイン機能を問題なく利用できるようになりました。

---

​

トラブルシューティング

ログインページが開かない

問題: ネットワーク接続に問題があるか、設定が正しくありません。

解決策:

1. インターネット接続を確認します
2. Domain が正確に入力されていることを確認します (例: mycompany.auth0.com)
3. ClientId が正確に入力されていることを確認します (スペースやタイプミスがないこと)
4. Windows 10 (Fall Creators Update) 以降で実行していることを確認します

コールバック URL の不一致エラー

問題: Auth0 アプリケーションのリダイレクト URL が、コード内のものと一致していません。

解決策:

1. Auth0 Dashboard > アプリケーション > あなたのアプリ > Settings に移動します
2. “Application URIs” までスクロールします
3. “Allowed Callback URLs” に https://{yourDomain}/mobile が含まれていることを確認します
4. これがコード内の RedirectUri と完全に一致していることを確認します
5. 変更した場合は Save Changes をクリックします

ログイン後にアプリケーションがクラッシュする

問題: using ステートメントが不足しているか、名前空間の参照が正しくありません。

解決策:

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

ログイン時に無効なグラントエラーが発生する

問題: リフレッシュトークンの有効期限が切れているか、キャッシュされた資格情報が無効です。

解決策:

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

ユーザー情報が表示されない

問題: profile scope がリクエストされていないため、ユーザーの claims を利用できません。

解決策:

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

---

​

次のステップ

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

保護された API を呼び出す

アクセストークンを使用して、バックエンド API へのリクエストを認証します

リフレッシュトークン

アプリを再起動してもユーザーセッションを維持します

Organizations

マルチテナントの B2B アプリケーションをサポートします

Universal Login をカスタマイズする

Auth0 のログインページを自社ブランドに合わせます

ロールベースのアクセス制御

ロールに基づいてユーザーの権限を制御します

---

​

追加リソース

Auth0 OIDC Client

GitHub上の SDK のソースコードとドキュメント

OpenID Connect

Auth0 での OpenID Connect の仕組みを学ぶ

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

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