Panduan Praktis: Konfigurasi Sign In with Apple

18 Januari 2025  •  --------

Tersedia dalam .

Tulisan ini sebenarnya merupakan catatan saya pribadi. Karena saya sering melakukan hal ini, membuat saya memerlukan satu tulisan yang mencakup semua yang saya perlu tau. Sebelum ada tulisan ini saya mencarinya di internet terpisah-pisah dan membingungkan karena dokumentasi official dari Apple pun tidak menjelaskan secara praktis bagaimana cara untuk mengkonfigurasi fitur "Sign In with Apple" ini. Mari kita mulai! 

Prasyarat

  1. Anda memiliki Apple Developer Account yang aktif. Biaya keanggotaannya adalah $99 USD per tahun.
  2. Anda sedang mengembangkan aplikasi website atau mobile yang ingin menggunakan fitur "Sign In with Apple".
  3. Pastikan Anda sudah memiliki akses Apple Developer Portal untuk Certificates, Identifiers & Profiles.

Mulai

Untuk menggunakan fitur "Sign In with Apple" kita membutuhkan 2 credentials:

  • Client ID: kita dapatkan saat membuat "Services ID".
  • Client Secret: cukup tricky untuk mendapatkannya karena kita harus membuat atau generate sebuah json-web-token (JWT). Dan untuk membuatnya, kita memerlukan App ID, Services ID dan juga Keys yang lalu nanti dikombinasikan sebagai payload. Tapi tenang, saya sudah membuat generator-nya di akhir tulisan ini. 👌🏻

Membuat App ID

Pertama yang harus kita lakukan adalah membuat App ID. App ID sederhananya adalah sebuah "tanda pengenal" unik untuk aplikasi Anda.

Kunjungi laman Certificates, Identifiers & Profiles - Bagian Identifiers.

  1. Klik tombol tambah (dengan icon plus di bagian atas), dan pilih "App IDs".

  2. Pilih tipe identifier. Untuk aplikasi, pilih App.

  3. Isi deskripsi dengan nama yang mudah diingat, lalu isi "Bundle ID" sesuai dengan aplikasi Anda. Contohnya seperti ini:

  4. Pada bagian capabilities, pilih "Sign In with Apple", lalu klik edit.

  5. Pilih "Enable as a primary App ID". Lalu, jika Anda membutuhkan server-to-server notification, Anda bisa mengisi bagian itu dengan API endpoint yang sudah Anda buat. Lalu klik "Save".

Setelah semua telah di konfigurasi, klik "Continue" di atas, lalu klik "Register" untuk menyelesaikan pembuatan App ID.

Membuat Services ID

Kembali ke laman Certificates, Identifiers & Profiles - Bagian Identifiers.

  1. Pada dropdown sebelah kanan, pilih "Services IDs". Lalu, klik tombol tambah (dengan icon plus di bagian atas) dan pilih "Services IDs".

  2. Isi deskripsi dengan nama yang mudah diingat, lalu isi "Identifier" sesuai dengan aplikasi Anda. Contohnya seperti ini:

    ⚠️ Perlu diperhatikan: simpan identifier ini, karena ini akan menjadi "Client ID" yang akan digunakan di aplikasi Anda.

  3. Setelah semua telah di konfigurasi, klik "Continue" di atas, lalu klik "Register" untuk menyelesaikan pembuatan Services ID.

  4. Klik pada Services ID yang baru dibuat untuk mengkonfigurasi fitur "Sign In with Apple".

  5. Centang pada checkbox "Sign In with Apple" lalu klik "Configure".

  6. Pilih App ID yang baru saja kita buat pada dropdown "Primary App ID".

    Isi "Domains and Subdomains" dengan domain Anda, dan "Return URLs" dengan halaman callback pada aplikasi Anda.

    ⚠️ Perlu diperhatikan: hanya HTTPS domain saja yang diterima oleh Apple. Jika Anda belum memiliki domain karena sedang dalam proses development, gunakan layanan seperti ngrok atau lokal.so untuk mem-publish local development environment Anda menggunakan HTTPS domain.

    Setelah selesai, klik "Next" dan "Done".

  7. Setelah semua telah di konfigurasi, klik "Continue" di atas, lalu klik "Save".

