Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.

Otentikasi Menggunakan Apple dengan JavaScript

Anda dapat mengizinkan pengguna melakukan autentikasi dengan Firebase menggunakan ID Apple mereka dengan menggunakan SDK Firebase untuk menjalankan alur masuk OAuth 2.0 menyeluruh.

Sebelum kamu memulai

Untuk masuk ke pengguna menggunakan Apple, pertama-tama konfigurasikan Masuk dengan Apple di situs pengembang Apple, lalu aktifkan Apple sebagai penyedia masuk untuk proyek Firebase Anda.

Bergabunglah dengan Program Pengembang Apple

Masuk dengan Apple hanya dapat dikonfigurasi oleh anggota Program Pengembang Apple .

Konfigurasi Masuk dengan Apple

Di situs Pengembang Apple , lakukan hal berikut:

  1. Kaitkan situs web Anda ke aplikasi Anda seperti yang dijelaskan di bagian pertama dari Mengonfigurasi Masuk dengan Apple untuk web . Saat diminta, daftarkan URL berikut sebagai URL Pengembalian:

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

    Anda bisa mendapatkan ID proyek Firebase di halaman setelan konsol Firebase .

    Setelah selesai, catat ID Layanan baru Anda, yang akan Anda perlukan di bagian berikutnya.

  2. Buat Masuk dengan kunci pribadi Apple . Anda akan memerlukan kunci pribadi dan ID kunci baru Anda di bagian berikutnya.
  3. Jika Anda menggunakan salah satu fitur Firebase Authentication yang mengirim email ke pengguna, termasuk link masuk email, verifikasi alamat email, pencabutan perubahan akun, dan lainnya, konfigurasikan layanan relai email pribadi Apple dan daftarkan noreply@ YOUR_FIREBASE_PROJECT_ID .firebaseapp.com (atau domain template email khusus Anda) sehingga Apple dapat menyampaikan email yang dikirim oleh Firebase Authentication ke alamat email Apple yang dianonimkan.

Aktifkan Apple sebagai penyedia masuk

  1. Tambahkan Firebase ke proyek Anda .
  2. Di Firebase console , buka bagian Auth . Pada tab Metode masuk , aktifkan penyedia Apple . Tentukan ID Layanan yang Anda buat di bagian sebelumnya. Selain itu, di bagian konfigurasi alur kode OAuth , tentukan ID Tim Apple Anda serta kunci pribadi dan ID kunci yang Anda buat di bagian sebelumnya.

Patuhi persyaratan data anonim Apple

Masuk dengan Apple memberi pengguna opsi untuk menganonimkan data mereka, termasuk alamat email mereka, saat masuk. Pengguna yang memilih opsi ini memiliki alamat email dengan domain privaterelay.appleid.com . Saat Anda menggunakan Masuk dengan Apple di aplikasi Anda, Anda harus mematuhi kebijakan atau persyaratan pengembang yang berlaku dari Apple terkait ID Apple yang dianonimkan ini.

Ini termasuk memperoleh persetujuan pengguna yang diperlukan sebelum Anda mengaitkan informasi pribadi apa pun yang mengidentifikasi secara langsung dengan ID Apple yang dianonimkan. Saat menggunakan Firebase Authentication, tindakan ini dapat mencakup tindakan berikut:

  • Tautkan alamat email ke ID Apple yang dianonimkan atau sebaliknya.
  • Tautkan nomor telepon ke ID Apple yang dianonimkan atau sebaliknya
  • Tautkan kredensial sosial non-anonim (Facebook, Google, dll) ke ID Apple yang dianonimkan atau sebaliknya.

Daftar di atas tidak lengkap. Lihat Perjanjian Lisensi Program Pengembang Apple di bagian Keanggotaan akun pengembang Anda untuk memastikan aplikasi Anda memenuhi persyaratan Apple.

Tangani alur masuk dengan Firebase SDK

