Login Apple di Android

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

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

• Konfigurasi sulit
• Diperlukan backend

Mengerti alur di Android.

Biarkan saya menggunakan 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 Anda menyadari tantangan dan alur, mari kita mulai dengan konfigurasi.

Membuat ID layanan

1. Masuk ke Portal Pengembang Apple.

2. Klik pada Identifiers.

   

   Anda harus melihat layar yang terlihat seperti ini:

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

      Catatan

      Jika Anda belum mengonfigurasi Login Apple untuk IOS, Anda harus membuat satu. Untuk saya, saya sudah memiliki satu yang dibuat. ID aplikasi yang saya gunakan adalah me.wcaleniewolny.test.ionic.vue. Jika Anda belum memiliki satu, silakan membuatnya menggunakan langkah buat aplikasi.

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

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

4. Kembali ke semua All Identifiers

   

5. Klik pada App Ids dan pergi ke Services IDs

   

6. Buat identifikasi baru

   1. Klik pada tombol plus

      

   2. Pilih Servcice IDs dan klik Continue

      

   3. Masukkan deskripsi dan identifikasi dan klik Continuie.

      

      Catatan

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

      Silakan simpan!!!

      Catatan

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

   4. Silakan verifikasi detail dan klik Register

      

   5. Klik pada layanan baru yang telah dibuat

      

   6. Aktifkan Sign in with Apple option

      

   7. Konfigurasi Sign In with Apple

      

   8. Pastikan bahwa Primary App ID __CAPGO_KEEP_0__ ditetapkan ke ID Aplikasi yang telah dikonfigurasi pada langkah sebelumnya.

      

   9. Tambahkan domain yang akan Anda gunakan untuk menghosting backend Anda.

      

      Catatan

      Backend ini harus berjalan di HTTPS. Untuk URL kembali, Anda mungkin ingin kembali ke langkah ini setelah membaca bagian selanjutnya dari tutorial ini dan setelah mengonfigurasi backend. Untuk tujuan tutorial ini, saya akan menggunakan Return URLsuntuk URL kembali dan https://xyz.wcaleniewolny.me/login/callback domain. Tekan next. xyz.wcaleniewolny.me Note: __CAPGO_KEEP_0__

   10. Konfirmasikan 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. Klik ikon plus

   

4. Berikan nama kunci

   

   Catatan

   Nama ini tidak penting, Anda bisa memasukkan apa saja.

5. Pilih Sign in with Apple dan klik Configure

   

6. Pilih ID Aplikasi utama, dan tekan Save

   

   Catatan

   Pastikan ID Aplikasi ini sama dengan ID di langkah-langkah sebelumnya.

7. Klik pada Continue

   

8. Klik pada Register

   

9. Salin ID kunci dan download kunci.

   

   Peringatan

   PERHATIAN: Simpan ID ini, di backend akan disebut KEY_ID. Unduh kunci. Pastikan tidak pernah berbagi kunci ini.

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

    

Mendapatkan ID Tim

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

1. Lihat website ini dan gulir ke bawah

2. Temukan lokasi ID tim di akun pengembang Team ID

   

Bab berjudul “Konfigurasi pengalihan aplikasi”

. Ini memerlukan perubahan manual pada aplikasi Anda. Redirect back to the appUbah

1. Buka file ini, saya akan menggunakan AndroidManifest.xml

   1. File AndroidManifest.xml di Android Studio AndroidStudio

      

   2. dan tambahkan filter Intent berikut MainActivity Filter Intent __CAPGO_KEEP_0__ untuk menambahkan di MainActivity

      

      <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. Ubahlah MainActivity

   1. Silakan buka file MainActivity.java di Android Studio MainActivity

      

   2. code untuk menambahkan fungsi pengiriman tautan dalam ke dalam MainActivity

      

      @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);
      }

      Contoh ini asumsikan Anda tidak memiliki tautan dalam yang sudah terkonfigurasi. Jika Anda sudah memiliki, silakan sesuaikan __CAPGO_KEEP_0__

      This example assumes that you don’t have any deep links configured. If you do, please adjust the code

This example assumes that you don’t have any deep links configured. If you do, please adjust the __CAPGO_KEEP_0__

Anda baru saja menambahkan tautan dalam yang baru ke aplikasi Anda. Tautan dalam akan terlihat seperti ini: capgo-demo-app://path Anda dapat mengubah android:scheme dan android:host untuk mengubah tampilan tautan dalam ini. Perlu diingat: Di konfigurasi backend, tautan dalam ini akan menjadi BASE_REDIRECT_URL

Konfigurasi Backend

Diperlukan backend untuk Android, tetapi mengonfigurasi backend juga akan mempengaruhi IOS. Contoh backend disediakan Contoh ini menyediakan:

Database JSON sederhana

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

Catatan

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

Dengan segala yang saya katakan dalam tutorial ini, berikut adalah cara env bagian ini akan terlihat:

• ANDROID_SERVICE_ID = ID Layanan
• IOS_SERVICE_ID = ID Aplikasi

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 dari login fungsi tidak berubah, sama seperti IOS. Silakan lihat bagian tersebut untuk informasi lebih lanjut. TETAPI, metode initialize Salin ke clipboard

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

Perlu diingat, bahwa menambahkan

fungsi tidak berubah, sama seperti IOS. Silakan lihat bagian tersebut untuk informasi lebih lanjut. redirectUrl MENYEBABKAN akan mempengaruhi IOS !!!!!

Membuat aplikasi

Peringatan

Jika Anda sudah memiliki ID Aplikasi, Anda dapat melewatkan langkah ini. Jangan mengikuti langkah ini jika Anda telah mengonfigurasi Login Apple untuk IOS.

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

   

2. Pilih App IDs dan klik lanjutkan

   

3. Klik pada jenis App dan klik Continue

   

4. Masukkan deskripsi dan ID aplikasi

   

5. Aktifkan Sign with Apple kemampuan

   

6. Klik Continue

   

7. Konfirmasi detail dan klik Register

   

Teruskan dari login Apple di Android

Jika Anda menggunakan Login Apple di Android untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-login-social untuk kemampuan asli di Menggunakan @capgo/capacitor-login-social, @capgo/capacitor-login-social untuk detail implementasi di @capgo/capacitor-login-social, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, @capgo/capacitor-biometrik-asli untuk detail implementasi di @capgo/capacitor-native-biometric, dan Autentikasi Dua Faktor untuk detail implementasi di Autentikasi Dua Faktor.