Uwierzytelniaj się za pomocą OpenID Connect w aplikacjach internetowych

Jeśli dokonałeś aktualizacji do uwierzytelniania Firebase z platformą tożsamości, możesz uwierzytelniać swoich użytkowników w Firebase przy użyciu wybranego dostawcy zgodnego z OpenID Connect (OIDC). Umożliwia to korzystanie z dostawców tożsamości, którzy nie są natywnie obsługiwani przez Firebase.

Zanim zaczniesz

Aby zalogować użytkowników za pomocą dostawcy OIDC, musisz najpierw zebrać od dostawcy pewne informacje:

  • Identyfikator klienta : ciąg znaków unikalny dla dostawcy, który identyfikuje Twoją aplikację. Twój dostawca może przypisać Ci inny identyfikator klienta dla każdej obsługiwanej platformy. Jest to jedna z wartości żądania aud w tokenach identyfikacyjnych wydanych przez Twojego dostawcę.

  • Sekret klienta : tajny ciąg znaków używany przez dostawcę do potwierdzenia własności identyfikatora klienta. Dla każdego identyfikatora klienta będziesz potrzebować pasującego sekretu klienta. (Ta wartość jest wymagana tylko w przypadku korzystania z przepływu kodu uwierzytelniającego , co jest zdecydowanie zalecane).

  • Wystawca : ciąg znaków identyfikujący Twojego dostawcę. Ta wartość musi być adresem URL, który po dołączeniu do /.well-known/openid-configuration oznacza lokalizację dokumentu wykrywania OIDC dostawcy. Na przykład, jeśli wystawcą jest https://auth.example.com , dokument wykrywający musi być dostępny pod https://auth.example.com/.well-known/openid-configuration .

Po uzyskaniu powyższych informacji włącz OpenID Connect jako dostawcę logowania dla swojego projektu Firebase:

  1. Dodaj Firebase do swojego projektu JavaScript .

  2. Jeśli nie dokonałeś aktualizacji do uwierzytelniania Firebase z platformą tożsamości, zrób to. Uwierzytelnianie OpenID Connect jest dostępne tylko w zaktualizowanych projektach.

  3. Na stronie Dostawcy logowania w konsoli Firebase kliknij Dodaj nowego dostawcę , a następnie kliknij OpenID Connect Connect .

  4. Wybierz, czy będziesz używać przepływu kodu autoryzacyjnego , czy ukrytego przepływu dotacji .

    Powinieneś zawsze używać przepływu kodu, jeśli Twój dostawca to obsługuje . Niejawny przepływ jest mniej bezpieczny i zdecydowanie odradza się jego używanie.

  5. Podaj nazwę tego dostawcy. Zanotuj wygenerowany identyfikator dostawcy: coś w rodzaju oidc.example-provider . Będziesz potrzebować tego identyfikatora, gdy dodasz kod logowania do swojej aplikacji.

  6. Podaj swój identyfikator klienta i klucz tajny klienta oraz ciąg wystawcy dostawcy. Wartości te muszą dokładnie odpowiadać wartościom przypisanym przez dostawcę.

  7. Zapisz zmiany.

Obsługuj proces logowania za pomocą pakietu SDK Firebase

Najłatwiejszym sposobem uwierzytelnienia użytkowników w Firebase przy użyciu dostawcy OIDC jest obsługa całego procesu logowania za pomocą pakietu SDK Firebase.

