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 アカウント (無料でサインアップ)

はじめに

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

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

Auth0 Dashboard に移動し、ログインします
左側のサイドバーで Applications > Applications を開きます
Create Application を選択します
アプリケーションの名前を入力します (例: “My UWP App”)
アプリケーションタイプとして Native を選択します
Create を選択します
Application Details ページの Settings タブを開きます
ページ上部にある ドメイン と クライアントID を控えておきます。これらはコード内で必要です

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

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

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

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

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

すでに UWP プロジェクトがある場合は、手順 3 に進んでください。

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

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

Auth0 SDK をインストールする

プロジェクトに Auth0.OidcClient.UWP NuGet パッケージを追加します。Package Manager UI を使用する方法 (推奨) :

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

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

Install-Package Auth0.OidcClient.UWP

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

dotnet add package Auth0.OidcClient.UWP

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

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

次に、アプリにログインボタンとログアウトボタンを追加します。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アプリケーションのクライアントID
Auth0Sample - 実際のプロジェクト名 (UWPプロジェクト名と一致させてください)

アプリを実行する

F5 キーを押すか、Debug > Start Debugging を選択して、アプリを起動します。期待される動作:

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

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

チェックポイントこれで、UWP アプリケーションで Auth0 のログイン機能が完全に動作するようになりました。

トラブルシューティング

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

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

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

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

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

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

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

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

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

ログイン中に invalid grant エラーが発生する

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

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

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

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

profile スコープをリクエストするように Auth0ClientOptions を更新します:

var options = new Auth0ClientOptions
{
    Domain = "{yourDomain}",
    ClientId = "{yourClientId}",
    Scope = "openid profile email" // この行を追加します
};

更新後のスコープを取得するため、ログアウトしてから再度ログインします

次のステップ

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

保護された API を呼び出す

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

リフレッシュトークン

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

組織

マルチテナントの B2B アプリケーションに対応します

Universal Login をカスタマイズする

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

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

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

参考資料

Auth0 OIDC Client

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

OpenID Connect

Auth0 における OpenID Connect の仕組みを学ぶ

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

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

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

​前提条件

​はじめに

​トラブルシューティング

​次のステップ

保護された API を呼び出す

リフレッシュトークン

組織

Universal Login をカスタマイズする

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

​参考資料

Auth0 OIDC Client

OpenID Connect

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

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

前提条件

はじめに

トラブルシューティング

次のステップ

参考資料