Apple'ı JavaScript ile Kullanarak Kimlik Doğrulama

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Uçtan uca OAuth 2.0 oturum açma akışını gerçekleştirmek için Firebase SDK'yı kullanarak kullanıcılarınızın Apple kimliklerini kullanarak Firebase ile kimlik doğrulaması yapmasına izin verebilirsiniz.

Sen başlamadan önce

Apple kullanarak kullanıcılarda oturum açmak için önce Apple'ın geliştirici sitesinde Apple ile Oturum Aç'ı yapılandırın, ardından Apple'ı Firebase projeniz için oturum açma sağlayıcısı olarak etkinleştirin.

Apple Geliştirici Programına Katılın

Apple ile Giriş Yap, yalnızca Apple Geliştirici Programı üyeleri tarafından yapılandırılabilir.

Apple ile Oturum Açmayı Yapılandırın

Apple Developer sitesinde aşağıdakileri yapın:

  1. Web için Apple ile Oturum Açmayı Yapılandırma'nın ilk bölümünde açıklandığı gibi web sitenizi uygulamanızla ilişkilendirin. İstendiğinde, aşağıdaki URL'yi Dönüş URL'si olarak kaydedin:

    https://YOUR_FIREBASE_PROJECT_ID.firebaseapp.com/__/auth/handler

    Firebase proje kimliğinizi Firebase konsol ayarları sayfasından alabilirsiniz.

    İşiniz bittiğinde, bir sonraki bölümde ihtiyaç duyacağınız yeni Hizmet Kimliğinizi not alın.

  2. Apple özel anahtarıyla bir Giriş Yapın . Bir sonraki bölümde yeni özel anahtarınıza ve anahtar kimliğinize ihtiyacınız olacak.
  3. Firebase Authentication'ın e-posta bağlantısı oturum açma, e-posta adresi doğrulama, hesap değişikliği iptali ve diğerleri dahil olmak üzere kullanıcılara e-posta gönderen özelliklerinden herhangi birini kullanıyorsanız , Apple özel e-posta aktarma hizmetini yapılandırın ve noreply@ YOUR_FIREBASE_PROJECT_ID .firebaseapp.com (veya Apple, Firebase Authentication tarafından gönderilen e-postaları anonimleştirilmiş Apple e-posta adreslerine aktarabilir.

Apple'ı oturum açma sağlayıcısı olarak etkinleştirin

  1. Firebase'i projenize ekleyin .
  2. Firebase konsolunda , Yetkilendirme bölümünü açın. Oturum açma yöntemi sekmesinde Apple sağlayıcısını etkinleştirin. Önceki bölümde oluşturduğunuz Hizmet Kimliğini belirtin. Ayrıca, OAuth kod akışı yapılandırma bölümünde , Apple Ekip Kimliğinizi ve önceki bölümde oluşturduğunuz özel anahtar ve anahtar kimliğinizi belirtin.

Apple anonimleştirilmiş veri gereksinimlerine uyun

Apple ile Giriş Yap, kullanıcılara oturum açarken e-posta adresleri de dahil olmak üzere verilerini anonimleştirme seçeneği sunar. Bu seçeneği seçen kullanıcıların e-posta adresleri privaterelay.appleid.com . Uygulamanızda Apple ile Giriş Yap'ı kullandığınızda, bu anonimleştirilmiş Apple Kimlikleri ile ilgili olarak Apple'ın geçerli geliştirici politikalarına veya koşullarına uymanız gerekir.

Bu, herhangi bir doğrudan tanımlayıcı kişisel bilgiyi anonimleştirilmiş bir Apple Kimliği ile ilişkilendirmeden önce gerekli tüm kullanıcı onayını almayı içerir. Firebase Authentication'ı kullanırken bu, aşağıdaki eylemleri içerebilir:

  • Bir e-posta adresini anonimleştirilmiş bir Apple Kimliğine bağlayın veya tam tersi.
  • Bir telefon numarasını anonimleştirilmiş bir Apple Kimliğine bağlayın veya tam tersi
  • Anonim olmayan bir sosyal kimlik bilgisini (Facebook, Google, vb.) anonimleştirilmiş bir Apple Kimliğine bağlayın veya tam tersi.

