Web uygulamalarında OpenID Connect'i kullanarak kimlik doğrulama

Identity Platform ile Firebase Kimlik Doğrulamasına yükseltme yaptıysanız, seçtiğiniz OpenID Connect (OIDC) uyumlu sağlayıcıyı kullanarak kullanıcılarınızın kimliklerini Firebase ile doğrulayabilirsiniz. Bu, Firebase tarafından yerel olarak desteklenmeyen kimlik sağlayıcıların kullanılmasını mümkün kılar.

Sen başlamadan önce

Bir OIDC sağlayıcısını kullanarak kullanıcıların oturum açmasını sağlamak için öncelikle sağlayıcıdan bazı bilgiler toplamanız gerekir:

  • İstemci Kimliği : Uygulamanızı tanımlayan, sağlayıcıya özgü benzersiz bir dize. Sağlayıcınız, desteklediğiniz her platform için size farklı bir müşteri kimliği atayabilir. Bu, sağlayıcınız tarafından verilen kimlik belirteçlerindeki aud talebinin değerlerinden biridir.

  • Müşteri sırrı : Sağlayıcının bir müşteri kimliğinin sahipliğini onaylamak için kullandığı gizli bir dize. Her müşteri kimliği için eşleşen bir müşteri sırrına ihtiyacınız olacaktır. (Bu değer yalnızca kimlik doğrulama kodu akışını kullanıyorsanız gereklidir; bu kesinlikle önerilir.)

  • Veren : Sağlayıcınızı tanımlayan bir dize. Bu değer, /.well-known/openid-configuration ile eklendiğinde sağlayıcının OIDC keşif belgesinin konumu olan bir URL olmalıdır. Örneğin, veren https://auth.example.com ise keşif belgesinin https://auth.example.com/.well-known/openid-configuration adresinde mevcut olması gerekir.

Yukarıdaki bilgileri aldıktan sonra Firebase projeniz için oturum açma sağlayıcısı olarak OpenID Connect'i etkinleştirin:

  1. Firebase'i JavaScript projenize ekleyin .

  2. Firebase Authentication with Identity Platform'a yükseltme yapmadıysanız bunu yapın. OpenID Connect kimlik doğrulaması yalnızca yükseltilmiş projelerde kullanılabilir.

  3. Firebase konsolunun Oturum açma sağlayıcıları sayfasında Yeni sağlayıcı ekle 'ye ve ardından OpenID Connect'e tıklayın.

  4. Yetkilendirme kodu akışını mı yoksa örtülü izin akışını mı kullanacağınızı seçin.

    Sağlayıcınız destekliyorsa her zaman kod akışını kullanmalısınız . Örtülü akış daha az güvenlidir ve kullanılması kesinlikle önerilmez.

  5. Bu sağlayıcıya bir ad verin. Oluşturulan sağlayıcı kimliğini not edin: oidc.example-provider gibi bir şey. Uygulamanıza oturum açma kodunu eklediğinizde bu kimliğe ihtiyacınız olacak.

  6. Müşteri kimliğinizi, müşteri sırrınızı ve sağlayıcınızın sağlayıcı dizesini belirtin. Bu değerler, sağlayıcınızın size atadığı değerlerle tam olarak eşleşmelidir.

  7. Değişikliklerinizi kaydedin.

Oturum açma akışını Firebase SDK ile yönetin

OIDC sağlayıcınızı kullanarak Firebase ile kullanıcılarınızın kimliklerini doğrulamanın en kolay yolu, tüm oturum açma akışını Firebase SDK ile yönetmektir.

Firebase JavaScript SDK'sıyla oturum açma akışını yönetmek için şu adımları izleyin:

  1. Firebase konsolunda aldığınız sağlayıcı kimliğini kullanarak bir OAuthProvider örneği oluşturun.

    Web modüler API'si

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

    Web ad alanlı API

    var provider = new firebase.auth.OAuthProvider('oidc.example-provider');
    
  2. İsteğe bağlı : OAuth isteğiyle birlikte göndermek istediğiniz ek özel OAuth parametrelerini belirtin.

    Web modüler API'si

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

    Web ad alanlı API

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

    Desteklediği parametreler için sağlayıcınıza danışın. Firebase için gerekli parametreleri setCustomParameters ile iletemeyeceğinizi unutmayın. Bu parametreler client_id , response_type , redirect_uri , state , scope ve response_mode .

  3. İsteğe bağlı : Kimlik doğrulama sağlayıcısından istemek istediğiniz temel profilin ötesinde ek OAuth 2.0 kapsamlarını belirtin.

    Web modüler API'si

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

    Web ad alanlı API

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

    Desteklediği kapsamlar için sağlayıcınıza danışın.

  4. OAuth sağlayıcı nesnesini kullanarak Firebase ile kimlik doğrulaması yapın.

    Kullanıcıyı sağlayıcının oturum açma sayfasına yönlendirebilir veya oturum açma sayfasını açılır bir tarayıcı penceresinde açabilirsiniz.

    Akışı yönlendir

    signInWithRedirect() öğesini çağırarak sağlayıcı oturum açma sayfasına yönlendirin:

    Web modüler API'si

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

    Web ad alanlı API

    firebase.auth().signInWithRedirect(provider);
    

    Kullanıcı oturum açmayı tamamlayıp uygulamanıza döndükten sonra getRedirectResult() çağırarak oturum açma sonucunu alabilirsiniz.

    Web modüler API'si

    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 ad alanlı API

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

    Açılan akış

    Web modüler API'si

    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 ad alanlı API

    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. Yukarıdaki örnekler oturum açma akışlarına odaklanırken, bir OIDC sağlayıcısını linkWithRedirect() ve linkWithPopup() kullanarak mevcut bir kullanıcıya bağlamak ve reauthenticateWithRedirect() ve reauthenticateWithPopup() ile bir kullanıcının kimliğini yeniden doğrulamak için aynı modeli kullanabilirsiniz. yakın zamanda oturum açmayı gerektiren hassas işlemler için yeni kimlik bilgileri almak için kullanılabilir.

Oturum açma akışını manuel olarak yönetin

Uygulamanızda OpenID Connect oturum açma akışını zaten uyguladıysanız Firebase ile kimlik doğrulamak için kimlik belirtecini doğrudan kullanabilirsiniz:

Web modüler API'si

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 ad alanlı API

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