Uwierzytelniaj przy użyciu OpenID Connect w aplikacjach internetowych

Po przejściu na Uwierzytelnianie Firebase z Identity Platform możesz uwierzytelniać użytkowników w Firebase za pomocą wybranego dostawcy zgodnego z OpenID Connect (OIDC). Umożliwia to 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 uzyskać od niego pewne informacje:

• Identyfikator klienta: unikalny ciąg znaków identyfikujący Twoją aplikację. Dostawca może przypisać Ci inny identyfikator klienta dla każdej obsługiwanej platformy. To jedna z wartości deklaracji aud w tokenach identyfikatorów wystawionych przez Twojego dostawcę.

• Tajny klucz klienta: ciąg tajny 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 korzystania z przepływu kodu uwierzytelniającego, co jest zdecydowanie zalecane).

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

Po otrzymaniu tych informacji włącz OpenID Connect jako dostawcę logowania w projekcie Firebase:

1. Dodaj Firebase do projektu JavaScript.

2. Jeśli nie korzystasz jeszcze z Uwierzytelniania Firebase z Identity Platform, zrób to. Uwierzytelnianie OpenID Connect jest dostępne tylko w uaktualnionych projektach.

3. Na stronie Sign-in provider (Dostawcy logowania) w konsoli Firebase kliknij Dodaj nowego dostawcę, a następnie kliknij OpenID Connect.

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

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

5. Nazwij tego dostawcę. Zanotuj wygenerowany identyfikator dostawcy, np. oidc.example-provider. Będzie Ci potrzebny podczas dodawania kodu 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

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 zalogować się za pomocą pakietu SDK Firebase JavaScript, wykonaj te czynności:

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

   Web Modular API

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

   Interfejs API internetowej przestrzeni nazw

   var provider = new firebase.auth.OAuthProvider('oidc.example-provider');
   

2. Opcjonalnie: określ dodatkowe niestandardowe parametry OAuth, które chcesz wysyłać z żądaniem OAuth.

   Web Modular API

   provider.setCustomParameters({
     // Target specific email with login hint.
     login_hint: '[e-mail]'
   });
   

   Interfejs API internetowej przestrzeni nazw

   provider.setCustomParameters({
     // Target specific email with login hint.
     login_hint: '[e-mail]'
   });
   

   Skontaktuj się z dostawcą, aby poznać obsługiwane parametry. Pamiętaj, że za pomocą setCustomParameters nie możesz przekazywać parametrów wymaganych przez Firebase. 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, o które chcesz poprosić dostawcę uwierzytelniania.

   Web Modular API

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

   Interfejs API internetowej przestrzeni nazw

   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ć stronę logowania w wyskakującym okienku przeglądarki.

   Proces przekierowania

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

   Web Modular API

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

   Interfejs API internetowej przestrzeni nazw

   firebase.auth().signInWithRedirect(provider);
   

   Gdy użytkownik się zaloguje i wróci do aplikacji, możesz uzyskać wynik logowania, dzwoniąc pod numer getRedirectResult().

   Web Modular API

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

   Interfejs API internetowej 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ąca instrukcja

   Web Modular API

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

   Interfejs API internetowej 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. Powyższe przykłady koncentrują się na procesach logowania, ale możesz wykorzystać ten sam wzorzec, aby połączyć dostawcę OIDC z dotychczasowym użytkownikiem za pomocą linkWithRedirect() i linkWithPopup() oraz ponownie uwierzytelnić użytkownika za pomocą reauthenticateWithRedirect() i reauthenticateWithPopup(), których można użyć do pobierania nowych danych logowania w przypadku operacji związanych z poufnymi danymi, które wymagają ostatniego logowania.

Zarejestruj się ręcznie

Jeśli masz już wdrożony w aplikacji proces logowania OpenID Connect, możesz użyć tokena identyfikatora bezpośrednio, by uwierzytelnić się w Firebase:

Web Modular API

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

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