Jika Anda membuat aplikasi web, cara termudah untuk mengautentikasi pengguna Anda dengan Firebase menggunakan akun Apple mereka adalah dengan menangani seluruh alur masuk dengan Firebase JavaScript SDK.

Untuk menangani alur masuk dengan Firebase JavaScript SDK, ikuti langkah-langkah berikut:

  1. Buat instance OAuthProvider menggunakan ID penyedia terkait apple.com .

    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. Opsional: Tentukan cakupan OAuth 2.0 tambahan di luar default yang ingin Anda minta dari penyedia autentikasi.

    Web version 9

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

    Web version 8

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

    Secara default, saat Satu akun per alamat email diaktifkan, Firebase meminta cakupan nama dan email. Jika Anda mengubah setelan ini ke Beberapa akun per alamat email , Firebase tidak meminta cakupan apa pun dari Apple kecuali Anda menentukannya.

  3. Opsional: Jika Anda ingin menampilkan layar masuk Apple dalam bahasa selain bahasa Inggris, atur parameter locale . Lihat dokumen Masuk dengan Apple untuk lokal yang didukung.

    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. Mengautentikasi dengan Firebase menggunakan objek penyedia OAuth. Anda dapat meminta pengguna Anda untuk masuk dengan Akun Apple mereka baik dengan membuka jendela pop-up atau dengan mengarahkan ulang ke halaman masuk. Metode pengalihan lebih disukai pada perangkat seluler.

    • Untuk masuk dengan jendela pop-up, panggil signInWithPopup() :

      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;
      
          // ...
        });
    • Untuk masuk dengan mengalihkan ke halaman masuk, panggil signInWithRedirect() :

      Web version 9

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

      Web version 8

      firebase.auth().signInWithRedirect(provider);

      Setelah pengguna menyelesaikan proses masuk dan kembali ke halaman, Anda bisa mendapatkan hasil masuk dengan memanggil getRedirectResult() :

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

      Ini juga tempat Anda dapat menangkap dan menangani kesalahan. Untuk daftar kode kesalahan, lihat referensi API .

    Tidak seperti penyedia lain yang didukung oleh Firebase Auth, Apple tidak menyediakan URL foto.

    Selain itu, saat pengguna memilih untuk tidak membagikan email mereka dengan aplikasi, Apple menyediakan alamat email unik untuk pengguna tersebut (dalam bentuk xyz@privaterelay.appleid.com ), yang dibagikan dengan aplikasi Anda. Jika Anda mengonfigurasi layanan relai email pribadi, Apple meneruskan email yang dikirim ke alamat anonim ke alamat email asli pengguna.

    Apple hanya membagikan informasi pengguna seperti nama tampilan dengan aplikasi saat pertama kali pengguna masuk. Biasanya, Firebase menyimpan nama tampilan saat pertama kali pengguna masuk dengan Apple, yang bisa Anda dapatkan dengan firebase.auth().currentUser.displayName . Namun, jika sebelumnya Anda menggunakan Apple untuk memasukkan pengguna ke aplikasi tanpa menggunakan Firebase, Apple tidak akan memberikan nama tampilan pengguna kepada Firebase.

Otentikasi ulang dan penautan akun

Pola yang sama dapat digunakan dengan reauthenticateWithPopup() dan reauthenticateWithRedirect() , yang dapat Anda gunakan untuk mengambil kredensial baru untuk operasi sensitif yang memerlukan proses masuk baru-baru ini:

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;

    // ...
  });

Dan, Anda dapat menggunakan linkWithPopup() dan linkWithRedirect() , untuk menautkan penyedia identitas yang berbeda ke akun yang ada.

Perhatikan bahwa Apple mengharuskan Anda untuk mendapatkan persetujuan eksplisit dari pengguna sebelum Anda menautkan akun Apple mereka ke data lain.

Misalnya, untuk menautkan akun Facebook ke akun Firebase saat ini, gunakan token akses yang Anda dapatkan dari memasukkan pengguna ke Facebook:

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

