[React/리액트] 소셜 로그인 구현하기

인증과 인가

인증 Authentication

서버가 리퀘스트를 보낸 유저가 누구인지를 파악하는 기능이다.

일종의 회원가입과 로그인 절차라고 생각할 수 있으며 이를 위해 유저 정보를 담기 위한 유저 모델이 필요하다. 

쿠키 인증

서버 response 나 클라이언트 코드에 따라 브라우저에 저장되는 작은 단위의 문자열 파일

이름, 값, 속성으로 구분되며 각 속성들은 세미콜론으로 구분된다. 

속성에는 만료인, 보안 설정 등이 존재한다. 

서버는 reponse 값에 있는 Set-Cookie 헤더에 쿠키를 보내주며 클라이언트는 이 쿠키를 저장한 후 브라우저가 request 를 보낼 때 자동으로 쿠키 헤더에 해당 쿠키가 추가되어 보내진다. 

Authorization 헤더 인증

서박 body 값에 인증서를 추가하여 클라이언트에 전송한다. 이후 클라이언트는 해당 인증서를 쿠키 혹은 로컬스토리지에 저장하여 관리하며 Header의 Authorization 속성에 인증서를 붙여 request 를 전송할 수 있다. 

 

인증서는 토큰과 세션 2가지 종류가 있다. 

 

세션

서버가 저장하는 사이트 방문자에 대한 기록이다. 

ip 주소, 방문 여부, 브라우저 등의 정보를 저장하며 세션의 아이디를 쿠키 헤더에 전달하여 쿠키를 통해 인증을 한다. 

 

토큰

유저에 대한 정보를 암호화한 문자열로, 인증 토큰 AccessToken 이라고도 한다. 

유저가 로그인 request 를 전송하여 정보가 유효함을 파악하면 서버는 해당 유저 정보를 바탕으로 토큰을 생성한다. 

유저 정보를 토대로 문자열을 암호화하여 반환한다. 

이후 해당 토큰을 통해 유저가 request 를 보내면 서버는 암호화키를 통하여 암호를 해석한다. 

 

JWT 토큰은 JSON 형식의 데이터를 문자열로 인코딩한 토큰이다. 

인터넷 표준 인증 방식으로 헤더, 페이로드, 시그니처로 구성되어있다. 각 요소들은 점(.)으로 구분되어진다. 

헤더: 토큰 자페의 정보로 암호화 알고리즘, 토큰 형식 등 작성

페이로드: 실제 저장하려는 정보로 토큰 발급자, 토큰 제목, 만료일 등 작성. exp, iat 같은 공식 이름을 최대한 활용

시그니처: 토큰의 출처와 신뢰성 등을 작성하며 헤더와 헤이로드를 인코딩한 값과 시크릿 키를 통해 시그니처 값을 생성

 

인가 Authorization

유저가 리퀘스트를 보내면 어떤 권한이 있는지 판단하는 것이다. 

인증서를 통하여 어떤 유저인지 파악하고(인증), 이후 권한이 있는지 판단하여 허락한다.(인가)

보통 인증이 먼저 실행된 뒤에 인가가 뒤따라온다. 

 

소셜로그인 구현

깃허브: https://github.com/P1su/social-login

 

구조

Main.tsx

카카오 로그인 버튼과 구글 로그인 버튼이 위치한다.

Loading.tsx

로그인이 이루어질 동안 나타낼 로딩 페이지이다.

Result.tsx

결과 화면으로 사용자 이름과 프로필이 나타난다.

BtnKakao.tsx

카카오 로그인 버튼 컴포넌트이다. onClick 이벤트로 카카오 계정 인증 화면으로 넘어가며 인가코드를 받아온다.

BtnGoogle.tsx

카카오 로그인 버튼 컴포넌트이다. onClick 이벤트로 카카오 계정 인증 화면으로 넘어가며 인가코드를 받아온다.

KakaoCallback.tsx GoogleCallback.tsx 인가코드를 받아온 후 accessToken 을 발급받고, 사용자 정보를 받아온다.

카카오 로그인

프로젝트 생성 후 KakaoDevelopers 에 등록

리다이렉트URI 설정

필요한 키값들을 .env 파일에 환경 변수로 저장한 후 env 파일을 .gitignore 에 추가 로그인에 필요한 값들을 utils 폴더 밑 파일에서 한번 더 관리

로그인 버튼을 누를 시 카카오 로그인 실행

이후 설정한 리다이렉트 페이지로 이동한다. 해당 페이지 경로에 있는 쿼리로부터 인가코드를 추출한다.

  const code = new URL(document.location.toString()).searchParams.get('code');

인가코드를 바탕으로 accessToken을 발급받는다.

const GRANT_TYPE = 'authorization_code';
const POST_URL = `grant_type=${GRANT_TYPE}&client_id=${REST_API_KEY}&redirect_uri=${KAKAO_REDIRECT_URI}&code=${code}`;
const res = await axios.post(`https://kauth.kakao.com/oauth/token?${POST_URL}`, {
  headers: {
    'Content-type': 'application/x-www-form-urlencoded;charset=utf-8',
  },
});

response 값을 바탕으로 유저 정보를 받아온다.

const userData = await axios.get('<https://kapi.kakao.com/v2/user/me>', {
  headers: {
    Authorization: `Bearer ${res.data.access_token}`,
    'Content-type': 'application/x-www-form-urlencoded;charset=utf-8',
  },
});

이후 해당값을 로컬스토리지에 저장한 후 경로를 이동한다.

localStorage.setItem('nickname', userData.data.properties.nickname);
localStorage.setItem('profile', userData.data.properties.profile_image);
navigate('/result');

구글 로그인

구글 클라우드 접속 → 프로젝트 선택

새 프로젝트 생성

API및 서비스 → 사용자 인증 정보

OAuth 동의 화면 → UserType 외부 설정

동의 설정 필수 요소들만 작성하고 비워두어도 된다.

자유롭게 범위 설정 보통 상단 3개를 설정

테스트 사용자는 설정하지 않는다.

앱을 게시한다.

사용자 인증 정보 → 사용자 인증 정보 만들기 → OAuth 클라이언트 ID

 

이후 애플리케이션 유형과 이름, 리다이렉트 uri 를 설정한다.

클라이언트 아이디와 비번을 복사해둔다.

이후 API 키를 설정한다. 자동으로 생성된다.

환경 변수와 접근 주소 설정

프론트에서 accessToken 받으려면 access_type을 offline 으로 설정해준다.

해당 주소로 연결됨 확인

이후 리다이렉트로 연결됨

마찬가지로 GoogleCallback 컴포넌트 설정

코드를 추출해준다.

인가 코드를 바탕으로 양식에 맞게 accessToken 을 요청한다.

토큰을 받아올 수 있다.