recherche

Maison  >  Article  >  interface Web  >  Comment implémenter la connexion dans nodejs

Comment implémenter la connexion dans nodejs

王林
王林original
2023-05-28 10:12:07846parcourir

Node.js est un langage de programmation JavaScript côté serveur très populaire, qui joue un rôle important dans les applications de développement Web. La mise en œuvre d'une application Web complète nécessite l'utilisation d'une variété de technologies et d'outils, dont une fonction très critique est le système de connexion des utilisateurs.

Dans cet article, nous présenterons comment Node.js implémente la fonction de connexion. Nous développerons les aspects suivants : comment créer une page de formulaire de connexion utilisateur, comment vérifier les informations saisies par l'utilisateur, comment créer une session utilisateur et comment utiliser les sessions utilisateur dans les applications Web.

1. Créer un formulaire de connexion utilisateur
Tout d'abord, afin de permettre aux utilisateurs de se connecter à notre application Web, nous devons d'abord créer un formulaire de connexion utilisateur. Ici, nous pouvons utiliser HTML et CSS pour créer une page de formulaire de connexion simple et esthétique. Le code est le suivant : 

<!DOCTYPE html>
<html>
<head>
  <title>用户登录</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    label {
      display: block;
      margin-bottom: 10px;
    }
    input {
      border: 1px solid #ccc;
      padding: 5px;
    }
    button {
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
      padding: 10px 20px;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h1>用户登录</h1>
  <form method="POST" action="/login">
    <div>
      <label for="username">用户名</label>
      <input type="text" id="username" name="username" placeholder="请输入用户名">
    </div>
    <div>
      <label for="password">密码</label>
      <input type="password" id="password" name="password" placeholder="请输入密码">
    </div>
    <button type="submit">登录</button>
  </form>
</body>
</html>

Ce code utilise des styles HTML et CSS de base pour créer un formulaire de connexion simple, comprenant deux entrées : nom d'utilisateur et mot de passe. et ajouté un bouton "Connexion" au bas du formulaire.

2. Vérifiez les informations saisies par l'utilisateur
Une fois que l'utilisateur a soumis le formulaire de connexion, nous devons vérifier si le nom d'utilisateur et le mot de passe saisis par l'utilisateur sont corrects. Ici, nous pouvons utiliser le framework Express de Node.js pour obtenir et vérifier les données du formulaire. Ce qui suit est une simple fonction de traitement de routage Express qui reçoit la requête POST du formulaire de connexion et vérifie le nom d'utilisateur et le mot de passe soumis : 

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));

app.post('/login', (req, res) => {
  const username = req.body.username;
  const password = req.body.password;
  // 进行验证
  if (username === 'admin' && password === '123456') {
    // 登录成功，创建会话
    req.session.user = username;
    res.redirect('/dashboard');
  } else {
    // 登录失败，显示错误信息
    res.render('login', { error: '用户名或密码错误' });
  }
});

Ce code utilise l'analyseur de corps du middleware Express pour analyser les données du formulaire et obtenir le nom d'utilisateur et le mot de passe soumis. via l'objet req.body. Ensuite, nous vérifions le nom d'utilisateur et le mot de passe. Si la vérification est réussie, une session utilisateur peut être créée (c'est-à-dire la manière de sauvegarder les informations utilisateur côté serveur, qui sera décrite en détail plus tard), et l'utilisateur sera redirigé vers la page principale de l'application.

Si la vérification échoue, nous pouvons utiliser le moteur de modèle dans Express pour afficher une page de message d'erreur et transmettre le message d'erreur au modèle. Le code est le suivant : 

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

app.get('/login', (req, res) => {
  res.render('login', { error: null });
});

app.post('/login', (req, res) => {
  const username = req.body.username;
  const password = req.body.password;
  // 进行验证
  if (username === 'admin' && password === '123456') {
    // 登录成功，创建会话
    req.session.user = username;
    res.redirect('/dashboard');
  } else {
    // 登录失败，显示错误信息
    res.render('login', { error: '用户名或密码错误' });
  }
});

Ici, nous utilisons le moteur de modèle ejs dans Express pour le rendu. la page de connexion et la page de message d'erreur. Notez que le message d'erreur doit être transmis au modèle lors du rendu de la page.

3. Créer une session utilisateur
Dans le code ci-dessus, nous avons mentionné la création d'une session utilisateur (c'est-à-dire comment enregistrer les informations utilisateur). Dans Node.js, nous pouvons utiliser le module express-session pour créer et gérer des sessions utilisateur. L'installation et l'utilisation du module express-session sont très simples, ajoutez simplement le code suivant à votre application : 