Otentikasi dengan Firebase di ekstensi Chrome

Jika Anda membuat aplikasi ekstensi Chrome, Anda harus menambahkan ID ekstensi Chrome:

  1. Buka proyek Anda di konsol Firebase .
  2. Di bagian Otentikasi , buka halaman Metode masuk .
  3. Tambahkan URI seperti berikut ke daftar Domain Resmi:
    chrome-extension://CHROME_EXTENSION_ID

Hanya operasi popup ( signInWithPopup , linkWithPopup , dan reauthenticateWithPopup ) yang tersedia untuk ekstensi Chrome, karena ekstensi Chrome tidak dapat menggunakan pengalihan HTTP. Anda harus memanggil metode ini dari skrip halaman latar belakang daripada popup tindakan browser, karena popup otentikasi akan membatalkan popup tindakan browser. Metode popup hanya dapat digunakan dalam ekstensi yang menggunakan Manifest V2 . Manifest V3 yang lebih baru hanya mengizinkan skrip latar belakang dalam bentuk pekerja layanan, yang tidak dapat melakukan operasi popup sama sekali.

Di file manifes ekstensi Chrome, pastikan Anda menambahkan URL https://apis.google.com ke daftar content_security_policy yang diizinkan.

Perhatikan bahwa Anda masih harus memverifikasi domain khusus dengan Apple sama seperti domain firebaseapp.com default:

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

Lanjutan: Mengautentikasi dengan Firebase di Node.js

Untuk mengautentikasi dengan Firebase di aplikasi Node.js:

  1. Masuk pengguna dengan Akun Apple mereka dan dapatkan token ID Apple pengguna. Anda dapat mencapai ini dengan beberapa cara. Misalnya, jika aplikasi Node.js Anda memiliki ujung depan browser:

    1. Di backend Anda, buat string acak ("nonce") dan hitung hash SHA256-nya. Nonce adalah nilai penggunaan satu kali yang Anda gunakan untuk memvalidasi satu perjalanan pulang pergi antara backend Anda dan server auth Apple.

      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. Di halaman masuk Anda, tentukan nonce hash di konfigurasi Masuk dengan Apple Anda:

      <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. Dapatkan token ID Apple dari sisi server respons autentikasi POSTed:

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

    Lihat juga Mengonfigurasi Halaman Web Anda untuk Masuk dengan Apple .

  2. Setelah Anda mendapatkan token ID Apple pengguna, gunakan untuk membuat objek Kredensial, lalu login pengguna dengan kredensial:

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

Langkah selanjutnya

Setelah pengguna masuk untuk pertama kalinya, akun pengguna baru dibuat dan ditautkan ke kredensial—yaitu, nama pengguna dan sandi, nomor telepon, atau informasi penyedia autentikasi—yang digunakan pengguna untuk masuk. Akun baru ini disimpan sebagai bagian dari proyek Firebase Anda, dan dapat digunakan untuk mengidentifikasi pengguna di setiap aplikasi dalam proyek Anda, terlepas dari cara pengguna masuk.

  • Di aplikasi Anda, cara yang disarankan untuk mengetahui status autentikasi pengguna adalah dengan menyetel pengamat pada objek Auth . Anda kemudian bisa mendapatkan informasi profil dasar pengguna dari objek User . Lihat Kelola Pengguna .

  • Di Aturan Keamanan Firebase Realtime Database dan Cloud Storage , Anda bisa mendapatkan ID pengguna unik pengguna yang masuk dari variabel auth , dan menggunakannya untuk mengontrol data apa yang dapat diakses pengguna.

Anda dapat mengizinkan pengguna untuk masuk ke aplikasi Anda menggunakan beberapa penyedia autentikasi dengan menautkan kredensial penyedia autentikasi ke akun pengguna yang ada.

Untuk mengeluarkan pengguna, panggil signOut :

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