Aby obsłużyć proces logowania za pomocą pakietu SDK JavaScript Firebase, wykonaj następujące kroki:

  1. Utwórz instancję OAuthProvider , korzystając z identyfikatora dostawcy otrzymanego w konsoli Firebase.

    Modułowe API sieciowe

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('oidc.example-provider');
    

    Internetowy interfejs API z przestrzenią nazw

    var provider = new firebase.auth.OAuthProvider('oidc.example-provider');
    
  2. Opcjonalnie : określ dodatkowe niestandardowe parametry OAuth, które chcesz wysłać z żądaniem OAuth.

    Modułowe API sieciowe

    provider.setCustomParameters({
      // Target specific email with login hint.
      login_hint: 'user@example.com'
    });
    

    Internetowy interfejs API z przestrzenią nazw

    provider.setCustomParameters({
      // Target specific email with login hint.
      login_hint: 'user@example.com'
    });
    

    Sprawdź u swojego dostawcy parametry, które obsługuje. Pamiętaj, że nie możesz przekazywać parametrów wymaganych przez Firebase za pomocą setCustomParameters . Te parametry to client_id , response_type , redirect_uri , state , scope i response_mode .

  3. Opcjonalnie : określ dodatkowe zakresy protokołu OAuth 2.0 poza profilem podstawowym, o które chcesz poprosić dostawcę uwierzytelniania.

    Modułowe API sieciowe

    provider.addScope('mail.read');
    provider.addScope('calendars.read');
    

    Internetowy interfejs API z przestrzenią nazw

    provider.addScope('mail.read');
    provider.addScope('calendars.read');
    

    Sprawdź u swojego dostawcy zakresy, które obsługuje.

  4. Uwierzytelnij się w Firebase przy użyciu obiektu dostawcy OAuth.

    Możesz przekierować użytkownika na stronę logowania dostawcy lub otworzyć stronę logowania w wyskakującym oknie przeglądarki.

    Przekieruj przepływ

    Przekieruj do strony logowania dostawcy, wywołując metodę signInWithRedirect() :

    Modułowe API sieciowe

    import { getAuth, signInWithRedirect } from "firebase/auth";
    
    const auth = getAuth();
    signInWithRedirect(auth, provider);
    

    Internetowy interfejs API z przestrzenią nazw

    firebase.auth().signInWithRedirect(provider);
    

    Gdy użytkownik zakończy logowanie i wróci do aplikacji, możesz uzyskać wynik logowania, wywołując funkcję getRedirectResult() .

    Modułowe API sieciowe

    import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";
    
    const auth = getAuth();
    getRedirectResult(auth)
      .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.
    
        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
      })
      .catch((error) => {
        // Handle error.
      });
    

    Internetowy interfejs API z przestrzenią nazw

    firebase.auth().getRedirectResult()
      .then((result) => {
        // IdP data available in result.additionalUserInfo.profile.
        // ...
    
        /** @type {firebase.auth.OAuthCredential} */
        var credential = result.credential;
    
        // OAuth access and id tokens can also be retrieved:
        var accessToken = credential.accessToken;
        var idToken = credential.idToken;
      })
      .catch((error) => {
        // Handle error.
      });
    

    Przepływ wyskakujących okienek

    Modułowe API sieciowe

    import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
    
    const auth = getAuth();
    signInWithPopup(auth, provider)
      .then((result) => {
        // User is signed in.
        // IdP data available using getAdditionalUserInfo(result)
    
        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
      })
      .catch((error) => {
        // Handle error.
      });
    

    Internetowy interfejs API z przestrzenią nazw

    firebase.auth().signInWithPopup(provider)
      .then((result) => {
        // IdP data available in result.additionalUserInfo.profile.
        // ...
    
        /** @type {firebase.auth.OAuthCredential} */
        var credential = result.credential;
    
        // OAuth access and id tokens can also be retrieved:
        var accessToken = credential.accessToken;
        var idToken = credential.idToken;
      })
      .catch((error) => {
        // Handle error.
      });
    
  5. Chociaż powyższe przykłady skupiają się na przepływach logowania, możesz użyć tego samego wzorca, aby połączyć dostawcę OIDC z istniejącym użytkownikiem za pomocą linkWithRedirect() i linkWithPopup() oraz ponownie uwierzytelnić użytkownika za pomocą reauthenticateWithRedirect() i reauthenticateWithPopup() , które można wykorzystać do pobrania nowych danych uwierzytelniających dla wrażliwych operacji wymagających niedawnego logowania.

Obsługuj proces logowania ręcznie

Jeśli w swojej aplikacji zaimplementowałeś już proces logowania OpenID Connect, możesz użyć tokena identyfikacyjnego bezpośrednio do uwierzytelnienia w Firebase:

Modułowe API sieciowe

import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
signInWithCredential(getAuth(), credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });

Internetowy interfejs API z przestrzenią nazw

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
firebase.auth().signInWithCredential(credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });