Skip to content

소셜 로그인(카카오,구글)

HaeMin Yoon edited this page Sep 3, 2022 · 1 revision

로그인 전략

카카오 로그인과 구글 로그인을 사용하였으며 oauth를 사용해서 로그인 하였다 우리는 jwt토큰으로 로그인을 한다.

oauth 2.0 방법 사용

image

위 사진은 카카오 로그인 방식이지만 구글또한 같은 전략으로 로그인하기로 하였다

카카오 로그인 전략으로는 클라이언트가 카카오에 로그인 요청을한 후 인가코드를 받아서 우리 서버로 전송후 백엔드에서 카카오로 코드를 주어 토큰을 받는 방식으로 동작한다.

다만 지금 우리 프로젝트 같은 경우에서는 벡엔드 팀이 안드로이드 팀은 토큰을 바로 백엔드에 넘겨주어 프론트도 똑같이 인가코드를 주는 것이 아닌 토큰을 주는것으로 해달라고 요청하였다

프론트 로그인 흐름

  1. 카카오서버에 로그인 요청
  2. 인가코드 발급
  3. 인가코드를 카카오서버에 전달
  4. 토큰을 받음
  5. 토큰을 벡엔드로 전달

로그인 flow

  1. implicit flow

이방법으로는 access token만 발급이된다 만약 유효기간이 지난다면 어떤 동작(버튼을 클릭한더던지 새로운 제스처가 필요)을해서 다시 access token을 받아야한다

  • 서비스의 백엔드에서와 통신이 전혀 필요가 없다
  • 새로고침해도 어짜피 access token을 다시 받아와야 하니 따로 저장할 필요가 없다.
  1. Authorization code flow

인가코드를 받아와 다시 요청해서 access token과 refresh token을 받아오는 방식이다

다시 요청해서 받아오므로 꼭 redirect 방식을 사용한다 안하면 cors 에러가 발생하기 때문이다.

  • 백엔드에 이 값들을 넘겨주어서 저장해야한다
  • 새로고침시에 토큰이 날아가므로 브라우저에 저장이 필요하다

우리는 access token과 refresh token을 벡엔드에 넘겨주어야 하므로 authorization code flow 방법을 사용하였다

카카오 로그인 구현하기

Kakao Developers

카카오 로그인시에 대부분의 것은 카카오 sdk에서 지원해주어서 편하게 해결하였지만 인가코드를 이용해 토큰을 받는순서는 rest api방법을 이용해하여 직접 카카오에 전송해야 한다.

const kakaoLoginClick = () => {
    const { Kakao } = window;
    Kakao.Auth.authorize({
      redirectUri: KAKAO_PATH.REDIRECT_URL,
    });
  };

카카오 서버에 로그인 요청을 하는 코드

redirectUri페이지에 body로 인가 코드가 넘어온다.

인가코드를 카카오 서버에 전송해보자

// 인가코드를 카카오 서버에 전송하여 토큰을 받아올때(로그인 흐름 3번) 필요한 구성 요소들

url: "https://kauth.kakao.com/oauth/token"header: 'Content-Type': 'application/x-www-form-urlencoded',

 body: {
		grant_type: 'authorization_code',
    client_id: process.env.REACT_APP_REST_API_KEY,
// 카카오 development에 있는 API_KEY값이다
    redirect_uri: KAKAO_PATH.REDIRECT_URL,
    code: accessCode,
// redirect시에 받은 인가코드이다
    client_secret: process.env.REACT_APP_KAKAO_CLIENT_SECRET,
// 카카오 development상에서 client_secret 옵션 설정을 안했으면 넣지 않지만 한번이라도 설정이 되었으면 넣어야한다 (아무것도 안건들이면 넣지 않아도됨)
}
//★ body는 queryString으로 인코딩 해야함 ★

여기서 중요한것은 body에 데이터가 json 형식이 아닌 queryString으로 압축해서 넘겨주어야 한다.

queryString 관련글

카카오 서버에 요청하게 되면 토큰을 발급해주고 이 토큰을 백엔드에 보내서 저장하고 사용하도록 처리하였다

구글 로그인 flow

구글은 따로 sdk없이 @react-oauth/google 라이브러리를 사용하였다

@react-oauth/google

@react-oauth/google 어떤 mode를 사용할까?

다음 사이트에서 어떤 방법으로 구글 로그인할것인지 선택하고 코드를 볼수 있다

카카오와 마찬가지로 implicit flow Authorization code flow 방법으로 진행한다.

// @react-oauth/google 라이브러리 사용

const googleLoginClick = useGoogleLogin({
    flow: 'auth-code',
    redirect_uri: GOOGLE_PATH.REDIRECT_URL,
    ux_mode: 'redirect',
  });
// 인가코드를 구글 서버에 전송하여 토큰을 받아올때(로그인 흐름 3번) 필요한 구성 요소들

url: "https://oauth2.googleapis.com/token"header: 'Content-Type': 'application/x-www-form-urlencoded',

 body: {
		grant_type: 'authorization_code',
    client_id: process.env.REACT_APP_GOOGLE_CLIENT_KEY,
// 구글 클라우드에 있는 API_KEY값이다
    redirect_uri: GOOGLE_PATH.REDIRECT_URL,
		client_secret: process.env.REACT_APP_GOOGLE_CLIENT_SECRET,
// 구글 클라우드에 있는 client_secret이다
    code: accessCode,
// redirect시에 받은 인가코드이다
}
//★ body는 queryString으로 인코딩 해야함 ★

카카오로그인과 url만 바뀌었지 사실상 로직은 똑같다