W Chrome 125 interfejs API Button Mode uruchamia interfejs API wersji testowej origin na komputerze. Dzięki interfejsowi Button Mode API dostawcy tożsamości mogą używać FedCM API, nawet jeśli ich użytkownicy nie mają aktywnych sesji dostawcy tożsamości po wywołaniu interfejsu API. Dzięki temu użytkownicy będą mogli logować się w witrynie za pomocą konta sfederowanego przeszedł do witryny dostawcy tożsamości. Interfejs FedCM w trybie przycisku jest bardziej widoczny. w porównaniu z bieżącym widżetem, ponieważ jest on strzeżony przez użytkownika gestu i lepiej odzwierciedla zamiar zalogowania się.
Interfejs Button Mode API
Interfejs FedCM jest teraz dostępny jako widżet wyświetlany w prawym górnym rogu na komputerze lub jako planszę dolną na urządzeniach mobilnych, gdy tylko zostanie wywołany interfejs API. co może nastąpić, gdy użytkownik trafi do strony uzależnionej. Jest to tzw. widżety. Aby wyświetlić widżet, użytkownik musi być zalogowany u dostawcy tożsamości zanim trafią do RP. Usługa FedCM nie miała niezawodnej metody użytkownik może zalogować się u dostawcy tożsamości, zanim będzie mógł zezwolić użytkownikowi na zalogowanie się w RP. za pomocą konta dostępnego u dostawcy tożsamości. Zespół FedCM zamierza dodać taki sposób.
![W trybie widżetu w prawym górnym rogu przeglądarki Chrome na komputerze pojawia się okno dialogowe bez aktywacji użytkownika.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-125-widget-mode.jpg?authuser=8&hl=pl)
Nowy interfejs Button Mode API dodaje nowy tryb interfejsu o nazwie przycisk. W przeciwieństwie do trybu widżetu, tryb przycisku nie powinien być wywoływany, gdy tylko użytkownik RP. Powinna być wywoływana, gdy użytkownik zainicjuje proces logowania. na przykład przez kliknięcie opcji „Zaloguj się przy użyciu dostawcy tożsamości”. Przycisk
Po naciśnięciu przycisku FedCM sprawdza, czy użytkownik jest zalogowany
Dostawca tożsamości za pomocą pobrania na konta
punktu końcowego lub
stan logowania zapisany w
Jeśli
użytkownik nie jest jeszcze zalogowany, FedCM prosi go o zalogowanie się u dostawcy tożsamości przy użyciu
login_url
udostępnione przez dostawcę tożsamości w wyskakującym okienku. Jeśli przeglądarka wie, że użytkownik
jest już zalogowany u dostawcy tożsamości lub gdy tylko użytkownik zaloguje się u dostawcy tożsamości za pomocą
FedCM otwiera okno, w którym użytkownik może wybrać dostawcę tożsamości
konto, za pomocą którego chcesz się zalogować. Wybierając konto, użytkownik może przejść do logowania
przy użyciu konta dostawcy tożsamości.
W interfejsie w trybie przycisku wyświetlane okno logowania jest większe niż widżetu. Powinna to być też ikona marki, by zachować spójność wizualną. Minimalny rozmiar ikony dla trybu widżetu to 25x25 pikseli, a minimalny rozmiar ikona w trybie przycisku ma rozmiar 40 x 40 pikseli. Dobrze znany dostawca tożsamości umożliwia określając wiele adresów URL ikon w następujący sposób:
{
// ... Other settings (like endpoints) here
"branding": {
"icons": [
{
"url": "https://size-25px-image",
"size": 25,
},
{
"url": "https://size-40px-image",
"size": 40
}
]
}
}
![W trybie przycisku na środku u góry w Chrome na komputerze wyświetla się okno modalne.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-125-button-mode.jpg?authuser=8&hl=pl)
Wypróbuj Chrome 125 na https://fedcm-rp-demo.glitch.me/button_flow.
Aby użyć interfejsu Button Mode API:
- Włącz eksperymentalną funkcję
FedCmButtonMode
w aplikacjichrome://flags
. - Pamiętaj, aby wywoływać interfejs API służący do tymczasowej aktywacji użytkownika np. kliknięcie przycisku.
- Wywołaj interfejs API, używając parametru
mode
w następujący sposób:
return await navigator.credentials.get({
identity: {
providers: [{
configURL: "https://idp.example/config.json",
clientId: "123",
nonce:"456",
}],
mode: "button"
}
});
Przeglądarka wyśle nowy parametr do potwierdzenia identyfikatora
punkt końcowy
reprezentujący typ żądania, dodając do niego mode=button
:
POST /fedcm_assertion_endpoint HTTP/1.1
Host: 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=false&mode=button
Wykrywanie cech
Aby sprawdzić, czy przeglądarka może używać trybu przycisku, możesz: sprawdź za pomocą tego kodu:
let supportsFedCmMode = false;
try {
navigator.credentials.get({
identity: Object.defineProperty(
{}, 'mode', {
get: function () { supportsFedCmMode = true; }
}
)
});
} catch(e) {}
if (supportsFedCmMode) {
// The button mode is supported.
}
Użyj innej opcji konta
RP może umożliwić użytkownikom „korzystanie z innych kont” w narzędziu wyboru konta, na przykład wtedy, gdy dostawcy tożsamości obsługują wiele kont lub zastępują istniejące konto.
Aby włączyć opcję użycia innego konta:
- Włącz eksperymentalną funkcję
FedCmUseOtherAccount
w aplikacjichrome://flags
lub zarejestruj się w wersji próbnej origin interfejsu Button Mode API. - Dostawca tożsamości określa te elementy w konfiguracji dostawcy tożsamości :
{
"accounts_endpoint" : ...,
"modes: {
"button": {
"supports_use_other_account": true,
}
}
}
Weź udział w testowaniu origin
Aby wypróbować interfejs Button Mode API lokalnie, włącz Chrome
flaga
chrome://flags#fedcm-button-mode
w przeglądarce Chrome 125 lub nowszej.
Dostawcy tożsamości mogą też włączyć tryb przycisku, rejestrując wersję próbną origin:
- Rejestrowanie testowania origin u innych firm za RP.
Wersje próbne origin dają Ci możliwość wypróbowania nowych funkcji i przekazania opinii na temat użyteczność, praktyczność i skuteczność w społeczności standardów internetowych. Dla: więcej informacji znajdziesz w przewodniku dotyczącym testowania origin w witrynach Programistów.
Testowanie origin interfejsu Button Mode API jest dostępne od wersji Chrome 125 do Chrome 130)
- Przejdź do rejestracji próbnej origin .
- Kliknij przycisk Zarejestruj i wypełnij formularz, aby poprosić o token.
- Wpisz źródło dostawcy tożsamości jako Web Origin.
- Zaznacz Dopasowanie innej firmy, aby wstawić token z JavaScriptem na inne źródeł.
- Kliknij Prześlij.
- Umieść wydany token na stronie internetowej innej firmy.
Aby umieścić token w witrynie innej firmy, dodaj ten kod do dostawcy tożsamości Biblioteka JavaScript lub pakiet SDK udostępniany ze źródła dostawcy tożsamości.
const tokenElement = document.createElement('meta');
tokenElement.httpEquiv = 'origin-trial';
tokenElement.content = 'TOKEN_GOES_HERE';
document.head.appendChild(tokenElement);
Zastąp TOKEN_GOES_HERE
własnym tokenem.
Funkcje CORS i SameSite=None
będą wymagane w Chrome 125
CORS
Chrome będzie egzekwować CORS na identyfikatorze asercja punkt końcowy od Chrome 125.
CORS (cross-Origin-Resource-Sharing) to system, który obejmuje przesyłanie
nagłówki HTTP, które określają, czy przeglądarki blokują kod JavaScript frontendu;
dostępu do odpowiedzi na żądania z innych domen. Punkt końcowy asercji identyfikatora włączony
serwer dostawcy tożsamości musi odpowiedzieć na żądanie przy użyciu dodatkowych nagłówków.
poniżej znajdziesz przykładowy nagłówek odpowiedzi na żądanie z
https://fedcm-rp-demo.glitch.me
:
Access-Control-Allow-Origin: https://fedcm-rp-demo.glitch.me
Access-Control-Allow-Credentials: true
SameSite=None
Plik cookie SameSite
określa, czy
plik cookie jest ograniczony do kontekstu własnego lub tej samej witryny. Określając
ma wartość None
, plik cookie może być wysłany do domeny innej firmy.
W FedCM Chrome wysyła pliki cookie do kont
punktu końcowego,
potwierdzenie identyfikatora
punktu końcowego oraz
rozłączenie
punktu końcowego. Od
Chrome 125, Chrome będzie wysyłać te żądania z danymi uwierzytelniającymi tylko z plikami cookie
wyraźnie oznaczone jako SameSite=None
.