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

# Flutter Windows アプリケーションにログインを追加する

> このガイドでは、Auth0 Flutter SDK（ベータ版）を使用して、Flutter Windows デスクトップ アプリケーションに Auth0 を統合する方法を説明します。

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****マスク済み*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

export const envSnippet = `AUTH0_DOMAIN={yourDomain}
AUTH0_CLIENT_ID={yourClientId}`;

<Note>
  **前提条件:**

  * Flutter SDK 3.24.0+ と Dart 3.5.0+。
  * Windows 10 以降。
  * **Desktop development with C++** ワークロードを含む Visual Studio 2022。
  * Auth0 アカウント — [無料でサインアップ](https://auth0.com/signup)。

  この機能は **ベータ版** (`auth0_flutter` 2.1.0-beta.1) です。API は一般提供前に変更される可能性があります。
</Note>

このガイドでは、OAuth 2.0 の [Authorization Code Flow + PKCE](/ja/docs/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce) を使用して `auth0_flutter` SDK を Flutter の Windows デスクトップアプリに組み込み、ログイン、ログアウト、ユーザープロフィールの表示を追加する方法を説明します。

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

<Steps>
  <Step title="Flutter の Windows プロジェクトを作成する" stepNumber={1}>
    Windows プラットフォームに対応した新しい Flutter プロジェクトを作成します。

    ```shellscript theme={null}
    flutter create --platforms=windows my_app
    cd my_app
    ```

    Windows が利用可能か確認します:

    ```shellscript theme={null}
    flutter devices
    ```

    一覧に Windows デスクトップ デバイスが表示されるはずです。

    <Tip>
      `flutter doctor` を実行して、環境が正しく設定されており、C++ によるデスクトップ開発を含む Visual Studio 2022 が検出されていることを確認してください。
    </Tip>
  </Step>

  <Step title="Auth0 Flutter SDKをインストールする" stepNumber={2}>
    Windows 対応を含む SDK のベータ版を追加します。

    ```shellscript theme={null}
    flutter pub add auth0_flutter:2.1.0-beta.1
    flutter pub add flutter_dotenv
    ```

    `pubspec.yaml` には次の内容を含めてください。

    <Snippet file="quickstart/native/flutter-windows/pubspec.yaml.mdx" />

    <Tip>
      Auth0 Flutter SDK では **Flutter 3.24.0+** および **Dart 3.5.0+** が必要です。さらに、Windows プラットフォームでは、C++ によるデスクトップ開発ワークロードを含む **Visual Studio 2022** も必要です。
    </Tip>
  </Step>

  <Step title="Auth0 を設定" stepNumber={3}>
    Windowsデスクトップでの認証に必要なコールバックURLを設定して、Auth0 アプリケーションを作成または構成します。

    <Tabs>
      <Tab title="クイックセットアップ">
        Auth0 Dashboard で、次の設定を使用して **Native** アプリケーションを作成します。

        | 項目                    | 値                         |
        | --------------------- | ------------------------- |
        | Allowed Callback URLs | `auth0flutter://callback` |
        | Allowed Logout URLs   | `auth0flutter://callback` |

        認証情報:

        * **ドメイン:** `{yourDomain}`
        * **クライアントID:** `{yourClientId}`
      </Tab>

      <Tab title="CLI">
        ```shellscript theme={null}
        auth0 apps create \
          --name "My Flutter Windows App" \
          --type native \
          --callbacks "auth0flutter://callback" \
          --logout-urls "auth0flutter://callback"
        ```
      </Tab>

      <Tab title="Dashboard">
        1. [Auth0 Dashboard](https://manage.auth0.com/) で **Applications > Applications** に移動します。
        2. **Create Application** を選択します。
        3. 名前を "My Flutter Windows App" にし、アプリケーションタイプとして **Native** を選択します。
        4. 新しいアプリケーションの **Settings** タブに移動します。
        5. **Allowed Callback URLs** を `auth0flutter://callback` に設定します。
        6. **Allowed Logout URLs** を `auth0flutter://callback` に設定します。
        7. 下にスクロールして **Save Changes** をクリックします。
        8. Application Settings の上部にある **Domain** と **Client ID** の値をコピーします。
      </Tab>
    </Tabs>

    <Info>
      `auth0flutter://callback` は、認証完了後にブラウザーのコールバックをデスクトップアプリケーションに戻すためのカスタムスキームURLです。
    </Info>
  </Step>

  <Step title="環境変数を設定する" stepNumber={4}>
    プロジェクトのルートに `.env` ファイルを作成します。

    <AuthCodeBlock children={envSnippet} language="shellscript" filename=".env" />

    `pubspec.yaml` で `.env` ファイルを Flutter のアセットとして追加します。

    <Snippet file="quickstart/native/flutter-windows/pubspec-assets.yaml.mdx" />

    <Warning>
      `.env` ファイルは絶対にバージョン管理にコミットしないでください。`.gitignore` に追加してください。
    </Warning>
  </Step>

  <Step title="Windows ランナーを設定する" stepNumber={5}>
    Windows 認証フローでは、アプリの runner で callback を処理する仕組みが必要です。Flutter plugin は、プロトコルスキームのアクティベーションを OS から自動的に受け取らないため、シングルインスタンス化の制御と URI の転送を追加する必要があります。

    `windows/runner/main.cpp` の内容を次のように置き換えます。

    <Snippet file="quickstart/native/flutter-windows/main.cpp.mdx" />

    このコードでは、次のことを行います。

    * Windows mutex を使用してシングルインスタンスを強制します。
    * コマンドライン引数として渡された `auth0flutter://callback` URI を取得します。
    * セカンダリ起動からの URI を、名前付きパイプ経由で実行中のインスタンスに転送します。
    * Auth0 plugin が読み取る `PLUGIN_STARTUP_URL` 環境変数を設定します。
  </Step>

  <Step title="独自のURLスキームを登録する" stepNumber={6}>
    Windows がコールバック URI をアプリにルーティングできるように、`auth0flutter` をカスタム URL スキームとして登録します。

    `windows/url_scheme.reg` ファイルを作成します。

    <Snippet file="quickstart/native/flutter-windows/url_scheme.reg.mdx" />

    `C:\path\to\your\app.exe` は、ビルドした実行可能ファイルの実際のパスに置き換えてください。開発中は通常、次のようになります。

    ```text theme={null}
    build\windows\x64\runner\Debug\my_app.exe
    ```

    `.reg` ファイルをダブルクリックして、Windows レジストリにインポートします。

    <Info>
      本番環境で配布する場合は、`.reg` ファイルに頼るのではなく、アプリのインストーラー (MSIX、Inno Setup など) でカスタム URL スキームをプログラムから登録してください。
    </Info>

    **スキームが正しく機能することを確認します。**

    コマンド プロンプトを開いて、次を実行します。

    ```shellscript theme={null}
    start auth0flutter://test
    ```

    アプリが起動するか、すでに実行中の場合はフォアグラウンドに表示されます。
  </Step>

  <Step title="ログインとログアウトを実装する" stepNumber={7}>
    Windows 認証を処理するため、`lib/auth_service.dart` を作成します。

    <Snippet file="quickstart/native/flutter-windows/auth_service.dart.mdx" />

    <Info>
      Auth0 Flutter Windows SDK は現在、認証情報の管理をサポートしていません。アプリを再起動した後もセッションを維持する必要がある場合は、認証情報を手動で保存する必要があります。
    </Info>
  </Step>

  <Step title="ユーザープロフィールを表示する" stepNumber={8}>
    `lib/main.dart` にメインアプリの UI を作成します。

    <Snippet file="quickstart/native/flutter-windows/main.dart.mdx" />
  </Step>

  <Step title="アプリケーションを実行する" stepNumber={9}>
    アプリをビルドして実行します:

    ```shellscript theme={null}
    flutter run -d windows
    ```

    **想定されるフロー:**

    1. アプリが起動し、**ログイン** ボタンが表示されます。
    2. **ログイン** を選択します。システムブラウザーで Auth0 Universal Login ページが開きます。
    3. ブラウザーで認証を完了します。
    4. ブラウザーが `auth0flutter://callback` にリダイレクトし、アプリがフォアグラウンドに戻ります。
    5. ユーザーの名前、メールアドレス、プロフィール画像が表示されます。

    <Warning>
      テストする前に、カスタム URL スキームが登録されていること (手順 6) を確認してください。これがないと、ブラウザーのコールバックでアプリケーションに戻れません。
    </Warning>
  </Step>
</Steps>

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

  これで、Flutter Windows アプリケーションで Auth0 ログインが完全に動作するようになっているはずです。アプリは Auth0 Universal Login 用にシステムブラウザーを開き、カスタム URL スキーム経由でコールバックを受け取り、認証済みユーザーのユーザープロファイルを表示します。
</Check>

***

<div id="troubleshoot-advanced-use">
  ## トラブルシューティングと高度な使い方
</div>

<Accordion title="よくある問題と解決策">
  ### ブラウザーは開くが、アプリがコールバックを受信しない

  **症状**: ブラウザーでは Auth0 ログインに成功するが、アプリが認証情報をまったく受信しない。

  **対処法:**

  1. レジストリ エディターを開き、`HKEY_CURRENT_USER\Software\Classes\auth0flutter\shell\open\command` を確認して、`.exe` へのパスが正しいことを確認します。
  2. コマンド プロンプトで `start auth0flutter://test` を実行してテストします。アプリが起動するはずです。
  3. `windows/runner/main.cpp` に名前付きパイプ サーバーとミューテックスのコードが含まれていることを確認します。
  4. タスク マネージャーで古いインスタンスが実行されたままになっていないことを確認します。
  5. `flutter clean && flutter run -d windows` を実行して完全に再ビルドします。

  ### 認証が 5 分後にタイムアウトする

  **症状**: ログインが途中で止まったように見え、最終的に失敗する。

  **対処法:** アプリがコールバック URI を受信していません。次を確認してください:

  1. レジストリ エントリが正しい実行可能ファイルのパスを指していること。
  2. ミューテックス名 `auth0flutter_single_instance_mutex` が `main.cpp` 内で一貫していること。
  3. ファイアウォールまたはアンチウイルスが名前付きパイプをブロックしていないこと。
  4. 古いインスタンスをすべて終了し、再ビルドすること。

  ### URI を転送せずに 2 つ目のアプリ インスタンスが起動する

  **症状**: 既存のアプリがコールバックを受信する代わりに、新しいウィンドウが開く。

  **対処法:**

  1. タスク マネージャーで実行中のインスタンスをすべて終了します。
  2. `main.cpp` 内でミューテックス名が一貫していることを確認します。
  3. 次のコマンドで再ビルドします: `flutter clean && flutter run -d windows`。

  ### WindowsWebAuthentication が見つからない

  **症状**: `windowsWebAuthentication` を参照するコンパイル エラーが発生する。

  **対処法:** `pubspec.yaml` でベータ版が指定されていることを確認します:

  ```yaml theme={null}
  dependencies:
    auth0_flutter: 2.1.0-beta.1
  ```

  更新するには `flutter pub get` を実行します。

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

  **症状**: Auth0 から "redirect\_uri\_mismatch" エラーが返される。

  **対処法:**

  1. [Auth0 Dashboard](https://manage.auth0.com/) → Application Settings の **Allowed Callback URLs** が正確に `auth0flutter://callback` になっていることを確認します。
  2. コード内の `appCustomURL` パラメーターが `'auth0flutter://callback'` と一致していることを確認します。
  3. 末尾のスラッシュや空白がないか確認します。
</Accordion>

<Accordion title="中継サーバーを使用する">
  Auth0 がカスタム スキームに直接リダイレクトすると、ブラウザーにプロンプトが表示されたり、空白のタブが残ったりすることがあります。よりスムーズに利用するには、中継用の HTTPS サーバーを使用します:

  1. `auth0flutter://callback?code=...&state=...` にリダイレクトするサーバー エンドポイント (例: `https://your-app.example.com/callback`) を設定します。
  2. [Auth0 Dashboard](https://manage.auth0.com/) → Application Settings で、**Allowed Callback URLs** を `https://your-app.example.com/callback` に設定します。
  3. 両方の URL をログイン メソッドに渡します:

  ```dart theme={null}
  final result = await auth0.windowsWebAuthentication().login(
    appCustomURL: 'auth0flutter://callback',
    redirectUrl: 'https://your-app.example.com/callback',
  );
  ```

  よりすっきりした動作にするために、サーバー ページでは "Redirecting..." を表示して自身を閉じることもできます。
</Accordion>

<Accordion title="カスタム スコープとオーディエンス">
  追加のスコープまたは API のオーディエンスをリクエストします:

  ```dart theme={null}
  final result = await auth0.windowsWebAuthentication().login(
    appCustomURL: 'auth0flutter://callback',
    scopes: {'openid', 'profile', 'email', 'read:messages'},
    audience: 'https://your-api.example.com',
  );
  ```

  `audience` パラメーターを使用する前に、[Auth0 Dashboard](https://manage.auth0.com/) → **アプリケーション > APIs** で API を設定してください。
</Accordion>

***

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

* [GitHub の Auth0 Flutter SDK](https://github.com/auth0/auth0-flutter) — ソースコードと Issue トラッカー。
* [pub.dev の Auth0 Flutter SDK](https://pub.dev/packages/auth0_flutter) — API リファレンス。
* [Flutter クイックスタート (Android、iOS、macOS、Web) ](https://auth0.com/docs/quickstart/native/flutter) — 他のプラットフォーム向けガイド。
* [トークンの保存のベストプラクティス](https://auth0.com/docs/secure/tokens/token-storage) — 認証情報の安全な管理。
* [Auth0 Universal Login](https://auth0.com/docs/authenticate/login/auth0-universal-login) — ログイン体験のカスタマイズ。