Catch up on everthing we announced at this year's Firebase Summit. Learn more

Apple'ı JavaScript ile Kullanarak Kimlik Doğrulama

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

Elma sadece üyeleri tarafından yapılandırılabilir ile Giriş Yap Elma Geliştirici Programı .

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

On Apple Geliştirici sitesinde, aşağıdakileri yapın:

  1. Birinci bölümde açıklandığı gibi uygulamanıza web sitenizi ilişkilendirme web için Apple ile de yapılandır yap . İstendiğinde, aşağıdaki URL'yi Dönüş URL'si olarak kaydedin:

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

    Sen üzerinde Firebase proje kimliğini alabilirsiniz Firebase konsolunun ayarları sayfasında .

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

  2. Elma özel anahtarla bir açın Giriş . Bir sonraki bölümde yeni özel anahtarınıza ve anahtar kimliğinize ihtiyacınız olacak.
  3. Eğer e-posta bağlantısı oturum açma, e-posta adresi doğrulama, hesap değişikliği iptal ve diğerleri de dahil olmak üzere kullanıcılara e-posta göndermek Firebase Authentication özelliklerinden herhangi kullanırsanız yapılandırmak Elma özel e-posta geçiş hizmeti ve kayıt 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. Projenize Firebase ekleyin .
  2. In Firebase konsoluna , Auth bölümünü açın. Yöntem sekmesinde İşaret Üzerine Apple sağlayıcı sağlar. Önceki bölümde oluşturduğunuz Hizmet Kimliğini belirtin. Ayrıca, OAuth kodu akış yapılandırma bölümünde, Apple Takım kimliği belirtin ve özel anahtar ve anahtar kimlik önceki bölümde yarattı.

Apple anonimleştirilmiş veri gereksinimlerine uyun

Bu seçeneği Elma kullanıcılara giriş yaparken kendi e-posta adresi de dahil olmak verilerini, anonim duruma seçeneği sunar ile Oturum. Kullanıcılar etki alanı ile e-posta adreslerine sahip 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. Karşılık gelen sağlayıcı numarası apple.com kullanarak OAuthProvider bir örneğini oluşturur.

    Web sürümü 9

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

    Web sürümü 8

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

    Web sürümü 9

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

    Web sürümü 8

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

    E-posta adresi başına bir hesap etkinleştirildiğinde, varsayılan olarak, Firebase e-posta ve isim kapsamları ister. E-posta adresi başına birden hesaplarına bu ayarı değiştirirseniz bunları belirtmedikçe Firebase Apple herhangi kapsamları istemez.

  3. İsteğe bağlı: İngilizce dışında bir dilde Apple'ın oturum açma ekranına görüntülemek istiyorsanız, set locale parametre. Bkz Elma docs ile Oturum desteklenen yerler için.

    Web sürümü 9

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

    Web sürümü 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 pop-up pencere, çağrı ile oturum açmak için signInWithPopup() :

      Web sürümü 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.email;
          // The credential that was used.
          const credential = OAuthProvider.credentialFromError(error);
      
          // ...
        });

      Web sürümü 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;
      
          // ...
        });
    • Yönlendirme yaparak oturum açmak için oturum açma sayfasına, çağrı signInWithRedirect() :

      Web sürümü 9

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

      Web sürümü 8

      firebase.auth().signInWithRedirect(provider);

      Kullanıcı tamamlandıktan sonra oturum açma sayfasına ve iadeler, sen arayarak oturum açma sonucu alabilirsiniz getRedirectResult() :

      Web sürümü 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.email;
          // The credential that was used.
          const credential = OAuthProvider.credentialFromError(error);
      
          // ...
        });

      Web sürümü 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 bkz API başvurusu .

    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ı (formun bu kullanıcı için app Apple hükümleri benzersiz e-posta adresi ile e-postalarını paylaşmamak seçtiğinde xyz@privaterelay.appleid.com , uygulamanızla o hisse). Ö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.

    Elma sadece hisse kullanıcı bilgileri gibi uygulamalar ile görüntü adı ilk kez bir oturum açar. Genellikle Firebase saklar görünen ad ilk defa birlikte alabilirsiniz Apple ile bir kullanıcı oturum açarsa, 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ı desen ile kullanılabilir reauthenticateWithPopup() ve reauthenticateWithRedirect() Eğer son oturum açılmasını gerekli hassas operasyonlar için yeni bir kimlik almak için kullanabilirsiniz:

Web sürümü 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.email;
    // The credential that was used.
    const credential = OAuthProvider.credentialFromError(error);

    // ...
  });

Web sürümü 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;

    // ...
  });

Ve, kullanabilirsiniz linkWithPopup() ve linkWithRedirect() mevcut hesaba farklı kimlik sağlayıcıları bağlamak.

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 sürümü 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 sürümü 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 eklemelisiniz:

  1. Projenizi açın Firebase konsoluna .
  2. Kimlik Doğrulama bölümünde Oturum açma yöntemi sayfasında açın.
  3. : Yetkili Alanlar listesine aşağıdaki gibi bir URI ekle
    chrome-extension://CHROME_EXTENSION_ID

Sadece pop-up işlemleri ( signInWithPopup , linkWithPopup ve reauthenticateWithPopup Chrome uzantıları HTTP yönlendirmeleri kullanamaz gibi), Chrome uzantıları için 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. Popup yöntemleri kullanarak uzantılarda yalnızca kullanılabilir Manifest V2 . Yeni Manifest V3 sadece hiç pop-up işlemleri gerçekleştiremiyor hizmet işçilerinin şeklinde, arka plan komut dosyaları sağlar.

Chrome uzantısının bildirim dosyası marka olarak eklemek emin https://apis.google.com URL content_security_policy AllowList.

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 sürümü 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.substr(0, length);
      };
      
      const unhashedNonce = generateNonce(10);
      
      // SHA256-hashed nonce in hex
      const hashedNonceHex = crypto.createHash('sha256')
        .update(unhashedNonce).digest().toString('hex');

      Web sürümü 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.substr(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 bkz Apple ile Oturum Açmak için Web Sayfanız yapılandırılması .

  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 sürümü 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 sürümü 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ızla olarak, kullanıcı yetkilendirme durumunu öğrenmek için tavsiye edilen yöntem üzerinde bir gözlemci ayarlamaktır Auth nesnesine. Daha sonra, kullanıcının temel profil bilgileri alabilirsiniz User nesnesi. Bkz Kullanıcıları Yönetme .

  • Senin Firebase Gerçek Zamanlı Veritabanı ve Bulut Depolama yılında Güvenlik Kuralları , alabilirsiniz, kullanıcının benzersiz bir kullanıcı kimliği imzalı auth değişkeni ve hangi verilerin kullanıcı teneke erişimi kontrol etmek için kullanabilirsiniz.

Kullanıcıların birden çok kimlik doğrulama sağlayıcıları kullanarak uygulamada oturum izin verebilir mevcut bir kullanıcı hesabına auth sağlayıcı kimlik bilgilerini birbirine bağlayan.

Bir kullanıcı Oturumu kapatmak için çağrı signOut :

Web sürümü 9

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

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

Web sürümü 8

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