Buka konsol

Melakukan Autentikasi Menggunakan Penyedia OAuth dengan Cordova

Dengan Firebase JS SDK, pengguna Firebase Anda bisa melakukan autentikasi menggunakan penyedia OAuth yang didukung di lingkungan Cordova. Anda dapat mengintegrasikan penyedia OAuth yang didukung dengan menggunakan Firebase SDK untuk menjalankan alur login, atau dengan menjalankan alur OAuth secara manual dan meneruskan kredensial OAuth yang dihasilkan ke Firebase.

Menyiapkan Firebase Authentication untuk Cordova

  1. Tambahkan Firebase ke project JavaScript. Saat menambahkan cuplikan Firebase, catat variabel konfigurasi authDomain, yang akan terlihat seperti ini: my-app.firebaseapp.com. Jika yang digunakan adalah domain kustom, bukan domain firebaseapp.com yang disediakan Firebase, domain kustom tersebut harus digunakan.

  2. Untuk menyiapkan aplikasi Android, tambahkan aplikasi Android ke Firebase console dan masukkan detail aplikasi Anda. Anda tidak memerlukan google-services.json yang dihasilkan.

  3. Untuk menyiapkan aplikasi iOS, buatlah aplikasi iOS dan tambahkan ke Firebase console. Anda akan memerlukan ID paket iOS untuk ditambahkan nanti saat menginstal plugin skema URL khusus.

  4. Aktifkan Firebase Dynamic Links:

    1. Di Firebase console, buka bagian Dynamic Links.
    2. Jika Anda belum menyetujui persyaratan Dynamic Links dan membuat domain Dynamic Links, lakukan sekarang.

      Jika Anda telah membuat domain Dynamic Links, catatlah. Domain Dynamic Links biasanya terlihat seperti contoh berikut:

      example.page.link

      Anda akan memerlukan nilai ini saat mengonfigurasi aplikasi iOS atau Android untuk menghalangi link masuk.

  5. Aktifkan Login dengan Google di Firebase console:

    1. Di Firebase console, buka bagian Auth.
    2. Di tab Metode login, aktifkan metode Login dengan Google, lalu klik Simpan.
  6. Instal plugin yang dibutuhkan di project Cordova Anda.

    # Plugin to pass application build info (app name, ID, etc) to the OAuth widget.
    cordova plugin add cordova-plugin-buildinfo --save
    # Plugin to handle Universal Links (Android app link redirects)
    cordova plugin add cordova-universal-links-plugin-fix --save
    # Plugin to handle opening secure browser views on iOS/Android mobile devices
    cordova plugin add cordova-plugin-browsertab --save
    # Plugin to handle opening a browser view in older versions of iOS and Android
    cordova plugin add cordova-plugin-inappbrowser --save
    # Plugin to handle deep linking through Custom Scheme for iOS
    # Substitute *com.firebase.cordova* with the iOS bundle ID of your app.
    cordova plugin add cordova-plugin-customurlscheme --variable \
        URL_SCHEME=com.firebase.cordova --save
    
  7. Tambahkan konfigurasi berikut ke file config.xml Cordova Anda, dengan AUTH_DOMAIN adalah domain dari langkah (1), dan DYNAMIC_LINK_DOMAIN adalah domain dari langkah (3c).

    <universal-links>
        <host name="DYNAMIC_LINK_DOMAIN" scheme="https" />
        <host name="AUTH_DOMAIN" scheme="https">
            <path url="/__/auth/callback"/>
        </host>
    </universal-links>
    

    Contoh konfigurasi mungkin terlihat seperti ini:

    <universal-links>
        <host name="example.page.link" scheme="https" />
        <host name="example-app.firebaseapp.com" scheme="https">
            <path url="/__/auth/callback"/>
        </host>
    </universal-links>
    

    Jika domain kustom auth.custom.domain.com digunakan, gantilah my-app.firebaseapp.com dengan domain tersebut.

    Untuk aplikasi Android, singleTask harus digunakan untuk launchMode.

    <preference name="AndroidLaunchMode" value="singleTask" />
    

Memproses alur login dengan Firebase SDK

  1. Firebase Auth bergantung pada peristiwa deviceReady untuk menentukan dengan benar lingkungan Cordova saat ini. Pastikan instance Aplikasi Firebase diinisialisasi setelah peristiwa tersebut dipicu.

  2. Buat instance objek penyedia Google:

    var provider = new firebase.auth.GoogleAuthProvider();
    
  3. Autentikasi dengan Firebase menggunakan objek penyedia Google, dengan signInWithRedirect. Perlu diperhatikan bahwa signInWithPopup tidak didukung di Cordova.

    firebase.auth().signInWithRedirect(provider).then(function() {
      return firebase.auth().getRedirectResult();
    }).then(function(result) {
      // This gives you a Google Access Token.
      // You can use it to access the Google API.
      var token = result.credential.accessToken;
      // The signed-in user info.
      var user = result.user;
      // ...
    }).catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
    });
    
  4. Untuk menangani kasus ketika aktivitas aplikasi dihancurkan sebelum operasi login selesai, panggil getRedirectResult saat aplikasi Anda dimuat.

    firebase.auth().getRedirectResult().then(function(result) {
      if (result.credential) {
        // This gives you a Google Access Token.
        // You can use it to access the Google API.
        var token = result.credential.accessToken;
        // The signed-in user info.
        var user = result.user;
        // ...
      }
    }).catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
    });
    

    Mekanisme yang sama dapat digunakan untuk menautkan penyedia baru melalui linkWithRedirect, atau untuk melakukan autentikasi ulang dengan penyedia yang ada menggunakan reauthenticateWithRedirect.