[2024 Ver] React 프로젝트에서 카카오 로그인, 쉽게 해보자😎
리액트 프로젝트를 진행하면서, 로그인을 구현해야하는 상황에 직면했습니다.
이것은 프로젝트를 기획하면서 예상했던 가장 큰 난관 중 하나였는데,
구글링을 해도 2023 버전이 추천에 뜨거나 자세히 다루는 블로그가 없는 것 같아 기록을 하기로 했습니다.
1. 카카오 개발자(Kakao Developers) 사이트 접속
1) 아래의 링크를 클릭하고 사이트에 접속합니다.
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
2) 내 애플리케이션 클릭
우측 상단 메뉴 중, [내 애플리케이션] 클릭 후 카카오 로그인을 해주세요.
2. 애플리케이션 추가하기
1) 애플리케이션 추가하기를 클릭합니다.
2) 애플리케이션 설정을 입력합니다.
앱 이름과 회사명은 프로젝트 이름이나 Test 등 아무거나 작성해도 무방합니다.
그리고 서비스 이용 중 운영정책 위반하지 않는다에 체크 후 저장을 클릭합니다.
3) 애플리케이션 추가 성공
애플리케이션이 성공적으로 추가되었습니다. 클릭합니다.
3. Web 플랫폼 수정
1) 내 애플리케이션 > 앱 설정 > 플랫폼으로 이동합니다.
왼쪽 사이드 메뉴의 앱 설정 카테고리에서 [ 플랫폼 ] 항목을 클릭합니다.
2) Web 플랫폼 등록을 클릭합니다.
프론트(화면) 측의 사이트 도메인을 입력해야합니다.
http://localhost:3000 을 입력합니다.
질문1) 왜 http://localhost:3000 을 입력해여?
테스트는 로컬에서 하니까요. 실제로 배포하는사이트라면 그 사이트 도메인 적어주면 됩니다.
웹을 빌드하면 localhost:3000 도메인으로 열리는거 아시죠? 그겁니다.
만약 잘 모르신다면.. 기초 지식이 많이 부족하신 상태로 카카오 로그인 구현 알아볼 때가 아닙니다.
질문2) "저는 3030아니고 따로 로컬 주소 설정해서 http://localhost:8090 인데용?"
예 그거 입력하시면 됩니다.
로컬은 그냥 실제 서비스에 적용하지 않고 내 PC에서 보는 서버라고 생각하면 편합니다.
아래처럼 입력합니다.
4. 리다이렉트(Redirect) URI 설정
1) 내 애플리케이션 > 제품 설정 > 카카오 로그인으로 이동합니다.
왼쪽 사이드 메뉴의 제품 설정 카테고리에서 [ 카카오 로그인 ] 항목을 클릭합니다.
Redirect URI는 로그인 서비스 과정에서 로그인에 필요한 인가 코드와 토큰을 전달한다는데
이 글에서는 다루지 않겠습니다. 저도 잘 모르거든요. 추후에 다뤄보겠습니다.
2) Redirect URI 등록을 클릭합니다.
3) http://localhost:3000/auth를 입력하고 저장을 클릭합니다.
뒤에 /auth 로 작성하면 auth?code = '인가코드' 의 형태로 나타나게 됩니다.
OAuth와 auth가 무엇이냐, 아래의 글에서 개념을 파악해봅시다.
OAuth 2.0이 뭐에요..? 쉽게 이해하는 개념정리
[Web 지식 냠냠] OAuth, Redirect URI..? 쉽게 이해하는 개념 정리
요즘은 웹이나 앱에서 카카오와 구글 등 소셜 로그인 서비스가 필수적입니다.그런데 개발자가 소셜 로그인을 구현하려면 거쳐야 할 난관이 하나 있는데바로 OAuth와 리디렉션(Redirection) 입니다.
slowdev.tistory.com
아무튼 Redirect URI와 함께, 카카오 로그인에서 사용할 OAuth Redirect URI를 설정한 것입니다.
일단 대충 이해하기 쉽게 말하자면,
카카오 로그인을 시도했을 때 정상적으로 로그인이 되면 응답을 받을 주소로
카카오측에서 해당 주소로 정보를 전달해주는 것이라고 생각합시다.
5. 활성화 설정
1) 활성화 설정 상태를 ON으로 변경합니다.
Redirect URI 설정 항목 바로 위에있는 활성화 설정 항목의 상태를 ON으로 맞춰주세요.
2) 활성화 버튼을 클릭합니다.
활성화 설정의 상태를 ON으로 변경하려 하면 아래의 창이 하나 뜨고
동의 항목을 설정해야할지 물어보는데, 일단 무시하고 활성화 클릭해주세요.
바로 다음 단계에서 설정할거니까 걱정 마시구 활성화 눌러주세요.
3) 이게 뭐죠?
활성화 버튼을 눌러 카카오 로그인을 활성화하면 아래의 항목이 갑자기 보이게 될겁니다.
조건이 카카오 로그인 활성화이기 때문에 가려져 있던겁니다.
이게 뭘까요? 카카오 공식 답변을 봅시다.
라고 하는데 쉽게 말해 토큰 추가 발급을 통해 더욱 안전한 사용자 인증을 할 수 있다는 것인데,
잘 모르겠습니다. 대충 이것도 활성화 해주고 넘어갑시다.
헤헷
6. 동의 항목 설정
1) 내 애플리케이션 > 제품 설정 > 동의항목으로 이동합니다.
왼쪽 사이드 메뉴의 제품 설정 카테고리에서 [ 동의항목 ] 항목을 클릭합니다.
* 해당 항목은 테스트 단계에서는 그렇게 막 중요한건 아닙니다. 시간 없는 분은 7번으로 ㄱㄱ
2) 동의항목이 뭔가요?
파란 배경 오른쪽에 보이는 동의 화면 미리보기를 클릭해보면 바로 알 수 있습니다.
본 적 있으시죠?!
카카오로 회원가입이나 로그인 서비스를 이용할 때 사용자가 보게되는
개인정보 동의 항목 같은 뭐 그런 항목 지정하는 겁니다.
한마디로 닉네임이나 프로필 사진, 이름, 성별 등의 정보를
회원가입이나 로그인 시 제공하는 것에 동의하겠냐고 사용자에게 물어보도록 설정하는 것인데,
활성화 된 항목은 몇 개 없습니다.
이건 비즈니스 앱이 아니기 때문에 그런겁니다.
테스트 앱으로 만들고 누구한테 배포할지 모르는데 일단 이름이나 성별 같은 건 필요 없으니까요.
3) 설정 버튼 클릭해서 필수 여부를 설정합니다.
설정 버튼을 클릭하면 해당 동의 항목에 필수로 체크할지 여부를 설정할 수 있습니다.
테스트니까 대충 입력하고 저장을 누릅니다.
개인정보란 상태가 바뀌어 있습니다.
마찬가지로 동의 화면 미리보기 클릭해서 변경된 부분을 확인해 봅시다.
7. REST API 키 확인
1) 왼쪽 사이드 메뉴의 앱 설정 카테고리에서 [앱 키] 항목을 클릭합니다.
2) API Key를 확인합니다.
리액트에서 REST API 방식으로 설명을 진행합니다.
REST API 키의 키를 확인합니다.
3) 리액트 프로젝트에 컴포넌트를 생성
KakaoLogin 이라는 이름으로 컴포넌트를 만들고 코드를 작성해보겠습니다.
import React from 'react';
const KakaoLogin = ()=>
{
const Rest_api_key='REST API KEY' //REST API KEY 입력
const redirect_uri = 'http://localhost:3000/auth' //Redirect URI 입력
// oauth 요청 URL
const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${Rest_api_key}&redirect_uri=${redirect_uri}&response_type=code`
const handleLogin = ()=>{
window.location.href = kakaoURL
}
return(
<>
<button onClick={handleLogin}>KAKAO 로그인</button>
</>
)
}
export default KakaoLogin
// REST API KEY 입력
// Redirect URI 입력
이라고 명시된 곳에 Kakao Developers에서 발급받은 키와 URI을 입력합니다.
아래 모양으로 입력되어있으면 되는데..
원래 개발에 사용하는 API키는 어디가서 함부로 보여주면
내 의지와 상관없이 개인 프로젝트가 팀프로젝트가 될 수도 있습니다.
(2024.07.24 수정)
이렇게 하면 로그인이 되냐구요?
당연히 아닙니다. 조금 더 설정해줘야 할 부분이 있는데요.
이건 로그인을 위한 인증까지만 하는 단계입니다.
아래 글에서 로그인 과정까지 다뤄놓았습니다.
[Web 지식 냠냠] OAuth, Redirect URI..? 쉽게 이해하는 개념 정리
[Web 지식 냠냠] OAuth, Redirect URI..? 쉽게 이해하는 개념 정리
요즘은 웹이나 앱에서 카카오와 구글 등 소셜 로그인 서비스가 필수적입니다.그런데 개발자가 소셜 로그인을 구현하려면 거쳐야 할 난관이 하나 있는데바로 OAuth와 리디렉션(Redirection) 입니다.
slowdev.tistory.com
8. 보여줄 화면 컴포넌트에서 @import
1) 카카오 로그인이 보여질 컴포넌트에서 해당 카카오 로그인 컴포넌트를 import합니다.
아래 구문 처럼 import 하면 됩니다.
import KakaoLogin from '카카오 로그인 컴포넌트 경로';
그리고 화면에 보여질 위치에 import 명으로 된 태그를 입력해줍니다.
저는 위치를 지정하기 위해로 감싸서 입력했는데 꼭 필수는 아닙니다.
암튼 이라고 입력하고 터미널에서 npm start를 하면 화면에 잘 나타납니다.
2) 화면에 추가된 모습
프로젝트 개발 중인 로그인 화면에 추가해보았습니다.
쨔란~
위에서 설명한 내용대로 이건 인증, 동의까지만 하는 겁니다.
그 뒤에 로그인이 실제로 되는 과정은
조금 더 복잡한 구조를 이해해야 합니다.
해당 글 안에 참조한 OAuth어쩌고.. 를 보시면 되겠습니다.
긴 글 읽어주셔서 감사합니다 : )