Logowanie użytkowników

Eiji Kitamura

Meggin Kearney

Aby zalogować użytkowników, pobierz dane logowania z menedżera haseł przeglądarki i użyj ich do automatycznego logowania użytkowników. Użytkownicy, którzy mają kilka kont, mogą wybrać jedno z nich jednym kliknięciem za pomocą selektora kont.

Automatyczne logowanie

Automatyczne logowanie może nastąpić w dowolnym miejscu w witrynie, nie tylko na stronie głównej, ale też na innych stronach. Jest to przydatne, gdy użytkownicy trafiają na różne strony w Twojej witrynie za pomocą wyszukiwarki.

Aby włączyć automatyczne logowanie:

1. Uzyskaj informacje o danych logowania.
2. Uwierzytelnij użytkownika.
3. Zaktualizuj interfejs lub przejdź na stronę spersonalizowaną.

Uzyskiwanie informacji o danych logowania

Browser Support

• 51
• 18
• 60
• 13

Source

Aby uzyskać informacje o danych logowania, wywołaj navigator.credentials.get(). Określ typ danych logowania, o które chcesz poprosić, podając password lub federated.

Zawsze używaj mediation: 'silent' do automatycznego logowania, aby łatwo odrzucić proces, jeśli użytkownik:

• nie przechowuje danych logowania,
• ma zapisane dane logowania do wielu metod uwierzytelniania.
• nie jest zalogowany,

Przed pobraniem danych logowania sprawdź, 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',
    });
    // ...
  }
}

Obiekt Promise zwracany przez navigator.credentials.get() jest rozwiązywany za pomocą obiektu danych logowania lub null. Aby określić, czy jest to PasswordCredential czy FederatedCredential, wystarczy sprawdzić właściwość .type obiektu, która będzie miała wartość password lub federated.

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

Uwierzytelnianie użytkownika

Gdy masz już dane logowania, uruchom 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 zostanie spełniona, sprawdź, czy otrzymano obiekt danych logowania. Jeśli nie, oznacza to, że automatyczne logowanie nie mogło się odbyć. Zamknij proces automatycznego logowania bez powiadomienia.

Zaktualizuj interfejs

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

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

Pamiętaj o wyświetleniu komunikatu o błędzie uwierzytelniania.

Aby uniknąć nieporozumień, użytkownicy powinni zobaczyć niebieski dymek z komunikatem „Loguję się” w momencie pobierania obiektu danych logowania:

Ważna wskazówka: jeśli uda Ci się uzyskać obiekt danych logowania, ale nie uda się uwierzytelnić użytkownika, wyświetl komunikat o błędzie:

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

Pełny przykładowy kod

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');
      });
  }
}

Logowanie za pomocą Account Chooser

Jeśli użytkownik wymaga mediacji lub ma kilka kont, użyj selektora kont, aby umożliwić mu zalogowanie się, pomijając zwykły formularz logowania, na przykład:

Czynności związane z logowaniem się za pomocą selektora kont są takie same jak w przypadku automatycznego logowania, ale w ramach uzyskiwania danych logowania trzeba dodatkowo wywołać selektor kont:

1. pobrać dane logowania i wyświetlić selektor konta;
2. Uwierzytelnij użytkownika.
3. Zaktualizuj interfejs lub przejdź na spersonalizowaną stronę.

Pobieranie informacji o danych logowania i wyświetlanie selektora kont

Wyświetlaj selektor konta w odpowiedzi na określone działanie użytkownika, np. gdy kliknie on przycisk „Zaloguj się”. Wywołaj navigator.credentials.get() i dodaj mediation: 'optional' lub mediation: 'required', aby wyświetlić selektor kont.

Gdy zasada mediation ma wartość required, użytkownikowi zawsze wyświetla się selektor konta, który umożliwia zalogowanie się. Ta opcja umożliwia użytkownikom z wieloma kontami łatwe przełączanie się między nimi. Gdy zasada mediation ma wartość optional, użytkownikowi wyraźnie wyświetla się selektor konta, aby mógł się zalogować po wywołaniu navigator.credentials.preventSilentAccess(). Zwykle ma to na celu zapobieganie logowaniu automatycznemu, gdy użytkownik zdecyduje się wylogować lub zrezygnować.

Przykład pokazujący 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 zostanie spełniona i zostaną podane dane logowania. Jeśli użytkownik anuluje wybór konta lub nie ma zapisanych danych logowania, obietnica zostanie rozwiązana z wartością null. W takim przypadku wróć do formularza logowania.

Nie zapomnij o formularzu logowania jako opcji zapasowej.

W tych przypadkach należy użyć formularza logowania:

• Dane logowania nie są przechowywane.
• Użytkownik zamknął selektor kont bez wybierania konta.
• Interfejs API jest niedostępny.

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

Pełny przykładowy kod

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 i bez konieczności pamiętania dodatkowych danych logowania do Twojej witryny.

Aby wdrożyć logowanie sfederowane:

1. Uwierzytelnij użytkownika za pomocą tożsamości zewnętrznej.
2. przechowywać informacje o tożsamości,
3. Zaktualizuj interfejs lub przejdź na spersonalizowaną stronę (tak samo jak w przypadku automatycznego logowania).

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

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

Browser Support

• 51
• 79
• x
• x

Source

Jeśli na przykład dostawcą jest Google, użyj biblioteki JavaScriptu 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 || '',
      });
    }
  });

Logowanie przez Google generuje token identyfikacji jako dowód uwierzytelnienia.

Ogólnie rzecz biorąc, logowanie sfederowane jest oparte na standardowych protokołach, takich jak OpenID Connect lub OAuth. Aby dowiedzieć się, jak uwierzytelniać się za pomocą kont sfederowanych, zapoznaj się z dokumentacją odpowiednich dostawców tożsamości sfederowanej. Popularne przykłady:

• Logowanie przez Google
• Logowanie przez Facebooka
• Logowanie przez Twittera
• GitHub OAuth

Informacje o tożsamości sklepu

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 i ciąg znaków reprezentujący dostawcę tożsamości (name i iconURL są opcjonalne). Więcej informacji o tych danych znajdziesz w specyfikacji Credential Manager.

Aby zapisać szczegóły konta sfederowanego, utwórz instancję nowego obiektu FederatedCredential z identyfikatorem użytkownika i identyfikatorem dostawcy. Następnie wywołaj navigator.credentials.store(), aby zapisać informacje o tożsamości.

Po pomyślnej federacji utwórz instancję FederatedCredential synchronicznie lub asynchronicznie:

Przykład podejścia synchronicznego:

// 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 podejścia asynchronicznego:

// 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ę

Wyloguj użytkowników po kliknięciu przycisku wylogowania. Najpierw zakończ sesję, a potem wyłącz automatyczne logowanie na przyszłość. (Sposób zakończenia sesji zależy wyłącznie od Ciebie).

Wyłączanie automatycznego logowania podczas przyszłych wizyt

Zadzwoń pod numer navigator.credentials.preventSilentAccess():

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

Dzięki temu automatyczne logowanie nie nastąpi, dopóki użytkownik nie włączy go ponownie. Aby wznowić automatyczne logowanie, użytkownik może zalogować się ręcznie, wybierając konto, na które chce się zalogować, w selektorze kont. Następnie użytkownik jest zawsze logowany z powrotem, dopóki wyraźnie się nie wyloguje.

Prześlij opinię