Skip to content

Commit 40e9897

Browse files
yi-guTallTed
andauthored
Update HOWTO-chrome.md with button flow dev trial instruction (#551)
* Update HOWTO-chrome.md with button flow dev trial instruction * Apply suggestions from code review Co-authored-by: Ted Thibodeau Jr <[email protected]> * Update HOWTO-chrome.md * Address comments --------- Co-authored-by: Ted Thibodeau Jr <[email protected]>
1 parent 42bebc1 commit 40e9897

File tree

1 file changed

+61
-0
lines changed

1 file changed

+61
-0
lines changed

explorations/HOWTO-chrome.md

+61
Original file line numberDiff line numberDiff line change
@@ -333,3 +333,64 @@ IdP fails by either returning some network error or saying that the disconnectio
333333
was unsuccessful, or if the `account_id` is nowhere to be found, the browser will
334334
remove from local storage all of the federated accounts associated with the (RP,
335335
IDP).
336+
337+
### Button Flow
338+
The button flow differs from the widget flow in several ways. The most significant
339+
difference is that the button flow requires a user gesture such as clicking on a
340+
sign-in button. This means that a user must be able to successfully sign in with a
341+
federated account using this flow. In contrast, the widget flow is an optimized
342+
flow that can reduce sign-in friction. This means that if the widget flow is
343+
unavailable, a user can still click a "Sign in with IdP" button to continue. See
344+
illustrative [mocks here](https://docs.google.com/presentation/d/1iURrPakaHgBfQ6mAefKijjxToiTTgBSPz1rtaV0od98/edit?usp=sharing).
345+
346+
#### Button Mode API
347+
To use the Button Mode API:
348+
* Enable the experimental feature `FedCmButtonMode` in `chrome://flags`.
349+
* Make sure to invoke the API behind [transient user activation](https://html.spec.whatwg.org/multipage/interaction.html#transient-activation).
350+
* Invoke the API with the `mode` parameter like so:
351+
```js
352+
return await navigator.credentials.get({
353+
identity: {
354+
providers: [{
355+
configURL: "https://idp.example/config.json",
356+
clientId: "123",
357+
nonce: nonce
358+
}],
359+
mode: "button"
360+
}
361+
});
362+
```
363+
364+
The browser will send a new parameter to the IdP representing the request type by including
365+
`mode=button` in the request sent to the ID assersion endpoint:
366+
```
367+
POST /fedcm_assertion_endpoint HTTP/1.1
368+
Host: idp.example
369+
Origin: https://rp.example/
370+
Content-Type: application/x-www-form-urlencoded
371+
Cookie: 0x23223
372+
Sec-Fetch-Dest: webidentity
373+
374+
account_id=123&client_id=client1234&nonce=Ct60bD&disclosure_text_shown=true&is_auto_selected=false
375+
&mode=button
376+
```
377+
Note that we currently only include the new parameter in the button flow. Other flow
378+
types such as "widget" (name TBD) will be added when Chrome ships this feature.
379+
380+
#### Use Other Account API
381+
This API allows users to use other accounts in the account chooser when, for example, IdPs
382+
support multiple accounts or replacing the existing account.
383+
384+
To use the Use Other Account API:
385+
* Enable the experimental feature `FedCmUseOtherAccount` in `chrome://flags`.
386+
* IdP specifies the following in the FedCM config file:
387+
```
388+
{
389+
"accounts_endpoint" : ...,
390+
"modes: {
391+
"button": {
392+
"supports_use_other_account": true|false,
393+
}
394+
}
395+
}
396+
```

0 commit comments

Comments
 (0)