express + react 를 활용한 OAuth 소셜 회원가입및 로그인 진행하기 (2) Google, Kakao 소셜 회원가입 셋팅하기

https://loy124.tistory.com/383

express + react 를 활용한 OAuth 소셜 회원가입및 로그인 진행하기 (3) express 셋팅 및 Oauth 회원가입및

https://github.com/loy124/express-react-oauth-login

GitHub - loy124/express-react-oauth-login: express 와 react를 활용해 만드는 kakao및 google 회원가입/로그인

이제 google 및 kakao의 Oauth를 활용하기 위해서 각 API 사이트에 방문해서 Oauth를 승인하는 과정이 필요하다. 

 

그럼 여기에서 Oauth란 무엇일까?

OAuth 2.0

OAuth 2.0은 인증을 위한 표준 프로토콜입니다. OAuth 2.0은 웹 애플리케이션, 데스크톱 애플리케이션, 휴대폰 및 거실 장치에 대한 특정 권한 부여 흐름을 제공합니다.

 

OAuth는 사용자가 Facebook, Github, Google 등 해당 인터넷 서비스의 기능을 다른 어플리케이션에서도 사용 할 수 있게 한것이다.

해당 부분을 활용해서 Kakao로 로그인하기, Google로 로그인하기 등 여러 방면으로 사용 되고 있다. 

 

Authorization (인증)

인증은 로그인등 시스템 접근에 대한 인증을 진행받는것

Authenication (인가)

인증을 받은 사용자(로그인 된 사용자) 가 서비스를 사용할 때 다른 기능에 대한 부분들을 허가해주는 것 

 

 

 

 

 

 

구글 로그인 API 활용법 

 

 

1. 구글 프로젝트 생성 

https://console.cloud.google.com/apis/dashboard?hl=ko 

Google Cloud Platform

구글 로그인을 진행해서 해당 GCP 에 접속한다. 

 

API 및 서비스 -> 사용자 인증 정보로 이동한다. 

 

이 페이지를 보려면 프로젝트를 선택하세요 라는 메세지가 나온다면

프로젝트를 생성하면 되고 

기존에 이미 생성된 프로젝트가 있으면 새로 만들어도 된다.

 

 

 

oauth-test라는 이름으로 새 프로젝트를 만들었다.

 

프로젝트를 생성하면 이제 Oauth 동의화면을 구성하라는 메세지가 나온다. 

동의 화면 구성을 클릭해준다. 

 

2.  Oauth 동의화면 구성 

Google 계정이 있는 모든이가 접속 할 수 있도록 외부로 설정하고 만들기를 눌러준다. 

 

 

이에 맞게 앱이름 및 이메일을 설정해 준 후 다음으로 넘긴다.

 

범위

 

범위 추가 또는 삭제를 누를 경우 가능한 권한을 보여주게 되는데 기본으로 되어있는 3가지를 설정해주겠다.

 

 

업데이트를 누르고 나서

 

저장후 계속으로 범위를 마무리한다.

테스트 사용자

테스트 사용자는 따로 추가하지 않을 예정이다.

완료버튼으로 마무리한다. 

 

 

3. 사용자 인증번호 생성

다시 사용자 인증 정보로 들어가게 되면 API에 액세스하기 위한 사용자 인증 번호를 만들라고 한다. 

사용자 인증 정보 만들기 클릭 

 

 

유형을 웹 애플리케이션으로 선택해준다. 

 

 

승인된 자바스크립트 원본은 http://localhost:8000 은 Node.js 에서 사용할 서버의 주소 

 

승인된 리디렉션 URI는 OAuth 요청을 보낸후 완료시에 callback 하는 callback URL을 설정해준다

(Node.js에도 위 방식대로 라우팅을 설정할 예정이다.)

여기까지 진행하면 OAuth 클라이언트 생성이 완료된다. 

 

 

해당 클라이언트ID와 클라이언트 보안 비밀번호중 특히 보안 비밀번호는 유출해서는 안되는값들이다

해당 값들은 Node.js에서 .env를 통해 값을 미리 넣어준다.

 

만들었던 해당 backend 프로젝트에 접속해서 

 

.env파일을 생성하고

해당 env 파일에 GOOLE_CLIENT_ID와 GOOGLE_SECRET_ID 값들을 넣어준다.

(해당 google_client_id와 secret_id는 설정에서 추후 조회할수도 있다. )

 

 

위 방법까지 진행하면 Google Oauth 설정은 마무리된다.

 

 

 

카카오 API 생성법 

 

kakao developers에 접속한다.

 

 

https://developers.kakao.com/

Kakao Developers

 

내 애플리케이션 -> 애플리케이션 추가하기로 이동한다. 

구글과 같이 기초 프로젝트를 추가하는 방식으로 이해하면 된다. 

 

나만의 게시판이라는 이름으로 애플리케이션을 생성해주었다. 

이제 생성된 나만의 게시판을 클릭해서 접속한다. 

 

여기까지 하면 기본 API 활용 준비는 완료 되었으나 카카오 Oauth 승인 후 해당 API를 활용해서 이메일 정보도 수집해서 회원가입에 활용할 예정이기 때문에 추가 작업을 해줘야한다.

 

이메일정보등을 수집하기 위해서는 기존 애플리케이션을 비즈앱으로 전환해줘야한다

 

비즈앱을 활성화 하기위해서는 몇가지 방법이 존재한다.

 

1. 사업자정보 등록하기 

아이콘을 등록 한 후 -> 사업자 정보를 등록해서 비즈앱으로 전환할 수 있다.

 

일반적인 개발 공부를 하는경우라면 사업자 등록증이 없기에 다른 방법도 존재한다.

 

2. 카카오 게시판에 해당 애플리케이션을 비즈앱으로 전환 요청하기 

카카오 API의 포럼에 접속 -> General / 일반 접속 

 

게시글을 작성해서 일반 유저의 앱 또한 비즈앱으로 전환 할 수 있다. 

게시글을 작성하시면 카카오측에서 확인 후 승인처리를 해주신다. 

 

 

위와같이 관리자 검수로 비즈앱이 된 경우 관리자의 검수로 비즈앱이 되어있다고 나와있다. 

 

이제 플랫폼 -> WEB 플랫폼 등록을 해준다.

위의 구글과 마찬가지로 localhost:8000번대를 등록해주었다. 

 

http://localhost:8000

 

 

 

이제 카카오 로그인 버튼을 누르고 

카카오 로그인 활성화 및 Redirect URI를 설정해 준다. 

 

redirect URL을 

 

http://localhost:8000/user/auth/kakao/callback 로 등록해 주었다.

(Oauth 처리 후 redirect 되는 URI이다)

 

이제 카카오 로그인 -> 동의항목으로 이동해서 

 

카카오 계정(이메일을 필수 동의로 변경해준다 -> 해당 부분이 비즈앱이 활성화 되어있지 않다면 이메일 수집이 불가능하다.)

 

이제 마지막으로 

카카오 로그인 -> 보안으로 이동해서 Client Secret을 활성화 하고 발급해준다. 

 

REST API를 CLIENT_CODE로 사용하면 되고 

Client Secret 또한 .env파일 에 저장해준다.

 

 

 

 

 

여기까지 진행되었다면 이제 Google 및 카카오에 대한 Oauth 설정이 완료되었으며 

 

이제 이를 기반으로 Backend및 프론트에서 관련 셋팅을 진행해주면 된다. 

https://loy124.tistory.com/385

express + react 를 활용한 OAuth 소셜 회원가입및 로그인 진행하기 (3) express 셋팅 및 Oauth 회원가입및