Apple login di Android

Login Apple di Android agak hacky. Apple tidak punya dukungan resmi untuk Sign in with Apple di Android, jadi solusinya agak hacky.

Android saat ini memakai Chrome tabs untuk menampilkan website OAuth2. Pendekatan ini punya tantangan:

• Konfigurasi sulit
• Membutuhkan backend

Memahami alur di Android.

Saya akan pakai diagram untuk menjelaskan alur di Android:

flowchart TD
    A("await SocialLogin.login()") -->|Handled in the plugin|B(Generate the login URL)
    B --> |Pass the link| C(Open the Chrome browser)
    C --> D(Wait for the user to login)
    D --> |Apple redirects to your backend|E(Handle the data returned from Apple)
    E --> F(Redirect back to the app)
    F --> G(Return to JS)

Setelah memahami tantangan dan alurnya, mari mulai konfigurasinya.

Membuat Service ID

1. Login into the Portal Apple Developer.

2. Klik pada Identifiers.

   

   Anda akan melihat tampilan seperti ini:

   
   1. Pastikan field ini berisi App IDs
   2. Pastikan Anda dapat menemukan App ID Anda.

      Catatan

      Jika Anda belum mengonfigurasi Apple Login untuk iOS, Anda harus membuatnya. Saya sudah membuatnya sebelumnya. App ID yang akan saya gunakan adalah me.wcaleniewolny.test.ionic.vue. Jika Anda belum memilikinya, silakan buat menggunakan langkah create app.

3. Pastikan bahwa Sign in with Apple capability sudah aktif untuk aplikasi Anda

   1. Klik pada aplikasi Anda
   2. Pastikan bahwa Sign in with Apple capability sudah aktif
   3. Jika belum aktif, silakan aktifkan.

4. Kembali ke semua All Identifiers

   

5. Klik pada App Ids dan buka Services IDs

   

6. Buat identifier baru

   1. Click on the plus button

      

   2. Pilih Servcice IDs dan klik Continue

      

   3. Masukkan deskripsi dan identifier lalu klik Continuie.

      

      Catatan

      Ini identifiers akan menjadi clientId yang akan Anda masukkan ke dalam initialize function DAN ANDROID_SERVICE_ID untuk backend.

      Harap simpan!!!

      Catatan

      Service ID tidak harus sama dengan App ID, tapi saya sarankan set service ID ke YOUR_APP_ID.service . Sebagai pengingat, saya menggunakan me.wcaleniewolny.test.ionic.vue untuk app ID saya, tapi saya menggunakan ee.forgr.io.ionic.service2 sebagai service ID.

   4. Silakan verifikasi detailnya dan klik Register

      

   5. Klik pada service yang baru dibuat

      

   6. Aktifkan opsi Sign in with Apple opsi

      

   7. Konfigurasikan Sign In with Apple

      

   8. Pastikan bahwa Primary App ID disetel ke App ID yang dikonfigurasi di langkah sebelumnya

      

   9. Tambahkan domain tempat Anda akan menghosting backend.

      

      Catatan

      Backend ini harus harus berjalan di HTTPS. Sedangkan untuk Return URLs, Anda mungkin ingin kembali ke bagian ini setelah membaca bagian tutorial berikutnya dan setelah mengonfigurasi backend. Untuk keperluan tutorial ini, saya akan menggunakan https://xyz.wcaleniewolny.me/login/callback sebagai return URL dan xyz.wcaleniewolny.me untuk domainnya. Klik next.

   10. Konfirmasi data dan klik Done

       

   11. Klik pada Continue

       

   12. Klik pada Save

       

Membuat kunci

1. Kembali ke semua All Identifiers

   

2. Klik pada Keys

   

3. Click on the plus icon

   

4. Beri nama key Anda

   

   Catatan

   Nama ini tidak penting, bebas diisi apa saja.

5. Pilih Sign in with Apple dan klik Configure

   

6. Pilih App ID utama, lalu tekan Save

   

   Catatan

   Ini harus App ID yang sama dengan ID pada langkah sebelumnya.

7. Klik pada Continue

   

8. Klik pada Register

   

9. Salin key ID dan download key-nya.

   

   Peringatan

   PENTING: Simpan ID ini, di backend akan disebut KEY_ID. Download key-nya. Pastikan jangan pernah membagikan key ini.

10. Cari key yang sudah di-download dan simpan di folder backend.

    

Cara mendapatkan Team ID

Untuk menggunakan Login with Apple di Android, Anda perlu mendapatkan Team ID. Ini akan digunakan di backend.

1. Buka situs web ini dan scroll ke bawah

2. Temukan Team ID

   

Konfigurasi redirect aplikasi

Seperti yang terlihat pada diagram, backend melakukan langkah yang disebut Redirect back to the app. Ini memerlukan perubahan manual pada aplikasi Anda.

