SMS-ellenőrzés Nexmo segítségével a Node.js-ben

Bevezetés

A hitelesítés alapvető követelmény a teljes verem alkalmazáshoz. Lehetővé teszi a felhasználóknak és a folyamatoknak az erőforrásokhoz való hozzáférést személyazonosságuk ellenőrzésével. A jelszavas hitelesítés mellett további biztonsági intézkedések megtétele érdekében sms hitelesítést is megvalósíthatunk. Segít megvédeni a felhasználók magánéletét és adatait. Napjainkban a legtöbb óriáscég kéttényezős hitelesítést alkalmaz webes és mobilalkalmazásokban egyaránt.

Mi az a Nexmo?

A „Nexmo” valódi, „2FA” technológiával épített validáló API-t biztosít, amely lehetővé teszi, hogy SMS-ben és telefonon PIN-kódot küldjön a felhasználó hitelesítéséhez, akivel egy adott számon lehet kapcsolatba lépni. A Nexmo Verify API lehetővé teszi, hogy a fent említett funkciókat implementáljuk az alkalmazásunkban.

Előnyök

A következő előnyökkel jár a nexmo SMS-hitelesítéshez való használata:

• Globális és tartós, hiszen szinte minden embernek van egy telefonszáma, amelyet évtizedekig megőriz.
• A telefonszámok nagyon kiterjedtek, és hamisításuk időigényes.
• Védelem a gyakran veszélyes jelszavak kiválasztásával szemben több online fiókhoz.
• A PIN kód érvényessége 5 perc.
• Védi a márka hírnevét.
• Bizalmat teremt a felhasználók között.
• Könnyű megvalósítás.
• Adaptív útválasztás.
• Közvetlenül a szolgáltatóhoz

Hátrányok

A nexmo használatának a következő hátrányai vannak:

• Az előrehaladott protokollok és a távközlési infrastruktúra akadályozása a Föld bizonyos részén.
• SMS-hitelesítési költségek.
• Kötelező regionális szám megadása, mielőtt SMS-hitelesítési szolgáltatást kínálhatna ügyfeleinek.

Követelmények

Ezeket a következő paramétereket kell lekérnünk a nexmo fiókból, hogy az alkalmazásunk működjön:

• API KULCS
• API SECRET
• NEXMO_FROM_NUMBER

Korlátozások

Jelenleg csak a kanadai mobilszámok SMS-alapú hitelesítését alkalmazzuk, mivel számunkat Kanadában választottuk ki. Ha ennek a funkciónak a megvalósítását keresi, akkor az adott régióban számot kell vásárolnia, hogy működjön. Ez az egyetlen korlátozás a Nexmo esetében.

oktatóanyag

Ez az oktatóanyag bemutatja az SMS-hitelesítés megvalósítását a Nexmo segítségével a Node.js alkalmazásban:

• Először is létre kell hoznunk egy online fiókot a nexmo webhelyen, hogy megkapjuk a API Key, API secret és nexmo number számokat, hogy az alkalmazásunk működjön.
• Miután létrehozta a fiókot, megvásárolhat egy olyan számot, amely releváns az Ön régiójában, amelyben alkalmazni szeretné ezt a funkciót. Ez az a szám, amelyről az összes PIN kód szöveget elküldik a felhasználóknak.

• Most hozzon létre egy nexmo nevű projektmappát.
• Nyissa meg a terminált és a CD-t a projekt mappájába, és írja be:

npm init

"csomópont" projektként inicializálni.

• Ezt követően telepítse a szükséges függőségeket. Nyissa meg a terminált és a CD-t a projekt mappájába, és írja be:

npm i -s body-parser cookie-parser dotenv ejs express nexmo

• Az előző két lépés egy node_modules könyvtárat és egy package.json fájlt hoz létre, amelyben az összes függőség fel van sorolva.

• Most adjon hozzá több fájlt és mappát oly módon, hogy a végső projektmappánk nexmo így nézzen ki:

