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

Firebase Authentication with Identity Platform sürümüne yükselttiyseniz kullanıcılarınızın kimliğini, OpenID Connect (OIDC) uyumlu istediğiniz sağlayıcıyı kullanarak Firebase ile doğrulayabilirsiniz. Bu sayede, Firebase tarafından yerel olarak desteklenmeyen kimlik sağlayıcıları kullanmak mümkün olur.

Başlamadan önce

Kullanıcıların oturumunu bir OIDC sağlayıcıyı kullanarak 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 talebinin değerlerinden biridir.

  • İstemci gizli anahtarı: Sağlayıcının, istemci kimliğinin sahipliğini doğrulamak için kullandığı gizli dize. 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. Bu akışın kullanılması önemle tavsiye edilir.)

  • 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 belgesinin konumu olan bir URL olmalıdır. Örneğin, yayıncı https://auth.example.com ise keşif belgesi https://auth.example.com/.well-known/openid-configuration adresinde bulunmalıdır.

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

  1. Firebase'i JavaScript projenize ekleyin.

  2. Firebase Authentication with Identity Platform sürümüne yükseltmediyseniz yükseltin. OpenID Connect kimlik doğrulaması yalnızca yükseltilmiş projelerde kullanılabilir.

  3. Firebase konsolunda Güvenlik > Kimlik doğrulama'ya gidin.

  4. Oturum açma yöntemi sekmesinde Yeni sağlayıcı ekle'yi ve ardından OpenID Connect'i tıklayın.

  5. Yetkilendirme kodu akışını mı yoksa dolaylı izin akışını mı kullanacağınızı seçin.

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

  6. Bu sağlayıcıya bir ad verin. Oluşturulan sağlayıcı kimliğini not edin: oidc.example-provider gibi. Uygulamanıza oturum açma kodu eklerken bu kimliğe ihtiyacınız olur.

  7. İ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.

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

Oturum açma akışını Firebase SDK ile işleme

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

Firebase JavaScript SDK ile oturum açma akışını işlemek için aşağıdaki adımları uygulayın:

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

    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ı: OAuth isteğiyle göndermek istediğiniz ek özel OAuth parametrelerini belirtin.

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

    Sağlayıcınızın desteklediği parametreler hakkında bilgi edinin. Firebase'in zorunlu kıldığı parametreleri setCustomParameters ile iletemeyeceğinizi unutmayın. Bu parametreler client_id, response_type, redirect_uri, state, scope ve response_mode'dır.

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

    Web 

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

    Web 

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

    Hangi kapsamları desteklediğini öğrenmek için sağlayıcınıza danışın.

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

    Yönlendirme akışı

    signInWithRedirect() numarasını 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 döndükten sonra getRedirectResult() işlevini çağırarak oturum açma sonucunu alabilirsiniz.

    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 örnekler oturum açma akışlarına odaklanırken linkWithRedirect() ve linkWithPopup() kullanarak bir OIDC sağlayıcısını mevcut bir kullanıcıya bağlamak ve reauthenticateWithRedirect() ile reauthenticateWithPopup() kullanarak bir kullanıcının kimliğini yeniden doğrulamak için aynı kalıbı kullanabilirsiniz. Bu kalıp, son oturum açma işleminin gerekli olduğu hassas işlemler için yeni kimlik bilgilerini almak üzere kullanılabilir.

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

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

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