Zaloguj się użytkowników

Eiji Kitamura

Meggin Kearney

Aby zalogować użytkowników, pobierz dane logowania z hasła przeglądarki i używać ich do automatycznego logowania użytkowników. W przypadku użytkowników z wieloma kontami: pozwalają wybrać konto jednym kliknięciem za pomocą funkcji wyboru konta.

Automatyczne logowanie

Automatyczne logowanie może nastąpić w dowolnym miejscu w witrynie. nie tylko u góry strony, ale też na innych stronach typu leaf page. Przydaje się to, gdy użytkownicy wchodzą na różne strony w witrynie, za pomocą wyszukiwarki.

Aby włączyć automatyczne logowanie:

1. Uzyskaj dane logowania.
2. Uwierzytelnij użytkownika.
3. Zaktualizuj UI lub otwórz spersonalizowaną stronę.

Uzyskaj dane logowania

Aby uzyskać dane logowania, wywołaj navigator.credentials.get() Określ typ danych logowania, o które prosisz nadając mu wartość password lub federated.

Zawsze używaj adresu mediation: 'silent' do automatycznego logowania. Można więc łatwo zakończyć procedurę, jeśli użytkownik:

• Brak zapisanych danych logowania.
• Zawiera wiele danych logowania.
• nie jesteś zalogowany(-a).

Zanim uzyskasz certyfikat, nie zapomnij sprawdzić, czy użytkownik jest już zalogowany:

if (window.PasswordCredential || window.FederatedCredential) {
  if (!user.isSignedIn()) {
    navigator.credentials.get({
      password: true,
      federated: {
        providers: ['https://accounts.google.com'],
      },
      mediation: 'silent',
    });
    // ...
  }
}

Obietnica zwrócona przez użytkownika navigator.credentials.get() zostaje rozwiązana za pomocą obiektu danych logowania lub obiektu null. Aby określić, czy chodzi o PasswordCredential czy FederatedCredential, wystarczy spojrzeć na właściwość .type obiektu, które to password lub federated.

Jeśli .type to federated, właściwość .provider jest ciągiem znaków reprezentującym dostawcę tożsamości.

Uwierzytelnij użytkownika

Gdy już uzyskasz certyfikat, uruchomić proces uwierzytelniania w zależności od ich typu password lub federated:

    }).then(c => {
     if (c) {
       switch (c.type) {
         case 'password':
           return sendRequest(c);
           break;
         case 'federated':
           return gSignIn(c);
           break;
       }
     } else {
       return Promise.resolve();
     }

Gdy obietnica wygaśnie, sprawdzić, czy otrzymano obiekt danych logowania. Jeśli tak się nie stało, oznacza to, że nie udało się zalogować się automatycznie. Zamknij proces automatycznego logowania po cichu.

Zaktualizuj UI

Jeśli uwierzytelnienie się powiedzie, zaktualizuj interfejs użytkownika lub przekieruj użytkownika na spersonalizowaną stronę:

    }).then(profile => {
     if (profile) {
       updateUI(profile);
     }

Nie zapomnij pokazać komunikatu o błędzie uwierzytelniania

Aby uniknąć dezorientacji użytkownika, użytkownicy powinni zobaczyć niebieski toast z napisem „Logowanie się” w momencie pobierania obiektu danych logowania:

Ważna wskazówka: jeśli uda Ci się uzyskać obiekt danych logowania ale gdy użytkownik nie zostanie uwierzytelniony, powinien pojawić się komunikat o błędzie:

        }).catch(error => {
          showError('Sign-in Failed');
        });
      }
    }

Przykład pełnego kodu

if (window.PasswordCredential || window.FederatedCredential) {
  if (!user.isSignedIn()) {
    navigator.credentials
      .get({
        password: true,
        federated: {
          providers: ['https://accounts.google.com'],
        },
        mediation: 'silent',
      })
      .then((c) => {
        if (c) {
          switch (c.type) {
            case 'password':
              return sendRequest(c);
              break;
            case 'federated':
              return gSignIn(c);
              break;
          }
        } else {
          return Promise.resolve();
        }
      })
      .then((profile) => {
        if (profile) {
          updateUI(profile);
        }
      })
      .catch((error) => {
        showError('Sign-in Failed');
      });
  }
}

