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:
Mendaftarkan Return URL, yang terlihat seperti:
https://project-id.firebaseapp.com/__/auth/handler
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.
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 IDapple.com
:Web versi 9
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('apple.com');
Web versi 8
var provider = new firebase.auth.OAuthProvider('apple.com');
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
danname
.Web versi 9
provider.addScope('email'); provider.addScope('name');
Web versi 8
provider.addScope('email'); provider.addScope('name');
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
provider.setCustomParameters({ // Localize the Apple authentication screen in French. locale: 'fr' });
Web versi 8
provider.setCustomParameters({ // Localize the Apple authentication screen in French. locale: 'fr' });
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); // ... });
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; // ... });
Untuk mengalihkan halaman, panggil
signInWithRedirect()
terlebih dahulu:Ikuti praktik terbaik saat menggunakan
signInWithRedirect
,linkWithRedirect
, ataureauthenticateWithRedirect
.Web versi 9
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web versi 8
firebase.auth().signInWithRedirect(provider);
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); // ... });
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; // ... });
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.