[OAuth] 구글 소셜 로그인 구현 (1) - OAuth 클라이언트 ID, Secret 생성

구글 소셜 로그인의 흐름

구글 로그인 버튼 클릭 👉 구글 로그인 페이지로 이동 👉 로그인 하기 👉 웹으로 리다이렉션 되고 로그인 상태로 변함

 

클라이언트에서 이해하기

로그인 버튼 클릭 시 구글 페이지로 이동 👉 로그인 후 URI에 나오는 인가 코드를 서버로 보냄 👉 서버에서 받은 유저 정보를 마이페이지에 렌더링

 

서버에서 이해하기

인가 코드를 받음 👉 인가 코드로 엑세스 토큰을 받음 👉 엑세스 토큰을 가지고 구글 API에 유저 정보를 요청 👉 유저 정보를 받아 프론트로 보내줌

 

---

소셜 로그인 구현 로직

 

1. OAuth 동의 화면 구성 만들기

 

Step 1. [좌측 상단 ≡ > API 및 서비스 > OAuth 동의 화면]을 클릭 후 새 프로젝트 생성

 

Step 2. OAuth 동의 화면에서 User Type '외부' 선택 후 만들기

Step 3. 아래 이미지와 설명을 참고하여 OAuth 동의 화면을 설정

 

---

2. OAuth 클라이언트 ID 생성

 

Step 1. 사용자 인증 정보 페이지에서 [사용자 인증 정보 만들기 > OAuth 클라이언트 ID] 버튼 클릭

 

Step 2. 아래 이미지와 설명을 참고하여 OAuth 클라이언트 ID 생성

Step 3. 생성된 클라이언트 ID 복사

클라이언트 ID 생성 완료👏

 

💡 JavaScript로 연동하는 방법을 알고 싶다면 다음글 확인

---

참고자료 👇

https://velog.io/@usreon/google-%EC%86%8C%EC%85%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%82%BD%EC%A7%88-%EA%B3%BC%EC%A0%95