• Most elkezdjük hozzáadni a kódot a már létrehozott fájlokhoz. Tehát illessze be ezeket a stílusokat a style.css nevű fájlba.

body{
    background-color:white;
  }

  body > div{
    margin: auto;
    margin-top: 20%;
  }

  h3{
    text-align: center;
  }

• Most elkezdjük a kódot a routes mappafájlba helyezni

#=> index.js
    
  const express = require('express');
  const router = express.Router();
    
    
  /* GET home page. */
  router.get('/', function(req, res, next) {
    res.render('index');
  });
    
  module.exports = router;
#=> register.js
    
  require('dotenv').config()
  const express = require('express');
  const router = express.Router();
  const Nexmo = require('nexmo');
    
  const nexmo = new Nexmo({
    apiKey: process.env.API_KEY,
    apiSecret: process.env.API_SECRET
  });
    
    
  router.post('/register', (req, res) => {
    // A user registers with a mobile phone number
    let phoneNumber = req.body.number;
    let message = req.body.message;
      
    console.log(phoneNumber);
    nexmo.verify.request({number: phoneNumber, brand: message}, (err, result) => {
      if(err) {
        //res.sendStatus(500);
        res.render('status', {message: 'Server Error'});
      } else {
        console.log(result);
        let requestId = result.request_id;
        if(result.status == '0') {
          res.render('verify', {requestId: requestId});
        } else {
          //res.status(401).send(result.error_text);
          res.render('status', {message: result.error_text, requestId: requestId});
        }
      }
    });
  });
    
    
  module.exports = router;
#=>status.js
    
  const express = require('express');
  const router = express.Router();
    
    
  /* GET home page. */
  router.get('/status', function(req, res, next) {
    res.render('status');
  });
    
  module.exports = router;
#=>verify.js

  require('dotenv').config()
  const express = require('express');
  const router = express.Router();
  const Nexmo = require('nexmo');
    
  const nexmo = new Nexmo({
    apiKey: process.env.API_KEY,
    apiSecret: process.env.API_SECRET
  });
    
  router.get('/verify',(req,res)=>{
    res.render('verify');
  });
    
    
  router.post('/confirm', (req, res) => {
    // Checking to see if the code matches
    let pin = req.body.pin;
    let requestId = req.body.requestId;
  console.log('value of requestid in verify post handler is ' + requestId);
    nexmo.verify.check({request_id: requestId, code: pin}, (err, result) => {
      if(err) {
        //res.status(500).send(err);
        res.render('status', {message: 'Server Error'});
      } else {
        console.log(result);
        // Error status code: https://docs.nexmo.com/verify/api-reference/api-reference#check
        if(result && result.status == '0') {
          //res.status(200).send('Account verified!');
          res.render('status', {message: 'Account verified! 🎉'});
        } else {
          //res.status(401).send(result.error_text);
          res.render('status', {message: result.error_text, requestId: requestId});
        }
      }
    });
  });
    
    
  module.exports = router;

• Most elkezdjük a kódot a views mappafájlba helyezni

#=>error.ejs

  <h1><%= message %></h1>
  <h2><%= error.status %></h2>
  <pre><%= error.stack %></pre>
#=>index.ejs
    
  <!DOCTYPE html>
  <html>
    <head>
      <title>Index</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      <link rel='stylesheet' href='/stylesheets/style.css' />
    </head>
    <body>
        <div class="form-group col-md-8 ">
            <h3>Send a Message</h3>   
            <form action="/register" method="post">
                <div class="form-group row">
      
                    <label for="example-text-input" class="col-2 col-form-label">Text</label>
                    <div class="col-10">
                        <input class="form-control" type="text" placeholder="Wassup" name="message"     id="example-text-input">
                    </div>
                </div>
      
      
                <div class="form-group row">
                    <label for="example-tel-input" class="col-2 col-form-label">Telephone</label>
                    <div class="col-10">
                        <input class="form-control" type="tel" placeholder="1-(555)-555-5555" name = "number"     id="example-tel-input">
                    </div>
                </div>
                <button class="btn btn-lg btn-primary btn-block" type="submit">Send</button>
      
            </form>
      
        </div>
      
    </body>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    
  </html>
