소셜 로그인 기능

카카오 로그인부터 구현

참고 링크 :

[ React ] 정말 쉽다! 카카오 소셜 로그인 프론트에서 이해하고 구현하기.

소셜 로그인 흐름. 카카오 포함 다 이런식으로 작동할듯? 자세한건 구글 등 시도해보면서 비교

단계별 구현 과정(프론트)

1. 인가 코드 받기

   1. 버튼 생성

   2. 버튼에 onclick 으로 카카오 인증 서버로 인가 코드 요청 함수 넣음

      interface Style {
        backgroundColor: string;
      }
      
      export default function LoginPage() {
        const REST_API_KEY = '백엔드에서 옴1';
        const REDIRECT_URI = '백엔드에서 옴2';
        const link = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
      
        const loginHandler = () => {
          window.location.href = link;
        };
      
        const style: Style = {
          backgroundColor: 'red',
        };
      
        return (
          <div>
            <h1>LoginPage</h1>
            <button onClick={loginHandler} style={style}>
              카카오 로그인
            </button>
            <button>구글 로그인</button>
            <button>네이버 로그인</button>
          </div>
        );
      }
      

   3. 카카오계정 로그인

   4. 카카오 인증 서버가 사용자에게 동의 화면 출력해서 인가를 위한 동의 요청

   5. 동의 후 인증 서버가 서비스 서버의 Redirect URI로 인가 코드 전달

      [http://localhost:5173/?code=](<http://localhost:5173/?code=haZWxf8pza-XNpnW8a3W91OgktX70Xjz5k5y0Q9l-8WbRh3azDZHdyiMYjUKKiWOAAABi2XEFAW2xj-RG-1vuA>)~~~ 이런 느낌으로 인가 코드 온다!

문제)

1-c 까지 완료 후 해당 에러 발생.

해결 방안) 카카오 설정을 안해놔서 생긴 문제였음.. 아래 링크 참고해서 설정 하면 됨.

Kakao Developers

시작부터… ts