OAuth 2.0 adalah standar yang memungkinkan aplikasi pihak ketiga mengakses data dari aplikasi web dengan aman. Anda dapat menggunakannya untuk mengambil data termasuk informasi profil, jadwal, dll. yang dihosting di aplikasi web lain seperti Facebook, Google, dan GitHub. Layanan dapat melakukan ini atas nama pengguna tanpa memaparkan kredensial mereka ke aplikasi pihak ketiga.

Pelajari cara menerapkan OAuth di aplikasi Express menggunakan GitHub sebagai penyedia OAuth dalam beberapa langkah.

Alur OAuth

Dalam alur OAuth biasa, situs Anda menyediakan opsi bagi pengguna untuk masuk dengan akun pihak ketiga mereka dari penyedia seperti GitHub atau Facebook. Seorang pengguna dapat memulai proses ini dengan mengklik tombol login OAuth yang relevan.

Tindakan ini akan mengalihkan mereka dari aplikasi Anda ke situs web penyedia OAuth dan memberikan formulir persetujuan kepada mereka. Formulir persetujuan berisi semua informasi yang ingin Anda akses dari pengguna, yang bisa berupa email, gambar, jadwal, dll.

instagram viewer

Jika pengguna mengotorisasi aplikasi Anda, pihak ketiga akan mengarahkan mereka kembali ke aplikasi Anda dengan kode. Aplikasi Anda kemudian dapat menukar kode yang diterima dengan token akses yang kemudian dapat digunakan untuk mengakses data pengguna yang tersedia.

Menerapkan alur ini dalam aplikasi Express melibatkan beberapa langkah.

Langkah 1: Menyiapkan Lingkungan Pengembangan

Pertama, buat direktori proyek kosong dan CD ke dalam direktori yang dibuat.

Sebagai contoh:

mkdir github-app
CD aplikasi github

Selanjutnya, inisialisasi npm di proyek Anda dengan menjalankan:

npm init -y

Perintah ini membuat package.json file yang berisi detail tentang proyek Anda seperti nama, versi, dll.

Tutorial ini akan menampilkan penggunaan sistem modul ES6. Siapkan ini dengan membuka package.json file dan menentukan "ketik": "modul" di objek JSON.

Langkah 2: Memasang Dependensi

Anda harus menginstal beberapa dependensi agar server Anda berfungsi dengan baik:

  • ExpressJS: ExpressJS adalah kerangka kerja NodeJS yang menyediakan serangkaian fitur yang kuat untuk aplikasi web dan seluler. Menggunakan Express akan menyederhanakan proses pembuatan server Anda.
  • Axios: Axios adalah klien HTTP berbasis janji. Anda akan memerlukan paket ini untuk membuat permintaan POST untuk token akses ke GitHub.
  • dotenv: dotenv adalah paket yang memuat variabel lingkungan dari file .env ke objek process.env. Anda akan membutuhkannya untuk menyembunyikan informasi penting tentang aplikasi Anda.

Instal dengan menjalankan:

npm Install ekspresikan aksio dotenv

Langkah 3: Membuat Aplikasi Ekspres

Kamu butuh buat server Express dasar untuk menangani dan membuat permintaan ke penyedia OAuth.

Pertama, buat index.js file di direktori root proyek Anda yang berisi berikut ini:

// indeks.js
impor cepat dari "cepat";
impor aksio dari "sumbu";
impor * sebagai dotenv dari "dotenv";
dotenv.config();
konstan aplikasi = ekspres();
konstan port = proses.env. PELABUHAN || 3000
app.listen (port, () => {
menghibur.catatan(`Aplikasi berjalan di port ${pelabuhan}`);
});

Kode ini mengimpor perpustakaan ekspres, membuat instance ekspres, dan mulai mendengarkan lalu lintas di port 3000.

Langkah 4: Membuat Route Handler

Anda harus membuat dua pengendali rute untuk menangani alur OAuth. Yang pertama mengarahkan pengguna ke GitHub dan meminta otorisasi. Yang kedua menangani pengalihan kembali ke aplikasi Anda dan membuat permintaan untuk token akses saat pengguna mengotorisasi aplikasi Anda.

Handler rute pertama harus mengarahkan pengguna ke https://github.com/login/oauth/authorize? parameter.

