사이드 프로젝트에서 로그인은 네이버, 카카오, 구글을 통한 소셜 로그인만 제공하기로 하였습니다.
OAuth 프로세스
- 브라우저에서 서버로 OAuth 로그인 페이지를 요청합니다.
- 서버는 브라우저를 OAuth 서비스 제공자의 로그인 페이지로 리다이렉트시킵니다.
- 로그인 성공시 서비스 제공자는 브라우저를 서버와 사전에 협의된 URL로 Access Token과 함께 리다이렉트시킵니다.
- 서버는 서비스 제공자에게 인증코드를 보내고 서비스 제공자는 사용자 정보를 서버로 보냅니다
Google OAuth 클라이언트 등록
1. https://console.cloud.google.com/ 에 로그인합니다.
2. "프로젝트 만들기"를 선택하여 자신의 프로젝트를생성합니다.
3. "API 및 서비스" > "사용자 인증 정보" > “동의 화면 구성”을 선택합니다.
동의화면이란 OAuth 동의 화면에는 애플리케이션이 요청하는 권한과 사용 목적이 표시됩니다. 이 화면에서 사용자는 요청한 권한을 수락하거나 거부할 수 있습니다. 만약 사용자가 권한을 거부하면, 애플리케이션은 Google API에 액세스할 수 없습니다.따라서, Google OAuth 동의 화면은 사용자에게 보안 및 개인정보 보호를 위한 선택권을 부여하고, 애플리케이션이 적절한 권한을 요청하는 데 도움을 줍니다. OAuth 인증 프로세스에서 인증 코드를 수신한 후, 애플리케이션이 액세스 토큰을 받아오기 전에 Google OAuth 서버가 이 화면을 보여주게 됩니다.
4. 인터넷의 일반 사용자를 위한 서비스이므로 UserType은 “외부”를 선택합니다.
5. 구글에서 설명을 잘 해주었기에 필요한 데이터는 각자에 환경에 맞게 넣어주세요. 간단한 테스트가 목적이라면 필수 입력만 넣어주시면 됩니다. 저는 사용자의 이메일 주소를 받아 올수 있도록 범위 설정해주었습니다.
동의화면 설정이 만들어졌다해도 서비스가 확인된 상태가 아니기 때문에 "확인 필요" 상태입니다. 테스트하는데는 문제 없습니다.
6. "사용자 인증 정보 > 사용자 인증 정보 만들기 > OAuth 클라이언트 ID"를 선택합니다.
애플리케이션 유형: 웹 애플리케이션, Android, Chrome 앱, iOS, TV 및 입력제한기기, 데스크톱 앱, UWP 등 유형을 선택 할 수 있습니다.
이름: 애플리케이션 이름을 설정합니다.
URI: 웹 애플리케이션을 호스팅하는 HTTP 원본입니다. 이 값에는 와일드 카드나 경로를 포함할 수 없습니다. 80 외의 포트를 사용하는 경우 포트를 지정해야 합니다. 예: https://example.com:8080
승인된 리디렉션 URI: 사용자가 Google에서 인증을 받은 후 이 경로로 리디렉션됩니다. 이 경로는 뒤에 액세스용 승인 코드(Access Token)가 추가되며 프로토콜이 있어야 합니다. URL 조각, 상대 경로, 와일드 카드는 포함할 수 없으며 공개 IP 주소는 사용할 수 없습니다
7. 클라이언트 ID 와 보안 비밀번호가 생성 되었습니다. 이 값들은 민감한 데이터이기에 보안에 유의하여야 합니다.
'Javascript > NestJS' 카테고리의 다른 글
| NestJS JWT 발급과 인증 (0) | 2023.04.23 |
|---|---|
| NestJS OAuth 인증 두번째 (0) | 2023.04.23 |
| NestJS cookie-parser import 에러 (0) | 2023.03.29 |
| NestJS Health Check API (0) | 2023.03.29 |
| NestJS에서 환경변수 다루기 (0) | 2023.03.27 |