0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

どうもこんにちはAtsu1209です。
今日はNode.js で閲覧パスワードをつける方法を書いていきます

これを書く理由

理由? なんとなくです

使うもの

今回は
・express
・nodemon
・body-parser
・ejs
を使います。

作る

ではまず閲覧制限をかけたいページのコードを書きます

index.ejs
<!DOCTYPE html>
<html>
<head>
<title>サプライズ</title>
</head>
<body>
<h1>欲しい物を選んでね</h1>
<button class="btn" onclick="btn()">ケーキ</button>
<button class="btn" onclick="btn()"></button>
</body>
<script>
function btn(){
   alert("隣の人からもらえるよ!")
}
</script>
</html>

用途もコードも適当です。

index.js

次にindex.jsを書きます

index.js
const express = require("express");
const app = express();

app.get("/", (req, res) => {
    res.render("index.ejs");
});

app.listen(8000);

パスワード

ここからパスワードをかいて行きます
パスワードのコードはindex.jsに書きます。

index.js
const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const password = "yeah";

app.use(bodyParser.urlencoded({ extended: true }));

app.get("/", (req, res) => {
    res.send(`
        <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>閲覧制限</title>
                <style>
                    body {
                        font-family: Arial, sans-serif;
                        background-color: #f4f4f4;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: 100vh;
                        margin: 0;
                    }
                    .container {
                        text-align: center;
                        background-color: #fff;
                        padding: 20px;
                        border-radius: 8px;
                        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                    }
                    h2 {
                        color: red;
                    }
                    form {
                        margin-top: 20px;
                    }
                    input[type="password"] {
                        padding: 10px;
                        width: 80%;
                        margin-bottom: 10px;
                        border: 1px solid #ccc;
                        border-radius: 4px;
                    }
                    input[type="submit"] {
                        padding: 10px 20px;
                        color: #fff;
                        background-color: green;
                        border: none;
                        border-radius: 4px;
                        cursor: pointer;
                    }
                    input[type="submit"]:hover {
                        background-color: darkgreen;
                    }
                    p {
                        margin-top: 10px;
                    }
                    .footer {
                        margin-top: 20px;
                        color: #555;
                    }
                </style>
            </head>
            <body>
                <div class="container">
                    <h2>閲覧制限</h2>
                    <p>このページの閲覧にはパスワードが必要です</p>
                    <form method="post" action="/login">
                        <label for="password">Password:</label>
                        <input type="password" name="password" id="password">
                        <input type="submit" value="アクセス">
                    </form>
                    <p class="footer">©Atsu1209</p>
                </div>
                
            </body>
            </html>
    `);
});

app.post("/login", (req, res) => {
    const submittedPassword = req.body.password;
    if (submittedPassword === password) {
        res.render("index.ejs");
    } else {
       res.send("パスワードが違うため閲覧できません");
    }
});

app.listen(8000);

const bodyParser = require("body-parser");body-parserを使うことを宣言して
const password = "yeah";でパスワードを決めています。

最初のapp.getres.sendの中にはHTMLのコードが書いてあります

最後に

かなりコードが適当になっちゃったので直せそうな部分があったらコメントで教えていただけると幸いです。
ではまた次の記事で(^^)/

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?