Anda harus meneruskan serangkaian parameter yang diperlukan ke URL OAuth GitHub, yang meliputi:

  • ID Klien: Ini mengacu pada ID yang diterima aplikasi OAuth Anda saat terdaftar di GitHub.
  • Cakupan: Ini mengacu pada string yang menentukan jumlah akses yang dimiliki aplikasi OAuth ke informasi pengguna. Anda dapat menemukan daftar cakupan yang tersedia di Dokumentasi OAuth GitHub. Di sini Anda akan menggunakan "baca: pengguna” scope, yang memberikan akses untuk membaca data profil pengguna.

Tambahkan kode berikut ke Anda index.js mengajukan:

// indeks.js
aplikasi.get("/auth", (permintaan, res) => {
// Simpan parameter dalam sebuah objek
konstan parameter = {
 cakupan: "baca: pengguna",
client_id: proses.env.CLIENT_ID,
 };
// Konversi parameter ke string yang disandikan URL
konstan urlEncodedParams = baru URLSearchParams (params).toString();
 res.redirect(` https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});

Kode ini mengimplementasikan penangan rute pertama. Ini menyimpan parameter yang diperlukan dalam suatu objek, mengubahnya menjadi format yang disandikan URL menggunakan API URLSearchParams. Kemudian menambahkan parameter ini ke URL OAuth GitHub dan mengarahkan pengguna ke halaman persetujuan GitHub.

Tambahkan kode berikut ke Anda index.js file untuk penangan rute kedua:

// indeks.js
aplikasi.get("/github-callback", (permintaan, res) => {
konstan { kode } = req.query;
konstan tubuh = {
client_id: proses.env.CLIENT_ID,
rahasia_klien: proses.env.CLIENT_SECRET,
 kode,
 };


membiarkan aksesToken;
 const options = { header: { terima: "aplikasi/json" } };
aksio
 .pos("https://github.com/login/oauth/access_token", isi, opsi)
 .kemudian((jawaban) => response.data.access_token)
 .kemudian((token) => {
 accessToken = tanda;
 res.redirect(`/?token=${token}`);
 })
 .menangkap((err) => res.status(500).json({ err: err.pesan }));
});

Handler rute kedua akan mengekstrak kode dikembalikan dari GitHub di req.query obyek. Itu kemudian membuat POST permintaan menggunakan aksio ke " https://github.com/login/oauth/access_token" dengan kode, client_id, dan rahasia_klien.

Itu rahasia_klien adalah string pribadi yang akan Anda buat saat membuat aplikasi GitHub OAuth. Ketika akses_token berhasil diambil, itu disimpan ke variabel untuk digunakan nanti. Pengguna akhirnya diarahkan ke aplikasi Anda dengan akses_token.

Langkah 5: Membuat Aplikasi GitHub

Selanjutnya, Anda harus membuat aplikasi OAuth di GitHub.

Pertama, masuk ke akun GitHub Anda, lalu buka Pengaturan, gulir ke bawah ke Pengaturan pengembang, dan pilih Aplikasi OAuth. Terakhir, klik “Daftarkan aplikasi baru.”

GitHub akan memberi Anda formulir aplikasi OAuth baru seperti ini:

Isi bidang yang diperlukan dengan detail yang Anda inginkan. "URL beranda" seharusnya " http://localhost: 3000”. Milikmu "URL panggilan balik otorisasi" seharusnya " http://localhost: 3000/github-panggilan balik”. Anda juga dapat secara opsional mengaktifkan aliran perangkat, memungkinkan Anda memberi otorisasi kepada pengguna untuk aplikasi tanpa kepala, seperti alat CLI atau manajer kredensial Git.

Alur perangkat dalam versi beta publik dan dapat berubah.

Akhirnya, tekan Pendaftaran aplikasi tombol.

GitHub akan mengarahkan Anda ke halaman dengan client_id dan opsi untuk menghasilkan rahasia_klien. Salin Anda client_id, hasilkan rahasia_klien, dan salin juga.

Buat file .env dan simpan client_id dan rahasia_klien di dalamnya. Beri nama variabel ini masing-masing CLIENT_ID dan CLIENT_SECRET.

Alur OAuth Anda sekarang selesai, dan Anda sekarang dapat membuat permintaan dengan token akses untuk membaca data pengguna ( cakupan Anda tentukan sebelumnya).

Pentingnya OAuth 2.0

Menggunakan OAuth 2.0 dalam aplikasi Anda sangat menyederhanakan tugas penerapan alur autentikasi. Ini mengamankan data pengguna pelanggan Anda menggunakan standar Secure Sockets Layer (SSL), memastikan bahwa mereka tetap pribadi.