Yukarıdaki liste ayrıntılı değildir. Uygulamanızın Apple'ın gereksinimlerini karşıladığından emin olmak için geliştirici hesabınızın Üyelik bölümündeki Apple Geliştirici Programı Lisans Sözleşmesine bakın.

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

Bir web uygulaması oluşturuyorsanız, kullanıcılarınızın Apple hesaplarını kullanarak Firebase ile kimliklerini doğrulamanın en kolay yolu, tüm oturum açma akışını Firebase JavaScript SDK'sı ile yönetmektir.

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

  1. İlgili sağlayıcı kimliği apple.com'u kullanarak bir OAuthProvider örneği oluşturun.

    Web version 9

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('apple.com');

    Web version 8

    var provider = new firebase.auth.OAuthProvider('apple.com');
  2. İsteğe bağlı: Kimlik doğrulama sağlayıcısından istemek istediğiniz varsayılanın ötesinde ek OAuth 2.0 kapsamları belirtin.

    Web version 9

    provider.addScope('email');
    provider.addScope('name');

    Web version 8

    provider.addScope('email');
    provider.addScope('name');

    Varsayılan olarak, e-posta adresi başına bir hesap etkinleştirildiğinde, Firebase e-posta ve ad kapsamları ister. Bu ayarı E-posta adresi başına birden çok hesap olarak değiştirirseniz Firebase, siz belirtmediğiniz sürece Apple'dan herhangi bir kapsam istemez.

  3. İsteğe bağlı: Apple'ın oturum açma ekranını İngilizce dışında bir dilde görüntülemek istiyorsanız, locale parametresini ayarlayın. Desteklenen yerel ayarlar için Apple ile Oturum Açma belgelerine bakın.

    Web version 9

    provider.setCustomParameters({
      // Localize the Apple authentication screen in French.
      locale: 'fr'
    });

    Web version 8

    provider.setCustomParameters({
      // Localize the Apple authentication screen in French.
      locale: 'fr'
    });
  4. OAuth sağlayıcı nesnesini kullanarak Firebase ile kimlik doğrulaması yapın. Bir açılır pencere açarak veya oturum açma sayfasına yönlendirerek kullanıcılarınızdan Apple Hesaplarıyla oturum açmalarını isteyebilirsiniz. Yönlendirme yöntemi mobil cihazlarda tercih edilmektedir.

    • Bir açılır pencereyle oturum açmak için signInWithPopup() çağırın:

      Web version 9

      import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // The signed-in user info.
          const user = result.user;
      
          // Apple credential
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
      
          // ...
        })
        .catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // The credential that was used.
          const credential = OAuthProvider.credentialFromError(error);
      
          // ...
        });

      Web version 8

      firebase
        .auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // The signed-in user info.
          var user = result.user;
      
          // You can also get the Apple OAuth Access and ID Tokens.
          var accessToken = credential.accessToken;
          var idToken = credential.idToken;
      
          // ...
        })
        .catch((error) => {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          // The email of the user's account used.
          var email = error.email;
          // The firebase.auth.AuthCredential type that was used.
          var credential = error.credential;
      
          // ...
        });
    • Oturum açma sayfasına yeniden yönlendirerek oturum açmak için signInWithRedirect() çağırın:

      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 sayfaya döndükten sonra, getRedirectResult() çağırarak oturum açma sonucunu alabilirsiniz:

      Web version 9

      import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";
      
      // Result from Redirect auth flow.
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          const credential = OAuthProvider.credentialFromResult(result);
          if (credential) {
            // You can also get the Apple OAuth Access and ID Tokens.
            const accessToken = credential.accessToken;
            const idToken = credential.idToken;
          }
          // The signed-in user info.
          const user = result.user;
        })
        .catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // The credential that was used.
          const credential = OAuthProvider.credentialFromError(error);
      
          // ...
        });

      Web version 8

      // Result from Redirect auth flow.
      firebase
        .auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // You can get the Apple OAuth Access and ID Tokens.
            var accessToken = credential.accessToken;
            var idToken = credential.idToken;
      
            // ...
          }
          // The signed-in user info.
          var user = result.user;
        })
        .catch((error) => {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          // The email of the user's account used.
          var email = error.email;
          // The firebase.auth.AuthCredential type that was used.
          var credential = error.credential;
      
          // ...
        });

      Burası aynı zamanda hataları yakalayabileceğiniz ve işleyebileceğiniz yerdir. Hata kodlarının listesi için API referansına bakın.

    Firebase Auth tarafından desteklenen diğer sağlayıcıların aksine, Apple bir fotoğraf URL'si sağlamaz.

    Ayrıca, kullanıcı e-postasını uygulamayla paylaşmamayı seçtiğinde Apple, o kullanıcı için uygulamanızla paylaştığı benzersiz bir e-posta adresi ( xyz@privaterelay.appleid.com biçiminde) sağlar. Özel e-posta aktarma hizmetini yapılandırdıysanız, Apple, anonimleştirilmiş adrese gönderilen e-postaları kullanıcının gerçek e-posta adresine iletir.

    Apple, bir kullanıcı ilk kez oturum açtığında uygulamalarla yalnızca görünen ad gibi kullanıcı bilgilerini paylaşır. Genellikle, Firebase, bir kullanıcı Apple'da ilk kez oturum açtığında görünen adı depolar ve bunu firebase.auth().currentUser.displayName . Ancak, daha önce bir kullanıcının uygulamada oturum açmak için Firebase'i kullanmadan Apple'ı kullandıysanız Apple, Firebase'e kullanıcının görünen adını sağlamayacaktır.

