This guide helps you understand the changes to your web application introduced by the Federated Credentials Management API (FedCM).
When FedCM is enabled the browser displays user prompts and no third-party cookies are used.
Overview
Privacy Sandbox for the Web and Chrome's removal of third-party cookies from the web introduce significant changes to Google Identity Services and user sign in.
FedCM enables more private sign-in flows without requiring the use of third-party cookies. The browser controls user settings, displays user prompts, and only contacts an Identity Provider such as Google after explicit user consent is given.
For most websites, migration occurs seamlessly through backward compatible updates to the Google Identity Services JavaScript library.
Before you begin
Check that your browser and browser version supports the FedCM API, updating to a newer version if necessary.
Before testing sign-in flows with third-party cookies blocked, open
chrome://flags
and enable the experimental FedCmWithoutThirdPartyCookies
feature. This step is only necessary until it becomes the default. Also, the
Third-party sign-in setting has to be enabled in Chrome.
Migrate your web app
Follow these steps to enable FedCM, evaluate potential migration impact, and if needed to make changes to your existing web application:
Add a boolean flag to enable FedCM when initializing using:
HTML, set the
data-use_fedcm_for_prompt
attribute totrue
.JavaScript, set
use_fedcm_for_prompt
totrue
in theIdConfiguration
object.
Remove any use of the
opt_out_or_no_session
value returned in thePromptMomentNotication
object.To improve user privacy, the
google.accounts.id.prompt
callback no longer returns results related to user settings or session status.Update user flows and website code to handle delayed notification of
isDisplayMoment()
events.To improve user privacy, display moment notifications are intentionally delayed a random amount of time when FedCM is enabled. Notifications can be received up to 1 minute after the actual event takes place. When using
isDisplayMoment
to conditionally display prompts or trigger user interaction carefully consider the variable length of time in your UX design.Remove
position
style attributes fromdata-prompt_parent_id
andintermediate_iframes
.The browser controls the size and position of user prompts, custom positions for One Tap on Desktop are not supported.
Update page layout if needed.
The browser controls the size and position of user prompts. Depending upon the layout of individual pages, some content might be overlaid.
Change page layout to improve the user experience when important information is obscured.
Add
allow="identity-credentials-get"
attribute to parent frame if your web app calls One Tap API from cross-origin iframes.An iframe is considered as cross-origin if its origin is not exactly the same as the parent origin. For Example:
- Different domains:
https://example1.com
andhttps://example2.com
- Different top-level domains:
https://example.uk
andhttps://example.jp
- Subdomains:
https://example.com
andhttps://login.example.com
To improve user privacy, when One Tap API is called from cross-origin iframes, you must add
allow="identity-credentials-get"
attribute in every parent frameiframe
tag:<iframe src="https://your.cross-origin/onetap.page" allow="identity-credentials-get"></iframe>
If your app utilizes an iframe that contains another iframe, you must ensure that the attribute is added to every iframe, including all sub-iframes.
For example, consider the following scenario:
The top document (
https://www.example.uk
) contains an iframe named "Iframe A", which embeds a page (https://logins.example.com
).This embedded page (
https://logins.example.com
) also contains an iframe named "Iframe B," which further embeds a page (https://onetap.example2.com
) that hosts One Tap.
To ensure that One Tap can be displayed properly, the attribute must be added to both Iframe A and Iframe B tags.
- Different domains:
Add these directives to your Content Security Policy (CSP).
This step is optional as not all websites choose to define a CSP.
Remove Accelerated Mobile Pages (AMP) support for sign-in.
User sign-in support for AMP is an optional feature of GIS your web app may have implemented. If this is the case,
Delete any references to the:
amp-onetap-google
custom element, and<script async custom-element="amp-onetap-google" src="https://cdn.ampproject.org/v0/amp-onetap-google-0.1.js"></script>
Consider redirecting sign-in requests from AMP to your website's HTML sign-in flow. Note that the related
Intermediate Iframe Support API
is unaffected.