Web uygulamalarında OpenID Connect Kullanarak Kimlik Doğrulama

Firebase Authentication with Identity Platform'a yükseltme yaptıysanız, seçtiğiniz OpenID Connect (OIDC) uyumlu sağlayıcıyı kullanarak Firebase ile kullanıcılarınızın kimliğini 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ı 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 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.

  • İstemci sırrı : Sağlayıcının bir müşteri kimliğinin sahipliğini doğrulamak 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 olacak. (Bu değer yalnızca kimlik doğrulama kodu akışını kullanıyorsanız gereklidir ve 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 belgesi https://auth.example.com/.well-known/openid-configuration adresinde mevcut olmalıdır.

Yukarıdaki bilgilere sahip olduktan 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ükseltmediyseniz yükseltme yapın. OpenID Connect kimlik doğrulaması yalnızca yükseltilmiş projelerde mevcuttur.

  3. Firebase konsolunun Oturum açma sağlayıcıları sayfasında, Yeni sağlayıcı ekle 'yi ve ardından OpenID 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ğine dikkat edin: oidc.example-provider gibi bir şey. Uygulamanıza oturum açma kodu eklediğinizde bu kimliğe ihtiyacınız olacak.

  6. İstemci kimliğinizi ve istemci sırrı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. 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 kimliğini doğrulamanın en kolay yolu, tüm oturum açma akışını Firebase SDK ile gerçekleştirmektir.

Firebase JavaScript SDK ile 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

    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

    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 şunlardır: client_id , response_type , redirect_uri , state , scope ve response_mode .

  3. İsteğe bağlı : Kimlik doğrulama sağlayıcısından talep etmek 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 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ı bir açılır tarayıcı penceresinde açabilirsiniz.

    Yönlendirme akışı

    signInWithRedirect() öğesini çağırarak sağlayıcı 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 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

    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çılır 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 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 için aynı kalıbı kullanabilir ve reauthenticateWithRedirect() ve reauthenticateWithPopup() ile bir kullanıcının kimliğini yeniden doğrulayabilirsiniz. son oturum açmayı gerektiren hassas işlemler için yeni kimlik bilgilerini 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ğrulaması yapmak için doğrudan kimlik belirtecini 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 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.
    });