프로그래밍 아마추어 IoT 서비스 개발 - 로그인 인증 -

19190 단어 FirebaseExpressNode.js

소개



2020년 3월부터 프로그래밍 공부를 시작해 7월까지 웹 서비스 제작에 도전하고 있는 프로그래밍 아마추어의 제작 기록입니다.

자신의 기술 수준



・Progate로 HTML/CSS, JavaScript, Node.JS를 받았다
· Express 프레임 워크에서 get 통신과 post 통신을 처리 할 수있게되었습니다.
・JS의 Promese의 개념이 조금만 이해되어 왔다
· obniz를 만진 적이있다.
htps : //에서. 코 m / 히로 마에 / 응 / 응 4850983 아 3f92

목표 제작물 및 필요한 기술 로드맵



뜨거워지는 계절을 향해, 열사병 예방을 위한 온도 검지 서비스의 제작에 임하고 있습니다.

익숙한 문제를 IoT로 해결할 수 없는지 생각해 보았습니다.
htps : //에서. 코 m / 히로 마에 / 응 / 응 0에 4 아 88 b501c

■현재 구상하고 있는 서비스상
제작을 위해 향후 익힐 필요가 있는 기술이 산만큼 있습니다.


이번은 서비스에의 로그인 인증 서비스를 접해 보았습니다.

이번에 입력 한 것



Firebase
htps : // 푹 빠져라. 오, ぇ. 이 m/? hl = 그럼

이번 출력



email과 pw를 express의 웹 서버에 건네주고, Firebase로 인증 성공하면 로그인 후 페이지로 천이시킬 수 있었습니다.



<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="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>
    <div class="container py-5">
      <form method="POST" action="/login"  id="app">
        <div class="form-group">
          <label for="email">Email address</label>
          <input
            type="email"
            class="form-control"
            id="email"
            aria-describedby="emailHelp"
            name="email"
          />
          <small id="emailHelp" class="form-text text-muted"
            >We'll never share your email with anyone else.</small
          >
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input
            type="password"
            class="form-control"
            id="password"
            name="password"
          />
        </div>
        <div class="form-group form-check">
          <input type="checkbox" class="form-check-input" id="exampleCheck1" />
          <label class="form-check-label" for="exampleCheck1"
            >Check me out</label
          >
        </div>
        <button type="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/[email protected]/dist/validators.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuelidate.min.js"></script>

  <script>
    Vue.use(window.vuelidate.default);
    const { required, email } = window.validators;

    const app = new Vue({
      el: "#app",
      data: {
        title: "入力フォームバリデーション",
        email: "",
        password: "",
      },
      validations: {
        email: {
          required,
        },
      },
      methods: {
        submitForm() {
          console.log("submit");
        },
      },
    });
  </script>
</html>

const express = require("express");
const app = express();

//Firebaseモジュールの読み込み
const firebase = require("firebase/app");
require("firebase/auth");

//Firebaseの初期化
var firebaseConfig = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
};
// Initialize Firebase
firebase.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);
  // ログイン処理の定義
  let handlerLogin = async function () {
    console.log("handlerLogin");
    try {
      const resSignInWithEmailAndPassword = await firebase
        .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);
      const errorCode = error.code;
      const errorMessage = 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...");

되돌아가다



·이것으로 인증했다고 말할 수 있을까···?
・인증 후는 확실히 세션 정보를 보유하고 그에 의해 로그인 상태를 유지한다든가 들었지만...
Express에서 CSS와 자바 스크립트를로드하는 방법
Express를 사용해 보았다 ~ Express에 "환영"이라고 말할 때까지 ~

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage