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 menerapkan alur OAuth secara manual dan meneruskan kredensial OAuth yang dihasilkan ke Firebase.

Menyiapkan Firebase Authentication untuk Cordova

  1. Tambahkan Firebase ke project JavaScript Anda. Saat menambahkan cuplikan Firebase, catat variabel konfigurasi authDomain, yang akan terlihat seperti my-app.firebaseapp.com. Jika yang digunakan adalah domain kustom, bukan domain firebaseapp.com yang disediakan Firebase, domain kustom itulah yang 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 kustom.

  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, catat domain tersebut. Domain Dynamic Links biasanya terlihat seperti contoh berikut:

      example.page.link

      Anda akan memerlukan nilai ini saat mengonfigurasi aplikasi Apple atau Android untuk menangkap link yang 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 Save.

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

Menangani alur login dengan Firebase SDK

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

  2. Buat instance objek penyedia Google:

    API modular web

    import { GoogleAuthProvider } from "firebase/auth/cordova";

const provider = new GoogleAuthProvider();
    auth_create_google_provider.js

    API dengan namespace web

    var provider = new firebase.auth.GoogleAuthProvider();
    cordova.js

  3. Lakukan autentikasi dengan Firebase melalui objek penyedia Google menggunakan signInWithRedirect. Perlu diperhatikan bahwa signInWithPopup tidak didukung di Cordova.

    API modular web

    import { getAuth, signInWithRedirect, getRedirectResult, GoogleAuthProvider } from "firebase/auth/cordova";

const auth = getAuth();
signInWithRedirect(auth, new GoogleAuthProvider())
  .then(() => {
    return getRedirectResult(auth);
  })
  .then((result) => {
    const credential = GoogleAuthProvider.credentialFromResult(result);

    // This gives you a Google Access Token.
    // You can use it to access the Google API.
    const token = credential.accessToken;

    // The signed-in user info.
    const user = result.user;
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
  });
    auth_cordova_sign_in_redirect.js

    API dengan namespace web

    firebase.auth().signInWithRedirect(provider).then(() => {
  return firebase.auth().getRedirectResult();
}).then((result) => {
  /** @type {firebase.auth.OAuthCredential} */
  var credential = result.credential;

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

  4. Untuk menangani kasus saat aktivitas aplikasi dihancurkan sebelum operasi login selesai, panggil getRedirectResult saat aplikasi Anda dimuat.

    API modular web

    import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth/cordova";

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

    API dengan namespace web

    firebase.auth().getRedirectResult().then((result) => {
  if (result.credential) {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

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

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