JavaScript ile Apple Kullanarak Kimlik Doğrulama

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

Başlamadan önce

Apple kullanarak kullanıcıların oturumunu açmak için önce Apple ile oturum açma özelliğini yapılandırın Apple'ın geliştirici sitesinde Apple'ı oturum açma sağlayıcısı olarak etkinleştirin Firebase projesi.

Apple Developer Program'a katılın

Apple ile Oturum Açma özelliği, yalnızca Apple Developer'ın üyeleri tarafından yapılandırılabilir Program'ı tıklayın.

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

Apple'da Geliştirici sitesinde aşağıdaki işlemleri yapın:

  1. Web sitenizi, ilk bölümde açıklandığı şekilde uygulamanızla ilişkilendirin. / Web için Apple ile oturum açma özelliğini yapılandırın. İstendiğinde Dönüş URL'si olarak şu URL:

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

    Firebase proje kimliğinizi Firebase konsolu ayarlar sayfasına gidin.

    İşiniz bittiğinde yeni Hizmet Kimliğinizi not edin. Bu belgeyi ele alacağız.

  2. Oluştur: Apple özel anahtarıyla oturum açma başlıklı makaleyi inceleyin. Yeni özel anahtarınıza ve anahtarınıza ihtiyacınız olacak kimliğini girin.

  3. Kullanıcılara e-posta gönderen Firebase Authentication özelliklerinden herhangi birini kullanıyorsanız e-posta bağlantısı oturum açma, e-posta adresi doğrulama, hesap değişikliği dahil iptal ve diğerleri, Apple özel e-posta geçiş hizmetini yapılandırma ve kaydolma noreply@YOUR_FIREBASE_PROJECT_ID.firebaseapp.com (veya özelleştirilmiş e-posta şablon alanınızı) kullanın. Böylece Apple, gönderilen e-postaları aktarabilir Firebase Authentication tarafından anonimleştirilmiş Apple e-posta adreslerine gönderilir.

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 kodu akışı yapılandırma bölümü, Apple Ekip Kimliğinizi ve Önceki bölümde oluşturduğunuz özel anahtar ve anahtar kimliği.

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

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

Buna, hesabınızı kullanmadan önce gerekli kullanıcı rızasının alınması da dahildir. doğrudan tanımlayıcı kişisel bilgileri anonimleştirilmiş bir Apple ile ilişkilendirme Kimlik. Firebase Authentication kullanılırken şunlar dahil olabilir: işlemler:

  • 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 kimliği (ör. Facebook, Google) veya tam tersi de geçerlidir.

Yukarıdaki listede olası her duruma yer verilmemiştir. Apple Developer Program'ı inceleyin Geliştirici hesabınızın Üyelik bölümündeki Lisans Sözleşmesi'ni Uygulamanızın Apple'ın gereksinimlerini karşıladığından emin olun.

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

Bir web uygulaması oluşturuyorsanız kullanıcılarınızın kimliklerini doğrulamanın en kolay yolu Firebase'in Apple hesaplarını kullanması, oturum açma akışının tamamını Firebase JavaScript SDK'sı.

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

  1. İlgili alan adını kullanarak OAuthProvider sağlayıcı kimliği: apple.com.

    Web

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('apple.com');
    auth_apple_provider_create.js

    Web

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

  2. İsteğe bağlı: Varsayılan kapsam dışında kalan ek OAuth 2.0 kapsamları belirtin. kimlik doğrulama sağlayıcısından istekte bulunabilirsiniz.

    Web

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

    Web

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

    Varsayılan olarak, E-posta adresi başına bir hesap etkinleştirildiğinde Firebase, e-posta ve ad kapsamları istenir. Bu ayarı Birden fazla hesap sayısı seçerseniz Firebase, Apple'dan herhangi bir kapsam istemez izin verilmez.

  3. İsteğe bağlı: Apple'ın oturum açma ekranını bir dilde görüntülemek istiyorsanız İngilizce dışında bir seçenek varsa locale parametresini ayarlayın. Bkz. Apple belgeleriyle oturum açma bakın.

    Web

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

    Web

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

  4. OAuth sağlayıcı nesnesini kullanarak Firebase ile kimlik doğrulayın. Şunları yapabilirsiniz: kullanıcılarınızdan Apple Hesapları ile oturum açmalarını istemek için oturum açma sayfasına yönlendirilirsiniz. Yönlendirme yöntemi mobil cihazlarda tercih edilir.

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

      Web

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

    // ...
  });
      auth_apple_signin_popup.js

      Web

      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;

    // ...
  });
      apple.js

    • Oturum açma sayfasına yönlendirerek oturum açmak için şu numarayı arayın: signInWithRedirect():

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

    Web

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

