[항해 54일 . TIL] 소셜로그인

박예슬·2022년 5월 3일

TIL 산길프로젝트 항해99

항해 - 팀프로젝트 : 실전프로젝트(산길)

목록 보기

2/8

나는 오늘

✔ 소셜 로그인(카카오, 네이버, 구글) 코드 작성 및 서버와 연결 완료

기억해보자

프로젝트 소셜로그인 기능 요약

프로젝트에 별도의 회원가입&로그인 대신 소셜로그인 기능을 넣기로 했다.
선택한 플랫폼은 카카오, 네이버, 구글.
일단 카카오는 스마트폰을 통해 가장 많이 사용하는 sns이기 때문에 필수였고,
등산의 경우 네이버의 밴드, 카페를 통한 동호회, 모임활동이 활발하기 때문에 추가했다.

기능 구현을 위해 구글링을 하다 발견한 보석같은 블로그 글과 카카오 문서를 참고하니 어렵지 않게 해낼 수 있었다!

핵심

REST-API를 활용한 로그인
React + Spring
프론트엔드 : 카카오로부터 인가코드를 받고 받은 인가코드를 백엔드에 넘겨주는 역할
인가코드를 넘기면 백엔드로부터 우리 사이트 전용 토큰을 발급받는다
백엔드 : 프론트로부터 인가 코드를 넘겨받고 카카오로부터 토큰을 발급받는다. 그리고 해당 토큰에 담긴 유저 정보를 활용해 프로젝트 전용 토큰으로 새롭게 발급 후 프론트에게 돌려준다.

소셜로그인 과정

대략적인 소셜로그인 과정이 참고했었던 블로그에 있어 가져와봤다.
sociallogin

애플리케이션 설정

소셜로그인 과정은 네이버와 구글도 비슷하기때문에 카카오를 기준으로 작성해 놓으려 한다.
우선 kakao developer에서 애플리케이션을 추가하고 여러가시 설정을 해야한다.

애플리케이션 추가

kakao developer 👉 내 애플리케이션 👉 애플리케이션 추가하기

애플리케이션 추가

API 앱 키 확인

내 애플리케이션 👉 앱 설정 👉 요약정보

애플리케이션을 추가하면 아래와 같이 카카오 API 앱 키가 발급된다.
여기서 REST API 키를 사용할 것!

API 앱 키 확인

Web 플랫폼 설정

내 애플리케이션 👉 앱 설정 👉 플랫폼 👉 Web 플랫폼 등록

Web 개발을 하고 있기 때문에 플랫폼 등록에서 Web 플랫폼 등록을 선택한다.
도메인이 있으면 도메인 주소를 입력하고, 아직 로컬로 개발중이라면 로컬호스트 주소를 입력한다.
Web 플랫폼 설정

Redirect URI 등록

내 애플리케이션 👉 제품 설정 👉 카카오 로그인

플랫폼을 등록하면, 아래와 같이 바로 Redirect URL을 등록하는 링크를 확인할 수 있다.

Redirect URI 등록 선택

위 링크로 들어가면, 아래와 같은 화면이 보인다.
활성화 설정의 상태가 OFF로 되어있는데 이것을 ON으로 변경한다.

💡 이때, 활성화를 하기 전에 동의 항목에서 필요한 사항을 설정하고 활성화 버튼을 누른다.
동의 항목은 왼쪽 사이드바에서 카카오 로그인 바로 아래 동의 항목에 들어가서 확인할 수 있다
[ 내 애플리케이션 👉 제품 설정 👉 카카오 로그인 👉 동의항목 ]

카카오 로그인

활성화 설정을 한 뒤,

Redirect URI 등록을 눌러서 URI 를 저장해준다

카카오 로그인은 서비스와 카카오 서버가 서로 정보를 주고 받는 방식으로 진행된다. 카카오 서버는 Redirect URI로 서비스에서 필요한 로그인 인증 정보를 보내고, 서비스는 Redirect URI로 받은 로그인 인증 정보를 처리해 다음 단계 요청을 보낸다. 따라서 이 정보가 앱 설정에 등록돼 있지 않으면 카카오 로그인 시 에러가 발생한다.

Redirect URI

💡 경로 설정은 백엔드와 협의해서 맞춘다. (user/kakao/callback)
이때, 여기서 host(localhost:3000)는 프론트엔드가 접근할 수 있어야 한다.
왜냐하면 여기에서 프론트가 인가 코드를 받고 넘기고 등등 모든 작업이 이루어져야 하기 때문에!

인가 코드 받기

모든 설정을 완료했다면, 위에 첨부했던 소셜로그인 과정의 로직처럼, 인가코드 요청부터 순차대로 진행된다.
카카오 로그인의 REST API 문서를 확인해 보면, 단계별 설명이 잘 나와있다.

👉 인가 코드 받기 doc

사전 설정

일단, 문서에 나와있는 사전 설정은 모두 완료된 상태.
사용자 동의를 거쳐 발급된 인가코드로 토큰을 발급할 수 있다.

인가코드1

설명을 읽어보면, 사용자에 대한 인가 코드가 발급되면 서비스의 redirect_uri 로 전달되고
이때, 인가코드는 쿼리 스트링(Query String)에 포함된다.

