Uwierzytelnij się za pomocą OpenID Connect w aplikacjach internetowych

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Jeśli korzystasz z uwierzytelniania Firebase za pomocą Identity Platform, możesz uwierzytelniać swoich użytkowników w Firebase, korzystając z wybranego dostawcy zgodnego z OpenID Connect (OIDC). Umożliwia to korzystanie z dostawców tożsamości nieobsługiwanych natywnie przez Firebase.

Zanim zaczniesz

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

  • 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 identyfikatorów wystawionych przez Twojego dostawcę.

  • Sekret klienta : tajny ciąg znaków używany przez dostawcę do potwierdzania własności identyfikatora klienta. Dla każdego identyfikatora klienta będziesz potrzebować pasującego klucza tajnego klienta. (Ta wartość jest wymagana tylko wtedy, gdy używasz przepływu kodu uwierzytelniania , 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 , jest lokalizacją dokumentu odnajdywania OIDC dostawcy. Jeśli na przykład wystawcą jest https://auth.example.com , dokument wykrywania 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 do projektu Firebase:

  1. Dodaj Firebase do swojego projektu JavaScript .

  2. Jeśli nie uaktualniono do Uwierzytelniania Firebase za pomocą Identity Platform, zrób to. Uwierzytelnianie OpenID Connect jest dostępne tylko w uaktualnionych 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 autoryzacji, czy niejawnego przepływu przyznania .

    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ę korzystanie z niego.

  5. Podaj nazwę temu dostawcy. Zanotuj wygenerowany identyfikator dostawcy: coś takiego jak 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, które przypisał Ci Twój dostawca.

  7. Zapisz zmiany.

Obsługuj proces logowania za pomocą pakietu Firebase SDK

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

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

  1. Utwórz wystąpienie OAuthProvider przy użyciu identyfikatora dostawcy otrzymanego w konsoli Firebase.

    Web version 9

    import { OAuthProvider } from "firebase/auth";

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

    Web version 8

    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 version 9

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

    Web version 8

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

    Sprawdź u swojego dostawcy, jakie parametry obsługuje. Pamiętaj, że za pomocą setCustomParameters nie możesz przekazać parametrów wymaganych przez 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, których chcesz zażądać od dostawcy uwierzytelniania.

    Web version 9

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

    Web version 8

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

    Skontaktuj się z dostawcą, aby uzyskać informacje o obsługiwanych przez niego zakresach.

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

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

    Przekieruj przepływ

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

    Web version 9

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

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

    Web version 8

    firebase.auth().signInWithRedirect(provider);

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

    Web version 9

    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 version 8

    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

    Web version 9

    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 version 8

    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 koncentrują 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() i ponownie uwierzytelnić użytkownika za pomocą reauthenticateWithRedirect( reauthenticateWithRedirect() i reauthenticateWithPopup( reauthenticateWithPopup() , które mogą służyć do pobierania nowych poświadczeń dla poufnych operacji, które wymagają niedawnego logowania.

Ręczna obsługa procesu logowania

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

Web version 9

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 version 8

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