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

Identity Platform ile Firebase Authentication'a yükseltme yaptıysanız tercih ettiğiniz RFC Connect (OIDC) uyumlu sağlayıcıyı kullanarak Firebase ile kullanıcılarınızın kimliklerini doğrulayabilirsiniz. Bu sayede, Firebase tarafından yerel olarak desteklenmeyen kimlik sağlayıcıları kullanabilirsiniz.

Başlamadan önce

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

  • İstemci kimliği: Uygulamanızı tanımlayan, sağlayıcıya özgü bir dizedir. Sağlayıcınız, desteklediğiniz her platform için size farklı bir istemci kimliği atayabilir. Bu, sağlayıcınız tarafından verilen kimlik jetonlarındaki aud hak talebinin değerlerinden biridir.

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

  • Düzenleyen: 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 dokümanının konumu olan bir URL olmalıdır. Örneğin, kartı veren kuruluş https://auth.example.com ise keşif belgesi https://auth.example.com/.well-known/openid-configuration adresinde bulunabilir.

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

  1. Firebase'i JavaScript projenize ekleyin.

  2. Kimlik Platformu ile Firebase Authentication'a yükseltme yapmadıysanız yapın. COPPA Connect kimlik doğrulaması yalnızca yeni sürüme geçirilen projelerde kullanılabilir.

  3. Firebase konsolunun Oturum açma sağlayıcıları sayfasında, Yeni sağlayıcı ekle'yi ve ardından RFC Connect'i 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. Uygulamanıza oturum açma kodu eklerken bu kimliğe ihtiyacınız olacaktır.

  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 sağlayıcınızı kullanarak Firebase ile kullanıcılarınızın kimliklerini doğrulamanın en kolay yolu, 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 aşağıdaki 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 

    import { OAuthProvider } from "firebase/auth";

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

    Web ad alanı API'si 

    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 

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

    Web ad alanı API'si 

    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 için gerekli parametreleri setCustomParameters ile iletemeyeceğinizi unutmayın. Bu parametreler client_id, response_type, redirect_uri, state, scope ve response_mode şeklindedir.

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

    Web modüler API 

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

    Web ad alanı API'si 

    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ını bir pop-up tarayıcı penceresinde açabilirsiniz.

    Yönlendirme akışı

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

    Web modüler API 

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

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

    Web ad alanı API'si 

    firebase.auth().signInWithRedirect(provider);

    Kullanıcı oturum açmayı tamamlayıp uygulamanıza geri döndükten sonra, getRedirectResult() numaralı telefonu arayarak oturum açma sonucunu alabilirsiniz.

    Web modüler 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.
  });

    Web ad alanı API'si 

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

    Web ad alanı API'si 

    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 aynı modeli kullanarak bir OIDC sağlayıcısını mevcut bir kullanıcıya linkWithRedirect() ve linkWithPopup() ile bağlayabilir ve kullanıcının kimliğini reauthenticateWithRedirect() ve reauthenticateWithPopup() ile yeniden doğrulayabilirsiniz. Bu yöntemler, yakın zamanda giriş yapılmasını gerektiren hassas işlemler için yeni kimlik bilgileri almak amacıyla kullanılabilir.

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 doğrudan kimlik jetonunu kullanabilirsiniz:

Web modüler 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.
    });

Web ad alanı API'si 

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