Buka konsol

Melakukan Autentikasi Menggunakan GitHub dengan JavaScript

Anda dapat mengizinkan pengguna untuk melakukan autentikasi dengan Firebase menggunakan akun GitHub mereka. Hal tersebut dapat dilakukan dengan mengintegrasikan autentikasi GitHub ke dalam aplikasi. Anda dapat mengintegrasikan autentikasi GitHub menggunakan Firebase SDK untuk menjalankan alur login atau dengan menjalankan alur autentikasi GitHub secara manual dan meneruskan token akses yang dihasilkan ke Firebase.

Sebelum memulai

  1. Tambahkan Firebase ke project JavaScript Anda.
  2. Daftarkan aplikasi Anda sebagai aplikasi developer di GitHub, lalu dapatkan ID Klien dan Rahasia Klien OAuth 2.0 untuk aplikasi Anda.
  3. Aktifkan autentikasi GitHub:
    1. Di Firebase console, buka bagian Auth.
    2. Pada tab Metode login, aktifkan metode login GitHub serta tentukan Client ID dan Client Secret OAuth 2.0 yang didapat dari GitHub.
    3. Selanjutnya, pastikan URI pengalihan OAuth Firebase Anda (misalnya, my-app-12345.firebaseapp.com/__/auth/handler) sudah ditetapkan sebagai URL callback otorisasi di halaman setelan aplikasi pada konfigurasi aplikasi GitHub.

Memproses alur login dengan Firebase SDK

Jika Anda sedang membuat aplikasi web, cara termudah untuk mengautentikasi pengguna dengan Firebase menggunakan Akun GirHub mereka adalah dengan memproses alur login menggunakan Firebase JavaScript SDK. (Jika ingin mengautentikasi pengguna dalam Node.js atau lingkungan non-browser lain, Anda harus memproses alur login secara manual.)

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

  1. Buat instance objek penyedia GitHub:
    var provider = new firebase.auth.GithubAuthProvider();
  2. Opsional: Tentukan cakupan OAuth 2.0 tambahan yang ingin Anda minta dari penyedia autentikasi. Untuk menambahkan cakupan, panggil addScope. Misalnya:
    provider.addScope('repo');
    Lihat dokumentasi penyedia autentikasi.
  3. Opsional: Tentukan parameter penyedia OAuth kustom tambahan yang ingin Anda kirim dengan permintaan OAuth. Untuk menambahkan parameter kustom, panggil setCustomParameters di penyedia yang telah diinisialisasi dengan objek yang berisi kunci, seperti yang ditentukan dalam dokumentasi penyedia OAuth dan nilai yang terkait. Misalnya:
    provider.setCustomParameters({
      'allow_signup': 'false'
    });
    
    Parameter OAuth yang mengharuskan cadangan tidak boleh digunakan dan akan diabaikan. Lihat referensi penyedia autentikasi untuk mengetahui detail lebih lanjut.
  4. Autentikasi Firebase menggunakan objek penyedia GitHub. Anda bisa meminta pengguna untuk login dengan akun GitHub mereka, baik dengan membuka jendela pop-up atau dengan mengalihkan ke halaman login. Untuk perangkat seluler, sebaiknya menggunakan metode pengalihan.
    • Untuk login dengan jendela pop-up, panggil signInWithPopup:
      firebase.auth().signInWithPopup(provider).then(function(result) {
        // This gives you a GitHub Access Token. You can use it to access the GitHub 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;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        // ...
      });
      Perhatikan juga bahwa Anda bisa mengambil token OAuth penyedia GitHub yang bisa digunakan untuk mengambil data tambahan menggunakan GitHub API.

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

    • Untuk login dengan mengalihkan ke halaman login, panggil signInWithRedirect:
      firebase.auth().signInWithRedirect(provider);
      Kemudian, Anda juga dapat mengambil token OAuth penyedia GitHub dengan memanggil getRedirectResult saat halaman memuat:
      firebase.auth().getRedirectResult().then(function(result) {
        if (result.credential) {
          // This gives you a GitHub Access Token. You can use it to access the GitHub 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;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        // ...
      });
      Di sini Anda juga dapat menemukan dan menangani error. Untuk mengetahui daftar kode error, lihat Dokumen Referensi Auth.

Menangani alur proses masuk secara manual

Anda juga bisa melakukan autentikasi dengan Firebase menggunakan akun GitHub dengan memproses alur login dengan memanggil endpoint GitHub OAuth 2.0:

  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 Anda 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:
    var credential = firebase.auth.GithubAuthProvider.credential(token);
    
  4. Autentikasi dengan Firebase menggunakan kredensial Firebase:
    firebase.auth().signInWithCredential(credential).catch(function(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;
      // ...
    });

Melakukan Autentikasi dengan Firebase di ekstensi Chrome

Jika Anda membuat aplikasi ekstensi Chrome, Anda harus memberi akses untuk 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 background, bukan dari pop-up tindakan browser karena pop-up autentikasi akan membatalkan pop-up tindakan browser.

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

Langkah berikutnya

Setelah pengguna login untuk pertama kalinya, akun pengguna baru akan dibuat dan dihubungkan ke kredensial, 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 Anda, 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 dapat memperoleh informasi profil dasar pengguna dari objek User. Lihat Mengelola Pengguna.

  • Dalam Aturan Keamanan Firebase Realtime Database dan Cloud Storage, Anda dapat memperoleh ID unik milik pengguna yang login dari variabel auth dan menggunakannya untuk mengontrol data yang dapat diakses pengguna.

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

Agar pengguna logout, panggil signOut:

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