Halaman ini diterjemahkan oleh Cloud Translation API.

Memproses login pengguna dengan Apple

Dokumen ini menunjukkan cara menggunakan Identity Platform untuk menambahkan Login dengan 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 Program Developer Apple.

Mengonfigurasi aplikasi dengan Apple

Di situs Apple Developer:

Ikuti langkah-langkah di Mengonfigurasi Login dengan Apple untuk web. Hal ini mencakup:
1. Mendaftarkan Return URL, 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 akan memerlukannya di bagian berikutnya.
Menggunakan 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 relay email pribadi Apple menggunakan email berikut:
```
noreply@project-id.firebaseapp.com
```
Anda juga dapat menggunakan template email kustom, jika aplikasi Anda memilikinya.

Mematuhi persyaratan data anonim Apple

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

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) apa pun 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 Apple Developer Program License Agreement untuk akun developer Apple Anda.

Mengonfigurasi Apple sebagai penyedia

Untuk mengonfigurasi Apple sebagai penyedia identitas:

Buka halaman Penyedia Identitas di konsol Google Cloud.

Buka halaman Penyedia Identitas
Klik Tambahkan Penyedia.
Pilih Apple dari daftar.
Di bagian Platform, pilih Web.
Masukkan ID Layanan, ID tim Apple, ID Kunci, dan kunci pribadi.
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 ke dalam kode aplikasi Anda untuk melakukan inisialisasi SDK klien 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 menjadi 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

Kemudian, 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 menyediakan URL foto.

Jika pengguna memilih untuk tidak membagikan email aslinya kepada aplikasi Anda, Apple akan menyediakan alamat email unik untuk dibagikan pengguna tersebut. Email ini berbentuk xyz@privaterelay.appleid.com. Jika Anda mengonfigurasi layanan relay email pribadi, Apple akan meneruskan email yang dikirim ke alamat anonim ke alamat email asli pengguna.

Apple hanya membagikan informasi pengguna, seperti nama tampilan, kepada aplikasi saat pengguna login untuk pertama kalinya. Pada umumnya, Identity Platform menyimpan data ini, yang memungkinkan Anda mengambilnya menggunakan firebase.auth().currentUser.displayName selama sesi mendatang. Namun, jika Anda mengizinkan pengguna 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 persetujuan eksplisit dari pengguna sebelum Anda menautkan akun Apple mereka ke data lain.
Pelajari pengguna Identity Platform lebih lanjut.
Memproses login pengguna dengan penyedia identitas lainnya.