JavaScript ile Apple Kullanarak Kimlik Doğrulama

Uçtan uca OAuth 2.0 oturum açma akışını gerçekleştirmek için Firebase SDK'sını kullanarak kullanıcılarınızın Apple kimliklerini kullanarak Firebase ile kimlik doğrulama yapmasını sağlayabilirsiniz.

Başlamadan önce

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

Apple Developer Program'a katılın

Apple ile Oturum Açma, yalnızca Apple Geliştirici Programı üyeleri tarafından yapılandırılabilir.

Apple ile oturum açma özelliğini yapılandırma

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

  1. Web sitenizi, web için Apple ile Oturum Açma'yı yapılandırma başlıklı makalenin ilk bölümünde açıklandığı şekilde 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 konsolu ayarları sayfasından bulabilirsiniz.

    İşiniz bittiğinde yeni Hizmet Kimliğinizi not edin. Bir sonraki bölümde bu bilgilere ihtiyacınız olacak.

  2. Apple özel anahtarıyla Oturum Açma özel anahtarı oluşturun. Sonraki bölümde yeni özel anahtarınıza ve anahtar kimliğinize ihtiyacınız olacak.
  3. E-posta bağlantısıyla oturum açma, e-posta adresi doğrulama ve hesap değişikliği iptali gibi kullanıcılara e-posta gönderen Firebase Authentication özelliklerinden herhangi birini kullanıyorsanız Apple'ın Firebase Authentication tarafından gönderilen e-postaları anonimleştirilmiş Apple e-posta adreslerine geçirebilmesi için Apple özel e-posta geçiş hizmetini yapılandırın ve noreply@YOUR_FIREBASE_PROJECT_ID.firebaseapp.com (ya da özelleştirilmiş e-posta şablon alanınızı) kaydedin.

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

  1. Firebase'i projenize ekleyin.
  2. Firebase konsolunda Auth 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ırması bölümünde, Apple Ekip Kimliğinizi ve bir önceki bölümde oluşturduğunuz özel anahtarı ve anahtar kimliğini belirtin.

Apple'ın anonimleştirilmiş veri şartlarına uyma

Apple ile Oturum Açma, kullanıcılara oturum açarken e-posta adresleri de dahil olmak üzere verilerini anonimleştirme seçeneği sunar. Bu seçeneği belirleyen kullanıcılar privaterelay.appleid.com alan adında e-posta adreslerine sahip olur. Uygulamanızda Apple ile Oturum Açma özelliğini kullandığınızda bu anonimleştirilmiş Apple kimlikleriyle ilgili geçerli tüm geliştirici politikalarına veya Apple'ın şartlarına uymanız gerekir.

Buna, doğrudan tanımlayıcı kişisel bilgileri anonimleştirilmiş bir Apple kimliğiyle ilişkilendirmeden önce gerekli tüm kullanıcı izinlerini almak da dahildir. Firebase Authentication'ı kullanırken aşağıdaki işlemleri yapabilirsiniz:

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

Yukarıdaki listede olası her duruma yer verilmemiştir. Uygulamanızın Apple'ın şartlarını 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şmesi'ne bakın.

Oturum açma akışını Firebase SDK'sı ile yönetme

Bir web uygulaması oluşturuyorsanız, Apple hesaplarını kullanarak Firebase ile kullanıcılarınızın kimliklerini doğrulamanın en kolay yolu, oturum açma akışının tamamını Firebase JavaScript SDK ile yürütmektir.

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

  1. İlgili apple.com 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('apple.com');

    Web ad alanı API'si

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

    Web modüler API

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

    Web ad alanı API'si

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

    E-posta adresi başına bir hesap etkinleştirildiğinde, Firebase varsayılan olarak e-posta ve ad kapsamları ister. Bu ayarı E-posta adresi başına birden fazla hesap olarak değiştirirseniz Firebase, 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 modüler API

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

    Web ad alanı API'si

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

    • Pop-up pencereyle oturum açmak için signInWithPopup() numaralı telefonu arayın:

      Web modüler API

      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;
      
          // IdP data available using getAdditionalUserInfo(result)
          // ...
        })
        .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 ad alanı API'si

      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;
      
          // IdP data available using getAdditionalUserInfo(result)
        // ...
        })
        .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 yönlendirerek oturum açmak için signInWithRedirect() numaralı telefonu arayın:

    signInWithRedirect, linkWithRedirect veya reauthenticateWithRedirect kullanırken en iyi uygulamaları takip edin.

    Web modüler API

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

    Web ad alanı API'si

    firebase.auth().signInWithRedirect(provider);

    Kullanıcı oturum açmayı tamamlayıp sayfaya geri döndüğünde, getRedirectResult() numaralı telefonu arayarak oturum açma sonucunu alabilirsiniz:

    Web modüler API

    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 ad alanı API'si

    // 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;
    
          // IdP data available in result.additionalUserInfo.profile.
          // ...
        }
        // 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;
    
        // ...
      });

    Ayrıca, hataları yakalayıp işleyebilirsiniz. Hata kodlarının listesi için API referansını inceleyin.

    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-posta adresini uygulamayla paylaşmamayı seçtiğinde Apple, bu kullanıcı için uygulamanızla paylaştığı benzersiz bir e-posta adresi (xyz@privaterelay.appleid.com biçiminde) sağlar. Özel e-posta geçiş hizmetini yapılandırdıysanız Apple, anonimleştirilmiş adrese gönderilen e-postaları kullanıcının gerçek e-posta adresine yönlendirir.

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

