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

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

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

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

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

パソコンでデバッグする

Google は、DevTools での FedCM デバッグ機能の改善に取り組んでいます。これらの機能が開発中である間は、chrome://net-export ネットワーク リクエスト ログを使用できます。

  1. chrome://net-export に移動します。
  2. [Include raw bytes](未加工バイトを含める)を選択し、[Start Logging to Disk](ディスクへのログ記録を開始)をクリックします。ログを保存する場所を尋ねられたら選択します。

    Net-export ツールのインターフェース: [Stat Logging to Disk] ボタンが表示され、[Include raw bytes] チェックボックスがオンになっています。
    Net-export ツールのインターフェース: 開始
  3. FedCM を呼び出すページ(デモ RP など)を開きます。

  4. デバッグする FedCM フロー(ユーザー登録など)を完了します。

  5. chrome://net-export に移動し、[Stop Logging] を押します。

    net-export ツールのインターフェース: ログファイルが書き込まれ、ファイルパスが表示されています。
    Net-export ツールのインターフェース: ディスクへのロギングが完了しました
  6. 任意のログ表示ツール(NetLog ビューアなど)でログを開きます。

  7. NetLog ビューアを使用する場合は、左側のパネルから Events を選択し、type:URL_REQUEST フィルタを適用します。

この例のログは、アカウント エンドポイントに 2 つのリクエストが送信されたことを示しています。これは、ユーザーがページに初めてアクセスしたときに IdP でログインしなかったためです。URL_REQUEST_JOB_FILTERED_BYTES_READ は、サーバーがレスポンス本文 { error: "not signed in." } でエラー メッセージを返したことを示します。

Net-export ツール インターフェース: レスポンス本文にエラー メッセージを含むログ。
Net-export ツール インターフェース: エラー レスポンス

2 番目の /accounts リクエストが成功し、IdP からアカウントデータが返されました。

Net-export ツールのインターフェース: レスポンス本文にアカウント データを含むログ。
Net-export ツールのインターフェース: アカウントデータを含むレスポンス

次のステップ

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