はじめに

Node-REDでウェブアプリを作ろうと思い、まずはログイン認証だろうってことで作ってみた。
あと、Node-REDってHTMLとCSSをどうやって書けばよいのかわからなかったので、それも解決すべく作ってみました。

画面

今回はDBやファイルは使わず、ユーザー名はadminパスワードはpasswordにし、それと一致するかしないかで画面を更新するって感じで作りました。

初回アクセス時

最初にログイン画面にアクセスしたときの状態です。

認証エラー時

ユーザー名またはパスワードが一致していないときの状態です。

成功時

認証に成功したときの状態です。

ソースコード

[{"id":"e1e4140f.642ff8","type":"tab","label":"認証","disabled":false,"info":""},{"id":"e6fbc85d.8de168","type":"http in","z":"e1e4140f.642ff8","name":"","url":"list/login","method":"get","upload":false,"swaggerDoc":"","x":110,"y":100,"wires":[["b460f33.4f4451"]]},{"id":"7490cb78.28d3e4","type":"comment","z":"e1e4140f.642ff8","name":"ログイン画面","info":"","x":110,"y":60,"wires":[]},{"id":"b460f33.4f4451","type":"template","z":"e1e4140f.642ff8","name":"css.login","field":"css.login","fieldType":"msg","format":"css","syntax":"mustache","template":".login-container{\n    margin-top: 5%;\n    margin-bottom: 5%;\n}\n.login-form-1{\n    padding: 5%;\n    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);\n}\n.login-form-1 h3{\n    text-align: center;\n    color: #333;\n}\n.login-container form{\n    padding: 10%;\n}\n.btnSubmit\n{\n    width: 50%;\n    border-radius: 1rem;\n    padding: 1.5%;\n    border: none;\n    cursor: pointer;\n}\n.login-form-1 .btnSubmit{\n    font-weight: 600;\n    color: #fff;\n    background-color: #0062cc;\n}\n.login-form-1 .ForgetPwd{\n    color: #0062cc;\n    font-weight: 600;\n    text-decoration: none;\n}\n","output":"str","x":640,"y":100,"wires":[["6125a63e.859578"]]},{"id":"6125a63e.859578","type":"template","z":"e1e4140f.642ff8","name":"html","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<link href=\"//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css\" rel=\"stylesheet\" id=\"bootstrap-css\">\n<script src=\"//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js\"></script>\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js\"></script>\n<!------ Include the above in your HEAD tag ---------->\n</html>\n    <header>\n        <meta http-equiv=\"Content-Type\" content=\"text/html;charset=UTF-8\" />\n        <title>login</title>\n        <style type=\"text/css\">{{{css.login}}}</style>\n    </header>\n    <body>\n        <center>\n            <div class=\"container login-container\">\n                <div class=\"row\">\n                    <div class=\"col-md-6 login-form-1\">\n                        <h3>Login</h3>\n                        <form method=\"post\" action = \"./search\">\n                            <div class=\"form-group\">\n                                <input type=\"text\" name=\"user\" class=\"form-control\" placeholder=\"User *\" value=\"\" />\n                            </div>\n                            <div class=\"form-group\">\n                                <input type=\"password\" name=\"password\" class=\"form-control\" placeholder=\"Password *\" value=\"\" />\n                            </div>\n                            <div class=\"form-group\">\n                                <input type=\"submit\" class=\"btnSubmit\" value=\"Login\" />\n                            </div>\n                            <div class=\"form-group\">\n                                {{{payload.message}}}\n                            </div>\n                        </form>\n                    </div>\n                </div>\n            </div>\n        </center>\n    </body>\n</html>","output":"str","x":930,"y":100,"wires":[["8d16b9cf.5d3518"]]},{"id":"8d16b9cf.5d3518","type":"http response","z":"e1e4140f.642ff8","name":"","statusCode":"200","headers":{},"x":1120,"y":100,"wires":[]},{"id":"51a4f497.bec43c","type":"function","z":"e1e4140f.642ff8","name":"","func":"if (msg.payload.user!==\"admin\" | msg.payload.password !==\"password\" )\n{\n    msg.payload.message = \"<label>ユーザーまたはパスワードが登録情報と一致しません。</label>\";\n} else {\n    msg.payload.message = \"<label>ログインに成功しました。</label>\";\n}\n\nreturn msg;","outputs":1,"noerr":0,"x":330,"y":200,"wires":[["b460f33.4f4451"]]},{"id":"80685a8e.6d0b08","type":"http in","z":"e1e4140f.642ff8","name":"","url":"list/search","method":"post","upload":false,"swaggerDoc":"","x":120,"y":200,"wires":[["51a4f497.bec43c"]]},{"id":"1204f788.7e5db8","type":"comment","z":"e1e4140f.642ff8","name":"ログイン処理","info":"","x":110,"y":160,"wires":[]}]