request 와 response

인가코드request

인가코드response

request의 경우,
GET요청의 /oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code 로부터 인가 코드를 받아올 수 있고,
이 때 Host 는 kauth.kakao.com 이므로 GET으로 요청하는 URL은 최종적으로 다음과 같다.

https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code

위 주소로 접근을 하면 인가코드를 받아올 수 있고,
이때, 우리 애플리케이션에 해당하는 client_id 와 redirect_uri 의 값을 각각 REST_API_KEY와 REDIRECT_URI에 대체해줘야한다.

카카오말고도, 네이버, 구글 또한 이러한 키 값들이 있기때문에,
이 값들을 한 번에 편리하게 관리하기 위해 컴포넌트를 생성해 모아두었다.

// SocialOAuth.js
const CLIENT_ID = "---REST_API_KEY---";
const REDIRECT_URI = "http://localhost:3000/user/kakao/callback";

export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;

...

// 이후에, 네이버와 구글의 키 값들도 같은 방식으로 추가했다

const GOOGLE_CLIENT_ID = "--";
const GOOGLE_REDIRECT_URI = "--"; 
export const GOOGLE_AUTH_URL = `--`;

...

이제 로그인 페이지에서 export 했던 KAKAO_AUTH_URL 를 import 해준뒤,
카카오 아이디로 로그인 버튼을 누르면 해당 URL 주소로 이동하게 연결해준다.

// Login.js

import {
  KAKAO_AUTH_URL,
  GOOGLE_AUTH_URL,
  NAVER_AUTH_URL,
} from "../shared/SocialOAuth";

const Login = (props) => {
  return (
    <>
    	<Grid>
    		<A href={KAKAO_AUTH_URL}>
    			<Grid>
    				<Image 
						width="27px" 
						height="24px" 
						src={require("../assets/images/KakaoLogo.png")}/>
					<Text>카카오 아이디로 로그인</Text>
				</Grid>
          	</A>
		</Grid>
       	...

그러면, 카카오톡 로그인 화면으로 이동되고, 사용자가 이메일을 입력한뒤 동의하기까지 누르게 되면 우리가 설정했던 Redirect_URI 화면으로 이동한다.

이 화면에서 인가 코드를 받을 수 있는데, 문서에서 확인한 response를 확인해보면,
code라는 이름의 파라미터로 인가코드가 전달 된다는 것을 알 수 있다.

즉, 주소창을 보면 설정했던 Redirect_URI(/user/kakao/callback) 뒤에 인가 코드가 code의 파라미터 값으로 담겨 전달되어서 리다이렉트된다.

localhost:3000/user/kakao/callback?code=인가코드

이제 이 인가코드를 가져와야한다.

// 1. 현재 화면의 주소창을 가져온다
const href = window.location.href;

// 2. new URL() 해당 주소에 대한 자세한 정보 확인 가능 
// 3. search 키에 인가코드가 속한 파라미터가 담겨있다 (search: "?code=인가코드")
const params = new URL(href).searchParams;

// 4. "code" 라는 key에 있는 value 값을 꺼낸다 = 인가코드
const code = params.get("code");

// 위의 절차를 한줄 코드로 작성하면 code에 인가코드가 담긴다!
let code = new URL(window.location.href).searchParams.get("code");

인가 코드 백엔드에 전달

위의 코드를 우리의 Redirect_URI 경로의 컴포넌트에 작성해주면 된다.
그리고, axios를 활용해 코드를 백엔드에 전달하고 토큰을 받아 세션에 저장한다.

// KakaoLogin.js
...
const KakaoLogin = (props) => {
  ...

  // 인가코드 받기
  let code = new URL(window.location.href).searchParams.get("code");
  
  React.useEffect(() => {
    const kakaoLogin = async () => {
      
      // code 전달
      await dispatch(userActions.kakaoLoginDB(code));
    };
    kakaoLogin();
  }, []);

  return <React.Fragment></React.Fragment>;
};

export default KakaoLogin;

// redux > modules > user.js

const kakaoLoginDB = (code) => {
  return function (dispatch, getState) {
    api
      .kakaoLogin(code)
      .then((res) => {
        const ACCESS_TOKEN = res.headers.authorization;
        sessionStorage.setItem("token", ACCESS_TOKEN); // 받아온 토큰 세션에 저장
        dispatch(isLogInDB(ACCESS_TOKEN));
      })
      .catch((err) => {
        console.log(err);
        window.alert("로그인에 실패하였습니다.");
      });
  };
};

// axios : api.js
...
kakaoLogin: (code) => instance.get(`/user/kakao/callback?code=${code}`),

참고 링크

박예슬

공부중인 개발자

[항해 54일 . TIL] 소셜로그인

항해 - 팀프로젝트 : 실전프로젝트(산길)

나는 오늘

기억해보자

프로젝트 소셜로그인 기능 요약

소셜로그인 과정

애플리케이션 설정

API 앱 키 확인

Redirect URI 등록

Redirect URI 등록을 눌러서 URI 를 저장해준다

인가 코드 받기

request 와 response

인가 코드 백엔드에 전달

참고 링크

0개의 댓글