Login Apple di Android

Login Apple di Android agak rumit. Apple tidak memiliki dukungan resmi untuk Sign in with Apple di Android, jadi solusinya sedikit rumit.

Android saat ini menggunakan tab Chrome untuk menampilkan situs web OAuth2. Pendekatan ini memiliki tantangan:

• Konfigurasi yang sulit
• Backend diperlukan

Memahami alur di Android

Mari saya gunakan 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)
        

Sekarang setelah Anda mengetahui tantangan dan alurnya, mari kita mulai konfigurasi.

Membuat ID layanan

1. Login ke Portal Developer Apple.

2. Klik pada Identifiers.

   

   Anda harus melihat layar yang terlihat seperti ini:

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

      Note

      Jika Anda belum mengkonfigurasi Login Apple untuk IOS, Anda harus membuatnya. Untuk saya, saya sudah memiliki satu yang dibuat. App ID yang akan saya gunakan adalah me.wcaleniewolny.test.ionic.vue. Jika Anda tidak memilikinya, silakan buat satu menggunakan langkah membuat app.

3. Pastikan bahwa kemampuan Sign in with Apple diaktifkan untuk aplikasi Anda

   1. Klik pada aplikasi Anda
   2. Pastikan bahwa kemampuan Sign in with Apple diaktifkan
   3. Jika belum diaktifkan, aktifkan.

4. Kembali ke All Identifiers

   

5. Klik pada App Ids dan pergi ke Services IDs

   

6. Buat identifier baru

   1. Klik tombol plus

      

   2. Pilih Servcice IDs dan klik Continue

      

   3. Masukkan deskripsi dan identifier dan klik Continuie.

      

      Note

      identifiers ini akan menjadi clientId yang akan Anda berikan di fungsi initialize DAN ANDROID_SERVICE_ID untuk backend.

      Harap simpan!!!

      Note

      ID Layanan tidak harus cocok dengan App ID, tetapi saya merekomendasikan mengatur ID layanan ke YOUR_APP_ID.service. Sebagai pengingat, saya menggunakan me.wcaleniewolny.test.ionic.vue untuk App ID saya tetapi saya menggunakan ee.forgr.io.ionic.service2 sebagai ID layanan.

   4. Silakan verifikasi detailnya dan klik Register

      

   5. Klik pada layanan yang baru dibuat

      

   6. Aktifkan opsi Sign in with Apple

      

   7. Konfigurasi Sign In with Apple

      

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

      

   9. Tambahkan domain tempat Anda akan menghosting backend Anda.

      

      Note

      Backend ini harus berjalan di HTTPS. Untuk Return URLs, Anda mungkin ingin kembali ke ini setelah membaca bagian berikutnya dari tutorial ini dan setelah mengkonfigurasi backend. Untuk tujuan tutorial ini, saya akan menggunakan https://xyz.wcaleniewolny.me/login/callback untuk return URL dan xyz.wcaleniewolny.me untuk domain. Tekan next.

   10. Konfirmasikan data dan klik Done

       

   11. Klik pada Continue

       

   12. Klik pada Save

       

Membuat key

1. Kembali ke All Identifiers

   

2. Klik pada Keys

   

3. Klik pada ikon plus

   

4. Beri nama key Anda

   

   Note

   Nama ini tidak penting, Anda bisa memasukkan apa saja.

5. Pilih Sign in with Apple dan klik Configure

   

6. Pilih primary App ID, dan tekan Save

   

   Note

   Ini harus App ID yang sama dengan ID di langkah-langkah sebelumnya.

7. Klik pada Continue

   

8. Klik pada Register

   

9. Salin ID key dan unduh key.

   

   Caution

   PENTING: Simpan ID ini, di backend ini akan disebut KEY_ID. Unduh key. Pastikan untuk tidak pernah membagikan key ini.

10. Temukan key yang diunduh dan simpan di folder backend.

    

Mendapatkan Team ID

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

1. Pergi ke situs web ini dan scroll ke bawah

2. Temukan Team ID

   

Mengkonfigurasi redirect aplikasi

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

1. Modifikasi 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. Modifikasi MainActivity

   1. Silakan buka MainActivity

      

   2. Tambahkan kode 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);
      }

      Caution

      Contoh ini mengasumsikan bahwa Anda tidak memiliki deep link yang dikonfigurasi. Jika Anda memilikinya, silakan sesuaikan kode

Note

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

Konfigurasi backend

Backend diperlukan untuk Android, tetapi mengkonfigurasi backend juga akan berdampak pada IOS. Contoh backend disediakan di sini

Contoh ini menyediakan hal berikut:

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

Note

Saya menggunakan PM2 untuk menghosting contoh ini. Contoh ecosystem.config.js dapat ditemukan di sini

Mengingat semua yang saya katakan dalam tutorial ini, berikut adalah bagaimana bagian env akan terlihat:

• ANDROID_SERVICE_ID = ID Layanan
• 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

Penggunaan fungsi login tidak berubah, sama seperti IOS. Silakan lihat bagian itu untuk info lebih lanjut. NAMUN, metode initialize sedikit berubah.

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

Danger

Perhatikan, bahwa menambahkan redirectUrl AKAN mempengaruhi IOS!!!!!

Membuat app

Note

Jika Anda sudah memiliki App ID, Anda dapat melewati langkah ini. Jangan ikuti langkah ini jika Anda telah mengkonfigurasi Login Apple untuk IOS.

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

   

2. Pilih App IDs dan klik continue

   

3. Klik pada jenis App dan klik Continue

   

4. Masukkan deskripsi dan app ID

   

5. Aktifkan kemampuan Sign with Apple

   

6. Klik Continue

   

7. Konfirmasikan detail dan klik Register