はじめに
2020年3月からプログラミングの勉強を始めて、7月までにWebサービス制作に挑戦しているプログラミング素人の制作記録です。
自分の技術レベル
・ProgateでHTML/CSS、JavaScript、Node.JSを受けた
・Expressフレームワークでget通信とpost通信を扱えるようになってきた
・JSのPromeseの概念が少しだけ理解できてきた
・obnizを触ったことがある
https://note.com/hiromae/n/n4850983a3f92
目標制作物＆必要な技術ロードマップ
熱くなる季節に向けて、熱中症予防のための温度検知サービスの制作に取り組んでいます。
身近な問題をIoTで解決できないか考えてみた
https://note.com/hiromae/n/n0e4a88bb501c
■現在構想しているサービス像
制作のために今後身につける必要がある技術が山ほどあります。
今回はサービスへのログイン認証サービスに触ってみました。
今回インプットしたもの
Firebase
https://firebase.google.com/?hl=ja
今回のアウトプット
emailとpwをexpressのWebサーバに渡し、Firebaseで認証成功したらログイン後ページに遷移させることができました。
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"crossorigin="anonymous"/><script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"crossorigin="anonymous"></script><title>Document</title></head><body><divclass="container py-5"><formmethod="POST"action="/login"id="app"><divclass="form-group"><labelfor="email">Email address</label><inputtype="email"class="form-control"id="email"aria-describedby="emailHelp"name="email"/><smallid="emailHelp"class="form-text text-muted">We'll never share your email with anyone else.</small></div><divclass="form-group"><labelfor="password">Password</label><inputtype="password"class="form-control"id="password"name="password"/></div><divclass="form-group form-check"><inputtype="checkbox"class="form-check-input"id="exampleCheck1"/><labelclass="form-check-label"for="exampleCheck1">Check me out</label></div><buttontype="submit"class="btn btn-primary">Submit</button></form></div></body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.4/dist/validators.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.4/dist/vuelidate.min.js"></script><script>Vue.use(window.vuelidate.default);const{required,email}=window.validators;constapp=newVue({el:"#app",data:{title:"入力フォームバリデーション",email:"",password:"",},validations:{email:{required,},},methods:{submitForm(){console.log("submit");},},});</script></html>constexpress=require("express");constapp=express();//Firebaseモジュールの読み込みconstfirebase=require("firebase/app");require("firebase/auth");//Firebaseの初期化varfirebaseConfig={apiKey:"",authDomain:"",databaseURL:"",projectId:"",storageBucket:"",messagingSenderId:"",appId:"",measurementId:"",};// Initialize Firebasefirebase.initializeApp(firebaseConfig);app.use(express.static("public"));app.use(express.urlencoded({extended:false}));app.get("/",(req,res)=>{res.render("index.ejs");});//ログインボタン押したときの処理app.post("/login",(req,res)=>{console.log(req.body.email);console.log(req.body.password);// ログイン処理の定義lethandlerLogin=asyncfunction(){console.log("handlerLogin");try{constresSignInWithEmailAndPassword=awaitfirebase.auth().signInWithEmailAndPassword(req.body.email,req.body.password);console.log("↓resSignInWithEmailAndPasswordをconsole.log↓");console.log(resSignInWithEmailAndPassword.email);res.render("main.ejs");}catch(error){console.log(error);consterrorCode=error.code;consterrorMessage=error.message;if(errorCode==="auth/wrong-password"){console.log("Wrong password.");res.render("pwWrong.ejs");}else{console.log(errorMessage);}}};handlerLogin();});app.listen(process.env.PORT||8080);console.log("server listen...");振り返り
・これで認証したって言えるのだろうか・・・？
・認証後は確かセッション情報を保有してそれによってログイン状態を保つとか聞いたことあるけど・・・