Natychmiastowy tryb interfejsu logowania

Eiji Kitamura
José Luis Zapata

Data publikacji: 12 maja 2026 r.

Tryb natychmiastowego interfejsu logowania to funkcja internetowa, która ma na celu uproszczenie przepływów logowania. Dzięki tej funkcji możesz proaktywnie oferować klucze dostępu i zarządzane hasła bezpośrednio użytkownikom, gdy będą chcieli się zalogować, np. klikną 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 preferImmediatelyAvailableCredentials interfejsó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 powiadamiania, co pozwala udostępnić alternatywne metody logowania, np. formularz logowania, bez zakłócania wrażeń użytkownika.

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

Sprawdź wymagania wstępne

Aby używać 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 dialogowego natychmiastowego 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 WebAuthn Polyfills na GitHubie.

Prośba o dane logowania

Aby wywołać natychmiastowy proces 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 korzystać 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.

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. Twoja witryna wywołuje funkcję navigator.credentials.get() za pomocą funkcji 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 logowania natychmiastowego, zgłosi błąd NotAllowedError.
  6. Jeśli zostanie rzucona NotAllowedError, witryna przejdzie do standardowej strony logowania.

Zaloguj się przed przejściem do kasy

Proaktywnie oferuj dane logowania, zanim użytkownik wykona działanie, które wymaga uwierzytelnienia, 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 usprawnić proces płatności dla powracających klientów.

  1. Użytkownik inicjuje działanie, np. klika przycisk Zapłać podczas procesu zakupowego.
  2. Twoja witryna wywołuje funkcję navigator.credentials.get() za pomocą funkcji uiMode: "immediate".
  3. Jeśli dane logowania istnieją, użytkownik wybiera jedne z nich, aby dokończyć logowanie.
  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 bez logowania.

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 gestem użytkownika, np. kliknięciem. Połączenie 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ą błąd NotAllowedError, aby zapobiec śledzeniu między sesjami.
  • Brak programowego anulowania: nie możesz użyć parametru signal, aby programowo zamknąć okno logowania natychmiastowego.