4. 프론트에서 토큰 입력해서 인증완료 하기

휴대폰에 온 인증번호를 입력 후 인증 완료 버튼을 누르면 실행되게 한다.

 

signup.js

// 핸드폰 인증 완료 API 요청
const submitToken = async () => {
  console.log("핸드폰 인증 API");
  let phone = "";
  for (let i = 1; i <= 3; i++) {
    phone += String(document.getElementById(`PhoneNumber0${i}`).value);
  }
  let token = "";
  token += String(document.getElementById(`TokenInput`).value);
  axios.patch(`http://localhost:3000/tokens/phone`, {
    phone : phone,
    token : token
  });
};

입력받은 휴대폰 번호와 토큰(인증 번호)를 받는다. patch로 둘을 보낸다.

 

백엔드 index.js

import express from "express";
import swaggerUi from "swagger-ui-express";
import swaggerJsdoc from "swagger-jsdoc";
import dotenv from "dotenv";
import mongoose from "mongoose";
import cors from "cors";
import { options } from "./swagger/config.js";

import { TokenController } from "./controllers/token_controller.js";
import { UsersController } from "./controllers/users_controller.js";
import { StarbucksController } from "./controllers/starbucks_controller.js";

const app = express();
app.use(express.json());
app.use(cors());
app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(swaggerJsdoc(options)));
dotenv.config();

const tokenController = new TokenController();
app.get("/tokens/phone", tokenController.getToken);
app.post("/tokens/phone", tokenController.postToken);
//===========================================================
app.patch("/tokens/phone", tokenController.patchToken); // <===== 휴대폰 번호, 토큰을 여기로 받는다.
//===========================================================
const usersController = new UsersController();
app.get("/users", usersController.getUsers);
app.post("/users", usersController.postUsers); 

const starbucksController = new StarbucksController();
app.get("/starbucks", starbucksController.getStarbucks);

mongoose.connect("mongodb://my_database:27017/codecamp");

app.listen(3000);

백엔드에서 /tokens/phone의 엔드포인트(주소줄)에 폰번호, 토큰이 들어온다. 

tokenController.patchToken을 들어가서 자세히 알아보자

왜 함수인데 tokenController.patchToken()이 아닌 tokenController.patchToken인가?
js에서 함수도 일종의 객체이다. 따라서 객체로 쓸 수 있으며, 만약 patchToken()으로 쓴다면 바로 '실행'이 되어버린다. 
자세히 공부해야 하는 부분이다.

token_controller.js  중에서 

class TokenController

  patchToken =  async (req, res) => { 
    const phone = req.body.phone;
    const token = req.body.token;
    //! 핸드폰 번호 이미 저장됐는지 확인
    const tokenPhone = await Token.findOne({ phone: phone });
  
    // 토큰자체가 디비에 없다면
    if (!tokenPhone) { 
      res.status(422).send("휴대폰 인증하세요.");
      return;
    }
  
    //! 발급한 토큰과 일치하는지 확인
    if (tokenPhone.token !== token) {
      console.log(tokenPhone);
      res.status(422).send("토큰 인증이 올바르지 않습니다.");
      return;
    } else {
      console.log(tokenPhone);
      await Token.updateOne({ phone: phone }, { isAuth: true });
      res.send(true);
      return;
    }
  }

받은 휴대폰번호로 디비에 그 폰번호가 있는지 확인하고 있다면 그 폰번호의 토큰을 가져온다.

 

만약 입력한 인증번호와 DB인증번호가 다르다면

토큰 인증이 올바르지 않습니다.

아니라면 isAuth(토큰 인증이 됐는지 확인하는 객체) true로 반환하고

res.send(true)를 반환한다.