はじめに
「Node.jsってどんなもんなんだろう？」ってところから始まり。
↓
「へぇ〜APIとか簡単にできるじゃん」となり。
↓
「ログイン認証とかも割と簡単なんじゃね」と思ったのでやってみました。
環境
- macOS Mojave
Express
npmを使ってExpressをインストールする。
entry pointはapp.jsに設定する。
$ mkdir myapp
$ cd myapp
$ npm init
$ npm install express
myappにapp.jsを作成し、以下を実装する。
constexpress=require('express')constapp=express()app.get('/',(req,res)=>{res.send('Hello World')})app.listen(3000,()=>{console.log('Listening on prot 3000')})普通にnode app.jsで起動しても良いが、変更に対して自動的に起動するようにしてほしいのでnodemonをインストールする。
起動したら、http://localhost:3000にアクセスし期待通りの動きをしているか確認する。
$ npm install nodemon -g
$ npx nodemon app.js
[nodemon] starting `node app.js`
Listening on prot 3000
Passport
ログイン認証に必要なものをインストールします。
（詳しく説明しませんが、ググれば大丈夫）
$ npm install body-parser
$ npm install cookie-parser
$ npm install express-session
$ npm install passport
$ npm install passport-local
$ npm install connect-ensure-login
publicフォルダを作成し、login.html、ok.html、ng.htmlを作成する
constexpress=require('express')constapp=express()constpath=require('path')constsession=require('express-session')constpassport=require('passport')constbodyParser=require('body-parser')constcookieParser=require('cookie-parser')constLocalStrategy=require('passport-local').Strategy;app.use(express.static(path.join(__dirname,'public')))app.use(cookieParser())app.use(bodyParser.urlencoded({extended:true}))app.use(session({secret:'secret',resave:false,saveUninitialized:false,}))app.use(passport.initialize())app.use(passport.session())passport.use(newLocalStrategy((username,password,done)=>{if(username!=='user'||password!=='passwd'){return// ログイン失敗}returndone(null,username)// ログイン成功}))passport.serializeUser((user,done)=>{done(null,user)})passport.deserializeUser((user,done)=>{done(null,user)})// ...<html><headlang="ja"><metacharset="UTF-8"><title>ログイン</title></head><body><formaction="/login"method="post"><div><label>ユーザID：</label><inputtype="text"name="username"></div><div><label>パスワード：</label><inputtype="password"name="password"></div><div><inputtype="submit"value="Login"></div></form></body></html>その他
ログインに成功したら/login/okへリダイレクト、失敗したら/login/ngへリダイレクトするような実装をします。
ただ、普通にやってしまうとログインに成功していないにも関わらず、http://localhost:3000/login/okと叩けばアクセスできてしまいます。。。
そこで便利なものがあります！require('connect-ensure-login').ensureLoggedIn('/login')を挟んでやれば、ログインしていない場合は指定した/loginにリダイレクトされるようにできます。
// ...app.get('/',(req,res)=>{res.redirect('/login')})app.get('/login',(req,res)=>{res.sendFile('login.html',{root:path.join(__dirname,'public')})})app.post('/login',passport.authenticate('local',{failureRedirect:'/login/ng',session:true}),(req,res)=>{res.redirect('/login/ok')})app.get('/login/ng',(req,res)=>{res.sendFile('ng.html',{root:path.join(__dirname,'public')})})app.get('/login/ok',require('connect-ensure-login').ensureLoggedIn('/login'),// <--- こいつ！！(req,res)=>{res.sendFile('ok.html',{root:path.join(__dirname,'public')})});app.get('/logout',(req,res)=>{req.logout()res.redirect('/login')})// ...最後に
ログイン認証のセッション管理などをreq.isAuthenticated()で制御させてみたんですけど、想定通りの動きはしなかった。。。
これからはconnect-ensure-loginを使っていこーっと
一応、ソースコードを載せておきます。