Login Apple di Android

Penggunaan login Apple di Android adalah tidak biasa. Apple tidak memiliki dukungan resmi untuk Sign in with Apple Penggunaan login Apple di Android adalah tidak biasa karena Apple tidak memiliki dukungan resmi untuk

Penggunaan login Apple di Android adalah tidak biasa karena Apple tidak memiliki dukungan resmi untuk

• Penggunaan login Apple di Android adalah tidak biasa karena Apple tidak memiliki dukungan resmi untuk
• Penggunaan login Apple di Android adalah tidak biasa karena Apple tidak memiliki dukungan resmi untuk

Penggunaan login Apple di Android adalah tidak biasa karena Apple tidak memiliki dukungan resmi untuk

Saya ingin menggunakan diagram untuk menjelaskan aliran pada 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 aliran, mari kita mulai konfigurasi.

Membuat ID Layanan

1. Masuk ke dalam 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 membuat satu menggunakan langkah create app.

3. Pastikan Anda mengaktifkan Sign in with Apple untuk aplikasi Anda.

   1. Klik pada aplikasi Anda.
   2. Pastikan Anda mengaktifkan Sign in with Apple untuk aplikasi Anda.
   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.

      

      Penting

      Ini identifiers Akan menjadi yang Anda masukkan dalam clientId fungsi DAN initialize untuk backend. ANDROID_SERVICE_ID Silakan simpan!!

      Penting

      Catatan

      ID Layanan tidak harus sama dengan ID Aplikasi, tetapi saya merekomendasikan untuk 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 memverifikasi detail dan klik Register

      

   5. Klik pada layanan baru yang telah dibuat

      

   6. Mengaktifkan Sign in with Apple Opsi

      

   7. Konfigurasi tombol Sign In with Apple

      

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

      

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

      

      Perhatian

      Backend ini harus berjalan di HTTPS. Untuk Return URLsMungkin Anda ingin kembali ke halaman ini setelah membaca bagian tutorial selanjutnya dan setelah mengonfigurasi backend. Untuk tujuan tutorial ini, saya akan menggunakan https://xyz.wcaleniewolny.me/login/callback untuk URL kembali dan xyz.wcaleniewolny.me domain. Tekan tombol 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. Klik pada ikon plus

   

4. Berikan nama pada kunci

   

   Perhatian

   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

   ID Aplikasi ini harus sama dengan ID sebelumnya.

7. Klik pada Continue

   

8. Klik pada Register

   

9. Salin ID kunci dan unduh kunci.

   

   Peringatan

   PERHATIAN: Simpan ID ini, di backend ID ini akan disebut KEY_IDUnduh 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 IDID ini akan digunakan di backend.

1. Pergi ke situs web ini dan gulir ke bawah

2. Cari lokasi ID Tim di akun pengembang Team ID

   

Bab yang berjudul “Mengatur 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. Temukan MainActivity dan tambahkan filter Intent 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 file MainActivity.java di Android Studio MainActivity

      

   2. code untuk menambahkan ke MainActivity untuk menghandle deep link

      

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

      filter Intent __CAPGO_KEEP_0__ untuk menambahkan di MainActivity untuk menghandle deep link

      Contoh ini asumsikan Anda tidak memiliki tautan dalam yang terkonfigurasi. Jika Anda melakukannya, silakan menyesuaikan code

Perlu diingat

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

Konfigurasi Backend

Untuk Android, backend diperlukan, tetapi mengonfigurasi backend juga akan mempengaruhi IOS. Contoh backend disediakan Sini

Contoh ini menyediakan hal-hal berikut:

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

Peringatan

Saya menggunakan PM2 untuk menampung contoh ini. Contoh lain dapat ditemukan ecosystem.config.js Sini Berikut adalah cara melakukan semuanya seperti yang saya katakan di tutorial ini.

Sini 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 fungsi tidak berubah, sama seperti di IOS. Silakan lihat bagian tersebut untuk informasi lebih lanjut. login TETAPI , metode berubah sedikit.Salin ke clipboard initialize function doesn't change, it's the same as IOS.

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

Peringatan

Perlu diingat bahwa menambahkan redirectUrl AKAN mempengaruhi IOS !!!!!

Membuat aplikasi

Perlu diingat

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 tipe 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-social-login untuk kemampuan 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