Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.

Melakukan Autentikasi Menggunakan GitHub dengan JavaScript

Anda dapat mengizinkan pengguna melakukan autentikasi dengan Firebase menggunakan akun GitHub mereka dengan mengintegrasikan autentikasi GitHub ke aplikasi. Caranya, Anda dapat menggunakan Firebase SDK untuk menjalankan alur login, atau dengan menerapkan alur OAuth 2.0 GitHub secara manual dan meneruskan token akses yang dihasilkan ke Firebase.

Sebelum memulai

  1. Tambahkan Firebase ke project JavaScript.
  2. Di Firebase console, buka bagian Auth.
  3. Di tab Metode login, aktifkan penyedia GitHub.
  4. Tambahkan Client ID dan Rahasia Klien dari konsol developer penyedia tersebut ke konfigurasi penyedia:
    1. Daftarkan aplikasi Anda sebagai aplikasi developer di GitHub, lalu dapatkan Client ID dan Rahasia Klien OAuth 2.0 untuk aplikasi Anda.
    2. Pastikan URI pengalihan OAuth Firebase Anda (misalnya my-app-12345.firebaseapp.com/__/auth/handler) ditetapkan sebagai URL callback otorisasi di halaman setelan aplikasi pada konfigurasi aplikasi GitHub.
  5. Klik Simpan.

Menangani alur login dengan Firebase SDK

Jika Anda mem-build aplikasi web, cara termudah untuk mengautentikasi pengguna dengan Firebase menggunakan akun GitHub mereka adalah dengan menangani alur login dengan Firebase JavaScript SDK. (Jika ingin mengautentikasi pengguna dalam Node.js atau lingkungan non-browser lain, Anda harus menangani alur login secara manual.)

Untuk menangani alur login dengan Firebase JavaScript SDK, ikuti langkah-langkah berikut ini:

  1. Buat instance objek penyedia GitHub:

    Web v8

    var provider = new firebase.auth.GithubAuthProvider();

    Web v9

    import { GithubAuthProvider } from "firebase/auth";
    
    const provider = new GithubAuthProvider();
  2. Opsional: Tentukan cakupan OAuth 2.0 tambahan yang ingin diminta dari penyedia autentikasi. Untuk menambahkan cakupan, panggil addScope. Contoh:

    Web v8

    provider.addScope('repo');

    Web v9

    provider.addScope('repo');
    Lihat dokumentasi penyedia autentikasi.
  3. Opsional: Tentukan parameter penyedia OAuth kustom tambahan yang akan dikirim dengan permintaan OAuth. Untuk menambahkan parameter kustom, panggil setCustomParameters di penyedia yang diinisialisasi beserta objek berisi kunci, seperti yang ditentukan dalam dokumentasi penyedia OAuth dan nilainya yang terkait. Sebagai contoh:

    Web v8

    provider.setCustomParameters({
      'allow_signup': 'false'
    });

    Web v9

    provider.setCustomParameters({
      'allow_signup': 'false'
    });
    Parameter OAuth wajib yang dicadangkan tidak boleh digunakan dan akan diabaikan. Baca referensi penyedia autentikasi untuk mengetahui detail lebih lanjut.
  4. Lakukan autentikasi dengan Firebase menggunakan objek penyedia GitHub. Anda bisa meminta pengguna untuk login dengan akun GitHub mereka, baik dengan membuka jendela pop-up atau dengan mengalihkannya ke halaman login. Metode pengalihan lebih disukai pada perangkat seluler.
    • Untuk login dengan jendela pop-up, panggil signInWithPopup:

      Web v8

      firebase
        .auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // This gives you a GitHub Access Token. You can use it to access the GitHub 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;
          // The email of the user's account used.
          var email = error.email;
          // The firebase.auth.AuthCredential type that was used.
          var credential = error.credential;
          // ...
        });

      Web v9

      import { getAuth, signInWithPopup, GithubAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // This gives you a GitHub Access Token. You can use it to access the GitHub API.
          const credential = GithubAuthProvider.credentialFromResult(result);
          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;
          // The email of the user's account used.
          const email = error.email;
          // The AuthCredential type that was used.
          const credential = GithubAuthProvider.credentialFromError(error);
          // ...
        });
      Perlu diingat juga bahwa Anda bisa mengambil token OAuth penyedia GitHub yang dapat digunakan untuk mengambil data tambahan menggunakan GitHub API.

      Di sini juga Anda dapat menemukan dan menangani error. Untuk mengetahui daftar kode error, lihat Dokumentasi Referensi Auth.

    • Untuk login dengan beralih ke halaman login, panggil signInWithRedirect:

      Web v8

      firebase.auth().signInWithRedirect(provider);

      Web v9

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);
      Kemudian, Anda juga dapat mengambil token OAuth penyedia GitHub dengan memanggil getRedirectResult saat halaman dimuat:

      Web v8

      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // This gives you a GitHub Access Token. You can use it to access the GitHub 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;
          // The email of the user's account used.
          var email = error.email;
          // The firebase.auth.AuthCredential type that was used.
          var credential = error.credential;
          // ...
        });

      Web v9

      import { getAuth, getRedirectResult, GithubAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          const credential = GithubAuthProvider.credentialFromResult(result);
          if (credential) {
            // This gives you a GitHub Access Token. You can use it to access the GitHub 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;
          // The email of the user's account used.
          const email = error.email;
          // The AuthCredential type that was used.
          const credential = GithubAuthProvider.credentialFromError(error);
          // ...
        });
      Di sini juga Anda dapat menemukan dan menangani error. Untuk mengetahui daftar kode error, lihat Dokumentasi Referensi Auth.