Yeniden kimlik doğrulama ve hesap bağlama

Aynı kalıp, yakın zamanda oturum açmayı gerektiren hassas işlemler için yeni bir kimlik bilgisi almak için kullanabileceğiniz reauthenticateWithPopup() ve reauthenticateWithRedirect() ile kullanılabilir:

Web version 9

import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";

// Result from Redirect auth flow.
const auth = getAuth();
const provider = new OAuthProvider('apple.com');

reauthenticateWithPopup(auth.currentUser, provider)
  .then((result) => {
    // User is re-authenticated with fresh tokens minted and can perform
    // sensitive operations like account deletion, or updating their email
    // address or password.

    // The signed-in user info.
    const user = result.user;

    // You can also get the Apple OAuth Access and ID Tokens.
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;

    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The credential that was used.
    const credential = OAuthProvider.credentialFromError(error);

    // ...
  });

Web version 8

const provider = new firebase.auth.OAuthProvider('apple.com');

firebase
  .auth()
  .currentUser
  .reauthenticateWithPopup(provider)
  .then((result) => {
    // User is re-authenticated with fresh tokens minted and can perform
    // sensitive operations like account deletion, or updating their email
    // address or password.
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // The signed-in user info.
    var user = result.user;
     // You can also get the Apple OAuth Access and ID Tokens.
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;

    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;

    // ...
  });

Ayrıca, farklı kimlik sağlayıcılarını mevcut hesaplara bağlamak için linkWithPopup() ve linkWithRedirect() kullanabilirsiniz.

Apple'ın, Apple hesaplarını diğer verilere bağlamadan önce kullanıcılardan açık onay almanızı gerektirdiğini unutmayın.

Örneğin, bir Facebook hesabını mevcut Firebase hesabına bağlamak için, kullanıcının Facebook'ta oturum açmasından elde ettiğiniz erişim jetonunu kullanın:

Web version 9

import { getAuth, linkWithPopup, FacebookAuthProvider } from "firebase/auth";

const auth = getAuth();
const provider = new FacebookAuthProvider();
provider.addScope('user_birthday');

// Assuming the current user is an Apple user linking a Facebook provider.
linkWithPopup(auth.currentUser, provider)
    .then((result) => {
      // Facebook credential is linked to the current Apple user.
      // ...

      // The user can now sign in to the same account
      // with either Apple or Facebook.
    })
    .catch((error) => {
      // Handle error.
    });

Web version 8

const provider = new firebase.auth.FacebookAuthProvider();
provider.addScope('user_birthday');

// Assuming the current user is an Apple user linking a Facebook provider.
firebase.auth().currentUser.linkWithPopup(provider)
    .then((result) => {
      // Facebook credential is linked to the current Apple user.
      // Facebook additional data available in result.additionalUserInfo.profile,

      // Additional Facebook OAuth access token can also be retrieved.
      // result.credential.accessToken

      // The user can now sign in to the same account
      // with either Apple or Facebook.
    })
    .catch((error) => {
      // Handle error.
    });

