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

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

サードパーティ 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]（ディスクへのログ記録を開始）をクリックします。ログを保存する場所を尋ねられたら選択します。

   

3. FedCM を呼び出すページ（デモ RP など）を開きます。

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

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

   

6. 任意のログ表示ツール（NetLog ビューアなど）でログを開きます。

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

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

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

次のステップ