ホームページ ウェブフロントエンド jsチュートリアル Express Sessionはログイン認証機能を実装(コード添付)

Express Sessionはログイン認証機能を実装(コード添付)

Apr 18, 2018 am 11:08 AM
express session 確認する

今回は、ログイン認証機能を実装するための Express Session について説明します (コード付き)。Express Session でログイン認証機能を実装するための 注意事項 について、実際のケースを見てみましょう。

Express と Session を使用してログイン検証を実装することを検討している人がこの記事では簡単に紹介します。具体的な実装コードは何ですか?一緒に調べてみましょう。

1. 前に書きます

Web サイトにログインするときに、ログアウトせずに Web サイトを閉じますが、しばらくしてから再度 Web サイトを開くと、ログインしたままになります。これは、Web サイトにログインすると、ログアウトするか、保存されたログイン ステータスの有効期限が切れるまで、サーバーがログイン ステータスを保存するためです。では、サーバーはログインステータスをどのように保存するのでしょうか? 答えはセッションです。サービスはこれを通じて各クライアント接続のステータスを記録できます。ここでは、Session の原理については詳しく説明しません。この記事では、Session を使用して Express フレームワークで ユーザー ログイン 認証を実装する方法を主に紹介します。

2. 環境設定

Node環境にはExpressとSessionを統合したライブラリがないため、まずプロジェクトディレクトリを作成し、以下のコマンドを使用してプロジェクトのルートディレクトリに4つのモジュールをインストールする必要があります。

1) 特急

このモジュールを使用すると、Web 開発フレームワークを迅速に構築できます。

2) ボディパーサー

このモジュールは Express モジュールの ミドルウェア であり、ブラウザーによって送信された本文データの解析を容易にします。

3) エクスプレスセッション

このモジュールは Express モジュール ミドルウェアでもあり、クライアント セッションの処理を容易にします。

4) エジェス

このモジュールはレンダリング エンジンです。 バックグラウンド変数データをフロントページにバインドすると便利です。

次のようにインストールします:

npm install express --save
npm install body-parser --save
npm install express-session --save
npm install ejs --save
ログイン後にコピー

3. ログインと認証

セッションはサーバー上のクライアントのステータスをマークできます。これを使用して、クライアントのログイン検証を実装できます。セッション ログイン検証のプロセスは大まかに次のとおりです。クライアントがログインしていないときにホームページをリクエストした場合、サーバーはクライアントのログイン後にリクエストをログイン ページにリダイレクトします。サーバーはクライアントのログイン ステータスを記録して保存する必要があります。アクティビティ期間を指定すると、次回サーバーがホームページをリクエストしたときに、クライアントのログイン ステータスを判断できるようになります。ログイン ステータスが有効な場合は、クライアントが必要とするページに直接戻ります。そうでない場合は、ログインにリダイレクトします。ページ。

セッションの有効期限については、セッションの有効期限が設定されていない場合、サーバーは、独自の構成のデフォルトの有効期間に基づいて、長期間サーバーと対話しなかったセッションを削除します。

サンプルコードを以下に掲載します。インターフェースは比較的シンプルで、サーバーのバックグラウンドコードのコメントが明確に書かれているため、再度の説明は省略します。

プロジェクトのディレクトリ構造は次のとおりです:

ログインページ (login.html) のコードは次のとおりです:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
  </style>
</head>
<body>
  <form action="/login" method="POST">
    用户名: <input type="text" name="username"/> <br>
    密码: <input type="password" name="pwd"/>
    <input type="submit" value="Submit"/>
  </form>
</body>
</html>
ログイン後にコピー

ホームページ (home.html) のコードは次のとおりです:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <p>用户名:<span><%= username %> </span> <a href="/logout" rel="external nofollow" >退出登录</a></p>
</body>
</html>
ログイン後にコピー

サーバー (app.js) コードは次のとおりです:

/**
 * Created by tjm on 9/7/2017.
 */