Bir Chrome uzantısında Firebase ile kimlik doğrulaması yapın

Bir Chrome uzantısı uygulaması oluşturuyorsanız, Chrome uzantı kimliğinizi eklemeniz gerekir:

  1. Projenizi Firebase konsolunda açın.
  2. Kimlik Doğrulama bölümünde, Oturum açma yöntemi sayfasını açın.
  3. Yetkili Etki Alanları listesine aşağıdakine benzer bir URI ekleyin:
    chrome-extension://CHROME_EXTENSION_ID

Chrome uzantıları HTTP yönlendirmelerini kullanamadığından, Chrome uzantılarında yalnızca açılır pencere işlemleri ( signInWithPopup , linkWithPopup ve reauthenticateWithPopup ) kullanılabilir. Kimlik doğrulama açılır penceresi tarayıcı eylemi açılır penceresini iptal edeceğinden, bu yöntemleri bir tarayıcı eylemi açılır penceresi yerine bir arka plan sayfası komut dosyasından çağırmalısınız. Açılır pencere yöntemleri yalnızca Manifest V2 kullanan uzantılarda kullanılabilir. Daha yeni Manifest V3 , yalnızca açılır pencere işlemlerini gerçekleştiremeyen hizmet çalışanları biçimindeki arka plan komut dosyalarına izin verir.

Chrome uzantınızın manifest dosyasında https://apis.google.com URL'sini content_security_policy izin verilenler listesine eklediğinizden emin olun.

Varsayılan firebaseapp.com etki alanına benzer şekilde, özel etki alanını Apple ile yine de doğrulamanız gerektiğini unutmayın:

http://auth.custom.example.com/.well-known/apple-developer-domain-association.txt

Gelişmiş: Node.js'de Firebase ile kimlik doğrulaması yapın

