Uwierzytelnij się za pomocą OpenID Connect w aplikacjach internetowych

Jeśli korzystasz z Uwierzytelniania Firebase z Identity Platform, możesz uwierzytelniać swoich użytkowników w Firebase przy użyciu wybranego dostawcy zgodnego z OpenID Connect (OIDC). Dzięki temu można korzystać 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 niego pewne informacje:

  • Identyfikator klienta : ciąg 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 wystawionych przez Twojego dostawcę.

  • Sekret klienta : Tajny ciąg używany przez dostawcę do potwierdzenia własności identyfikatora klienta. Dla każdego identyfikatora klienta potrzebny będzie pasujący klucz tajny klienta. (Ta wartość jest wymagana tylko wtedy, gdy używasz przepływu kodu autoryzacji , co jest zdecydowanie zalecane).

  • Issuer : ciąg znaków, który identyfikuje dostawcę. Ta wartość musi być adresem URL, który po dołączeniu z /.well-known/openid-configuration oznacza lokalizację dokumentu wykrywania OIDC dostawcy. Na przykład jeśli wystawcą jest https://auth.example.com , dokument odnajdywania 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ś uaktualnienia do Firebase Authentication with Identity Platform, 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 .

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

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

  5. Podaj nazwę tego dostawcy. Zanotuj wygenerowany identyfikator dostawcy: na przykład 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. Te wartości muszą dokładnie odpowiadać wartościom przypisanym przez dostawcę.

  7. Zapisz zmiany.

Obsługuj proces logowania za pomocą Firebase SDK

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

Aby obsłużyć proces logowania za pomocą Firebase JavaScript SDK, wykonaj te czynności:

  1. Utwórz instancję OAuthProvider przy użyciu identyfikatora dostawcy otrzymanego w konsoli Firebase.

    Modułowy interfejs API sieci Web

    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łowy interfejs API sieci Web

    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, jakie parametry obsługuje. Pamiętaj, że nie możesz przekazać 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 OAuth 2.0 poza profilem podstawowym, o które chcesz poprosić dostawcę uwierzytelniania.

    Modułowy interfejs API sieci Web

    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, jakie zakresy 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 funkcję signInWithRedirect() :

    Modułowy interfejs API sieci Web

    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 Twojej aplikacji, możesz uzyskać wynik logowania, wywołując funkcję getRedirectResult() .

    Modułowy interfejs API sieci Web

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

    Wyskakujący przepływ

    Modułowy interfejs API sieci Web

    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órego można użyć do pobrania świeżych poświadczeń dla poufnych operacji wymagających ostatniego logowania.

Ręcznie obsługuj przepływ logowania

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

Modułowy interfejs API sieci Web

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