> ## 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.
# WPF または WinForms アプリケーションにログインを追加
> Auth0 OIDC Client for .NET を使用して、WPF または WinForms アプリケーションに Auth0 のログイン、ログアウト、ユーザープロフィールを追加します
export const HowToSchema = () => ;
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-wpf --skill auth0-winforms
```
**次に、AI アシスタントに次のように依頼します。**
```text theme={null}
Add Auth0 authentication to my WPF or WinForms app
```
AI アシスタントは、Auth0 アプリケーションの作成、認証情報の取得、Auth0 OidcClient SDK のインストール、コールバック URL の設定、ログイン/ログアウト フローの実装を自動的に行います。[agent skills の完全なドキュメント →](/ja/docs/quickstart/agent-skills)
**前提条件:** 開始する前に、次のものを用意してください。
* **[.NET 8.0 SDK](https://dotnet.microsoft.com/download/dotnet/8.0)** 以降 (レガシー プロジェクトの場合は .NET Framework 4.6.2)
* **[Visual Studio 2022](https://visualstudio.microsoft.com/)** または C# Dev Kit を備えた VS Code
**.NET バージョンの互換性:** このクイックスタートは **.NET 8.0**、**.NET 9.0**、および **.NET Framework 4.6.2** で利用できます。
## はじめに
このクイックスタートでは、WPF または WinForms のデスクトップアプリケーションに Auth0 認証を追加する方法を説明します。Auth0 を設定し、SDK をインストールしたうえで、[WPF](https://www.nuget.org/packages/Auth0.OidcClient.WPF/) および [WinForms](https://www.nuget.org/packages/Auth0.OidcClient.WinForms/) 向けの Auth0 OIDC Client を使用して、ログイン、ログアウト、ユーザープロファイルの表示を実装します。
すでに WPF または WinForms のプロジェクトがある場合は、この手順を飛ばして次に進んでください。
新しいプロジェクトを作成し、そのディレクトリを開きます。
```bash theme={null}
dotnet new wpf -n MyApp
cd MyApp
```
```bash theme={null}
dotnet new winforms -n MyApp
cd MyApp
```
1. Visual Studio 2022 を開き、**Create a new project** をクリックします
2. **WPF Application** または **Windows Forms App** を検索します
3. C# テンプレートを選択し、**Next** をクリックします
4. プロジェクト名を入力し、保存場所を選択してから **Next** をクリックします
5. ターゲット フレームワークとして **.NET 8.0** (以降) を選択し、**Create** をクリックします
Auth0 サービスを利用するには、Auth0 Dashboard でアプリケーションを設定しておく必要があります。Auth0 のアプリケーションでは、プロジェクトでの認証の動作を設定します。
### アプリケーションを設定する
[Auth0 Dashboard](https://manage.auth0.com) → **Applications** → **Applications** に移動し、新しいアプリケーションを作成します。
1. **Create Application** をクリックします
2. アプリケーションの名前を入力します
3. アプリケーションタイプとして **Native** を選択します
4. **Create** をクリックします
**Settings** タブで、**ドメイン** と **クライアントID** を控えておきます。SDK の初期化時に必要になります。
### コールバックURLを設定する
コールバックURLは、ユーザーの認証後に Auth0 がリダイレクトするアプリケーション内の URL です。これが設定されていないと、ユーザーはログイン後にアプリケーションへ戻れません。
Application Settings で、次の値を **Allowed Callback URLs** に追加します。
```
https://{yourDomain}/mobile
```
### ログアウト URL を設定する
ログアウト URL とは、ユーザーのログアウト後に Auth0 がリダイレクトするアプリケーション内の URL です。これが設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーが表示されます。
Application Settings の **Allowed Logout URLs** に、次を追加します。
```
https://{yourDomain}/mobile
```
Auth0 では、WPF 用と WinForms 用に別々の NuGet パッケージを提供しています。プロジェクトの種類に応じたものをインストールしてください。
**Package Manager Console** (\[ツール] → \[NuGet パッケージ マネージャー] → \[Package Manager Console]) を開き、次を実行します。
```powershell theme={null}
# WPF
Install-Package Auth0.OidcClient.WPF
# WinForms
Install-Package Auth0.OidcClient.WinForms
```
```bash theme={null}
# WPF
dotnet add package Auth0.OidcClient.WPF
# WinForms
dotnet add package Auth0.OidcClient.WinForms
```
アプリケーションに Auth0 を統合するには、Auth0 の **ドメイン** と **クライアントID** を指定して `Auth0Client` をインスタンス化します。プライベート フィールドを追加し、メイン ウィンドウまたはフォームの既存のコンストラクター内で初期化してください。
`MainWindow.xaml.cs` を開き、次のように更新します。
```csharp MainWindow.xaml.cs lines theme={null}
using Auth0.OidcClient;
// アプリケーションに別の名前を付けた場合は、
// それに合わせて名前空間も更新してください。
namespace MyApp;
public partial class MainWindow : Window
{
private Auth0Client _client;
public MainWindow()
{
InitializeComponent();
_client = new Auth0Client(new Auth0ClientOptions
{
Domain = "{yourDomain}",
ClientId = "{yourClientId}"
});
}
}
```
`Form1.cs` (またはメイン フォームのファイル) を開き、次のように更新します。
```csharp Form1.cs lines theme={null}
using Auth0.OidcClient;
// アプリケーションに別の名前を付けた場合は、
// それに合わせて名前空間も更新してください。
namespace MyApp;
public partial class Form1 : Form
{
private Auth0Client _client;
public Form1()
{
InitializeComponent();
_client = new Auth0Client(new Auth0ClientOptions
{
Domain = "{yourDomain}",
ClientId = "{yourClientId}"
});
}
}
```
ユーザーをログインさせるには、SDK の `LoginAsync()` メソッドを使用します。このメソッドを呼び出すと、Auth0 Universal Login ページを表示するポップアップウィンドウが開きます。認証が成功すると、Auth0 はコールバック URL にリダイレクトし、SDK は `LoginResult` を返します。
まず、UI にログインボタンを追加します。
`MainWindow.xaml` を開き、`` 内に `Button` を追加します。
```xml MainWindow.xaml lines theme={null}
```
次に、`MainWindow.xaml.cs` にクリック ハンドラーを追加します。
```csharp MainWindow.xaml.cs lines theme={null}
private async void LoginButton_Click(object sender, RoutedEventArgs e)
{
var loginResult = await _client.LoginAsync();
if (loginResult.IsError == false)
{
var user = loginResult.User;
var name = user.FindFirst(c => c.Type == "name")?.Value;
var email = user.FindFirst(c => c.Type == "email")?.Value;
var picture = user.FindFirst(c => c.Type == "picture")?.Value;
}
}
```
`Form1.cs` を開き、コンストラクター内でログインボタンをプログラムによって追加してから、クリック ハンドラーを追加します。
```csharp Form1.cs lines theme={null}
using Auth0.OidcClient;
namespace MyApp;
public partial class Form1 : Form
{
private Auth0Client _client;
private Button loginButton;
public Form1()
{
InitializeComponent();
_client = new Auth0Client(new Auth0ClientOptions
{
Domain = "{yourDomain}",
ClientId = "{yourClientId}"
});
loginButton = new Button
{
Text = "Log In",
Width = 120,
Height = 40,
Left = (ClientSize.Width - 120) / 2,
Top = (ClientSize.Height - 40) / 2
};
loginButton.Click += loginButton_Click;
Controls.Add(loginButton);
}
private async void loginButton_Click(object sender, EventArgs e)
{
var loginResult = await _client.LoginAsync();
if (loginResult.IsError == false)
{
var user = loginResult.User;
var name = user.FindFirst(c => c.Type == "name")?.Value;
var email = user.FindFirst(c => c.Type == "email")?.Value;
var picture = user.FindFirst(c => c.Type == "picture")?.Value;
}
}
}
```
エラーがなければ、結果の `LoginResult.User`、`LoginResult.IdentityToken`、`LoginResult.AccessToken`、`LoginResult.RefreshToken` にアクセスできます。
ユーザーをログアウトするには、SDK の `LogoutAsync()` メソッドを使用します。これによりポップアップ ウィンドウが開き、セッションをクリアするために Auth0 のログアウト エンドポイントへリダイレクトされた後、設定したログアウト URL にリダイレクトされます。
まず、UI にログアウト ボタンを追加します。
`MainWindow.xaml` を開き、ログイン ボタンの横にログアウト `Button` を追加します。
```xml MainWindow.xaml lines theme={null}
```
次に、`MainWindow.xaml.cs` にクリック ハンドラーを追加します。
```csharp MainWindow.xaml.cs lines theme={null}
private async void LogoutButton_Click(object sender, RoutedEventArgs e)
{
await _client.LogoutAsync();
}
```
`Form1.cs` を開き、コンストラクターにログアウト ボタンを追加し、そのクリック ハンドラーを追加します。
```csharp Form1.cs lines theme={null}
private Button logoutButton;
public Form1()
{
// ... existing constructor code ...
logoutButton = new Button
{
Text = "Log Out",
Width = 120,
Height = 40,
Left = (ClientSize.Width - 120) / 2,
Top = (ClientSize.Height - 40) / 2 + 50
};
logoutButton.Click += logoutButton_Click;
Controls.Add(logoutButton);
}
private async void logoutButton_Click(object sender, EventArgs e)
{
await _client.LogoutAsync();
}
```
`LoginResult.User` プロパティは、認証されたユーザーのプロフィールを含む [ClaimsPrincipal](https://learn.microsoft.com/en-us/dotnet/api/system.security.claims.claimsprincipal) です。アプリケーションにユーザー情報を表示するには、クレームを参照してください。
```csharp lines theme={null}
if (loginResult.IsError == false)
{
Debug.WriteLine($"name: {loginResult.User.FindFirst(c => c.Type == "name")?.Value}");
Debug.WriteLine($"email: {loginResult.User.FindFirst(c => c.Type == "email")?.Value}");
}
```
IDトークンで返されるすべてのクレームを確認するには、次のようにします。
```csharp lines theme={null}
if (loginResult.IsError == false)
{
foreach (var claim in loginResult.User.Claims)
{
Debug.WriteLine($"{claim.Type} = {claim.Value}");
}
}
```
**チェックポイント**
これで、Auth0 と連携した WPF または WinForms アプリケーションが動作する状態になっているはずです。アプリケーションを実行し、次の点を確認してください。
* ログインボタンをクリックすると、ポップアップウィンドウで Auth0 Universal Login ページが開く。
* ログインまたはサインアップができる。
* 認証後、`LoginResult.User` からユーザー情報にアクセスできる。
* ログアウトボタンをクリックすると、セッションがクリアされ、ログアウト URL にリダイレクトされる。
***
## 高度な使い方
トークンやユーザーのプロパティにアクセスする前に、`LoginResult.IsError` を確認してください。認証に失敗した場合は、`Error` プロパティと `ErrorDescription` プロパティに詳細が格納されます。
```csharp lines theme={null}
var loginResult = await _client.LoginAsync();
if (loginResult.IsError)
{
Debug.WriteLine($"An error occurred during login: {loginResult.Error}");
// loginResult.ErrorDescription には完全なエラーメッセージが含まれます
return;
}
// ここではトークンとユーザーに安全にアクセスできます
Debug.WriteLine($"id_token: {loginResult.IdentityToken}");
Debug.WriteLine($"access_token: {loginResult.AccessToken}");
```
ユーザーが認証せずにログイン用のポップアップを閉じた場合、`LoginAsync()` は `BrowserResultType.UserCancel` を持つ結果を返します。これは想定された動作であり、エラーとして扱わないでください。
ユーザーに再度ログインさせることなく新しいアクセストークンを取得するには、最初の `LoginResult` で取得したリフレッシュトークンを使って `RefreshTokenAsync()` を呼び出します。
```csharp lines theme={null}
// リフレッシュトークンを受け取るには offline_access スコープを要求します
_client = new Auth0Client(new Auth0ClientOptions
{
Domain = "{yourDomain}",
ClientId = "{yourClientId}",
Scope = "openid profile email offline_access"
});
// 初回ログインで取得したリフレッシュトークンを保存します
var refreshToken = loginResult.RefreshToken;
// 後で新しいトークンと交換します
var refreshResult = await _client.RefreshTokenAsync(refreshToken);
if (refreshResult.IsError == false)
{
var newAccessToken = refreshResult.AccessToken;
}
```
リフレッシュトークンを使用するには `offline_access` スコープが必要です。また、Auth0 の Application Settings の **Refresh Token Rotation** で有効にしておく必要があります。
***
## 追加リソース
Auth0 OIDC Client for .NET のソースコード、リリースノート、Issue トラッカー
ユーザープロファイルのクレームと /userinfo エンドポイントについて詳しく確認する
Auth0 コミュニティからサポートを受ける
***
## よくある問題
**問題:** WebView2 のポップアップウィンドウが開いてログインページは表示されますが、認証情報を入力しても何も起こりません。
**解決策:** Microsoft Edge WebView2 Runtime がマシンにインストールされていません。[Microsoft WebView2 のダウンロードページ](https://developer.microsoft.com/en-us/microsoft-edge/webview2/) からインストールしてください。WebView2 は Windows 11 と最近の Windows 10 ビルドには含まれていますが、古いシステムでは別途インストールする必要があります。
**問題:** ログイン後、Auth0 から `callback URL mismatch` エラーが返されます。
**解決策:** SDK が使用するリダイレクト URI が、Auth0 Dashboard の **Allowed Callback URLs** に設定されているいずれの値とも一致していません。Application Settings の Allowed Callback URLs に `https://{yourDomain}/mobile` を追加してください。SDK はデフォルトでこの URL を使用します。
**問題:** ログアウト後、未登録のログアウト URL に関するエラーが Auth0 から返されます。
**解決策:** Application Settings の **Allowed Logout URLs** に `https://{yourDomain}/mobile` を追加してください。
**問題:** `LoginResult.IsError` が `true` ですが、原因を示す明確な情報がありません。
**解決策:** 詳細は `LoginResult.Error` と `LoginResult.ErrorDescription` を確認してください。
```csharp lines theme={null}
if (loginResult.IsError)
{
Debug.WriteLine($"Error: {loginResult.Error}");
Debug.WriteLine($"Description: {loginResult.ErrorDescription}");
}
```
よくある原因:
* Auth0 Dashboard のアプリケーションタイプが **Native** に設定されていない
* Advanced Settings → OAuth で **OIDC Conformant** が有効になっていない
* **JSON Web Token Signature Algorithm** が **RS256** に設定されていない
**問題:** `LoginResult.RefreshToken` が `null` です。
**解決策:** リフレッシュトークンを受け取るには `offline_access` スコープが必要です。これを `Scope` オプションに追加してください。
```csharp lines theme={null}
_client = new Auth0Client(new Auth0ClientOptions
{
Domain = "{yourDomain}",
ClientId = "{yourClientId}",
Scope = "openid profile email offline_access"
});
```
また、Auth0 Dashboard の Application Settings で **Refresh Token Rotation** が有効になっていることも確認してください。