var express = require('express');
var app = express();
var session = require('express-session');
var bodyparser = require('body-parser');
// 下面三行设置渲染的引擎模板
app.set('views', dirname); //设置模板的目录
app.set('view engine', 'html'); // 设置解析模板文件类型:这里为html文件
app.engine('html', require('ejs').express); // 使用ejs引擎解析html文件中ejs语法
app.use(bodyparser.json()); // 使用bodyparder中间件,
app.use(bodyparser.urlencoded({ extended: true }));
// 使用 session 中间件
app.use(session({
  secret : 'secret', // 对session id 相关的cookie 进行签名
  resave : true,
  saveUninitialized: false, // 是否保存未初始化的会话
  cookie : {
    maxAge : 1000 * 60 * 3, // 设置 session 的有效时间,单位毫秒
  },
}));
// 获取登录页面
app.get('/login', function(req, res){
  res.sendFile(dirname + '/login.html')
});
// 用户登录
app.post('/login', function(req, res){
  if(req.body.username == 'admin' && req.body.pwd == 'admin123'){
    req.session.userName = req.body.username; // 登录成功,设置 session
    res.redirect('/');
  }
  else{
    res.json({ret_code : 1, ret_msg : '账号或密码错误'});// 若登录失败,重定向到登录页面
  }
});
// 获取主页
app.get('/', function (req, res) {
  if(req.session.userName){ //判断session 状态,如果有效,则返回主页,否则转到登录页面
    res.render('home',{username : req.session.userName});
  }else{
    res.redirect('login');
  }
})
// 退出
app.get('/logout', function (req, res) {
  req.session.userName = null; // 删除session
  res.redirect('login');
});
app.listen(8000,function () {
  console.log('http://127.0.0.1:8000')
})
ログイン後にコピー

この時点で、セッションのログイン認証は完了です。上記の例では、セッションはサービス メモリに保存されていますが、セッション ミドルウェアを構成するだけで、ファイルまたはデータベースに保存することもできます。

app.use(session({
  secret: 'secretkey',
  store: new MongoStore({
    db: 'sessiondb'
  })
}));
ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

node.jsは読み取りおよび書き込み同期機能を実装します

2つの文字列内の同じデータを比較する方法

以上がExpress Sessionはログイン認証機能を実装(コード添付)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

PDFの署名を検証する方法 PDFの署名を検証する方法 Feb 18, 2024 pm 05:33 PM

私たちは通常、政府やその他の機関から PDF ファイルを受け取りますが、中にはデジタル署名が付いているものもあります。署名を検証すると、SignatureValid メッセージと緑色のチェック マークが表示されます。署名が検証されない場合、有効性は不明です。署名の検証は重要です。PDF で署名を検証する方法を見てみましょう。 PDF 形式の署名を検証する方法 PDF 形式で署名を検証すると、署名の信頼性が高まり、文書が受け入れられる可能性が高くなります。次の方法で PDF ドキュメントの署名を検証できます。 Adobe Reader で PDF を開きます。 署名を右クリックし、「署名プロパティの表示」を選択します。 「署名者証明書の表示」ボタンをクリックします。 「信頼」タブから信頼できる証明書リストに署名を追加します。 「署名の検証」をクリックして検証を完了します。

WeChatの友人による認証を使用してブロックを解除する詳細な方法 WeChatの友人による認証を使用してブロックを解除する詳細な方法 Mar 25, 2024 pm 01:26 PM

1. WeChatを開いた後、検索アイコンをクリックし、WeChatチームと入力し、下のサービスをクリックして入力します。 2. 入力後、左下隅にあるセルフサービス ツール オプションをクリックします。 3. をクリックした後、上のオプションで、補助検証のブロック解除/再審査請求のオプションをクリックします。

セッション失敗を解決する方法 セッション失敗を解決する方法 Oct 18, 2023 pm 05:19 PM

セッション障害は通常、セッションの有効期間の期限切れまたはサーバーのシャットダウンによって発生します。解決策: 1. セッションの有効期間を延長する; 2. 永続ストレージを使用する; 3. Cookie を使用する; 4. セッションを非同期的に更新する; 5. セッション管理ミドルウェアを使用する。