Menangani alur login secara manual

Anda juga bisa melakukan autentikasi dengan Firebase menggunakan akun GitHub. Caranya, tangani alur login dengan memanggil endpoint OAuth 2.0 GitHub:

  1. Integrasikan autentikasi GitHub ke dalam aplikasi dengan mengikuti dokumentasi developer. Pada akhir alur login GitHub, Anda akan menerima token akses OAuth 2.0.
  2. Jika perlu login di aplikasi Node.js, kirim token akses OAuth ke aplikasi Node.js.
  3. Setelah pengguna berhasil login dengan GitHub, tukar token akses OAuth 2.0 dengan kredensial Firebase:

    Web v8

    var credential = firebase.auth.GithubAuthProvider.credential(token);

    Web v9

    import { GithubAuthProvider } from "firebase/auth";
    
    const credential = GithubAuthProvider.credential(token);
  4. Lakukan autentikasi dengan Firebase menggunakan kredensial Firebase:

    Web v8

    // Sign in with the credential from the user.
    firebase.auth()
      .signInWithCredential(credential)
      .then((result) => {
        // Signed in
        // ...
      })
      .catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        // The email of the user's account used.
        const email = error.email;
        // ...
      });

    Web v9

    import { getAuth, signInWithCredential } from "firebase/auth";
    
    // Sign in with the credential from the user.
    const auth = getAuth();
    signInWithCredential(auth, credential)
      .then((result) => {
        // Signed in
        // ...
      })
      .catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        // The email of the user's account used.
        const email = error.email;
        // ...
      });

Melakukan autentikasi dengan Firebase di ekstensi Chrome

Jika mem-build aplikasi ekstensi Chrome, Anda harus menambahkan ID ekstensi Chrome:

  1. Buka project Anda di Firebase console.
  2. Di bagian Authentication, buka halaman Metode login.
  3. Tambahkan URI seperti berikut ke daftar Domain yang Diotorisasi:
    chrome-extension://CHROME_EXTENSION_ID

Hanya operasi pop-up (signInWithPopup dan linkWithPopup) yang tersedia untuk ekstensi Chrome, karena ekstensi Chrome tidak dapat menggunakan pengalihan HTTP. Anda harus memanggil metode ini dari skrip latar belakang, bukan dari pop-up tindakan browser, karena pop-up autentikasi akan membatalkan pop-up tindakan browser.

Di file manifes ekstensi Chrome, pastikan Anda menambahkan URL https://apis.google.com ke daftar yang diizinkan content_security_policy.

Langkah berikutnya

Setelah pengguna login untuk pertama kalinya, akun pengguna baru akan dibuat dan ditautkan ke kredensial tersebut, yaitu nama pengguna dan sandi, nomor telepon, atau informasi penyedia autentikasi, yang digunakan pengguna tersebut untuk login. Akun baru ini disimpan sebagai bagian dari project Firebase Anda, dan dapat digunakan untuk mengidentifikasi pengguna di setiap aplikasi dalam project, terlepas dari cara pengguna login.

  • Di aplikasi Anda, cara yang direkomendasikan untuk mengetahui status autentikasi pengguna adalah dengan menyetel observer pada objek Auth. Selanjutnya, Anda bisa mendapatkan informasi profil dasar pengguna dari objek User. Baca bagian Mengelola Pengguna.

  • Di Aturan Keamanan Firebase Realtime Database dan Cloud Storage, Anda bisa mendapatkan ID pengguna unik untuk pengguna yang login dari variabel auth, dan menggunakannya untuk mengontrol data apa saja yang dapat diakses oleh pengguna.

Anda dapat mengizinkan pengguna untuk login ke aplikasi menggunakan beberapa penyedia autentikasi dengan menautkan kredensial penyedia autentikasi ke akun pengguna yang ada.

Untuk membuat pengguna logout, panggil signOut:

Web v8

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web v9

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});