پیاده‌ سازی احراز هویت گوگل در Node.js

در این آموزش قصد داریم نحوه پیاده سازی سیستم احراز هویت لاگین گوگل در node.js با استفاده از passport js را آموزش دهیم.

مرحله 1: نصب کتابخانه ها
مرحله 2: قرار دادن مسیرها در app.js
مرحله 3: ایجاد نما
مرحله 4: را راه اندازی سرور

قبل از شروع آموزش باید api خود در حساب گوگل ایجاد کنیم برای این کار به این لینک مراجعه کنید و اقدامات زیر را اجرا کنید:

1 از منوی کشویی پروژه، یک پروژه موجود را انتخاب کنید یا با انتخاب ایجاد یک پروژه جدید، یک پروژه جدید ایجاد کنید.
2 در نوار کناری زیر <<APIs & Services>> را انتخاب کنید
3 در تب Credentials لیست کشویی Create credentials را انتخاب و شناسه مشتری OAuth را انتخاب کنید.
4 در قسمت Web application>> Application type>> را انتخاب کنید.
5 در قسمت URI تغییر مسیر مجاز از http://127.0.0.1:3000/auth/google/callback استفاده کنید.
6 دکمه Create را فشار دهید و شناسه مشتری و راز مشتری ایجاد شده را کپی کنید.

مرحله اول نصب کتابخانه ها

در این مرحله برای ایجاد دایرکتوری دستور زیر را در ترمینال اجرا کنید:

mkdir google_auth

پس از باز کردن دایرکتوری google_auth با هر ویرایشگر متنی، cmd خود را باز کنید و دستور زیر را اجرا کنید:

cd google_auth

اکنون برای نصب express ،ejs ،express-session و passport دستور زیر را در ترمینال اجرا کنید:

npm init -y
 
npm install express ejs express-session passport passport-google-oauth --save

مرحله دوم قرار دادن مسیرها در app.js

در این مرحله باید یک فایل app.js در پوشه اصلی اپلیکیشن خود ایجاد کنید و کد زیر را اضافه کنید:

// app.js
 
/*  EXPRESS */
 
const express = require('express');
const app = express();
const session = require('express-session');
const GOOGLE_CLIENT_ID = ' '; //Client ID const 
const GOOGLE_CLIENT_SECRET = ' '; //Client secret
app.set('view engine', 'ejs');
 
app.use(session({
  resave: false,
  saveUninitialized: true,
  secret: 'SECRET'
}));
 
app.get('/', function(req, res) {
  res.render('pages/auth/login');
});
 
const port = process.env.PORT || 3000;
app.listen(port , () => console.log('App listening on port ' + port));

کد بالا وب سرور ما را راه اندازی می کند.

در کد بالا دو متغیر وجود دارد به نام های GOOGLE_CLIENT_ID و GOOGLE_CLIENT_SECRET. مقادیر این دو متغیر را باید با توکن هایی که در زمان ساخت API دریافت کردید، پر کنید.

اکنون کد مربوط به پاسپورت را در پایین فایل app.js اضافه کنید:

var userProfile;

app.use(passport.initialize());
app.use(passport.session());

app.get('/success', (req, res) => {
    res.render("pages/auth/success",{user:userProfile})
});
app.get('/error', (req, res) => res.send("error logging in"));

passport.serializeUser(function (user, cb) {
    cb(null, user);
});

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

برای پیاده سازی Google Authentication در برنامه، کد زیر را در ادامه فایل app.js خود اضافه کنید

// app.js
 
/*  Google AUTH  */
  
passport.use(new GoogleStrategy({
    clientID: GOOGLE_CLIENT_ID,
    clientSecret: GOOGLE_CLIENT_SECRET,
    callbackURL: "http://localhost:3000/auth/google/callback"
  },
  function(accessToken, refreshToken, profile, done) {
      userProfile=profile;
      return done(null, userProfile);
  }
));
  
app.get('/auth/google', 
  passport.authenticate('google', { scope : ['profile', 'email'] }));
  
app.get('/auth/google/callback', 
  passport.authenticate('google', { failureRedirect: '/error' }),
  function(req, res) {
    // Successful authentication, redirect success.
    res.redirect('/success');
  });

کد نهایی فایل app.js به صورت زیر است:

const express = require('express');
const app = express();
const session = require('express-session');
const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth').OAuth2Strategy;
const GOOGLE_CLIENT_ID = '';
const GOOGLE_CLIENT_SECRET = '';

app.set('view engine', 'ejs');

app.use(session({
    resave: false,
    saveUninitialized: true,
    secret: 'SECRET'
}));

app.get('/', function (req, res) {
    res.render('pages/auth/login');
});


var userProfile;

app.use(passport.initialize());
app.use(passport.session());

app.get('/success', (req, res) => {
    res.render("pages/auth/success",{user:userProfile})
});
app.get('/error', (req, res) => res.send("error logging in"));

passport.serializeUser(function (user, cb) {
    cb(null, user);
});

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

passport.use(new GoogleStrategy({
    clientID: GOOGLE_CLIENT_ID,
    clientSecret: GOOGLE_CLIENT_SECRET,
    callbackURL: "http://127.0.0.1:3000/auth/google/callback"
},
    function (accessToken, refreshToken, profile, done) {
        userProfile = profile;
        return done(null, userProfile);
    }
));

app.get('/auth/google',
    passport.authenticate('google', { scope: ['profile', 'email'] }));

app.get('/auth/google/callback',
    passport.authenticate('google', { failureRedirect: '/error' }),
    function (req, res) {
        // Successful authentication, redirect success.
        res.redirect('/success');
    });

const port = process.env.PORT || 3000;
app.listen(port, () => console.log('App listening on port ' + port));

مرحله 3: ایجاد نما

در این مرحله باید یک پوشه به نام views ایجاد کنید و در آن یک پوشه به نام pages و در داخل یک پوشه به نام auth ایجاد کنید.

در پوشه auth دو فایل به نام های زیر ایجاد کنید:

1 login.ejs
2 success.ejs

برای فایل login.ejs دستورات زیر را وارد کنید.

این فایل login.ejs حاوی فرم ورود است.

<!doctype html>
<html>
<head>
    <title>Google SignIn</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body        { padding-top:70px; }
    </style>
</head>
<body>
<div class="container">
    <div class="jumbotron text-center text-primary">
        <h1><span class="fa fa-lock"></span> Social Authentication</h1>
        <p>Login or Register with:</p>
        <a href="/auth/google" class="btn btn-danger"><span class="fa fa-google"></span> SignIn with Google</a>
    </div>
</div>
</body>
</html>

سپس فایل success.ejs خود را باز کرده و کد زیر را در فایل خود کپی کنید:

<!doctype html>
<html>
  <head>
    <title>Google SignIn</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <!-- load bootstrap css -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- load fontawesome -->
      <style>
          body        { padding-top:70px; }
      </style>
  </head>
  <body>
    <div class="container">
      <div class="jumbotron">
          <h1 class="text-primary  text-center"><span class="fa fa-user"></span> Profile Information</h1>
          <div class="row">
            <div class="col-sm-6">
                <div class="well">
                        <p>
                            <strong>Id</strong>: <%= user.id %><br>
                            <strong>Email</strong>: <%= user.emails[0].value %><br>
                            <strong>Name</strong>: <%= user.displayName %>
                        </p>
                </div>
            </div>
        </div>
      </div>
    </div>
  </body>
</html>