const auth = getAuth();
signInWithRedirect(auth, provider);
    auth_apple_signin_redirect.js

    Web

    firebase.auth().signInWithRedirect(provider);
    apple.js

    Kullanıcı oturum açmayı tamamladıktan ve sayfaya geri döndüğünde getRedirectResult() çağırarak oturum açma sonucu:

    Web

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

    // ...
  });
    auth_apple_signin_redirect_result.js

    Web

    // 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;

    // ...
  });
    apple.js

    Aynı zamanda hataları yakalayıp işleyebilirsiniz. Hata listesi için daha fazla bilgi için API referansı.

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

    Ayrıca kullanıcı, e-postalarını uygulamayla paylaşmamayı seçtiğinde Apple, söz konusu kullanıcı için benzersiz bir e-posta adresi ( xyz@privaterelay.appleid.com) çıkar ve bunları uygulamanızla paylaşır. Şu durumda: özel e-posta geçiş hizmetini yapılandırdığında, Apple kullanıcının gerçek e-posta adresine anonimleştirilmiş adres.

    Apple yalnızca görünen ad gibi kullanıcı bilgilerini uygulamalarla paylaşır. Kullanıcı ilk kez oturum açtığında. Genellikle Firebase, görünen adı kullanıcı Apple ile ilk kez oturum açtığında firebase.auth().currentUser.displayName Ancak daha önce Apple'ı kullanarak uygulamada bir kullanıcının Firebase kullandığında, Apple, kullanıcının görünen adını Firebase'e sağlamaz.

Yeniden kimlik doğrulama ve hesap bağlama

Aynı desen reauthenticateWithPopup() ve Yeni bir veri almak için kullanabileceğiniz reauthenticateWithRedirect() yakın zamanda oturum açmayı gerektiren hassas işlemler için kimlik bilgisi:

Web

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

    // ...
  });
auth_apple_reauthenticate_popup.js

Web

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;

    // ...
  });
apple.js

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

Apple, bağlantı oluşturmadan önce kullanıcılardan açıkça izin almanızı zorunlu kılar. diğer verilere aktarmalarını sağlar.

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

Web

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

Web

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

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

Bir Chrome uzantı uygulaması oluşturuyorsanız daha fazla bilgi için Ekran dışı dokümanlar rehberi.

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

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

Jeton iptali

Apple, hesap oluşturma özelliğini destekleyen uygulamaların, kullanıcıların işlemi başlatmasına izin vermesini zorunlu kılar App Store İncelemesi'nde açıklandığı gibi, uygulama içinde hesabının silinmesi Kurallar

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

  1. Hizmet Kimliği ve OAuth kodu akışını doldurduğunuzdan emin olun. Apple sağlayıcı yapılandırmasıyla oturum açma bölümünü Apple ile Oturum Açma'yı yapılandırma başlıklı makalede açıklanmıştır bölümüne bakın.

  2. Kullanıcılar şununla oluşturulmuşsa Firebase, kullanıcı jetonlarını depolamaz: Apple ile oturum açın, iptal etmeden önce kullanıcıdan tekrar oturum açmasını istemeniz gerekir ve hesabı siler.

    Ardından, OAuthCredential aracılığıyla Apple OAuth erişim jetonunu alın ve Apple OAuth'u iptal etmek üzere revokeAccessToken(auth, token) yöntemini çağırmak için bunu kullanın erişim jetonu.

    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ı silin (ve veriler) kullanabilirsiniz.

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ğini alın jeton. Bunu birkaç şekilde yapabilirsiniz. Örneğin, Node.js Uygulama, bir tarayıcı kullanıcı arabirimine sahip:

    1. Arka ucunuzda rastgele bir dize ("nonce") oluşturun ve önceki SHA256 karması. Tek seferlik rastgele sayı, tek kullanımlık bir değerdir ve bir arka ucunuz ile Apple'ın kimlik doğrulama sunucuları arasında bir gidiş-dönüştür.

      Web

      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');
      auth_apple_nonce_node.js

      Web

      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');
      apple.js

    2. Oturum açma sayfanızda, şununla oturum açarken karma oluşturma işlemi uygulanmış tek seferlik rastgele sayısını belirtin. Apple yapılandırması:

      <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 kimliği jetonunu aldıktan sonra bu jetonu kullanarak Kimlik Bilgisi oluşturmak için nesnesini tanımlayın ve ardından kimlik bilgileriyle kullanıcının oturum açmasını sağlayın:

    Web

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

    Web

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

Sonraki adımlar

Kullanıcı ilk kez oturum açtığında yeni bir kullanıcı hesabı oluşturulur ve bilgileri (kullanıcı adı ve şifre, telefon numarası) Numara veya kimlik doğrulama sağlayıcı bilgileri (oturum açan kullanıcı). Bu yeni Firebase projenizin bir parçası olarak saklanır ve aşağıdaki verileri tanımlamak için kullanılabilir: nasıl oturum açarsa açsın, projenizdeki tüm uygulamalarda kullanılır.

  • Uygulamalarınızda, kullanıcınızın kimlik doğrulama durumunu öğrenmenin önerilen yolu Auth nesnesine bir gözlemci ayarlayın. Ardından, kullanıcının User nesnesindeki temel profil bilgilerini içerir. Görüntüleyin Kullanıcıları Yönetme

  • Firebase Realtime Database ve Cloud Storage'ınızda Güvenlik Kuralları'nı kullanarak şunları yapabilirsiniz: auth değişkeninden, oturum açmış kullanıcının benzersiz kullanıcı kimliğini alabilirsiniz. ve kullanıcının hangi verilere erişebileceğini kontrol etmek için kullanılır.

Kullanıcıların çoklu kimlik doğrulama kullanarak uygulamanızda oturum açmasına izin verebilirsiniz yetkilendirme sağlayıcısının kimlik bilgilerini hesaba katılmaz.

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

Web

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

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

Web

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