Memproses login pengguna dengan Apple

Dokumen ini menunjukkan cara menggunakan Identity Platform untuk menambahkan Sign in with Apple ke aplikasi web Anda.

Sebelum memulai

Buat aplikasi web dasar yang menggunakan Identity Platform dengan HTML dan JavaScript. Lihat Panduan Memulai untuk mempelajari caranya.
Bergabunglah dengan Apple Developer Program.

Mengonfigurasi aplikasi dengan Apple

Di situs Apple Developer:

Ikuti langkah-langkah di Mengonfigurasi Login dengan Apple untuk web. Hal ini mencakup:
1. Mendaftarkan URL Pengembalian, yang terlihat seperti:
```
https://project-id.firebaseapp.com/__/auth/handler
```
2. Menghosting file untuk sementara di URL berikut untuk memverifikasi domain Anda:
```
https://project-id.firebaseapp.com/.well-known/apple-developer-domain-association.txt
```
Selain itu, catat Service ID dan ID tim Apple Anda — Anda akan memerlukannya di bagian berikutnya.
Gunakan kunci pribadi Apple untuk membuat login. Anda akan memerlukan kunci dan ID-nya di bagian berikutnya.
Jika Anda menggunakan Identity Platform untuk mengirim email kepada pengguna, konfigurasi project Anda dengan layanan relai email pribadi Apple menggunakan email berikut:
```
noreply@project-id.firebaseapp.com
```
Anda juga dapat menggunakan template email khusus, jika aplikasi Anda memilikinya.

Mematuhi persyaratan data anonim Apple

Apple memberi pengguna opsi untuk menganonimkan data mereka, termasuk alamat email mereka. Apple menetapkan alamat email yang di-obfuscate kepada pengguna yang memilih opsi ini dengan domain privaterelay.appleid.com.

Aplikasi Anda harus mematuhi kebijakan atau persyaratan developer yang berlaku dari Apple terkait ID Apple anonim. Hal ini termasuk memperoleh izin pengguna sebelum mengaitkan informasi identitas pribadi (PII) dengan ID Apple anonim. Tindakan yang melibatkan PII mencakup, tetapi tidak terbatas pada:

Menautkan alamat email ke ID Apple anonim, atau sebaliknya.
Menautkan nomor telepon ke ID Apple anonim, atau sebaliknya
Menautkan kredensial sosial non-anonim, seperti Facebook atau Google, ke ID Apple anonim, atau sebaliknya.

Untuk informasi selengkapnya, lihat Perjanjian Lisensi Program Developer Apple untuk akun developer Apple Anda.

Mengonfigurasi Apple sebagai penyedia

Untuk mengonfigurasi Apple sebagai penyedia identitas:

Buka halaman Identity Provider di Konsol Google Cloud.

Buka halaman Penyedia Identitas
Klik Tambahkan Penyedia.
Pilih Apple dari daftar.
Di bagian Platform, pilih Web.
Masukkan Services ID, Apple team ID, Key ID, dan private key Anda.
Daftarkan domain aplikasi Anda dengan mengklik Add Domain di bagian Authorized Domains. Untuk tujuan pengembangan, localhost sudah diaktifkan secara default.
Di bagian bawah Konfigurasi aplikasi Anda, klik Detail Penyiapan. Salin cuplikan tersebut ke kode aplikasi Anda untuk menginisialisasi Client SDK Identity Platform.
Klik Save.

Memproses login pengguna dengan SDK Klien

Untuk memproses login pengguna:

Buat instance objek penyedia OAuthProvider, menggunakan ID apple.com:

Web versi 9

import { OAuthProvider } from "firebase/auth";

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

Web versi 8

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

Opsional: Tambahkan cakupan OAuth. Cakupan menentukan data yang Anda minta dari Apple. Data yang lebih sensitif mungkin memerlukan cakupan tertentu. Secara default, jika One account per email address diaktifkan, Identity Platform akan meminta cakupan email dan name.
Web versi 9

Pelajari lebih lanjut Web API modular yang dapat di-tree-shaking dan upgrade dari API namespace.
```
provider.addScope('email');
provider.addScope('name');auth_apple_provider_scopes.js
```
Web versi 8
```
provider.addScope('email');
provider.addScope('name');apple.js
```
Opsional: Lokalkan alur autentikasi. Anda dapat menentukan bahasa, atau menggunakan bahasa default perangkat. Baca dokumentasi Login dengan Apple untuk lokalitas yang didukung.
Web versi 9

Pelajari lebih lanjut Web API modular yang dapat di-tree-shaking dan upgrade dari API namespace.
```
provider.setCustomParameters({
  // Localize the Apple authentication screen in French.
  locale: 'fr'
});auth_apple_provider_params.js
```
Web versi 8
```
provider.setCustomParameters({
  // Localize the Apple authentication screen in French.
  locale: 'fr'
});apple.js
```

Gunakan objek penyedia untuk memproses login pengguna. Anda dapat membuka jendela pop-up atau mengalihkan halaman saat ini. Pengalihan lebih mudah bagi pengguna di perangkat seluler.

Untuk menampilkan pop-up, panggil signInWithPopup():

Web versi 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;

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

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

Untuk mengalihkan halaman, panggil signInWithRedirect() terlebih dahulu:

Ikuti praktik terbaik saat menggunakan signInWithRedirect, linkWithRedirect, atau reauthenticateWithRedirect.

Web versi 9

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

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

Web versi 8

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

Selanjutnya, panggil getRedirectResult() untuk mengambil token Apple saat halaman Anda dimuat:

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

    // ...
  });auth_apple_signin_redirect_result.js

Web versi 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;

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

Di sini juga Anda dapat menemukan dan menangani error. Untuk mengetahui daftar kode error, baca Referensi API.

Tidak seperti banyak penyedia identitas lainnya, Apple tidak memberikan URL foto.

Jika pengguna memilih untuk tidak membagikan email asli mereka ke aplikasi Anda, Apple akan menyediakan alamat email unik untuk dibagikan oleh pengguna tersebut. Email ini memiliki format xyz@privaterelay.appleid.com. Jika Anda mengonfigurasi layanan relai email pribadi, Apple akan meneruskan email yang dikirim ke alamat anonim tersebut ke alamat email asli pengguna.

Apple hanya membagikan informasi pengguna, seperti nama tampilan, kepada aplikasi saat pengguna login untuk pertama kalinya. Dalam sebagian besar kasus, Identity Platform menyimpan data ini, yang memungkinkan Anda mengambilnya menggunakan firebase.auth().currentUser.displayName selama sesi mendatang. Namun, jika Anda mengizinkan pengguna untuk login ke aplikasi menggunakan Apple sebelum berintegrasi dengan Identity Platform, informasi pengguna tidak akan tersedia.

Langkah selanjutnya

Pelajari cara menautkan akun Apple ke penyedia lain. Perlu diperhatikan bahwa Apple mewajibkan Anda untuk mendapatkan izin eksplisit dari pengguna sebelum Anda menautkan akun Apple mereka ke data lain.
Pelajari pengguna Identity Platform lebih lanjut.
Proses login pengguna dengan penyedia identitas lainnya.