Zaloguj się przez funkcję wyboru konta

Jeśli użytkownik wymaga zapośredniczenia lub ma wiele kont, możesz użyć sekcji wyboru konta, aby umożliwić użytkownikowi zalogowanie się, pomijając zwykły formularz logowania, na przykład:

Aby zalogować się za pomocą funkcji wyboru konta, wykonaj te same czynności co w logowanie automatyczne, z dodatkowym wywołaniem, które wyświetla wybór konta. aby uzyskać dane logowania:

1. Uzyskaj dane logowania i wyświetl moduł wyboru konta.
2. Uwierzytelnij użytkownika.
3. Zaktualizuj interfejs lub otwórz spersonalizowaną stronę.

Uzyskaj dane logowania i pokaż wybór konta

wyświetlać wybór konta w odpowiedzi na zdefiniowane działanie użytkownika, na przykład gdy użytkownik kliknie przycisk „Zaloguj się”. Przycisk Zadzwoń do nas navigator.credentials.get(), i dodaj mediation: 'optional' lub mediation: 'required', aby wyświetlić wybór konta.

Jeśli mediation ma wartość required, użytkownik zawsze widzi opcję wyboru konta, która może się zalogować. Dzięki tej opcji użytkownicy z wieloma kontami mogą łatwo przełączać się między nimi. Gdy mediation to optional, po kliknięciu przycisku „Wybierz konto” użytkownik będzie wyświetlany navigator.credentials.preventSilentAccess(). . Zwykle pomaga to uniknąć automatycznego logowania. gdy użytkownik się wyloguje lub wyrejestruje.

