Natychmiastowy tryb interfejsu logowania

Eiji Kitamura
José Luis Zapata

Opublikowano: 12 maja 2026 r.

Tryb natychmiastowego interfejsu logowania to funkcja internetowa, która upraszcza proces logowania. Ta funkcja umożliwia proaktywne oferowanie kluczy dostępu i zarządzanych haseł bezpośrednio użytkownikom, gdy próbują się zalogować, np. klikając przycisk Zaloguj się lub Zapłać.

Streszczenie

Tryb natychmiastowego interfejsu użytkownika zapewnia tryb, który szybko kończy się niepowodzeniem, jeśli lokalnie nie są dostępne żadne dane logowania. To zachowanie jest podobne do preferImmediatelyAvailableCredentialsinterfejsów API na platformach mobilnych, takich jak Android i iOS. Jeśli dane logowania istnieją, przeglądarka natychmiast wyświetla użytkownikowi okno logowania. W przeciwnym razie odrzuca obietnicę bez powiadomienia, umożliwiając udostępnienie alternatywnych metod logowania, np. formularza logowania, bez zakłócania wrażeń użytkownika.

Od maja 2026 r. Chrome jest jedyną przeglądarką, która obsługuje tryb interfejsu natychmiastowego.

Sprawdź wymagania wstępne

Aby korzystać z trybu natychmiastowego interfejsu, użytkownik musi mieć na urządzeniu odpowiednie dane logowania. W Chrome te dane logowania obejmują:

  • Klucze dostępu zapisane u dostawcy kluczy dostępu, np. w Menedżerze haseł Google, Windows Hello lub pęku kluczy iCloud.
  • hasła zapisane w Menedżerze haseł Google;

Jeśli nie ma lokalnych danych logowania, interfejs API odrzuca żądanie bez wyświetlania okna logowania.

Wykrywanie obsługi funkcji

Zanim wywołasz tryb natychmiastowego interfejsu, sprawdź, czy przeglądarka obsługuje funkcję immediateGet, korzystając z metody PublicKeyCredential.getClientCapabilities(). Jeśli nie jest obsługiwana, wróć do dotychczasowych metod logowania, takich jak formularze adresu e-mail i hasła, weryfikacja numeru telefonu lub logowanie przez media społecznościowe.

async function checkImmediateAvailability() {
  try {
    const capabilities = await PublicKeyCredential.getClientCapabilities();
    if (capabilities.immediateGet) {
      console.log("Immediate UI mode is supported.");
    } else {
      console.log("Immediate UI mode is NOT supported.");
    }
  } catch (error) {
    console.error("Error checking client capabilities:", error);
  }
}

Aby uzyskać szerszą obsługę przeglądarek, użyj polyfill dostępnego w repozytorium GitHub WebAuthn Polyfills.

Prośba o dane logowania

Aby uruchomić proces natychmiastowego logowania, wywołaj funkcję navigator.credentials.get() z polem uiMode ustawionym na 'immediate'.

Jeśli w prośbie uwzględnisz password: true, użytkownicy będą mogli skorzystać z tej funkcji, jeśli przeglądarka obsługuje dane logowania.

// This call must follow a user gesture, like a button click
button.addEventListener('click', async (event) => {
  event.preventDefault();
  try {
    const cred = await navigator.credentials.get({
      password: true,
      publicKey: {
        challenge: serverGeneratedChallenge,
        rpId: 'example.com'
      },
      uiMode: 'immediate',
    });
    // Handle successful sign-in
  } catch (error) {
    if (error.name === 'NotAllowedError') {
      // Provide a fallback sign-in experience
      showFallbackUI();
    }
  }
});

Musisz obsłużyć element NotAllowedError w bloku catch, aby zapewnić alternatywny sposób logowania.

Obsługa procesów logowania

Tryb natychmiastowego interfejsu możesz wdrożyć w 2 głównych scenariuszach. Więcej wskazówek dotyczących UX i wzorców, których należy unikać, znajdziesz w artykule Wzorce UX w trybie interfejsu natychmiastowego.

Logowanie się za pomocą przycisku

Udostępnij specjalny przycisk logowania, który zapewnia przejrzystość i nie wyświetla nieoczekiwanych promptów.

  1. Użytkownik klika przycisk Zaloguj się.
  2. Witryna wywołuje funkcję navigator.credentials.get() z parametrem uiMode: "immediate".
  3. Przeglądarka sprawdza lokalne dane logowania.
  4. Jeśli przeglądarka znajdzie dane logowania, wyświetli natychmiast okno logowania, w którym użytkownik może wybrać konto.
  5. Jeśli przeglądarka nie znajdzie danych logowania lub użytkownik zamknie okno natychmiastowego logowania, zgłosi błąd NotAllowedError.
  6. Jeśli zostanie rzucona NotAllowedError, witryna przejdzie do standardowej strony logowania.

Zaloguj się przed dokonaniem płatności

Proaktywnie oferuj dane logowania, zanim użytkownik wykona działanie, które skorzysta na uwierzytelnianiu, np. rozpocznie proces płatności w sklepie internetowym.

W przypadku e-commerce użytkownicy często wybierają, czy chcą zalogować się na istniejące konto, czy dokonać płatności jako gość. Wyświetlanie natychmiastowego okna logowania może uprościć proces płatności dla powracających klientów.

  1. Użytkownik inicjuje działanie, np. klika przycisk Zapłać podczas procesu zakupowego.
  2. Witryna wywołuje funkcję navigator.credentials.get() z parametrem uiMode: "immediate".
  3. Jeśli dane logowania istnieją, użytkownik wybiera jedne z nich, aby się zalogować.
  4. Jeśli dane logowania nie istnieją, przeglądarka zgłosi błąd i nie wyświetli od razu okna logowania. Wrażenia użytkownika pozostaną bez zmian i możesz przekierować go na dotychczasowy ekran płatności, który może zawierać inne opcje logowania lub formularz płatności dla gości.

Sprawdzanie środków ochrony prywatności i bezpieczeństwa

Przeglądarka wdraża kluczowe środki ochrony prywatności użytkowników:

  • Wymaganie dotyczące gestu użytkownika: aby zapobiec cichemu sondowaniu, musisz zainicjować wywołanie interfejsu API za pomocą gestu użytkownika, np. kliknięcia. Wywołanie nie powoduje wykorzystania aktywacji.
  • Ograniczenia w trybie incognito: żądania w sesjach incognito lub prywatnych zawsze zwracają wartość NotAllowedError.
  • Brak list dozwolonych: żądania z niepustą listą allowCredentials powodują zgłoszenie błędu NotAllowedError, aby zapobiec śledzeniu w ramach sesji.
  • Brak możliwości programowego anulowania: nie możesz użyć parametru signal, aby programowo zamknąć okno logowania natychmiastowego.