const session = require('express-session');
app.use(session({
  secret: 'my-secret-key',
  resave: false,
  saveUninitialized: false
}));

Ce code utilise le module express-session pour créer un middleware de session et définit un secret pour chiffrer les données de session. Ce module fournit également d'autres options, telles que les options resave et saveUninitialized pour configurer les paramètres de persistance de la session. Ici, nous les définissons toutes deux sur false pour utiliser les paramètres par défaut.

Une fois que l'utilisateur s'est connecté avec succès, créez une session côté serveur et enregistrez les informations utilisateur dans la session. Le code est le suivant : 

req.session.user = username;

De cette façon, lorsque l'utilisateur se connecte avec succès, les données de session seront. enregistré côté serveur et l'utilisateur Vous pouvez utiliser cette session pour effectuer des opérations dans la prochaine application Web.

4. Utilisation des sessions utilisateur dans les applications Web
Après avoir créé une session utilisateur, nous devons l'utiliser dans les applications Web pour implémenter l'authentification des utilisateurs et l'autorisation d'opération ainsi que d'autres fonctions. Express fournit l'objet req.session pour accéder aux données de session, et nous pouvons utiliser cet objet pour implémenter les fonctions associées.

Par exemple, lorsqu'un utilisateur accède à une page qui nécessite une connexion, nous pouvons déterminer si l'utilisateur est déjà connecté en vérifiant si l'utilisateur actuel a une session. Sinon, redirigez vers la page de connexion. 

app.get('/dashboard', (req, res) => {
  if (!req.session.user) {
    res.redirect('/login');
    return;
  }
  // 用户已登录，渲染页面
  res.render('dashboard');
});

Ici, nous vérifions Vérifiez s'il y a des informations utilisateur dans l'objet req.session. Si c'est le cas, affichez la page du tableau de bord. Sinon, redirigez vers la page de connexion.

De plus, nous pouvons également utiliser des sessions utilisateur pour l'autorisation dans des opérations qui nécessitent une authentification de l'utilisateur, telles que : 

app.post('/delete', (req, res) => {
  if (!req.session.user) {
    res.sendStatus(401);
    return;
  }
  // 检查用户权限
  if (req.session.user !== 'admin') {
    res.sendStatus(403);
    return;
  }
  // 执行删除操作
  res.send('删除成功');
});

Dans ce code, nous vérifions si la session en cours contient des informations sur l'utilisateur, et sinon, renvoyons un code d'état 401 ; Ensuite, nous vérifions les autorisations de l'utilisateur actuel et renvoyons un code d'état 403 si l'utilisateur n'est pas un administrateur. Enfin, nous effectuons l'opération de suppression et renvoyons une réponse réussie ;

Conclusion
Grâce à l'introduction de cet article, vous avez déjà compris comment Node.js implémente la fonction de connexion utilisateur. Vous avez appris à créer des formulaires de connexion, à valider les informations utilisateur, à créer des sessions utilisateur et à utiliser des sessions utilisateur dans des applications Web pour implémenter des fonctions d'authentification et d'autorisation. Bien entendu, la mise en œuvre de la fonction de connexion utilisateur implique également de nombreux autres détails et technologies, que nous fournissons uniquement à titre de référence. Si vous avez une meilleure façon de le mettre en œuvre, partagez-la.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript node.js 中间件 css html express Session JS 对象
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：nodejs comment sauter la page sauter la page sauter la page sauter la pageArticle suivant：nodejs comment sauter la page sauter la page sauter la page sauter la page

Articles Liés

Voir plus