59 feat 멋사 2학기 6번째 과제

[kittyismylife]

📌 관련 이슈

closed #59

✨ 과제 내용

💬 과제 내용

✔️ Login.js

import React from "react";
import kakao_btn_img from "./kakao_login_large_narrow.png";
import google_btn_img from "./[email protected]";

const Login = () => {
  // 카카오 인증 서버에 보낼 URL을 구성
  // 사용자에게 authorization code를 요청하는 단계
  // .env에 저장되어 있는 값들을 불러와서 사용함
  const authServerLink = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${process.env.REACT_APP_REST_API_KEY}&redirect_uri=${process.env.REACT_APP_REDIRECT_URI}`;

  // 카카오 로그인 버튼 클릭 시 카카오 인증 서버로 리다이렉트!
  const handleKakao = () => {
    // 카카오 인증 서버로 이동하여 사용자에게 로그인 화면을 제공하고, authorization code를 발급 받음
    window.location.href = authServerLink;
  };

  return (
    <div>
      <h2>로그인</h2>
      <div className="btns-container">
        {/* 카카오 로그인 버튼 */}
        <button onClick={handleKakao}>
          <img src={kakao_btn_img} alt="kakao_button" />
        </button>
        {/* 구글 로그인 버튼 */}
        <button>
          <img src={google_btn_img} alt="google_button" />
        </button>
      </div>
    </div>
  );
};

export default Login;

✔️ Redirection.js

import React, { useEffect } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";

const Redirection = () => {
  // URL에서 authorization code를 추출
  const [params] = useSearchParams();
  const authCode = params.get("code");
  const grant_type = "authorization_code";
  const navigate = useNavigate();

  useEffect(() => {
    // authorization code를 이용하여 카카오로부터 access token을 요청
    fetch(
      // 카카오 token endpoint로 POST 요청을 보냄
      `https://kauth.kakao.com/oauth/token?grant_type=${grant_type}&client_id=${process.env.REACT_APP_REST_API_KEY}&redirect_uri=${process.env.REACT_APP_REDIRECT_URI}&code=${authCode}`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded", // POST 요청에 맞는 헤더 설정
        },
      }
    ).then((res) => {
      // 응답에서 액세스 토큰을 추출
      const data = res.json();
      data.then((data) => {
        // access token을 localStorage에 저장하여 이후 API 요청에 사용
        localStorage.setItem("accessToken", data.access_token);

        // 인증이 완료되면 Greeting 페이지로 이동
        navigate("/greeting");
      });
    });
  }, []);
  return <div>Redirection Page: 카카오 로그인 중…</div>;
};

export default Redirection;

✔️ Greeting.js

import React, { useEffect, useState } from "react";

const Greeting = () => {
  // 사용자 이름과 프로필 이미지를 관리할 상태 변수
  const [name, setName] = useState();
  const [profileImg, setProfileImg] = useState();

  useEffect(() => {
    // localStorage에 저장된 access token을 가져옴
    const accessToken = localStorage.getItem("accessToken");

    // 카카오 API에 access token을 사용하여 사용자 정보를 요청
    fetch("https://kapi.kakao.com/v2/user/me", {
      method: "GET",
      headers: {
        // Authorization 헤더에 Bearer token 방식으로 access token을 포함
        Authorization: `Bearer ${accessToken}`,
        "Content-type": "application/x-www-form-urlencoded",
      },
    }).then((res) => {
      const userData = res.json();
      userData.then((user) => {
        // 응답에서 사용자 정보를 추출하여 화면에 표시
        // 해당 부분에 대해서는 사용하는 API의 변수명을 참고해야 함
        setName(user.properties.nickname); // 사용자 이름 설정
        setProfileImg(user.properties.profile_image); // 사용자 프로필 이미지 설정
      });
    });
  }, []);

  return (
    <div>
      <div
        className="profile-image-div"
        style={{ backgroundImage: `url(${profileImg})` }}
      ></div>
      <h2>{name}</h2>
    </div>
  );
};

export default Greeting;

📚 레퍼런스 (또는 새로 알게 된 내용) 혹은 궁금한 사항들

🤔 궁금한 점

오류가 많이 나는 부분 중 하나가, 카톡으로 로그인을 할 때에 어쩔 대에는 nickname을 잘 불러와서 성공이 되는데 어쩔 때에는 nickname을 불러오지 못 하는 현상을 발견했습니다. 아무리 코드를 보고 분석을 해도 해결이 되지 않아 일단,,, 코드 이해에 중점을 두고 진행했습니다... 혹시 이런 경우에는 어떤 부분을 보는 것이 좋을지,,, (정말 모르겟어요 왜 이러는 거지?)

🤪 참고

오류가 발생했을 때에는, "오탈자" 또는 "파일 위치" 또는 "yarn install 경로"를 먼저 확인하면 유용하다는 것을 다시 한번 느꼈습니다.
https://developers.kakao.com/docs/latest/ko/rest-api/reference
발생하는 오류나 로그 출력 내용에 대한 문서 정리가 잘 되어 있어 어떤 오류인지 파악하는 건 쉬웠지만 막상 이를 해결하는 건 어려웠던 것 같아요,,, 실제로 오탈자 찾는 것도 힘들어서 헉헉 거렷습니다...

구글 연동 로그인도 시도 중입니다만,,, 사용자 정보를 못 받아오고 있어서 일단 과제에는 주석을 단 코드만 첨부하였습니다 만약에 성공을 한다면 추가로 적어보도록 할게요^^... (구글도 연동 자체는 괜찮은 것 같은데, OAuth를 통해 정보를 못 받아오는? 부분이라서 좀 더 깊게 보면 해결 할 수 있을 것 같습니다... )