Bir Node.js uygulamasında Firebase ile kimlik doğrulaması yapmak için:

  1. Kullanıcının Apple Hesabı ile oturum açın ve kullanıcının Apple Kimliği belirtecini alın. Bunu birkaç yolla başarabilirsiniz. Örneğin, Node.js uygulamanızın bir tarayıcı ön ucu varsa:

    1. Arka uçunuzda rastgele bir dize ("nonce") oluşturun ve SHA256 karmasını hesaplayın. Nonce, arka ucunuz ile Apple'ın yetkilendirme sunucuları arasında tek bir gidiş dönüşünü doğrulamak için kullandığınız tek seferlik bir kullanım değeridir.

      Web version 9

      const crypto = require("crypto");
      const string_decoder = require("string_decoder");
      
      // Generate a new random string for each sign-in
      const generateNonce = (length) => {
        const decoder = new string_decoder.StringDecoder("ascii");
        const buf = Buffer.alloc(length);
        let nonce = "";
        while (nonce.length < length) {
          crypto.randomFillSync(buf);
          nonce = decoder.write(buf);
        }
        return nonce.slice(0, length);
      };
      
      const unhashedNonce = generateNonce(10);
      
      // SHA256-hashed nonce in hex
      const hashedNonceHex = crypto.createHash('sha256')
        .update(unhashedNonce).digest().toString('hex');

      Web version 8

      const crypto = require("crypto");
      const string_decoder = require("string_decoder");
      
      // Generate a new random string for each sign-in
      const generateNonce = function(length) {
        const decoder = new string_decoder.StringDecoder("ascii");
        const buf = Buffer.alloc(length);
        var nonce = "";
        while (nonce.length < length) {
          crypto.randomFillSync(buf);
          nonce = decoder.write(buf);
        }
        return nonce.slice(0, length);
      };
      
      const unhashedNonce = generateNonce(10);
      
      // SHA256-hashed nonce in hex
      const hashedNonceHex = crypto.createHash('sha256')
        .update(unhashedNonce).digest().toString('hex');
    2. Oturum açma sayfanızda, Apple ile Oturum Aç yapılandırmanızda karma nonce'yi belirtin:

      <script src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
      <div id="appleid-signin" data-color="black" data-border="true" data-type="sign in"></div>
      <script>
          AppleID.auth.init({
              clientId: YOUR_APPLE_CLIENT_ID,
              scope: 'name email',
              redirectURI: URL_TO_YOUR_REDIRECT_HANDLER,  // See the next step.
              state: '[STATE]',  // Optional value that Apple will send back to you
                                 // so you can return users to the same context after
                                 // they sign in.
              nonce: HASHED_NONCE  // The hashed nonce you generated in the previous step.
          });
      </script>
      
    3. Apple Kimliği belirtecini POSTed auth yanıtı sunucu tarafında alın:

      app.post('/redirect', (req, res) => {
        const savedState = req.cookies.__session;
        const code = req.body.code;
        const state = req.body.state;
        const appleIdToken = req.body.id_token;
        if (savedState !== state || !code) {
          res.status(403).send('403: Permission denied');
        } else {
          // Sign in with Firebase using appleIdToken. (See next step).
        }
      });
      

    Ayrıca Apple ile Oturum Açmak için Web Sayfanızı Yapılandırma konusuna da bakın.

  2. Kullanıcının Apple Kimliği belirtecini aldıktan sonra, bunu bir Kimlik Bilgisi nesnesi oluşturmak için kullanın ve ardından kullanıcıda kimlik bilgisi ile oturum açın:

    Web version 9

    import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";
    
    const auth = getAuth();
    
    // Build Firebase credential with the Apple ID token.
    const provider = new OAuthProvider('apple.com');
    const authCredential = provider.credential({
      idToken: appleIdToken,
      rawNonce: unhashedNonce,
    });
    
    // Sign in with credential form the Apple user.
    signInWithCredential(auth, authCredential)
      .then((result) => {
        // User signed in.
      })
      .catch((error) => {
        // An error occurred. If error.code == 'auth/missing-or-invalid-nonce',
        // make sure you're sending the SHA256-hashed nonce as a hex string
        // with your request to Apple.
        console.log(error);
      });

    Web version 8

    // Build Firebase credential with the Apple ID token.
    const provider = new firebase.auth.OAuthProvider('apple.com');
    const authCredential = provider.credential({
      idToken: appleIdToken,
      rawNonce: unhashedNonce,
    });
    
    // Sign in with credential form the Apple user.
    firebase.auth().signInWithCredential(authCredential)
      .then((result) => {
        // User signed in.
      })
      .catch((error) => {
        // An error occurred. If error.code == 'auth/missing-or-invalid-nonce',
        // make sure you're sending the SHA256-hashed nonce as a hex string
        // with your request to Apple.
        console.log(error);
      });

Sonraki adımlar

Bir kullanıcı ilk kez oturum açtıktan sonra, yeni bir kullanıcı hesabı oluşturulur ve oturum açtığı kullanıcı adı ve parolası, telefon numarası veya kimlik doğrulama sağlayıcısı bilgileri gibi kimlik bilgilerine bağlanır. Bu yeni hesap, Firebase projenizin bir parçası olarak depolanır ve kullanıcının nasıl oturum açtığından bağımsız olarak projenizdeki her uygulamada bir kullanıcıyı tanımlamak için kullanılabilir.

  • Uygulamalarınızda, kullanıcınızın auth durumunu öğrenmenin önerilen yolu, Auth nesnesinde bir gözlemci ayarlamaktır. Ardından, User nesnesinden kullanıcının temel profil bilgilerini alabilirsiniz. Kullanıcıları Yönetme konusuna bakın.

  • Firebase Gerçek Zamanlı Veritabanınız ve Bulut Depolama Güvenlik Kurallarınızda , oturum açmış kullanıcının benzersiz kullanıcı kimliğini auth değişkeninden alabilir ve bunu bir kullanıcının hangi verilere erişebileceğini kontrol etmek için kullanabilirsiniz.

Kimlik doğrulama sağlayıcısı kimlik bilgilerini mevcut bir kullanıcı hesabına bağlayarak, kullanıcıların birden çok kimlik doğrulama sağlayıcısı kullanarak uygulamanızda oturum açmasına izin verebilirsiniz.

Bir kullanıcının oturumunu kapatmak için, signOut arayın:

Web version 9

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

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web version 8

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});