Login Apple pada Android

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

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

• Konfigurasi yang sulit
• Diperlukan backend

Mengerti aliran pada android.

Biarkan saya 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 Portal Pengembang Apple.

2. Klik pada Identifiers.

   

   Anda seharusnya melihat layar yang terlihat seperti ini:

   
   1. Pastikan bidang ini mengatakan App IDs
   2. Pastikan Anda bisa 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 ini 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 tombol plus

      

   2. Pilih Servcice IDs dan klik Continue

      

   3. Masukkan deskripsi dan identifikasi dan klik Continuie.

      

      Perhatian

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

      Silakan simpan!!!

      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 tapi 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 pilihan

      

   7. Konfigurasi Sign In with Apple

      

   8. Pastikan Primary App ID dipasang ke ID Aplikasi yang dikonfigurasi pada langkah sebelumnya

      

   9. Tambahkan domain yang Anda akan host backend Anda.

      

      Perlu diingat

      Belakangan ini harus berjalan di HTTPS. Untuk Return URLsanda mungkin ingin kembali ke hal ini setelah membaca bagian selanjutnya dari tutorial ini 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

   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

   

   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

   Hal ini harus sama dengan ID Aplikasi di langkah-langkah sebelumnya.

7. Klik Continue

   

8. Klik pada Register

   

9. Salin ID kunci dan download kunci.

   

   Peringatan

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

10. Temukan file kunci yang telah di download 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. Kunjungi situs web ini dan gulir ke bawah

2. Cari lokasi Team ID

   

Mengonfigurasi pengalihan aplikasi

Mengonfigurasi pengalihan aplikasi Redirect back to the app. Ini memerlukan perubahan manual pada aplikasi Anda.

1. Ubahlah AndroidManifest.xml

   1. Buka file ini, saya akan menggunakan AndroidStudio

      

   2. Cari 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 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 asumsikan Anda tidak memiliki deep link yang sudah terkonfigurasi. Jika Anda sudah memiliki, silakan menyesuaikan code

Catatan

Anda telah 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 mengubah tampilan deep link ini. Penting: Dalam konfigurasi backend, tautan ini akan menjadi BASE_REDIRECT_URL

Konfigurasi Backend

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

Contoh ini menyediakan hal-hal berikut:

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

Catatan

Saya menggunakan PM2 untuk menghosting contoh ini. Contoh dapat ditemukan ecosystem.config.js di sini Dengan segala yang saya katakan dalam tutorial ini, berikut adalah cara bagaimana

bagian ini akan terlihat: env = ID Layanan

• ANDROID_SERVICE_ID = ID Aplikasi
• IOS_SERVICE_ID Salin ke clipboard

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"
}

Bagian berjudul “Menggunakan plugin”

= Service ID login = App ID TAPI, metode berubah sedikit. 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

AKAN redirectUrl mempengaruhi IOS !!!!! Membuat aplikasi

Judul bagian “Membuat aplikasi”

Catatan

Jika Anda sudah memiliki ID Aplikasi, Anda bisa 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

   

Lanjutkan dari login Apple di Android

Jika Anda menggunakan Login Apple di Android untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-login-sosial untuk kemampuan asli dalam Menggunakan @capgo/capacitor-login-sosial, @capgo/capacitor-login-sosial untuk detail implementasi dalam @capgo/capacitor-login-sosial, @capgo/capacitor-passkey untuk detail implementasi dalam @capgo/capacitor-passkey, @capgo/capacitor-biometrik-asli untuk detail implementasi dalam @capgo/capacitor-biometrik-asli, dan Autentikasi dua faktor untuk detail implementasi dalam Autentikasi dua faktor.