Login Apple di Android

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

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

• Tantangan konfigurasi yang sulit
• Diperlukan backend

Pemahaman alur pada Android.

Biarkan saya menggunakan diagram untuk menjelaskan alur 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 sudah menyadari tantangan dan alur, mari kita mulai mengonfigurasi.

Membuat ID layanan

1. Masuk ke dalam Portal Pengembang Apple.

2. Klik pada Identifiers.

   

   Anda harus melihat layar yang terlihat seperti ini:

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

      Catatan

      If 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.vueJika Anda belum memiliki satu, silakan membuat satu menggunakan langkah buat aplikasi.

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

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

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

      This identifiers akan menjadi clientId yang akan Anda masukkan initialize untuk backend. ANDROID_SERVICE_ID Silakan simpan!!

      Simpanlah itu!!!

      Catatan

      ID Layanan tidak harus sama dengan ID Aplikasi, tetapi saya merekomendasikan untuk mengatur ID layanan menjadi YOUR_APP_ID.service Saya menggunakan ini sebagai pengingat. 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. Mengaktifkan Sign in with Apple option

      

   7. Konfigurasi Sign In with Apple

      

   8. Pastikan bahwa Primary App ID dijadikan menjadi ID Aplikasi yang telah dikonfigurasi pada langkah sebelumnya

      

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

      

      Note

      Backend ini harus untuk berjalan di atas HTTPS. Untuk hal ini Return URLs, you might want to come back to this after reading the next section of this tutorial and after configuring the backend. For the purposes of this tutorial, I will use https://xyz.wcaleniewolny.me/login/callback domain. Tekan next. xyz.wcaleniewolny.me untuk URL kembali dan

   10. Mengonfirmasi 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 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

   

   Peringatan

   ID Aplikasi ini harus sama dengan ID yang ada di langkah-langkah sebelumnya.

7. Klik pada Continue

   

8. Klik pada Register

   

9. Salin ID kunci dan unduh kunci.

   

   Peringatan

   PERHATIAN: Simpan ID ini, di backend 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 website ini dan gulir ke bawah

2. Temukan Team ID

   

Konfigurasi Pengalihan Aplikasi

Sebagaimana yang Anda lihat dalam diagram, backend melakukan langkah yang disebut Redirect back to the appLangkah ini memerlukan perubahan manual pada aplikasi Anda.

1. Ubah AndroidManifest.xml

   1. Terbuka file ini, saya akan menggunakan 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. Ubahlah MainActivity

   1. Silakan buka file MainActivity

      

   2. Tambahkan kode berikut code:

      

      @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 asumsikan Anda tidak memiliki tautan dalam yang sudah terkonfigurasi. Jika Anda sudah memiliki, silakan sesuaikan code

Catatan

Anda telah 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: Dalam pengaturan backend, tautan dalam ini akan menjadi BASE_REDIRECT_URL

Pengaturan Backend

Backend diperlukan untuk Android, tetapi mengonfigurasi backend juga akan mempengaruhi IOS. Contoh backend disediakan di sini

Contoh ini menyediakan hal-hal berikut:

• Basis data JSON sederhana
• Apa yang dapat meminta JWT dari server Apple
• Verifikasi JWT yang sederhana

Penting

I use PM2 untuk menghosting contoh ini. Contoh dapat ditemukan ecosystem.config.js Dapat ditemukan here

Given everything that I said in this tutorial, here is how the env Bagian ini akan terlihat seperti ini:

• ANDROID_SERVICE_ID = ID Aplikasi
• 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 IOS. Silakan lihat bagian tersebut untuk informasi lebih lanjut. login Fungsi tidak berubah, sama seperti IOS. Periksa bagian tersebut untuk informasi lebih lanjut. , namun, the initialize Perubahan metode sedikit berbeda.

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

Danger

Copy ke clipboard redirectUrl Akan mengganggu IOS !!!!!

Membuat Aplikasi

Catatan

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. Mengaktifkan 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-login Sosial untuk detail implementasi di @capgo/capacitor-social-login, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, @capgo/capacitor-native-biometrik untuk detail implementasi di @capgo/capacitor-native-biometric, dan Autentikasi dua faktor untuk detail implementasi di Autentikasi dua faktor.