>  기사  >  웹 프론트엔드  >  nodejs에서 로그인을 구현하는 방법

nodejs에서 로그인을 구현하는 방법

王林
王林원래의
2023-05-28 10:12:07768검색

Node.js는 웹 개발 애플리케이션에서 중요한 역할을 하는 매우 인기 있는 서버 측 JavaScript 프로그래밍 언어입니다. 완전한 웹 애플리케이션을 구현하려면 다양한 기술과 도구를 사용해야 하며, 그 중 매우 중요한 기능 중 하나는 사용자 로그인 시스템입니다.

이 글에서는 Node.js가 로그인 기능을 구현하는 방법을 소개하겠습니다. 사용자 로그인 양식 페이지를 작성하는 방법, 사용자가 입력한 정보를 확인하는 방법, 사용자 세션을 생성하는 방법 및 웹 애플리케이션에서 사용자 세션을 사용하는 방법에 대해 자세히 설명합니다.

1. 사용자 로그인 양식 작성
우선, 사용자가 웹 애플리케이션에 로그인할 수 있도록 하려면 먼저 사용자 로그인 양식을 작성해야 합니다. 여기서는 HTML과 CSS를 사용하여 간단하고 아름다운 로그인 양식 페이지를 만들 수 있습니다. 코드는 다음과 같습니다.

<!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>

이 코드는 몇 가지 기본 HTML 및 CSS 스타일을 사용하여 사용자 이름과 비밀번호라는 두 가지 입력을 포함하는 간단한 로그인 양식을 만듭니다. 상자를 클릭하고 양식 하단에 "로그인" 버튼을 추가했습니다.

2. 사용자가 입력한 정보 확인
사용자가 로그인 양식을 제출한 후 사용자가 입력한 사용자 이름과 비밀번호가 올바른지 확인해야 합니다. 여기서는 Node.js의 Express 프레임워크를 사용하여 양식 데이터를 얻고 확인할 수 있습니다. 다음은 로그인 양식에서 POST 요청을 수신하고 제출된 사용자 이름과 비밀번호를 확인하는 간단한 Express 라우팅 처리 기능입니다.

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: '用户名或密码错误' });
  }
});

이 코드는 Express 미들웨어 본문 파서를 사용하여 양식 데이터를 구문 분석하고 제출된 사용자 이름과 비밀번호를 얻습니다. req.body 객체를 통해. 다음으로, 사용자 이름과 비밀번호를 확인하면 사용자 세션이 생성되고(즉, 사용자 정보를 서버측에 저장하는 방식으로, 이에 대해서는 뒤에서 자세히 설명함) 애플리케이션의 메인 페이지로 리디렉션되었습니다.

확인에 실패하면 Express의 템플릿 엔진을 사용하여 오류 메시지 페이지를 렌더링하고 오류 메시지를 템플릿에 전달할 수 있습니다.

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: '用户名或密码错误' });
  }
});

여기에서는 Express의 ejs 템플릿 엔진을 사용하여 렌더링합니다. 로그인 페이지와 오류 메시지 페이지는 페이지를 렌더링할 때 템플릿에 전달되어야 합니다.

3. 사용자 세션 생성
위 코드에서 사용자 세션 생성(즉, 사용자 정보를 저장하는 방법)에 대해 언급했습니다. Node.js에서는 express-session 모듈을 사용하여 사용자 세션을 생성하고 관리할 수 있습니다. express-session 모듈 설치 및 사용은 매우 간단합니다. 애플리케이션에 다음 코드를 추가하기만 하면 됩니다.

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

이 코드는 express-session 모듈을 사용하여 세션 미들웨어를 생성하고 세션 데이터 암호화에 대한 비밀을 설정합니다. 이 모듈은 세션의 지속성 설정을 구성하기 위한 resave 및 saveUninitialized 옵션과 같은 몇 가지 다른 옵션도 제공합니다. 여기서는 기본 설정을 사용하기 위해 둘 다 false로 설정합니다.

사용자가 성공적으로 로그인한 후 서버 측에 세션을 생성하고 해당 세션에 사용자 정보를 저장합니다.

req.session.user = username;

이렇게 하면 사용자가 성공적으로 로그인하면 세션 데이터가 서버 측에 저장되고 사용자는 이 세션을 사용하여 다음 웹 애플리케이션에서 작업을 수행할 수 있습니다.

4. 웹 애플리케이션에서 사용자 세션 사용
사용자 세션을 생성한 후 이를 웹 애플리케이션에서 사용하여 사용자 인증, 작업 권한 부여 및 기타 기능을 구현해야 합니다. Express는 세션 데이터에 액세스하기 위한 req.session 개체를 제공하며 이 개체를 사용하여 관련 기능을 구현할 수 있습니다.

예를 들어 사용자가 로그인이 필요한 페이지에 액세스하면 현재 사용자에게 세션이 있는지 확인하여 사용자가 이미 로그인되어 있는지 여부를 확인할 수 있습니다. 그렇지 않은 경우 코드는 다음과 같습니다.

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

여기서 req.session 개체에 사용자 정보가 있는지 확인합니다. 있으면 대시보드 페이지를 렌더링합니다. 그렇지 않으면 로그인 페이지로 리디렉션합니다.

또한 사용자 세션을 사용하여 사용자 인증이 필요한 작업을 승인할 수도 있습니다. 예:

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

이 코드에서는 현재 세션에 사용자 정보가 포함되어 있는지 확인하고 그렇지 않은 경우 401 상태 코드를 반환합니다. 현재 사용자의 권한을 확인하고 사용자가 관리자가 아닌 경우 403 상태 코드를 반환합니다. 마지막으로 삭제 작업을 수행하고 성공적인 응답을 반환합니다.

결론
이 글의 서문을 통해 Node.js가 사용자 로그인 기능을 구현하는 방법을 이미 이해하셨습니다. 로그인 양식을 작성하고, 사용자 정보를 검증하고, 사용자 세션을 작성하고, 웹 애플리케이션에서 사용자 세션을 사용하여 인증 및 권한 부여 기능을 구현하는 방법을 배웠습니다. 물론, 사용자 로그인 기능을 구현하는 데는 참고용으로만 제공되는 다른 많은 세부 사항과 기술도 포함됩니다. 더 좋은 구현 방법이 있다면 공유해주세요.

위 내용은 nodejs에서 로그인을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.