Implementasi Login Facebook Menggunakan NodeJs Dan Express

Login Facebook banyak digunakan sebagai modul otentikasi untuk situs web. Kami menyarankan Anda menggunakan detail pengguna yang diverifikasi sebagai gantinya untuk meminta dan kemudian memverifikasi detail manual pengguna seperti email dan kata sandi.

Pada artikel ini, kita akan menggunakan Nodejs dan ExpressJS untuk mempelajari dan mengimplementasikan sistem login Facebook. Anda dapat mengunduh kode dengan mengklik tombol di bawah ini.

Membuat aplikasi Facebook:

Hal pertama yang Anda perlukan adalah AppID dan AppSecret aplikasi Facebook Anda. Buka Developers Facebook dan buat aplikasi Anda.

Saat diminta, pilih situs web Anda sebagai platform Anda. Anda dapat mengosongkan field namespace jika Anda memberinya nama yang tepat.

Jika Anda meminta tangkapan dan memasukkannya dengan hati-hati, Anda akan diarahkan ke halaman aplikasi. Anda dapat melihat App Secret dengan mengautentikasi akun Facebook Anda lagi. Lalu buka Pengaturan dan tambahkan web sebagai platform.

Jika Anda menguji aplikasi Anda di lingkungan yang dihosting lokal, tambahkan localhost: 3000 sebagai alamat situs Anda.

Aplikasi telah disiapkan. Mari kita lanjutkan dan gunakan Node untuk membuat aplikasi.

Konfigurasi aplikasi node:

Buka configuration/config.js di direktori sumber dan perbarui Facebook AppID dan AppSecret Anda. Jika Anda menggunakan database untuk menyimpan dan memvalidasi informasi pengguna, Anda dapat menyetel bidang konfigurasi ke true atau false. Untuk mengetahui tentang desain database aplikasi Anda, kunjungi artikel login Twitter menggunakan node.

configuration/config.js

module.exports={
  "facebook_api_key"      :     "FB APP ID",
  "facebook_api_secret"   :     "FB API SECRET",
  "callback_url"          :     "http://localhost:3000/auth/facebook/callback",
  "use_database"          :      false,
  "host"                  :     "localhost",
  "username"              :     "root",
  "password"              :     "",
  "database"              :     "Database Name"
}

Perbarui kode dengan informasi aplikasi Facebook.

Route aplikasi kami:

Routes	Action
/auth/facebook	Authenticate User with Facebook
/auth/facebook/callback	Get the user information from if login successfully
/logout	Logging out from App.

konfigurasi Passport

Saya menggunakan paket Passport node untuk OAuth authentication. Anda perlu mengatur beberapa parameter. Berikut adalah kode konfigurasi Passport.

app.js

/*config is our configuration variable.*/
passport.use(new FacebookStrategy({
    clientID: config.facebook_api_key,
    clientSecret:config.facebook_api_secret ,
    callbackURL: config.callback_url
  },
  function(accessToken, refreshToken, profile, done) {
    process.nextTick(function () {
      //Check whether the User exists or not using profile.id
      if(config.use_database) {
         //Further code of Database.
      }
      return done(null, profile);
    });
  }
));

Kode server lengkap:

Ini adalah app.js dengan route lengkap dan kode Passport.

app.js

const express         =     require('express')
  , passport          =     require('passport')
  , FacebookStrategy  =     require('passport-facebook').Strategy
  , session           =     require('express-session')
  , cookieParser      =     require('cookie-parser')
  , bodyParser        =     require('body-parser')
  , config            =     require('./configuration/config')
  , mysql             =     require('mysql')
  , app               =     express();

//Define MySQL parameter in Config.js file.
const pool = mysql.createPool({
  host     : config.host,
  user     : config.username,
  password : config.password,
  database : config.database
});

// Passport session setup.
passport.serializeUser(function(user, done) {
  done(null, user);
});

passport.deserializeUser(function(obj, done) {
  done(null, obj);
});


// Use the FacebookStrategy within Passport.

passport.use(new FacebookStrategy({
    clientID: config.facebook_api_key,
    clientSecret:config.facebook_api_secret ,
    callbackURL: config.callback_url
  },
  function(accessToken, refreshToken, profile, done) {
    process.nextTick(function () {
      //Check whether the User exists or not using profile.id
      if(config.use_database) {
        // if sets to true
        pool.query("SELECT * from user_info where user_id="+profile.id, (err,rows) => {
          if(err) throw err;
          if(rows && rows.length === 0) {
              console.log("There is no such user, adding now");
              pool.query("INSERT into user_info(user_id,user_name) VALUES('"+profile.id+"','"+profile.username+"')");
          } else {
              console.log("User already exists in database");
          }
        });
      }
      return done(null, profile);
    });
  }
));


app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(cookieParser());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(session({ secret: 'keyboard cat', key: 'sid'}));
app.use(passport.initialize());
app.use(passport.session());
app.use(express.static(__dirname + '/public'));

app.get('/', function(req, res){
  res.render('index', { user: req.user });
});

app.get('/account', ensureAuthenticated, function(req, res){
  res.render('account', { user: req.user });
});

app.get('/auth/facebook', passport.authenticate('facebook',{scope:'email'}));


app.get('/auth/facebook/callback',
  passport.authenticate('facebook', { successRedirect : '/', failureRedirect: '/login' }),
  function(req, res) {
    res.redirect('/');
  });

app.get('/logout', function(req, res){
  req.logout();
  res.redirect('/');
});


function ensureAuthenticated(req, res, next) {
  if (req.isAuthenticated()) { return next(); }
  res.redirect('/login')
}

app.listen(3000);

Lihat desain:

index.ejs

<% if (!user) { %>
  <div style="width:500px;height:180px;">
    <h2 style="font-size:40px;">Welcome! Please log in.</h2>
    <a href="/auth/facebook"><img src="fb-login.jpg" width="151" height="24"></a>
    </div>
<% } else { %>
    <h2>Hello, <%= user.displayName %>.</h2>
<% } %>

Setelah pengguna masuk, itu hanya menampilkan nilai yang dikembalikan oleh Facebook. ini dia.

<p>ID: <%= user.id %></p>
<p>Name :<%= user.displayName %></p>

Jalankan aplikasi:

Unduh kode dan perbarui config.js dengan informasi di aplikasi Facebook. Lalu lari

npm install

Untuk menginstal dependensi dan kemudian gunakan untuk menjalankan aplikasi

node app.js

Untuk melihat aplikasi, buka localhost:3000.

Masuk menggunakan akun Facebook Anda dan berikan izin aplikasi. Jika otentikasi berhasil, Anda akan diarahkan ke URL panggilan balik yang ditentukan.

Kesimpulan

Anda telah mempelajari cara menggunakan dan menerapkan sistem login Facebook menggunakan modul Passport. Sebelumnya, diungkapkan untuk mengembangkan server web dan MySQL untuk menyimpan informasi pengguna.

sumber : https://codeforgeek.com/facebook-login-using-nodejs-express/