#=>status.ejs
    
  <!DOCTYPE html>
  <html>
    <head>
      <title>Status</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      <link rel='stylesheet' href='/stylesheets/style.css' />
    </head>
    <body>
        <section id="main" role="main">
            <p class="status">
              <% if(message){ %>
               <%= message %>
              <% } %> </p>
            <% if(locals.requestId) { %>
              Try with another PIN if you have one.<br>
              <form action="/confirm" method="post">
                <div class="fa fa-key"></div>
                <input type="number" name="pin" placeholder="1234" required>
                <input type="hidden" name="requestId" value="<%= requestId %>" >
                <input type="submit" value="Verify PIN">
              </form>
            <% } %>
          
          </section>
    </body>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  </html>
#=>verify.ejs
    
  <!DOCTYPE html>
  <html>
    <head>
      <title>verify</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      <link rel='stylesheet' href='/stylesheets/style.css' />
    </head>
    <body>
      <form action="/confirm" method="post">
        <input type="tel" name="pin" placeholder="1234" required>
        <input type="hidden" name="requestId" value="<%= requestId %>" >
        <input type="submit" value="Verify PIN">
    </form>
      
    </body>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  </html>

• Most létrehozunk egy .env fájlt, amely "környezeti változókat" tartalmaz a csomópont-alkalmazásunkhoz.

API_KEY=enter_personal_key_here
API_SECRET=enter_secret_key_here
NEXMO_FROM_NUMBER=enter_nexmo_phone_number_here

• Miután elkészültünk a .env fájllal, létrehozzuk a app.js nevű fájlt, és bemásoljuk a tartalmat.

require('dotenv').config()
  var express = require('express');
  var path = require('path');
  var cookieParser = require('cookie-parser');
  var bodyParser = require('body-parser');
    
  var index = require('./routes/index');
  var register = require('./routes/register');
  var verify = require('./routes/verify');
  var status = require('./routes/status');
    
  var app = express();
    
    
  // view engine setup
  app.set('views', path.join(__dirname, 'views'));
  app.set('view engine', 'ejs');
    
  // uncomment after placing your favicon in /public
  //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: false }));
  app.use(cookieParser());
  app.use(express.static(path.join(__dirname, 'public')));
    
  app.use(index);
  app.use( register);
  app.use( verify);
  app.use( status);
    
  const server = app.listen(process.env.PORT || 5000, () => {
    console.log('Express server listening on port %d in %s mode', server.address().port, app.settings.env);
  });
    
  module.exports = app;

• Elkészültünk a kódolással az alkalmazástípus futtatásához:

node app.js

a terminálban, és nyissa meg a böngészőt a http://localhost:5000 címre

• Az oldal így nézne ki:

• Miután beírta az üzenetet és a küldeni kívánt számot, az országkód előtagjaként, kattintson a Küldés gombra. Megnyílik

• Most írja be a mobiltelefonjára küldött 4 számjegyű PIN-kódot, és kattintson a PIN-kód ellenőrzése gombra.

• Ha a PIN-kód megegyezik a mobilra küldött PIN-kóddal, akkor az át lesz irányítva a sikeroldalra.

• Ezzel kezdődik az oktatóprogramunk.

Forráskód

Az oktatóanyag forráskódja =› itt

Hivatkozások

"Fedezze fel, hogyan biztosítunk minőséget." nexmo. Hozzáférés: 2018. február 28. https://www.nexmo.com/why-nexmo/

"Verify API Overview." nexmo. Hozzáférés: 2018. február 28. https://developer.nexmo.com/verify/overview

Srinivasan,Srivatsan. „Telefonszám-ellenőrzés: erősebb alternatíva a hagyományos jelszavakhoz.” nexmo. Hozzáférés: 2018. február 28. https://www.nexmo.com/blog/2017/03/09/phone-number-verification-a-stronger-alternative-to-traditional-passwords/