FedCM を実装するための開発環境を設定する

FedCM の実装を開始する環境を設定するには、Chrome の IdP と RP の両方で安全なコンテキスト（HTTPS または localhost）が必要です。

サードパーティ Cookie ブロック

Chrome の設定でサードパーティ Cookie をブロックする
Chrome の設定でサードパーティ Cookie をブロックする

Chrome でサードパーティ Cookie を使用せずに FedCM がどのように動作するかをテストできます。サードパーティ Cookie をブロックするには、シークレット モードを使用するか、パソコンの設定で chrome://settings/cookies から [サードパーティ Cookie をブロックする] を選択するか、モバイルで [設定] > [サイトの設定] > [Cookie] に移動して選択します。

パソコンでデバッグする

Chrome 139 以降では、Chromium ベースのブラウザの DevTools で FedCM をデバッグできます。

  1. DevTools を開きます。

  2. [ネットワーク] パネルに移動します。

    画面の右側に DevTools の [ネットワーク] パネルが開いています。
    DevTools の [ネットワーク] パネル

  3. 検査するウェブサイト（たとえば、Google のデモ RP）に移動します。

  4. フィルタバーに resource-type:fedcm と入力すると、FedCM リクエストのみをフィルタできます。

    DevTools の [ネットワーク] パネルが開いており、[resource-type:fedcm] フィルタが適用され、リストに FedCM リクエストのみが表示されている。
    DevTools の [Network] パネルで適用されたリソースタイプのフィルタ

  5. リクエストをクリックすると、詳細を確認できます。

    リクエストの詳細の [ヘッダー] タブには、'accounts' エンドポイントへのリクエストがステータス コード '401 Unauthorized' で失敗したことが示されています。
    リクエストの詳細

次のステップ

ID プロバイダ側で FedCM を使用して ID ソリューションを実装する方法を確認します。
RP に FedCM を実装し、JavaScript SDK を配布します。セルフ実装の必要がないため、RP を最新の状態に保つことができます。