Web uygulamalarında OpenID Connect Kullanarak Kimlik Doğrulama

Firebase Authentication with Identity Platform'a yükselttiyseniz, seçtiğiniz OpenID Connect (OIDC) uyumlu sağlayıcıyı kullanarak kullanıcılarınızın kimliğini Firebase ile doğrulayabilirsiniz. Bu, Firebase tarafından yerel olarak desteklenmeyen kimlik sağlayıcılarının kullanılmasını mümkün kılar.

Sen başlamadan önce

OIDC sağlayıcısı kullanan kullanıcılarda oturum 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, şiddetle tavsiye edilen yetkilendirme kodu akışını kullanıyorsanız gereklidir.)

• 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 kişi https://auth.example.com ise keşif belgesi https://auth.example.com/.well-known/openid-configuration 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. JavaScript projenize Firebase ekleyin .

2. Firebase Authentication with Identity Platform'a yükseltmediyseniz, bunu 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 öğesini ve ardından OpenID Connect öğesini tıklayın.

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

   Sağlayıcınız destekliyorsa her zaman kod akışını kullanmalısınız . Örtük 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 kodu eklediğinizde bu kimliğe ihtiyacınız olacak.

6. Müşteri kimliğinizi ve müşteri 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.

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

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

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 version 9

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

   Web version 8

   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 version 9

   provider.setCustomParameters({
     // Target specific email with login hint.
     login_hint: '[e-mail]'
   });
   

   Web version 8

   provider.setCustomParameters({
     // Target specific email with login hint.
     login_hint: '[e-mail]'
   });
   

   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ı belirtin.

   Web version 9

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

   Web version 8

   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 bir açılır tarayıcı penceresinde oturum açma sayfasını açabilirsiniz.

   Yönlendirme akışı

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

   Web version 9

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

   Web version 8

   firebase.auth().signInWithRedirect(provider);
   

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

   Web version 9

   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 version 8

   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 version 9

   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 version 8

   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 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 version 9

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 version 8

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