1. Ubah AndroidManifest.xml

   1. Buka file, saya akan menggunakan AndroidStudio

      

   2. Temukan MainActivity dan tambahkan Intent filter berikut

      

      <intent-filter>
          <action android:name="android.intent.action.VIEW" />
          <category android:name="android.intent.category.DEFAULT" />
          <category android:name="android.intent.category.BROWSABLE" />
          <data android:scheme="capgo-demo-app" android:host="path" />
      </intent-filter>

2. Ubah MainActivity

   1. Silakan buka MainActivity

      

   2. Tambahkan code berikut:

      

      @Override
      protected void onNewIntent(Intent intent) {
          String action = intent.getAction();
          Uri data = intent.getData();
      
          if (Intent.ACTION_VIEW.equals(action) && data != null) {
              PluginHandle pluginHandle = getBridge().getPlugin("SocialLogin");
              if (pluginHandle == null) {
                  Log.i("Apple Login Intent", "SocialLogin login handle is null");
                  return;
              }
              Plugin plugin = pluginHandle.getInstance();
              if (!(plugin instanceof SocialLoginPlugin)) {
                  Log.i("Apple Login Intent", "SocialLogin plugin instance is not SocialLoginPlugin");
                  return;
              }
              ((SocialLoginPlugin) plugin).handleAppleLoginIntent(intent);
              return;
          }
          super.onNewIntent(intent);
      }

      Peringatan

      Contoh ini mengasumsikan Anda belum mengonfigurasi deep link apa pun. Jika sudah, silakan sesuaikan code

Catatan

Anda baru saja menambahkan deep link baru ke aplikasi. Deep link tersebut akan terlihat seperti ini: capgo-demo-app://path. Anda dapat mengubah android:scheme dan android:host untuk mengubah tampilan deep link ini. Penting: Dalam konfigurasi backend, deep link ini akan menjadi BASE_REDIRECT_URL

Konfigurasi backend

Backend diperlukan untuk Android, namun konfigurasi backend juga akan berdampak pada iOS. Contoh backend telah disediakan di sini

Contoh ini menyediakan hal berikut:

• Database JSON sederhana
• Cara untuk meminta JWT dari server Apple
• Verifikasi JWT sederhana

Catatan

I use PM2 untuk menghosting contoh ini. Contoh ecosystem.config.js dapat ditemukan di di sini

Berdasarkan semua yang telah saya jelaskan di tutorial ini, berikut adalah cara env bagian tersebut:

• ANDROID_SERVICE_ID = Service ID
• IOS_SERVICE_ID = App ID

env: {
  PRIVATE_KEY_FILE: "AuthKey_U93M8LBQK3.p8",
  KEY_ID: "U93M8LBQK3",
  TEAM_ID: "UVTJ336J2D",
  ANDROID_SERVICE_ID: "ee.forgr.io.ionic.starter.service2",
  IOS_SERVICE_ID: "me.wcaleniewolny.test.ionic.vue",
  PORT: 3000,
  REDIRECT_URI: "https://xyz.wcaleniewolny.me/login/callback",
  BASE_REDIRECT_URL: "capgo-demo-app://path"
}

Menggunakan plugin

The usage of the login function tidak berubah, sama seperti di iOS. Silakan cek bagian tersebut untuk info lebih lanjut. NAMUN, initialize method sedikit berubah.

await SocialLogin.initialize({
  apple: {
    clientId: 'ee.forgr.io.ionic.starter.service2',
    redirectUrl: 'https://appleloginvps.wcaleniewolny.me/login/callback'
  }
})

Bahaya

Perlu dicatat, menambahkan redirectUrl AKAN berdampak pada iOS !!!!!

Membuat aplikasi

Catatan

Jika Anda sudah punya App ID, Anda bisa melewati langkah ini. Jangan ikuti langkah ini jika Anda sudah mengonfigurasi Apple Login untuk iOS.

1. Jika Anda belum memiliki App ID, klik tombol plus

   

2. Pilih App IDs dan klik continue

   

3. Klik pada tipe App dan klik Continue

   

4. Masukkan deskripsi dan app ID

   

5. Aktifkan Sign with Apple capability

   

6. Klik Continue

   

7. Konfirmasi detail dan klik Register

   

Lanjutkan dengan Apple login di Android

Jika Anda menggunakan Apple login di Android untuk merencanakan alur autentikasi dan akun, hubungkan dengan Menggunakan @capgo/capacitor-social-login untuk kapabilitas native di Menggunakan @capgo/capacitor-social-login, @capgo/capacitor-social-login untuk detail implementasi di @capgo/capacitor-social-login, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, @capgo/capacitor-native-biometric untuk detail implementasi di @capgo/capacitor-native-biometric, dan Autentikasi dua faktor untuk detail implementasi di autentikasi dua faktor.