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

Firebase Authentication with Identity Platform sürümüne geçtiyseniz Tercih ettiğiniz RFC Connect (OIDC) uyumlu sağlayıcıyı kullanan Firebase. Bu Firebase tarafından yerel olarak desteklenmeyen kimlik sağlayıcıların kullanılmasını sağlar.

Başlamadan önce

OIDC sağlayıcısı kullanarak kullanıcıların oturumunu açmak için önce bazı bilgiler toplamanız gerekir sağlayıcıdan:

  • İstemci kimliği: Uygulamanızı tanımlayan, sağlayıcıya özgü bir dize. Sizin sağlayıcı, desteklediğiniz her platform için size farklı bir istemci kimliği atayabilir. Bu,aud sağlar.

  • İstemci gizli anahtarı: Sağlayıcının sahipliği onaylamak için kullandığı gizli bir dize olabilir. Her istemci kimliği için eşleşen bir istemci gizli anahtarı gerekir. (Bu değer yalnızca yetkilendirme kodu akışını kullanıyorsanız gereklidir. kesinlikle önerilir.)

  • Düzenleyen: Sağlayıcınızı tanımlayan bir dize. Bu değer bir URL olmalıdır /.well-known/openid-configuration ile eklendiğinde konumun (sağlayıcının OIDC keşif dokümanını inceleyin). Örneğin, kartı veren kuruluş https://auth.example.com, keşif belgesi şu adreste bulunmalıdır: https://auth.example.com/.well-known/openid-configuration.

Yukarıdaki bilgileri edindikten sonra oturum açma işlemi olarak COPPA Connect'i etkinleştirin Firebase projeniz için sağlayıcı:

  1. Firebase'i JavaScript projenize ekleyin.

  2. Henüz Firebase Authentication with Identity Platform yükseltmediyseniz yükseltme yapın. COPPA Connect kimlik doğrulaması yalnızca yeni sürüme geçirilen projelerde kullanılabilir.

  3. Oturum açma sağlayıcıları sayfasında Firebase konsolunuzu, Yeni sağlayıcı ekle düğmesini ve ardından RFC Connect'i tıklayın.

  4. Yetkilendirme kodu akışını mı yoksa dolaylı izin akışı ile uyumludur.

    Sağlayıcınız destekliyorsa her zaman kod akışını kullanmalısınız. İlgili içeriği oluşturmak için kullanılan daha az güvenlidir ve kullanılması önerilmez.

  5. Bu sağlayıcıya bir ad verin. Oluşturulan sağlayıcı kimliğini not edin: oidc.example-provider gibi bir değerdir. Ekleme işlemi için bu kimliğe ihtiyacınız olacaktır oturum açma kodunu ekleyin.

  6. İstemci kimliğinizi, istemci gizli anahtarınızı ve sağlayıcınızın veren dizesini belirtin. Bu değerler, sağlayıcınızın size atadığı değerlerle tam olarak eşleşmelidir.

  7. Yaptığınız değişiklikleri kaydedin.

Oturum açma akışını Firebase SDK'sı ile yönetme

OIDC'nizi kullanarak Firebase ile kullanıcılarınızın kimliğini doğrulamanın en kolay yolu sağlayıcısı, oturum açma akışının tamamını Firebase SDK'sı ile yönetmektir.

Oturum açma akışını Firebase JavaScript SDK ile yönetmek için şu adımları uygulayın: için şu adımları izleyin:

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

    Web

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

    Web

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

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

    Desteklediği parametreler için sağlayıcınızla iletişime geçin. Firebase'in gerekli parametrelerini setCustomParameters Bu parametreler client_id, response_type, redirect_uri, state, scope ve response_mode.

  3. İsteğe bağlı: Temel profilin ötesinde, ek OAuth 2.0 kapsamlarını belirtin. kimlik doğrulama sağlayıcısından istekte bulunabilirsiniz.

    Web

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

    Web

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

    Desteklediği kapsamlar için sağlayıcınızla iletişime geçin.

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

    Kullanıcıyı sağlayıcının oturum açma sayfasına yönlendirebilir veya oturum açma sayfasına gidin.

    Yönlendirme akışı

    signInWithRedirect() numaralı telefonu arayarak sağlayıcının oturum açma sayfasına yönlendirin:

    Web

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

    Web

    firebase.auth().signInWithRedirect(provider);
    

    Kullanıcı, oturum açma işlemini tamamlayıp uygulamanıza geri döndükten sonra, oturum açma sonucu getRedirectResult() çağırılır.

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

    Pop-up akış

    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. Yukarıdaki örneklerde oturum açma akışlarına odaklanılsa da oturum açma akışlarını OIDC sağlayıcıyı mevcut bir kullanıcıya bağlamak için kullanılan kalıp linkWithRedirect() ve linkWithPopup() ile birlikte kullanıcının kimliğini yeniden doğrulayın reauthenticateWithRedirect() ve reauthenticateWithPopup(), olabilir. gereken hassas işlemler için yeni kimlik bilgileri almak üzere kullanılır. son giriş.

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

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

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