Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Node.js

Otentikasi Sosial untuk Aplikasi Node.js dengan Passport

by
Read Time:7 minsLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Otentikasi Sosial untuk Aplikasi Node.js dengan PasporSudah merupakan fakta yang mapan bahwa kata sandi pada dasarnya lemah di alamnya. Dengan demikian meminta pengguna akhir untuk membuat kata sandi yang kuat untuk setiap aplikasi yang mereka gunakan hanya membuat keadaan menjadi lebih buruk.

Solusi mudah adalah membiarkan pengguna mengotentikasi melalui akun sosial mereka yang sudah ada seperti Facebook, Twitter, Google, dll. Dalam artikel ini, kita akan melakukan hal itu dan menambahkan kemampuan login sosial ini ke aplikasi Node sampel yang dikembangkan di bagian pertama dari seri otentikasi ini, sehingga kita akan dapat mengotentikasi melalui akun Facebook dan Twitter kita menggunakan middleware Passport.

Jika Anda belum memeriksa artikel sebelumnya, saya sarankan Anda melewatinya, karena kita akan membangun di atas fondasi yang diletakkan oleh artikel itu dan menambahkan strategi, rute, dan view baru ke dalamnya.

Login Sosial

Untuk yang tidak tahu, login sosial adalah jenis Single Sign-on menggunakan informasi yang ada dari situs jejaring sosial seperti Facebook, Twitter, dll, di mana pengguna biasanya diharapkan memiliki akun yang sudah dibuat.

Login sosial kebanyakan bergantung pada skema otentikasi seperti OAuth 2.0. Untuk mempelajari lebih lanjut tentang arus login yang berbeda yang didukung oleh OAuth, baca artikel ini. Kami memilih Passport untuk menangani info login sosial bagi kita, karena ia menyediakan berbagai modul untuk berbagai penyedia OAuth, baik itu Facebook, Twitter, Google, GitHub, dll. Dalam artikel ini kita akan menggunakan modul passport-facebook dan passport-twitter untuk menyediakan fungsionalitas login melalui akun Facebook atau Twitter yang ada.

Otentikasi Facebook

Untuk mengaktifkan otentikasi Facebook, pertama-tama kita perlu membuat Facebook App menggunakan Portal Pengembang Facebook. Catat App ID dan App Secret, dan tentukan URL callback dengan pergi ke Settings dan menentukan Site URL di bagian Website untuk aplikasi tersebut. Juga pastikan untuk memasukkan alamat email yang valid untuk field Contact Email. Ini diperlukan agar aplikasi menjadi publik dan dapat diakses oleh publik.

Selanjutnya, buka bagian Status & Review dan ubah slider ke Yes untuk menjadikan aplikasi publik. Kita membuat file konfigurasi, fb.js, untuk menyimpan informasi konfigurasi ini yang akan diperlukan untuk terhubung ke Facebook.

Strategi Login Facebook

Kembali dalam aplikasi Node kita, kita sekarang mendefinisikan Passport Strategy untuk mengotentikasi dengan Facebook menggunakan modul FacebookStrategy, memanfaatkan pengaturan di atas untuk mengambil profil Facebook pengguna dan menampilkan rincian dalam view.

Mengkonfigurasi Rute

Sekarang kita perlu menambahkan rute tertentu untuk mengaktifkan login dengan Facebook dan untuk menangani callback setelah pengguna mengotorisasi aplikasi untuk menggunakan akun Facebook-nya.

Halaman login untuk aplikasi demo kita terlihat seperti ini:

Login With Facebook or TwitterLogin With Facebook or TwitterLogin With Facebook or Twitter

Ketika Anda mengklik tombol Login with Facebook, itu akan mencoba untuk mengotentikasi dengan Facebook. Jika Anda sudah login ke Facebook maka akan muncul dialog di bawah ini yang meminta izin Anda, atau jika tidak, Anda akan diminta login ke Facebook dan kemudian menampilkan dialog ini.

Facebook Auth - Grant PermissionsFacebook Auth - Grant PermissionsFacebook Auth - Grant Permissions

Facebook Auth - Izin PemberianJika Anda mengizinkan aplikasi untuk menerima profil publik dan alamat email Anda, maka fungsi callback terdaftar kita akan dipanggil dengan rincian pengguna. Kita dapat menyimpan ini untuk referensi di masa mendatang atau menampilkannya atau hanya memilih untuk mengabaikannya, tergantung pada apa yang ingin Anda lakukan dengan informasi tersebut. Jangan ragu untuk melompat ke masa depan dan periksa seluruh kode di repo git ini.

Akan lebih baik untuk dicatat bahwa selain dari informasi dasar yang disediakan oleh aplikasi demo ini, Anda dapat menggunakan mekanisme otentikasi yang sama untuk mengekstrak informasi yang lebih berguna tentang pengguna, seperti daftar teman-temannya, dengan menggunakan cakupan yang sesuai dan menggunakan API Facebook dengan token akses yag diterima dengan profil pengguna.

Otentikasi Twitter

Modul otentikasi yang sama perlu disambungkan untuk menangani otentikasi melalui Twitter, dan chip Passport untuk membantu dengan modul passport-twitter-nya.

Pertama, Anda perlu membuat Twitter App baru menggunakan antarmuka Application Management. Satu hal yang perlu diperhatikan di sini adalah bahwa ketika menentukan URL callback, Twitter tampaknya tidak berfungsi dengan baik jika "localhost" diberikan di field URL callback. Untuk mengatasi keterbatasan ini sambil mengembangkan, Anda bisa menggunakan alamat loopback khusus atau "127.0.0.1" sebagai pengganti "localhost". Setelah membuat aplikasi, catat kunci API dan informasi rahasia berikut dalam file konfigurasi sebagai berikut:

Strategi Login Twitter

Strategi login untuk Twitter adalah instance dari TwitterStrategy dan terlihat seperti ini:

Mengkonfigurasi Rute

Sekarang untuk menguji ini, pastikan untuk menggunakan http://127.0.0.1:<port> bukannya http://localhost:<port>. Seperti yang telah kami sebutkan di atas, tampaknya ada masalah saat bertukar token dengan Twitter dengan "localhost" sebagai nama host. Saat mengklik tombol Login with Twitter, seperti yang diharapkan, itu meminta persetujuan pengguna untuk mengizinkan aplikasi ini menggunakan Twitter.

Twitter Auth - Grant PermissionsTwitter Auth - Grant PermissionsTwitter Auth - Grant Permissions

Otentikasi Twitter - Izin PemberianKetika Anda mengizinkan aplikasi untuk mengakses akun Twitter dan informasi terbatas Anda, handler callback yang terdaftar dalam strategi login dipanggil, yang kemudian digunakan untuk menyimpan rincian ini dalam database back-end

Kesimpulan

Dan di sana Anda memilikinya !! Kita berhasil menambahkan login Facebook dan Twitter ke aplikasi contoh kita tanpa menulis banyak kode dan menangani seluk-beluk yang terlibat dengan mekanisme otentikasi dengan membiarkan Passport melakukan pekerjaan beratnya. Strategi login serupa dapat ditulis untuk berbagai penyedia yang didukung Passport. Kode untuk seluruh aplikasi dapat ditemukan di repositori git ini. Jangan ragu untuk memperpanjang dan menggunakannya dalam proyek Anda sendiri.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.