(38) 리액트 소셜 로그인 1

* 최근의 앱과 웹에서는 전통적인 회원가입 방식을 대신해서 흔히 소셜 로그인이라고 부르는 제3자 인증 방식으로 하는 경우가 많다. 예를 들어 구글이나 네이버, 애플, 페이스북 등의 서비스를 이용해서 별도의 회원가입 없이 로그인을 처리하는 방식이다.
* 이번 장에서는 리액트와 API 서버를 연계해서 리액트에서 카카오 서비스의 로그인을 호출하고, API 서버에서는 사용자의 인증 정보를 이용해서 기존 회원 데이터와 연동하도록 구성해 본다.
* 이번 장의 개발 목표는 다음과 같다.

1. 소셜 로그인 방식의 이해

2. 카카오 로그인을 위한 설정

3. 리액트에서 사용자 인증

4. API 서버의 사용자 처리

---

1. 소셜 로그인과 OAuth2.0

* 소셜 로그인은 기존의 서비스와 달리 제3의 사용자 인증 서비스를 이용해서 현재 사용자를 인증하고 원하는 리소스에 접근이 가능하게 하는 방식이다. 대부분의 포털에서 이러한 서비스를 제공하는데 많은 사용자를 가진 소셜 네트워크 서비스(이하 SNS)를 이용해서 인증하는 경우가 많기 때문에 흔히 소셜 로그인이라고 부르기도 한다. 제3자 인증 방식은 다양한 서비스(혹은 업체)를 동일한 방식으로 인증할 수 있도록 정해진 방식으로 개발하게 되는데 이때 사용하는 프로토콜이 OAuth(Open Authorization)이다.

OAuth (Open Authorization)는 사용자가 다른 웹사이트 또는 애플리케이션을 통해 자신의 정보를 안전하게 제3자 서비스에 공유할 수 있는 프로토콜입니다. 
OAuth는 사용자의 비밀번호를 직접 제공하지 않고도 다른 서비스에 대한 액세스 권한을 부여하는 데 사용됩니다.

OAuth의 기본 아이디어는 사용자가 자신의 데이터 또는 리소스에 대한 접근 권한을 특정 서비스에 부여할 수 있도록 하는 것입니다. 
주로 웹 및 모바일 애플리케이션에서 인증 및 권한 부여를 위해 사용됩니다.

OAuth의 핵심 구성 요소는 다음과 같습니다:

1. Resource Owner (리소스 소유자): 사용자로, 자신의 데이터 또는 리소스에 대한 액세스 권한을 제공할 수 있는 주체입니다.

2. Client (클라이언트): 사용자의 데이터에 액세스하려는 애플리케이션이나 서비스입니다. 이는 보호된 리소스에 접근하기 위해 OAuth를 사용하는 애플리케이션입니다.

3. Authorization Server (인증 서버): 사용자가 클라이언트에 대한 권한을 부여할 때 발생하는 프로세스를 관리하는 서버입니다. 사용자의 동의를 얻고 권한 부여 코드를 발급합니다.

4. Resource Server (리소스 서버): 실제로 보호된 리소스에 대한 액세스를 제어하고 있는 서버입니다. 클라이언트가 사용자의 데이터에 접근하기 위해 필요한 권한이 부여되었는지 확인합니다.

5. Access Token (액세스 토큰): 사용자의 리소스에 대한 실제 액세스를 허용하는 토큰입니다. 클라이언트는 액세스 토큰을 사용하여 리소스 서버에 요청을 보냅니다.

OAuth의 흐름은 크게 Authorization Code Flow, Implicit Flow, Resource Owner Password Credentials Flow, Client Credentials Flow 등이 있으며, 각각의 흐름은 다양한 사용 사례에 맞게 선택되어 사용됩니다. 
OAuth는 보안성과 사용자 편의성을 균형있게 제공하여 안전한 인증 및 권한 부여를 가능케 합니다.

* 최근에 많이 사용하는 OAuth2.0은 다양한 상황에 맞게 사용자의 권한을 부여하는 방식을 제공하는데 가장 많이 사용되는 방식은 아래와 같다.