Membuat Keys ID

Buka laman Certificates, Identifiers & Profiles - Bagian Keys.

  1. Klik tombol tambah (dengan icon plus di bagian atas).

  2. Isi "Key Name" dengan nama yang mudah diingat. Contohnya seperti ini:

  3. Centang pada checkbox "Sign In with Apple" lalu klik "Configure".

  4. Pilih App ID yang baru saja kita buat pada dropdown "Primary App ID". Lalu klik "Save".

  5. Setelah semua telah di konfigurasi, klik "Continue" di atas, lalu klik "Register".

  6. Kemudian Anda akan diarahkan ke halaman ini, klik "Download" dan simpan keys tersebut yang sudah dibuat di tempat yang aman dan jangan sampai hilang.

    ⚠️ ⚠️ ⚠️ - Perlu Diperhatikan:

    Pertama: Jika Anda kehilangan key yang Anda buat, atau secara tidak sengaja mem-publish key tersebut, segeralah melakukan revoke key tersebut di dashboard yang sama. Tinggal pilih key yang bermasalah, lalu klik "Revoke".

    Kedua: Key ini hanya berlaku selama 6 bulan dan setelahnya akan kadaluwarsa dan harus Anda buat kembali. Pastikan Anda memiliki pengingat untuk membuatnya kembali sebelum kadaluwarsa.

    Klik "Done" setelah key telah diunduh.

Membuat Client Secret

Setelah Anda membuat semua ID dan key yang diperlukan, Anda perlu menyiapkan hal-hal dibawah ini untuk dapat membuat Client Secret:

  1. Team Account ID: ID akun Apple Developer Anda. Bisa Anda dapatkan dari dashboard Apple Developer Anda di kanan atas bagian profil.

  2. Services ID: Services ID yang sudah Anda buat.

  3. Keys ID File: File Keys ID yang sudah Anda unduh.

  4. Keys ID: 10 karakter alfanumerik terakhir dalam nama file Keys ID.

    Misalnya: AuthKey_XX123456XX.p8 → Key ID nya adalah: XX123456XX.

Selanjutnya Anda dapat membuat Client Secret dengan tool yang sudah saya buat di bawah ini:

⚠️

Hanya dapat digunakan pada browser Chrome/Firefox.

ID Akun Apple Developer Anda, 10 karakter alfanumerik.

Services ID yang baru saja Anda buat. Lihat disini.

Format nama file nya biasanya seperti ini: AuthKey_XX123456XX.p8. Lihat disini.

Ambil 10 karakter alfanumerik terakhir dalam nama file Keys ID diatas. Lihat disini.

Expire: -

Jangan lupa generate key baru sebelum tanggal expire!

🔒

Tool ini mengutamakan privasi: 100% berjalan di browser, tanpa server! Lihat kodenya disini.

Selesai

Selamat! Anda sudah berhasil mengkonfigurasi semua komponen penting untuk fitur "Sign In with Apple": App ID, Services ID, Keys, dan Client Secret. Sekarang Anda dapat mengintegrasikan fitur ini ke aplikasi Anda.

Untuk mengintegrasikan konfigurasi ini ke aplikasi Anda, ada beberapa opsi yang bisa saya rekomendasikan. Anda dapat menggunakan layanan autentikasi seperti Supabase Auth atau menggunakan library seperti better-auth. Keduanya sudah saya gunakan di project-project pribadi saya tanpa kendala berarti. 👍🏻

Semoga panduan ini membantu! Jika Anda mengalami kendala, biasanya masalahnya ada di konfigurasi domain atau callback URL - yang terpenting adalah kita harus memastikan flow sign-in di environment development sudah berjalan dengan baik sebelum ke production.

Jika Anda memiliki pertanyaan atau membutuhkan penjelasan lebih lanjut, jangan ragu untuk menghubungi saya di Twitter/X. Selamat mencoba!