Uwierzytelniaj przy użyciu OpenID Connect w aplikacjach internetowych

Jeśli korzystasz z usługi Firebase Authentication with Identity Platform, możesz uwierzytelniać użytkowników przy użyciu Firebase za pomocą wybranego przez Ciebie dostawcy zgodnego z OpenID Connect (OIDC). Ten pozwala na korzystanie z dostawców tożsamości, które nie są natywnie obsługiwane przez Firebase.

Zanim zaczniesz

Aby zalogować użytkowników przy użyciu dostawcy OIDC, musisz najpierw zebrać pewne informacje od dostawcy:

  • Identyfikator klienta: unikalny ciąg znaków identyfikujący aplikację. Twoje dostawca może przypisać Ci inny identyfikator klienta dla każdej obsługiwanej platformy. To jest jedna z wartości roszczenia aud w tokenach tożsamości wystawionych przez dostawcy usług.

  • Tajny klucz klienta: tajny ciąg znaków używany przez dostawcę do potwierdzania własności. identyfikatora klienta. Do każdego identyfikatora klienta musi być dopasowany tajny klucz klienta. (Ta wartość jest wymagana tylko w przypadku przepływu kodu uwierzytelniającego, który jest zdecydowanie zalecane).

  • Wystawca: ciąg znaków identyfikujący dostawcę. Ta wartość musi być adresem URL że po dodaniu ciągu /.well-known/openid-configuration będzie to lokalizacja dokumentu wykrywania OIDC dostawcy. Jeśli na przykład wystawcą jest https://auth.example.com, dokument opisujący musi być dostępny na https://auth.example.com/.well-known/openid-configuration

Po uzyskaniu tych informacji włącz OpenID Connect, aby się zalogować. dla swojego projektu Firebase:

  1. Dodaj Firebase do projektu JavaScript.

  2. Jeśli nie korzystasz jeszcze z wersji Firebase Authentication with 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ę i wybierz OpenID Connect.

  4. Wybierz, czy będziesz korzystać z przepływu kodu autoryzacji czy przepływ niejawny.

    Należy zawsze używać przepływu kodu, jeśli dostawca go obsługuje. Przepływ niejawny jest mniej bezpieczny i zdecydowanie odradzamy jego używanie.

  5. Nazwij tego dostawcę. Zanotuj wygenerowany identyfikator dostawcy: np. oidc.example-provider. Ten identyfikator będzie potrzebny podczas dodawania kod logowania do aplikacji.

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

  7. Zapisz zmiany.

Zarejestruj się za pomocą pakietu SDK Firebase

Najłatwiejszy sposób uwierzytelniania użytkowników w Firebase przy użyciu OIDC jest do obsługi całej procedury logowania za pomocą pakietu SDK Firebase.

Aby zalogować się za pomocą pakietu SDK Firebase JavaScript, postępuj zgodnie z tymi wskazówkami kroki:

  1. Utwórz instancję OAuthProvider, używając otrzymanego identyfikatora dostawcy 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 stosować wysył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 poznać obsługiwane parametry. Pamiętaj, że parametrów wymaganych przez Firebase nie można przekazywać za pomocą funkcji 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 podstawowym profilem, które których chcesz żądać od 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 uzyskać informacje o obsługiwanych zakresach.

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

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

    Proces przekierowania

    Przekieruj na stronę logowania dostawcy, dzwoniąc pod numer signInWithRedirect():

    Web 

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

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

    Web 

    firebase.auth().signInWithRedirect(provider);

    Gdy użytkownik się zaloguje i wróci do aplikacji, możesz uzyskać wyniku logowania, dzwoniąc pod numer 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ąca instrukcja

    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ą procesu logowania, ale możesz użyć tego samego do połączenia dostawcy OIDC z istniejącym użytkownikiem za pomocą linkWithRedirect() i linkWithPopup(), a następnie ponownie uwierzytelnij użytkownika przy użyciu reauthenticateWithRedirect() i reauthenticateWithPopup(), które mogą być służy do pobierania nowych danych logowania na potrzeby operacji poufnych, które wymagają ostatniego logowania.

Zarejestruj się ręcznie

Jeśli masz już wdrożony w aplikacji proces logowania OpenID Connect, mogą używać 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.
    });