Yeniden kimlik doğrulama ve hesap bağlama

Aynı kalıp, reauthenticateWithPopup() ve reauthenticateWithRedirect() ile kullanılabilir. Bu modelleri, yakın zamanda oturum açılması gereken hassas işlemler için yeni bir kimlik bilgisi almak amacıyla kullanabilirsiniz:

Web modüler API

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 ad alanı API'si

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;

    // IdP data available in result.additionalUserInfo.profile.
      // ...
  })
  .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ı mevcut hesaplara bağlamak için linkWithPopup() ve linkWithRedirect() kullanabilirsiniz.

Apple, kullanıcıların Apple hesaplarını diğer verilere bağlamadan önce onlardan açık izin almanızı zorunlu kılar.

Örneğin, bir Facebook hesabını mevcut Firebase hesabına bağlamak için kullanıcının Facebook'ta oturum açtığında aldığınız erişim jetonunu kullanın:

Web modüler API

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 ad alanı API'si

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

Chrome uzantılarında Firebase ile kimlik doğrulama

Bir Chrome uzantı uygulaması oluşturuyorsanız Dokümanlar Dışı Dokümanlar rehberine bakın.

Yine de varsayılan firebaseapp.com alan adına benzer şekilde Apple'da özel alanı doğrulamanız gerektiğini unutmayın:

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

Jeton iptali

Apple, hesap oluşturmayı destekleyen uygulamaların, App Store Yorum Yönergeleri'nde açıklandığı gibi, kullanıcıların uygulama içinde hesaplarını silme işlemini başlatmasına izin vermesini zorunlu kılar

Bu koşulu karşılamak için aşağıdaki adımları uygulayın:

  1. Apple ile Oturum Açmayı Yapılandırma bölümünde belirtildiği gibi, Apple sağlayıcı ile oturum açma yapılandırmasının Hizmet Kimliği ve OAuth kodu akışı yapılandırması bölümünü doldurduğunuzdan emin olun.

  2. Kullanıcılar Apple ile Oturum Açma özelliğiyle oluşturulduğunda Firebase, kullanıcı jetonlarını depolamadığından, jetonunu iptal edip hesabı silmeden önce kullanıcıdan tekrar oturum açmasını istemeniz gerekir.

    Ardından, OAuthCredential üzerinden Apple OAuth erişim jetonunu alın ve Apple OAuth erişim jetonunu iptal etmek amacıyla revokeAccessToken(auth, token) yöntemini çağırmak için bu jetonu kullanın.

    const provider = new OAuthProvider('apple.com');
    provider.addScope('email');
    provider.addScope('name');
    
    const auth = getAuth();
    signInWithPopup(auth, provider).then(result => {
      // Get the Apple OAuth access token.
      const credential = OAuthProvider.credentialFromResult(result);
      const accessToken = credential.accessToken;
    
      // Revoke the Apple OAuth access token.
      revokeAccessToken(auth, accessToken)
        .then(() => {
          // Token revoked.
    
          // Delete the user account.
          // ...
        })
        .catch(error => {
          // An error happened.
          // ...
        });
    });
    
  3. Son olarak, kullanıcı hesabını (ve ilişkili tüm verileri) silin.

Gelişmiş: Node.js'de Firebase ile kimlik doğrulama

Node.js uygulamasında Firebase ile kimlik doğrulamak için:

  1. Kullanıcının Apple Hesabı ile oturum açın ve kullanıcının Apple kimliği jetonunu alın. Bunu birkaç şekilde yapabilirsiniz. Örneğin, Node.js uygulamanızda bir tarayıcı kullanıcı arabirimi varsa:

    1. Arka ucunuzda rastgele bir dize ("nonce") oluşturun ve bu dizenin SHA256 karmasını hesaplayın. Tek seferlik, arka ucunuz ile Apple'ın kimlik doğrulama sunucuları arasındaki tek bir gidiş dönüşü doğrulamak için kullandığınız tek kullanımlık bir değerdir.

      Web modüler API

      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 ad alanı API'si

      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çma yapılandırmanızda karma oluşturma işlemi uygulanmış tek seferlik rastgele sayıyı 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. POSTED kimlik doğrulama yanıtı sunucu tarafında bulunan Apple kimlik jetonunu 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 Web Sayfanızı Apple ile Oturum Açmak için Yapılandırma başlıklı makaleye de bakın.

  2. Kullanıcının Apple kimlik jetonunu aldıktan sonra bu jetonu kullanarak Kimlik Bilgisi nesnesi oluşturun ve kimlik bilgisiyle kullanıcının oturumunu açın:

    Web modüler API

    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 ad alanı API'si

    // 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 kullanıcının oturum açtığı kimlik bilgilerine (kullanıcı adı ve şifre, telefon numarası veya kimlik doğrulama sağlayıcı bilgisi) 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 kullanıcıyı tanımlamak için kullanılabilir.

  • Uygulamalarınızda, kullanıcınızın kimlik doğrulama durumunu öğrenmek için önerilen yol, Auth nesnesinde bir gözlemci ayarlamaktır. Daha sonra, kullanıcının temel profil bilgilerini User nesnesinden alabilirsiniz. Kullanıcıları Yönetme sayfasına göz atın.

  • Firebase Realtime Database ve Cloud Storage Güvenlik Kurallarınızda, oturum açan kullanıcının benzersiz kullanıcı kimliğini auth değişkeninden alabilir ve kullanıcının hangi verilere erişebileceğini kontrol etmek için kullanabilirsiniz.

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

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

Web modüler API

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

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

Web ad alanı API'si

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