node + 리액트 (cors)

어제는 패스포트를 이용하여 로컬로그인을 구현했으니
카카오로그인을 구현해보자...

passport.use(new KakaoStrategy({
    clientID: process.env.KAKAO_ID,
    callbackURL: 'http://localhost:3000/kakao/callback',
  }, async (accessToken, refreshToken, profile, done) => {
    try {
      const exUser = await users.findOne({
        where: { userid: profile.id, username: '카카오유저' },
      });
      if (exUser) {
        done(null, exUser);
      } else {
        const newUser = await users.create({
          email: profile._json && profile._json.kakao_account_email,
          nickname: profile.displayName,
          userid: profile.id,
          username: '카카오유저',
        });
        done(null, newUser);
      }
    } catch (error) {
      console.log(error);
      done(error);
    }
  }));

주위할점

현재 프론트와 노드의 주소가 다르다..!
그래서 카카오 로그인을 할경우 현재의 리다이렉트의 url을
프론트의 주소로 맞춰주는것이 좋다.
현재
Node :80포트
리액트 :3000포트
이런식으로 되어있어서 서버의 주소로 리다이랙트를 할경우
프론트 서버에서 계속 기다리고만 있다..
또한 서버로 kakao 리다이랙트를 신청한다면
CORS오류로 인하여 재대로 되지 않는다.
그래서 현재는 프론트에서 엑세스 코드만 받아서
백에서 처리를 하고있다.

리액트 코드

Kakao.Auth.authorize({ redirectUri: 'http://localhost:3000/kakao/callback'});

간단하게 리액트에서 카카오 로그인을 위한 요청

let code = new URL(window.location.href).searchParams.get("code");
    console.log("인가 코드", code);

    React.useEffect(async () => {
        axios({
            method: "GET",
            url: `http://localhost/kakao/callback?code=${code}`,
          })
            .then((res) => {
                const token = res.data.token;
                localStorage.setItem("token", token);
                window.location.href = "/";
            })
            .catch((error) => {
              console.log(error);
              window.alert("실패");
              window.location.href = "/";
            });
    },[]);

프론트의 콜백 리다이랙트 되는 페이지처리

  try {
    const user = req.user;
    const token = jwt.sign(
      {
        id: user["userid"]
      },
      process.env.SECRET_KEY
    );
    const data = { user: user };
    res.status(200).send({
      message: "로그인에 성공하였습니다.",
      data: data,
      token: token,
    });
  } catch (error) {
    console.log(error);
    res.status(500).send({
      message: "알 수 없는 문제가 발생했습니다. 잠시 후 다시 시도해주세요.",
    });
  }

node의 카카오 로그인후 토큰 발급..!