Przykład strony mediation: 'optional':

    var signin = document.querySelector('#signin');
    signin.addEventListener('click', e => {
     if (window.PasswordCredential || window.FederatedCredential) {
       navigator.credentials.get({
         password: true,
         federated: {
           providers: [
             'https://accounts.google.com'
           ]
         },
         mediation: 'optional'
       }).then(c => {

Gdy użytkownik wybierze konto, obietnica staje się ważna wraz z danymi uwierzytelniającymi. Jeśli użytkownik anuluje wybieranie konta, lub nie są zapisane dane logowania, obietnica rozwiązuje null. W takim przypadku wróć do interfejsu formularza logowania.

Nie zapomnij skorzystać z formularza logowania

Użyj formularza logowania z jednego z tych powodów:

• Dane logowania nie są przechowywane.
• Użytkownik zamknął funkcję wyboru konta, ale nie wybrał konta.
• Interfejs API jest niedostępny.

    }).then(profile => {
        if (profile) {
          updateUI(profile);
        } else {
          location.href = '/signin';
        }
    }).catch(error => {
        location.href = '/signin';
    });

Przykład pełnego kodu

var signin = document.querySelector('#signin');
signin.addEventListener('click', (e) => {
  if (window.PasswordCredential || window.FederatedCredential) {
    navigator.credentials
      .get({
        password: true,
        federated: {
          providers: ['https://accounts.google.com'],
        },
        mediation: 'optional',
      })
      .then((c) => {
        if (c) {
          switch (c.type) {
            case 'password':
              return sendRequest(c);
              break;
            case 'federated':
              return gSignIn(c);
              break;
          }
        } else {
          return Promise.resolve();
        }
      })
      .then((profile) => {
        if (profile) {
          updateUI(profile);
        } else {
          location.href = '/signin';
        }
      })
      .catch((error) => {
        location.href = '/signin';
      });
  }
});

Logowanie sfederowane

Logowanie sfederowane umożliwia użytkownikom logowanie się jednym kliknięciem bez konieczności zapamiętywania dodatkowych danych logowania do witryny.

Aby wdrożyć logowanie sfederowane:

1. Uwierzytelnij użytkownika za pomocą tożsamości zewnętrznej.
2. Przechowuj informacje o tożsamości.
3. Zaktualizuj interfejs lub otwórz spersonalizowaną stronę (tak samo jak w przypadku logowania automatycznego).

Uwierzytelnianie użytkownika za pomocą tożsamości zewnętrznej

Gdy użytkownik kliknie przycisk logowania sfederowanego, uruchomić proces uwierzytelniania konkretnego dostawcy tożsamości za pomocą FederatedCredential

Jeśli na przykład dostawcą jest Google, użyj atrybutu Biblioteka JavaScript logowania przez Google:

navigator.credentials
  .get({
    password: true,
    mediation: 'optional',
    federated: {
      providers: ['https://account.google.com'],
    },
  })
  .then(function (cred) {
    if (cred) {
      // Instantiate an auth object
      var auth2 = gapi.auth2.getAuthInstance();

      // Is this user already signed in?
      if (auth2.isSignedIn.get()) {
        var googleUser = auth2.currentUser.get();

        // Same user as in the credential object?
        if (googleUser.getBasicProfile().getEmail() === cred.id) {
          // Continue with the signed-in user.
          return Promise.resolve(googleUser);
        }
      }

      // Otherwise, run a new authentication flow.
      return auth2.signIn({
        login_hint: id || '',
      });
    }
  });

Wynikiem Logowania przez Google są tokeny tożsamości, które stanowią dowód uwierzytelniania.

Logowanie sfederowane jest na ogół oparte na standardowych protokołach, takich jak OpenID Connect lub OAuth: Aby dowiedzieć się, jak uwierzytelniać się na kontach sfederowanych, możesz znaleźć na stronie odpowiednich dostawców tożsamości sfederowanej dokumenty. Popularne przykłady:

• Logowanie przez Google
• Logowanie do Facebooka
• Logowanie na Twitterze
• Protokół OAuth na GitHubie

Przechowuj informacje o tożsamości

Po zakończeniu uwierzytelniania możesz zapisać informacje o tożsamości. Informacje, które będziesz tu przechowywać, to id od dostawcy tożsamości oraz ciąg tekstowy dostawcy reprezentujący dostawcę tożsamości. (name i iconURL są opcjonalne). Więcej informacji na ten temat znajdziesz w Specyfikacja zarządzania danymi logowania.

Aby przechowywać szczegóły sfederowanego konta, utwórz nową instancję FederatedCredential z identyfikatorem użytkownika i dostawcy. Następnie wywołaj navigator.credentials.store() do przechowywania informacji o tożsamości.

Po udanej federacji Utwórz instancję FederatedCredential synchronicznie lub asynchronicznie:

Przykład metody synchronicznej:

// Create credential object synchronously.
var cred = new FederatedCredential({
  id: id, // id in IdP
  provider: 'https://account.google.com', // A string representing IdP
  name: name, // name in IdP
  iconURL: iconUrl, // Profile image url
});

Przykład metody asynchronicznej:

// Create credential object asynchronously.
var cred = await navigator.credentials.create({
  federated: {
    id: id,
    provider: 'https://accounts.google.com',
    name: name,
    iconURL: iconUrl,
  },
});

Następnie zapisz obiekt danych logowania:

// Store it
navigator.credentials.store(cred).then(function () {
  // continuation
});

Wyloguj się

Wylogowywanie użytkowników po kliknięciu przycisku wylogowania. Najpierw zakończ sesję, a następnie wyłącz automatyczne logowanie na potrzeby przyszłych wizyt. (Sposób zakończenia sesji zależy wyłącznie od Ciebie).

Wyłącz automatyczne logowanie na potrzeby przyszłych wizyt

Zadzwoń do nas navigator.credentials.preventSilentAccess():

signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
  navigator.credentials.preventSilentAccess();
}

Dzięki temu logowanie automatyczne będzie możliwe dopiero wtedy, gdy użytkownik następnym razem włączy tę funkcję. Aby wznowić automatyczne logowanie, użytkownik może zalogować się celowo wybierając konto, na które chce się zalogować, Użytkownik jest wtedy zawsze zalogowany z powrotem, dopóki się nie wyloguje.

Prześlij opinię