FedCM を使用してプライバシー保護の ID 連携を行う方法について説明します。
FedCM(Federated Credential Management): プライバシー保護 方法(「ログインする...」など)にアクセスする方法に関して、 ユーザーは自分の個人情報を ID サービスまたはサイトから保護できます。
FedCM のユースケース、ユーザーフロー、API ロードマップについて詳しくは、 FedCM API の概要をご覧ください。
FedCM 開発環境
Chrome の IdP と RP の両方に安全なコンテキスト(HTTPS または localhost)が必要である 使用する必要があります
Android 版 Chrome でコードをデバッグする
サーバーをローカルでセットアップして実行し、FedCM コードをデバッグする。Google Chat では このサーバーへのアクセス ポート付きの USB ケーブルで接続された Android デバイスの Chrome 使用できます。
パソコンの DevTools を使用して、Android 版 Chrome をデバッグできます。手順は次のとおりです。 Android のリモート デバッグの手順 。
Chrome でサードパーティ Cookie をブロックする
<ph type="x-smartling-placeholder">![Chrome を設定してサードパーティ Cookie の段階的廃止をシミュレートする](https://developers.google.cn/static/privacy-sandbox/assets/images/simulate-third-party-cook-8416bea1ab2b.png?authuser=0000&hl=ja)
Chrome でサードパーティ Cookie を使用しない FedCM の動作を、Chrome のリリース前にテストできます。 適用されます。
サードパーティの Cookie をブロックするには、シークレット モードを使用します。
モードを選択するか、[ブロック] を選択して
「サードパーティ Cookie」パソコンの設定(chrome://settings/cookies
または以下)
[設定] >サイトの設定 >Cookie。
FedCM API の使用
FedCM と統合するには、既知のファイルを作成します。 アカウントの構成ファイルとエンドポイント list、アサーションの発行、 (省略可)クライアント メタデータ。
そこから、FedCM は RP が署名に使用できる JavaScript API を公開します。 IdP に登録します。
既知のファイルを作成する
トラッカーが
API を使用するには、既知のファイルは、
提供元: /.well-known/web-identity
の eTLD+1
できます。
たとえば、IdP のエンドポイントがサービス プロバイダ
https://accounts.idp.example/
は、既知のファイルを次の場所で提供する必要があります。
https://idp.example/.well-known/web-identity
と IdP 構成
できます。次に、よく知られたファイル コンテンツの例を示します。
{
"provider_urls": ["https://accounts.idp.example/config.json"]
}
JSON ファイルには、IdP の配列を含む provider_urls
プロパティが含まれている必要があります。
構成ファイルのパス部分として指定できる
navigator.credentials.get
の configURL
(RP 別)。商品数
配列内の URL 文字列は 1 つだけですが、実際の URL は
フィードバックをお寄せください。
IdP 構成ファイルとエンドポイントを作成する
IdP 構成ファイルは、ブラウザに必要なエンドポイントのリストを提供します。IdPs
この構成ファイルと必要なエンドポイントと URL がホストされます。すべての JSON
レスポンスは、application/json
コンテンツ タイプで送信する必要があります。
構成ファイルの URL は、モジュールに
RP で実行された navigator.credentials.get
呼び出し。
const credential = await navigator.credentials.get({
identity: {
context: 'signup',
providers: [{
configURL: 'https://accounts.idp.example/config.json',
clientId: '********',
nonce: '******'
}]
}
});
const { token } = credential;
IdP 構成ファイルの場所の完全な URL を configURL
として指定します。日時
RP、ブラウザで navigator.credentials.get()
が呼び出される
GET
リクエストで構成ファイルを Origin
ヘッダーや
Referer
ヘッダー。リクエストに Cookie が含まれておらず、リダイレクトも実行されていません。
これにより、IdP はリクエストの送信者やリクエスト元を学習できなくなります。
RP が接続を試行しています。例:
GET /config.json HTTP/1.1
Host: accounts.idp.example
Accept: application/json
Sec-Fetch-Dest: webidentity
<ph type="x-smartling-placeholder">
ブラウザは、IdP から以下を含む JSON レスポンスを要求します。 プロパティ:
プロパティ | 説明 |
---|---|
accounts_endpoint (必須) |
アカウント エンドポイントの URL。 |
client_metadata_endpoint (任意) |
クライアント メタデータ エンドポイントの URL。 |
id_assertion_endpoint (必須) |
ID アサーション エンドポイントの URL。 |
disconnect (任意) |
切断エンドポイントの URL。 |
login_url (必須) |
ユーザーが IdP にログインするためのログインページの URL。 |
branding (任意) |
さまざまなブランディング オプションを含むオブジェクト。 |
branding.background_color (任意) |
[...として続行] の背景色を設定するブランド オプション] ボタンを離します。適切な CSS 構文、つまり
hex-color
hsl() ,
rgb() 、または
named-color 。 |
branding.color (任意) |
[...として続行] のテキストの色を設定するブランド オプション] ボタンを離します。適切な CSS 構文、つまり
hex-color
hsl() ,
rgb() 、または
named-color 。 |
branding.icons (任意) |
ログイン ダイアログに表示されるアイコン オブジェクトを設定するブランド オプション。アイコン オブジェクトは、次の 2 つのパラメータを含む配列です。
<ph type="x-smartling-placeholder">
|
RP が identity.context
値を使用して FedCM ダイアログ UI の文字列を変更できた
事前定義された認証に対応する navigator.credentials.get()
学びます。省略可能なプロパティは、"signin"
(デフォルト)、"signup"
、
"use"
または "continue"
。
![FedCM ダイアログにブランディングが適用される仕組み](https://developers.google.cn/static/privacy-sandbox/assets/images/RZwmFnyJChjlki8QsnBB.png?authuser=0000&hl=ja)
IdP からのレスポンス本文の例を次に示します。
{
"accounts_endpoint": "/accounts.php",
"client_metadata_endpoint": "/client_metadata.php",
"id_assertion_endpoint": "/assertion.php",
"disconnect_endpoint": "/disconnect.php",
"login_url": "/login",
"branding": {
"background_color": "green",
"color": "#FFEEAA",
"icons": [{
"url": "https://idp.example/icon.ico",
"size": 25
}]
}
}
構成ファイルを取得すると、ブラウザは後続のリクエストを IdP エンドポイント:
<ph type="x-smartling-placeholder">![IdP エンドポイント](https://developers.google.cn/static/privacy-sandbox/assets/images/idp-endpoints-a67327f46da51.png?authuser=0000&hl=ja)
アカウント エンドポイント
IdP のアカウント エンドポイントは、ユーザーが使用しているアカウントのリストを返します。 適用できます。IdP が複数のアカウントをサポートしている場合、 エンドポイントは、ログインしているすべてのアカウントを返します。
ブラウザが、Cookie を含む GET
リクエストを送信しますが、SameSite=None
は指定しません。
client_id
パラメータ、Origin
ヘッダー、Referer
ヘッダーのいずれか。この
ユーザーが署名しようとしている RP を IdP が学習できないようにします。
できます。例:
GET /accounts.php HTTP/1.1
Host: accounts.idp.example
Accept: application/json
Cookie: 0x23223
Sec-Fetch-Dest: webidentity
リクエストを受け取ったサーバーは、次のことを行います。
- リクエストに
Sec-Fetch-Dest: webidentity
HTTP ヘッダーが含まれていることを確認します。 - セッション Cookie と、すでにログインしているアカウントの ID を照合します。
- アカウントのリストを示して回答します。
ブラウザが accounts
プロパティを含む JSON レスポンスを想定している
次のプロパティを含むアカウント情報の配列です。
プロパティ | 説明 |
---|---|
id (必須) |
ユーザーの一意の ID。 |
name (必須) |
ユーザーの姓名。 |
email (必須) |
ユーザーのメールアドレス。 |
given_name (任意) |
ユーザーの名。 |
picture (任意) |
ユーザーのアバター画像の URL。 |
approved_clients (任意) |
ユーザーが登録した RP クライアント ID の配列。 |
login_hints (任意) |
IdP が指定するためにサポートしているすべてのフィルタタイプの配列
できます。RP は navigator.credentials.get() を呼び出すことができる。
loginHint プロパティを使用して、
指定したアカウントのみを表示できます。 |
domain_hints (任意) |
アカウントが関連付けられているすべてのドメインの配列。RP は
navigator.credentials.get() に発信する
domainHint プロパティを使用して、
できます。 |
レスポンス本文の例:
{
"accounts": [{
"id": "1234",
"given_name": "John",
"name": "John Doe",
"email": "john_doe@idp.example",
"picture": "https://idp.example/profile/123",
"approved_clients": ["123", "456", "789"],
"login_hints": ["demo1", "demo1@idp.example"]
}, {
"id": "5678",
"given_name": "Johnny",
"name": "Johnny",
"email": "johnny@idp.example",
"picture": "https://idp.example/profile/456",
"approved_clients": ["abc", "def", "ghi"],
"login_hints": ["demo2", "demo2@idp.example"],
"domain_hints": ["corp.example"]
}]
}
ユーザーがログインしていない場合は、HTTP 401(Unauthorized)で応答します。
返されたアカウント リストはブラウザによって使用され、 表示されます。
クライアント メタデータ エンドポイント
IdP のクライアント メタデータ エンドポイントは、次のような証明書利用者のメタデータを返します。 RP のプライバシー ポリシーと利用規約を確認します。RP は、そのリソースへのリンクを 事前に IdP に送信する必要があります。これらのリンクは ユーザーが RP にまだ登録していない場合は、ログイン ダイアログに表示されます。 まだ作成されていません。
ブラウザが client_id
を使用して GET
リクエストを送信します。
navigator.credentials.get
(Cookie なし)。例:
GET /client_metadata.php?client_id=1234 HTTP/1.1
Host: accounts.idp.example
Origin: https://rp.example/
Accept: application/json
Sec-Fetch-Dest: webidentity
リクエストを受け取ったサーバーは、次のことを行います。
client_id
の RP を決めます。- クライアント メタデータで応答します。
クライアント メタデータ エンドポイントのプロパティは次のとおりです。
プロパティ | 説明 |
---|---|
privacy_policy_url (任意) |
RP プライバシー ポリシーの URL。 |
terms_of_service_url (任意) |
RP の利用規約の URL。 |
ブラウザは、エンドポイントからの JSON レスポンスを想定します。
{
"privacy_policy_url": "https://rp.example/privacy_policy.html",
"terms_of_service_url": "https://rp.example/terms_of_service.html",
}
返されたクライアント メタデータはブラウザによって使用され、 ルールを定義できます。
ID アサーション エンドポイント
IdP の ID アサーション エンドポイントが、ログインしているユーザーに関するアサーションを返します。
ユーザーが navigator.credentials.get()
を使用して RP ウェブサイトにログインしたとき
呼び出しがあると、ブラウザはクッキーを含むPOST
リクエストを
SameSite=None
と application/x-www-form-urlencoded
のコンテンツ タイプを
このエンドポイントに、次の情報を追加します。
プロパティ | 説明 |
---|---|
client_id (必須) |
RP のクライアント ID。 |
account_id (必須) |
ログイン ユーザーの一意の ID。 |
nonce (任意) |
RP が提供するリクエストのノンス。 |
disclosure_text_shown |
結果はブール値ではなく、"true" または "false" の文字列になります。開示テキストが表示されない場合、結果は "false" になります。これは、RP のクライアント ID がアカウントのエンドポイントからのレスポンスの approved_clients プロパティ リストに含まれていた場合、またはブラウザで approved_clients が存在しない状態で過去に登録が行われた場合に発生します。 |
is_auto_selected |
RP で自動再認証が実行されている場合、is_auto_selected は "true" を示します。それ以外の場合は "false" 。これは、より多くのセキュリティ関連の機能をサポートするのに役立ちます。たとえば、ユーザーによっては、認証時に明示的なユーザー メディエーションを必要とする、より高いセキュリティ階層を希望する場合があります。IdP がこのようなメディエーションなしでトークン リクエストを受け取った場合、IdP は異なるリクエストを処理できます。たとえば、RP が mediation: required を使用して FedCM API を再度呼び出せるようにエラーコードを返します。 |
HTTP ヘッダーの例:
POST /assertion.php HTTP/1.1
Host: accounts.idp.example
Origin: https://rp.example/
Content-Type: application/x-www-form-urlencoded
Cookie: 0x23223
Sec-Fetch-Dest: webidentity
account_id=123&client_id=client1234&nonce=Ct60bD&disclosure_text_shown=true&is_auto_selected=true
リクエストを受け取ったサーバーは、次のことを行います。
- CORS(クロスオリジン リソース)を使用してリクエストに応答する 共有)をご覧ください。
- リクエストに
Sec-Fetch-Dest: webidentity
HTTP ヘッダーが含まれていることを確認します。 Origin
ヘッダーをclient_id
によって決定される RP オリジンと照合します。 一致しない場合は拒否します。account_id
と、すでにログインしているアカウントの ID を照合します。次の場合に拒否 一致しません- トークンで応答する。リクエストが拒否された場合は、エラーを返します。 レスポンス。
トークンの発行方法は IdP によって異なりますが、通常は
アカウント ID、クライアント ID、発行元、nonce
などの情報を
トークンが正規のものであることを RP が検証できます。
ブラウザは、次のプロパティを含む JSON レスポンスを想定しています。
プロパティ | 説明 |
---|---|
token (必須) |
トークンは、認証に関するクレームを含む文字列です。 |
{
"token": "***********"
}
返されたトークンはブラウザによって RP に渡されるため、RP は 認証を検証します。
エラー レスポンスを返す
id_assertion_endpoint
が「エラー」を返すこともあります。
次の 2 つのオプション フィールドがあります。
code
: IdP は、OAuth 2.0 指定されたエラー リスト (invalid_request
、unauthorized_client
、access_denied
、server_error
、 任意の文字列temporarily_unavailable
を使用できます。後者の場合、Chrome エラー UI に汎用エラー メッセージをレンダリングし、コードを RP に渡します。url
: ウェブページに関する情報を含む、人が読める形式のウェブページを識別します。 エラーに関する追加情報をユーザーに提供します。このフィールド ブラウザでは詳細なエラー メッセージを出力できないため、 ネイティブ UI でサポートします。次のステップへのリンク、カスタマー サービスの連絡先など 情報などです。エラーの詳細についてお客様から問い合わせがあった場合 ブラウザ UI から対象のページにアクセスして、 詳しく見ていきますURL は IdPconfigURL
と同じサイトのものである必要があります。
// id_assertion_endpoint response
{
"error" : {
"code": "access_denied",
"url" : "https://idp.example/error?type=access_denied"
}
}
エンドポイントの接続解除
IdentityCredential.disconnect()
を呼び出すと、ブラウザはクロスオリジン
SameSite=None
の Cookie と次のコンテンツ タイプを含む POST
リクエスト
application/x-www-form-urlencoded
、この切断エンドポイント、
次の情報を参照してください。
プロパティ | 説明 |
---|---|
account_hint |
IdP アカウントのヒント。 |
client_id |
RP のクライアント ID。 |
POST /disconnect.php HTTP/1.1
Host: idp.example
Origin: rp.example
Content-Type: application/x-www-form-urlencoded
Cookie: 0x123
Sec-Fetch-Dest: webidentity
account_hint=account456&client_id=rp123
リクエストを受け取ったサーバーは、次のことを行います。
- CORS(クロスオリジン リソース)を使用してリクエストに応答する 共有)をご覧ください。
- リクエストに
Sec-Fetch-Dest: webidentity
HTTP ヘッダーが含まれていることを確認します。 Origin
ヘッダーをclient_id
によって決定される RP オリジンと照合します。 一致しない場合は拒否します。account_hint
と、すでにログインしているアカウントの ID を照合します。- ユーザー アカウントを RP から切断します。
- 識別されたユーザー アカウント情報を JSON 形式で返します。 使用できます。
レスポンスの JSON ペイロードの例を次に示します。
{
"account_id": "account456"
}
代わりに、IdP がブラウザに対して、関連付けられているすべてのアカウントの接続を解除することを望んでいる場合、
アカウント ID と一致しない文字列("*"
など)を渡します。
ログイン URL
IdP は Login Status API を使用して、
ブラウザにログインします。ただし、次のように、ステータスが同期されていない場合があります。
セッションの有効期限が切れるとき。このような場合、
ユーザーがログインページから IdP に動的にログインできるようにする
idp 構成ファイルの login_url
で指定された URL。
次に示すように、FedCM ダイアログにはログインを提案するメッセージが表示されます。 次の画像をご覧ください。
<ph type="x-smartling-placeholder">![A](https://developers.google.cn/static/privacy-sandbox/assets/images/blog/fedcm-120-1.png?authuser=0000&hl=ja)
ユーザーが [続行] ボタンをクリックすると、ブラウザでポップアップ ウィンドウが開きます。 IdP のログインページにログインします。
<ph type="x-smartling-placeholder">![所有および運営(O&O)チャンネルは、](https://developers.google.cn/static/privacy-sandbox/assets/images/blog/fedcm-120-2.png?authuser=0000&hl=ja)
このダイアログは、ファーストパーティの Cookie が設定された通常のブラウザ ウィンドウです。どちらでもない IdP が決定し、ウィンドウ ハンドルは使用できない RP ページにクロスオリジン通信リクエストを送信します。ユーザーが ログインすると、IdP は次のことを行う必要があります。
Set-Login: logged-in
ヘッダーを送信するか、navigator.login.setStatus("logged-in")
API を使用して、ブラウザに対して 表示されます。IdentityProvider.close()
を呼び出してダイアログを閉じます。
![A](https://developers.google.cn/static/privacy-sandbox/assets/images/blog/fedcm.gif?authuser=0000&hl=ja)
ID プロバイダでのユーザーのログイン ステータスをブラウザに通知する
Login Status API は ウェブサイト(特に IdP)からブラウザにユーザーのログイン ステータスを伝える 認証されます。この API を使用すると、ブラウザはブラウザへの不要なリクエストを減らすことができます。 タイミング攻撃の可能性を軽減できます。
IdP は、HTTP ヘッダーを送信してユーザーのログイン ステータスをブラウザに通知できます。
ユーザーが IdP にログインしたときや
すべての IdP アカウントからログアウトされます。IdP ごとに(ID プロバイダによって識別される)
設定 URL など)に基づき、ブラウザはログイン ステータスを表すトライステート変数を保持します。
値は logged-in
、logged-out
、unknown
です。デフォルトの状態
unknown
です。
ユーザーがログインしていることを示すには、Set-Login: logged-in
HTTP ヘッダーを送信します。
IdP で最上位のナビゲーションまたは同一サイトのサブリソース リクエストで
origin:
Set-Login: logged-in
または、JavaScript API navigator.login.setStatus("logged-in")
を呼び出します。
IdP のオリジンから設定するには、次の操作を行います。
navigator.login.setStatus("logged-in")
これらの呼び出しでは、ユーザーのログイン ステータスが logged-in
として記録されます。ユーザーがログインしたとき
ステータスが logged-in
に設定されている場合、FedCM を呼び出している RP が IdP の
FedCM アカウントで利用可能なアカウントを表示し、
クリックします。
ユーザーがすべてのアカウントからログアウトしたことを通知するには、トップレベル ナビゲーションまたは同一サイト サブリソースで Set-Login:
logged-out
HTTP ヘッダーを送信します。
IdP のオリジンで次の処理が行われます。
Set-Login: logged-out
または、JavaScript API navigator.login.setStatus("logged-out")
を呼び出します。
IdP のオリジンから設定するには、次の操作を行います。
navigator.login.setStatus("logged-out")
これらの呼び出しでは、ユーザーのログイン ステータスが logged-out
として記録されます。ユーザーが
ログイン ステータスが logged-out
の場合、FedCM の呼び出しは、何もせずに失敗します。
IdP のアカウント エンドポイントに送信されます。
unknown
ステータスは、IdP がログイン ステータスを使用してシグナルを送信する前に設定されます。
APIUnknown
が導入されたことで移行が改善されました。以下の理由があります。
IdP にログインしていました。IdP に認証情報が
FedCM が最初に呼び出されるまでにブラウザにこのことを通知できる機会。この
Chrome は IdP のアカウント エンドポイントにリクエストを送信し、
ステータスは、アカウント エンドポイントからのレスポンスに基づいて計算されます。
- エンドポイントから有効なアカウントのリストが返された場合は、ステータスを次のように更新します。
logged-in
] をクリックし、FedCM ダイアログを開いてこれらのアカウントを表示します。 - エンドポイントからアカウントが返されない場合は、ステータスを
logged-out
に更新します。 失敗します。
動的ログインフローでユーザーがログインできるようにする
IdP はユーザーのログイン ステータスをブラウザに通知し続けますが、
セッションが期限切れになったときなどは、データが同期されていない可能性があります。ブラウザは、
ログイン ステータスが
logged-in
。ただし、セッションが終了していないため、サーバーはアカウントを返しません。
できます。そのような場合、ブラウザはユーザーのログインを動的に許可します。
ポップアップ ウィンドウで IdP に接続します。
ID プロバイダを使用して証明書利用者にログインする
IdP の設定とエンドポイントが利用可能になると、RP は
navigator.credentials.get()
: ユーザーに RP へのログインを許可するようリクエストします
関連付けられています
API を呼び出す前に、[FedCM が user's browser] です。FedCM が利用可能かどうかを確認するには、このコードを FedCM の実装:
if ('IdentityCredential' in window) {
// If the feature is available, take action
}
ユーザーが RP から IdP にログインできるようにリクエストする手順は次のとおりです。 次に例を示します。
const credential = await navigator.credentials.get({
identity: {
providers: [{
configURL: 'https://accounts.idp.example/config.json',
clientId: '********',
nonce: '******'
}]
}
});
const { token } = credential;
providers
プロパティは、IdentityProvider
の配列を取ります。
オブジェクト
次のプロパティがあります。
プロパティ | 説明 |
---|---|
configURL (必須) |
IdP 構成ファイルのフルパス。 |
clientId (必須) |
IdP が発行した RP のクライアント ID。 |
nonce (任意) |
この特定のリクエストに対してレスポンスが発行されるようにするランダムな文字列。リプレイ攻撃を防ぐ。 |
loginHint (任意) |
login_hints
アカウント エンドポイント、FedCM
指定したアカウントが選択的に表示されます。 |
domainHint (任意) |
domain_hints
アカウント エンドポイント、FedCM
指定したアカウントが選択的に表示されます。 |
ブラウザによる登録とログインのユースケースの処理は、
アカウント リストのレスポンスに「approved_clients
」が含まれている
提供します。ブラウザには開示情報が表示されません。
ユーザーが RP にすでに登録している場合は、「To continue with ....」というテキストを表示します。
登録の状態は、次の条件が満たされるかどうかに基づいて決定されます。 完了の有無:
approved_clients
に RP のclientId
が含まれている場合。- ユーザーがすでに RP に登録したことをブラウザが記憶している場合。
RP が navigator.credentials.get()
を呼び出すと、次のアクティビティが行われます。
place:
- ブラウザはリクエストを送信し、複数のドキュメントを取得します。
<ph type="x-smartling-placeholder">
- </ph>
- well-known ファイルと IdP 構成 fileエンドポイントを宣言します
- アカウント リスト。
- 省略可: RP のプライバシー ポリシーと利用規約の URL クライアント メタデータ エンドポイントから取得します。
- ブラウザには、ユーザーがログインに使用できるアカウントのリストが表示されます。 利用規約とプライバシーポリシー(ある場合)
- ユーザーがログインに使用するアカウントを選択すると、ID へのリクエストが アサーション エンドポイントが IdP に送信され、 あります。
- RP は、ユーザーを認証するためにトークンを検証できます。
![Login API 呼び出し](https://developers.google.cn/static/privacy-sandbox/assets/images/login-api-call-a55fdb8f753e8.png?authuser=0000&hl=ja)
RP は FedCM に対応していないブラウザをサポートすることが前提となっているため、 FedCM 以外の既存のログイン プロセスをユーザーが使用できるようにする必要があります。終了 サードパーティ Cookie は完全に廃止され、今後も廃止される見込み 問題ではありません。
トークンが RP サーバーによって検証されると、RP はユーザーまたは そのユーザーはログインして新しいセッションを開始できます。
Login Hint API
ユーザーがログインした後、証明書利用者(RP)がユーザーに 再認証する必要があります。ただし、ユーザーはどのアカウントを使っているかわからない可能性があります。 ログインに使用するアカウントを RP で指定できると、 アカウントを選択します。
RP は、次の呼び出しによって特定のアカウントを選択的に表示できます。
navigator.credentials.get()
は、loginHint
プロパティのいずれか
login_hints
アカウントの一覧から取得した値
を使用します。
return await navigator.credentials.get({
identity: {
providers: [{
configURL: "https://idp.example/manifest.json",
clientId: "123",
nonce: nonce,
loginHint : "demo1@example.com"
}]
}
});
loginHint
に一致するアカウントがない場合、FedCM ダイアログにログイン プロンプトが表示されます。
これにより、ユーザーは、によって要求されたヒントに一致する IdP アカウントにログインできます。
表示されます。ユーザーがプロンプトをタップすると、ポップアップ ウィンドウが開いて
構成ファイルで指定されたログイン URL。リンクが
ログインヒントとドメインヒントのクエリ パラメータが追加されていることがわかります。
Domain Hint API
関連付けられたアカウントのみが サイトへのログインが特定のドメインで許可されるようにします。これは特に アクセス対象のサイトにアクセスできるのが企業に限定されている場合のエンタープライズ シナリオ できます。ユーザー エクスペリエンスを提供するため、FedCM API では RP が RP へのログインに使用できるアカウントが表示されます。これにより ユーザーが会社以外のアカウントを使用して RP にログインしようとした 後でエラー メッセージとともにメッセージが表示される(または、 正しい種類のアカウントが使用されなかったため、ログインできませんでした)を報告しました。
RP は、次の呼び出しを行うことで、一致するアカウントのみを選択的に表示できます。
navigator.credentials.get()
は、domainHint
プロパティのいずれか
domain_hints
アカウントの一覧から取得した値
を使用します。
return await navigator.credentials.get({
identity: {
providers: [{
configURL: "https://idp.example/manifest.json",
clientId: "abc",
nonce: nonce,
domainHint : "corp.example"
}]
}
});
<ph type="x-smartling-placeholder">
domainHint
に一致するアカウントがない場合、FedCM ダイアログにログイン プロンプトが表示されます。
これにより、ユーザーは、によって要求されたヒントに一致する IdP アカウントにログインできます。
表示されます。ユーザーがプロンプトをタップすると、ポップアップ ウィンドウが開いて
構成ファイルで指定されたログイン URL。リンクが
ログインヒントとドメインヒントのクエリ パラメータが追加されていることがわかります。
![domainHint に一致するアカウントがない場合のログイン プロンプトの例。](https://developers.google.cn/static/privacy-sandbox/assets/images/blog/fedcm-123.jpg?authuser=0000&hl=ja)
domainHint
に一致するアカウントがない場合のログイン プロンプトの例エラー メッセージを表示する
場合によっては、次のような正当な理由で IdP がトークンを発行できないことがあります。 サーバーが一時的に利用できなくなる場合があります。条件 IdP から「エラー」が返されるChrome に加えて RP もそれを捕捉できます。 ブラウザ UI を表示して、ユーザーに通知します。 設定します。
<ph type="x-smartling-placeholder">![A](https://developers.google.cn/static/privacy-sandbox/assets/images/blog/fedcm-120-4.png?authuser=0000&hl=ja)
try {
const cred = await navigator.credentials.get({
identity: {
providers: [
{
configURL: "https://idp.example/manifest.json",
clientId: "1234",
},
],
}
});
} catch (e) {
const code = e.code;
const url = e.url;
}
初期認証後にユーザーを自動的に再認証する
FedCM 自動再認証 (略して「auto-reauthn」)では、ユーザーがログインしたときに、 初期認証後に再度アクセスします。「最初の であるユーザーがアカウントを作成するか RP にログインすることを意味します。 FedCM のログイン ダイアログで [Continue as...] ボタンをタップして、ウェブサイト 実行されている場合があります
明示的なユーザー エクスペリエンスは、ユーザーが トラッキングを防止するための連携アカウント(FedCM の主な目標の一つです) ユーザーが一度やり終わった後、 ユーザーが RP と IdP 間の通信を許可する権限を付与する。 別の明示的なユーザーに強制適用しても、プライバシーとセキュリティ上のメリットはない 確認することもできます。
自動再認証では、ユーザーが指定したオプションに応じてブラウザの動作が変わります。
navigator.credentials.get()
を呼び出すときに mediation
に指定します。
const cred = await navigator.credentials.get({
identity: {
providers: [{
configURL: "https://idp.example/fedcm.json",
clientId: "1234",
}],
},
mediation: 'optional', // this is the default
});
// `isAutoSelected` is `true` if auto-reauthn was performed.
const isAutoSelected = cred.isAutoSelected;
mediation
は、Credential Management API のプロパティです。
API、
動作は同じです。
方法
同様
PasswordCredential
および
FederatedCredential
一部は Google Cloud によって
PublicKeyCredential
できます。このプロパティには、次の 4 つの値を指定できます。
'optional'
(デフォルト): 可能であれば自動再認証を行います。そうでない場合はメディエーションが必要です。水 ログインページでこのオプションを選択することをおすすめします。'required'
: 続行するためにメディエーションを常に必要とする(例: 「続行して」クリックします。このオプションは、 権限を明示的に付与する必要があります。'silent'
: 可能であれば自動再認証。認証を要求せずに通知なく失敗します。 調整する必要がありますこのオプションは、 ログインしたままにしたい場合は、専用のログインページ 例: 配送ウェブサイトの商品ページ、ニュースの記事ページ 確認できます'conditional'
: WebAuthn に使用され、現時点では FedCM では利用できません。
この呼び出しでは、次の条件下で自動再認証が行われます。
- FedCM を利用できます。たとえば、ユーザーが FedCM を無効にしていないことなど) または設定内の RP に対して適用されます。
- ユーザーは、このウェブサイトへのログインに FedCM API を持つアカウントを 1 つだけ使用した できます。
- ユーザーはそのアカウントを使用して IdP にログインしています。
- 自動再認証が過去 10 分以内に行われていません。
- RP が電話をかけていない
試用期間の終了後は
navigator.credentials.preventSilentAccess()
確認できます。
これらの条件が満たされると、
FedCM navigator.credentials.get()
が呼び出されるとすぐにユーザーが起動します。
mediation: optional
の場合、自動再認証は
利用できないため、
ブラウザのみが認識できます。RP は、自動再認証が実行されたかどうかを
isAutoSelected
プロパティを調べます。
これは、API のパフォーマンスを評価し、それに応じて UX を改善するのに役立ちます。
また、利用できない場合、ユーザーはサービス アカウントの明示的な
ユーザー メディエーション(mediation: required
を含むフロー)
preventSilentAccess()
を使用してメディエーションを適用する
ログアウトした直後にユーザーの自動再認証を行っても、
非常に優れたユーザーエクスペリエンスですそのため FedCM では
自動再認証を設定することで、この動作を防ぐことができます。自動再認証が行われると
10 分に 1 回までです。ただし、ユーザーが次の時間内に再度ログインする場合を除きます。
10 分。RP は navigator.credentials.preventSilentAccess()
を呼び出して、
ユーザーがログアウトしたときに自動再認証を無効にするよう、ブラウザで明示的に要求する
ログアウト ボタンをクリックするなどして、明示的に RP にアタッチする必要があります。
function signout() {
navigator.credentials.preventSilentAccess();
location.href = '/signout';
}
ユーザーは設定で自動再認証をオプトアウトできる
ユーザーは設定メニューから自動再認証を無効にできます。
- パソコンの Chrome:
chrome://password-manager/settings
>ログイン 自動的に適用されます。 - Android Chrome で [設定] を開きます >パスワード マネージャー >アプリ をクリックする >自動ログイン。
切り替えを無効にすると、ユーザーは自動再認証動作を無効にできます。 説明します。ユーザーが以下の操作を行った場合、この設定はデバイス間で保存、同期されます。 Google アカウントにログインしてから同期を実行することで、 有効にします。
RP から IdP を切断する
ユーザーが以前に FedCM から IdP を使用して RP にログインしたことがある場合は、
ブラウザによってローカルに記憶され、
できます。RP は、
IdentityCredential.disconnect()
関数を使用します。この関数は
使用しないでください。RP は、configURL
(使用する clientId
)を渡す必要があります。
IdP の IP アドレス、IdP の接続を解除するための accountHint
です。アカウント
ヒントには、切断エンドポイントが識別できる任意の文字列にできます
メールアドレスやユーザー ID などは必須ではないが、
アカウント リスト エンドポイントから提供されたアカウント ID と一致する必要があります。
// Disconnect an IdP account "account456" from the RP "https://idp.com/". This is invoked on the RP domain.
IdentityCredential.disconnect({
configURL: "https://idp.com/config.json",
clientId: "rp123",
accountHint: "account456"
});
IdentityCredential.disconnect()
は Promise
を返します。この Promise により
次の理由により例外となります。
- ユーザーが FedCM の IdP を使用して RP にログインしていない。
- API は、FedCM 権限ポリシーのない iframe 内から呼び出されます。
- configURL が無効か、切断エンドポイントがありません。
- コンテンツ セキュリティ ポリシー(CSP)のチェックに失敗する
- 保留中の接続解除リクエストがあります。
- ユーザーがブラウザの設定で FedCM を無効にしている。
IdP の切断エンドポイントが レスポンスが完了すると、RP と IdP はネットワークで切断されます。 Promise が解決されます。切断されたアカウントの ID は (接続解除からのレスポンスで指定) 提供します。
クロスオリジン iframe 内から FedCM を呼び出す
FedCM は、クロスオリジンの iframe 内から呼び出すことができます。
identity-credentials-get
権限ポリシー(親フレームで許可されている場合)。宛先
iframe タグに allow="identity-credentials-get"
属性を追加します。
次のとおりです。
<iframe src="https://fedcm-cross-origin-iframe.glitch.me" allow="identity-credentials-get"></iframe>
実際の動作は、こちらで確認できます。
(省略可)親フレームが FedCM を呼び出すオリジンを制限する場合、
許可されたオリジンのリストを含む Permissions-Policy
ヘッダーを送信する。
Permissions-Policy: identity-credentials-get=(self "https://fedcm-cross-origin-iframe.glitch.me")
権限ポリシーの仕組みについて詳しくは、管理 権限のあるブラウザ機能 ポリシーをご覧ください。