PHP セッションのクロスドメイン問題の解決策 PHP セッションのクロスドメイン問題の解決策 Oct 12, 2023 pm 03:00 PM

PHPSession のクロスドメイン問題の解決策 フロントエンドとバックエンドの分離の開発では、クロスドメイン要求が標準になっています。クロスドメインの問題に対処するときは、通常、セッションの使用と管理が必要になります。ただし、ブラウザーのオリジンポリシーの制限により、デフォルトではセッションをドメイン間で共有できません。この問題を解決するには、いくつかの技術と方法を使用して、セッションのクロスドメイン共有を実現する必要があります。 1. ドメイン間でセッションを共有するための Cookie の最も一般的な使用法

正規表現を使用して IFSC コードを検証するにはどうすればよいですか? 正規表現を使用して IFSC コードを検証するにはどうすればよいですか? Aug 26, 2023 pm 10:17 PM

Indian Financial System Code の略称です。電子資金移動システムに参加しているインドの銀行支店は、特別な 11 文字のコードで識別されます。インド準備銀行は、インターネット取引でこのコードを使用して銀行間で資金を送金します。 IFSC コードは 2 つの部分に分かれています。銀行は最初の 4 文字で識別され、支店は最後の 6 文字で識別されます。 NEFT (National Electronic Funds Transfer)、RTGS (Real Time Gross Settlement)、および IMPS (Immediate Payment Service) は、IFSC コードを必要とする電子トランザクションの一部です。方法 正規表現を使用して IFSC コードを検証する一般的な方法は次のとおりです。 長さが正しいかどうかを確認します。最初の 4 文字を確認してください。 5 番目の文字を確認してください。Che

PHP 8 の新機能: 検証と署名の追加 PHP 8 の新機能: 検証と署名の追加 Mar 27, 2024 am 08:21 AM

PHP8 は PHP の最新バージョンであり、プログラマーにさらなる利便性と機能をもたらします。このバージョンはセキュリティとパフォーマンスに特に重点を置いており、注目すべき新機能の 1 つは検証および署名機能の追加です。この記事では、これらの新機能とその使用法について詳しく説明します。検証と署名は、コンピューター サイエンスにおける非常に重要なセキュリティ概念です。これらは、送信されるデータが完全で本物であることを確認するためによく使用されます。オンライン取引や機密情報を扱う場合、検証と署名がさらに重要になります。誰かがデータを改ざんできると、潜在的にデータが改ざんされる可能性があるためです。

JavaScript Cookie と PHP Cookie の違いは何ですか? JavaScript Cookie と PHP Cookie の違いは何ですか? Sep 02, 2023 pm 12:29 PM

JavaScriptCookies JavaScript Cookie の使用は、設定、購入、手数料、その他の情報を記憶および追跡する最も効果的な方法です。訪問者のエクスペリエンスを向上させるために必要な情報やウェブサイトの統計。 PHPCookieCookie は、クライアント コンピューターに保存され、追跡目的で保持されるテキスト ファイルです。 PHP は HTTP Cookie を透過的にサポートします。 JavaScript Cookie はどのように機能しますか?サーバーは、訪問者のブラウザに Cookie の形式でデータを送信します。ブラウザは Cookie を受け入れることができます。存在する場合、それは訪問者のハードドライブにプレーンテキストレコードとして保存されます。さて、訪問者がサイト上の別のページに到達すると、

Laravelでルートパラメータを検証するにはどうすればよいですか? Laravelでルートパラメータを検証するにはどうすればよいですか? Sep 01, 2023 pm 02:41 PM

Laravel では、ルートは path/ フォルダー内に定義されます。ルートは web.php ファイルで定義されます。このファイルはlaravelのインストールが完了した後に作成されます。 Laravel ルートは次のように URI とクロージャ関数を受け入れます - useIlluminate\Support\Facades\Route;Route::get('/student',function(){return'HelloStudent';}); in web/routes.php 定義されたルートが割り当てられますWeb ミドルウェア グループに接続されており、セッション状態と CSRF 保護が備わっています。以下のようなルートでコントローラーを呼び出すこともできます

See all articles