- 권한부여 승인 코드 방식(Authorization COde Grant)

- 암묵적 승인 방식(Implicit Grant)

- 자원 소유자 자격증명 승인 방식(Resource Owner Password Credentials Grant)

- 클라이언트 자격증명 승인 방식(Client Credentials Grant)

---

(1) 예제 구현 방식

* 카카오나 네이버 서비스는 '권한부여 승인 코드 방식'을 이용한다('권한부여 승인 코드'는 카카오 공식 문서에서는 '인가 코드'라고 표현하므로 설명에서는 '인가 코드'라는 용어를 사용한다). 작성 중인 리액트 애플리케이션에서는 다음과 같은 방식으로 구현할 예정이다.

* 리액트 애플리케이션 혹은 모바일 앱 등에서 로그인 화면을 보고(번호 1), 사용자가 로그인을 하게 된다(번호 2). 이 결과로 사용자는 인가 코드를 받게 되는데, 이 때 인가 코드가 전달되는 곳은 Redirect Uri 라고 한다.

* 사용자의 로그인을 통해 얻어온 인가 코드를 이용해서 카카오 서비스에 접근할 수 있는 Access Token을 얻기 위해서 다시 카카오 서비스를 호출하게 된다(번호 3). 카카오 서비스에서는 잠깐동안 유효한 Access Token을 발행해 준다(번호 4).

* 리액트나 앱 등에서 가지고 있는 Access Token을 API 서버에 전달해서(번호 5) 현재 사용자의 정보를 추출한다(번호 6-7). 이 과정에서 API 서버를 이용하는 이유는 가지고 온 사용자 정보를 API 서버 내부에서 체크해서 신규 회원으로 처리하거나 기존 회원의 정보를 로딩하기 위해서이다.

* 마지막으로 API 서버에서는 사용자 정보를 생성해서 리액트로 전달한다. 전달된 정보를 로그인 정보로 활용한다(번호 8).

---

2. 카카오 연동 설정

* 카카오 로그인을 이용하기 위해서는 '카카오 개발자' 사이트에서 '내 애플리케이션'을 추가해야만 한다.
https://developers.kakao.com/

Kakao Developers

* 카카오 로그인에 필요한 정보를 이용해서 로그인 후에 '애플리케이션 추가하기' 메뉴를 선택한다.

* 애플리케이션 추가 시에는 필요한 기본적인 정보를 입력/저장하면 여러 환경에서 사용할 수 있는 '앱 키'들이 생성되는데 이 중에서 'REST API'키를 사용할 것이다.

* 카카오 로그인을 수행하는 플랫폼을 설정할 때는 Web을 선택한다.

* Web 플랫폼 등록에서는 서버 주소와 포트를 지정하는데, 로컬 환경은 http://localhost:3000으로 지정한다(나중에 다른 주소 역시 추가 가능).

---

(1) 로그인 동의 설정

* 개발하려는 애플리케이션에서 카카오 로그인을 사용하려면 왼쪽 메뉴에서 '카카오 로그인'을 선택해서 활성화시켜 준다.

* 로그인 설정에서 가장 중요한 부분은 카카오의 인증 결과를 받는 'Redirect URI'의 설정이다. 예제는 리액트 쪽으로 인가 코드를 전달받을 것이므로 'http://localhost:3000/member/kakao' 로 설정한다.

* 로그인 시에 동의 항목은 카카오 로그인 후에 전달되는 사용자 정보를 의미한다. 예제에서는 이 중에서 '닉네임'과 '카카오 계정(이메일)'을 설정해서 사용할 것이다.

* 그 전에 비즈 앱 전환 시에만 카카오계정이 활성화 되므로 먼저 비즈앱 신청부터 시작해야 한다.

카카오계정이 활성화 된 것을 확인할 수 있다.

닉네임과 카카오계정이 활성화 되어 있는지 확인!

* 설정의 마지막 단계에서는 애플리케이션에서 사용할 비밀 키를 생성하는 부분이다. '보안' 항목에서 '코드 생성'을 이용해서 보안 코드를 생성한다. 보안 코드는 API 서버에서 사용할 수 있는 코드값이다.

---