Uwierzytelniaj przy użyciu OpenID Connect w aplikacjach internetowych

Jeśli masz wersję Firebase Authentication with Identity Platform, możesz uwierzytelniać użytkowników za pomocą Firebase przy użyciu wybranego dostawcy zgodnego z OpenID Connect (OIDC). Dzięki temu można używać dostawców tożsamości, którzy nie są natywnie obsługiwani przez Firebase.

Zanim zaczniesz

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

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

  • Tajny klucz klienta: tajny ciąg znaków, którego dostawca używa do potwierdzenia własności identyfikatora klienta. Każdy identyfikator klienta musi mieć odpowiadający mu tajny klucz klienta. (Ta wartość jest wymagana tylko wtedy, gdy używasz procesu kodu autoryzacji, co jest zdecydowanie zalecane).

  • Wystawca: ciąg znaków identyfikujący dostawcę. Ta wartość musi być adresem URL, który po dodaniu do niego /.well-known/openid-configuration wskazuje lokalizację dokumentu wykrywania OIDC dostawcy. Jeśli na przykład wystawca to https://auth.example.com, dokument wykrywania musi być dostępny pod adresem https://auth.example.com/.well-known/openid-configuration.

Gdy uzyskasz powyższe informacje, włącz OpenID Connect jako dostawcę logowania w projekcie Firebase:

  1. Dodaj Firebase do projektu JavaScript.

  2. Jeśli nie masz jeszcze wersji Firebase Authentication with Identity Platform, zaktualizuj ją. Uwierzytelnianie przy użyciu OpenID Connect jest dostępne tylko w zaktualizowanych projektach.

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

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

    Jeśli Twój dostawca tożsamości obsługuje przepływ kodu, zawsze używaj tego przepływu. Przepływ niejawny jest mniej bezpieczny i zdecydowanie odradzamy jego używanie.

  5. Nadaj nazwę temu dostawcy. Zapisz wygenerowany identyfikator dostawcy, np. oidc.example-provider. Ten identyfikator będzie potrzebny podczas dodawania kodu logowania do aplikacji.

  6. Określ identyfikator klienta, tajny klucz klienta i ciąg wydawcy dostawcy. Wartości te muszą być dokładnie takie same jak wartości przypisane przez dostawcę.

  7. Zapisz zmiany.

Obsługa procesu logowania za pomocą pakietu Firebase SDK

Najprostszym sposobem uwierzytelniania użytkowników w Firebase za pomocą dostawcy OIDC jest obsługa całego procesu logowania za pomocą pakietu SDK Firebase.

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

  1. Utwórz instancję OAuthProvider, używając identyfikatora dostawcy uzyskanego w konsoli Firebase.

    Web 

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('oidc.example-provider');

    Web 

    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.

    Web 

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

    Web 

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

    Skontaktuj się z dostawcą, aby dowiedzieć się, jakie parametry są obsługiwane. Pamiętaj, że nie możesz przekazywać parametrów wymaganych przez Firebase za pomocą znaku 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 podstawowym profilem, które chcesz przesłać do dostawcy uwierzytelniania.

    Web 

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

    Web 

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

    Skontaktuj się z dostawcą, aby dowiedzieć się, jakie zakresy obsługuje.

  4. Uwierzytelnij w Firebase za pomocą obiektu dostawcy OAuth.

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

    Przepływ przekierowania

    Przekieruj na stronę logowania podmiotu medycznego, wywołując signInWithRedirect():

    Web 

    import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);

    Web 

    firebase.auth().signInWithRedirect(provider);

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

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

    Web 

    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ące okienko

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

    Web 

    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. Powyższe przykłady dotyczą przepływów logowania, ale 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órych można użyć do pobrania nowych danych logowania w przypadku operacji wymagających niedawnego logowania.

Ręczne obsługiwanie procesu logowania

Jeśli w aplikacji masz już zaimplementowany proces logowania przy użyciu OpenID Connect, możesz użyć tokena identyfikatora bezpośrednio do uwierzytelniania w Firebase:

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

Web 

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