구글 로그인에 대한 흐름은 아래와 같다.
1.먼저 우리 프론트에서 구글서버로 부터 인가코드를 요청한다.
*인가 코드는 구글 서버에 AccessToken을 발급받기 위한 키값이다.
*AccessToken을 통해 sns로그인한 사용자 정보 조회를 요청할 수 있다.
2.구글은 인가코드를 url형태로 우리에게 전달해주는데 프론트에서 url에서 인가코드를 추출한다음 이를 우리 서버에 넘긴다.
3.서버는 이 인가코드를 가지고 다시 구글 측에 사용자 정보를 요청하고 이에 대한 응답을 받는다.
그렇다면 구글에 인가코드를 요청하고 그에 대한 것을 받으려면 먼저 우리가 구글에 등록된 서비스인 걸 알려줘야한다.
따라서 구글 클라우드 콘솔에 우리 프로젝트를 등록해야한다.
*아래 강의를 참고했으며 그외의 구현에 관한 프론트와 백엔드 코드에 대해서는 아래 강의를 추천한다!
https://www.inflearn.com/course/sns%EB%A1%9C%EA%B7%B8%EC%9D%B8-oauth-springboot-vue
카카오,구글 SNS 로그인(springboot3, vue3)| bradkim - 인프런 강의
현재 평점 5점 수강생 146명인 강의를 만나보세요. springboot를 활용하여 카카오, 구글로그인을 구현합니다. jwt토큰 기반 로그인이 구현됩니다. vue3를 통해 간단한 화면을 구성합니다. springboot3.x대
www.inflearn.com
1.구글 클라우드 콘솔에 새프로젝트 만들기
2.해당 프로젝트 탭->API 및 서비스 ->OAuth 동의 화면->시작하기
3.대상(Audience) 탭에 들어간다-앱 정보를 입력하고-대상(Audience)부분에 외부를 택해준다->연락처 정보입력하고 만들기
4.그러고 나서 아래의 화면이 뜨면 Oauth클라이언트 생성 버튼 누르고 진행
5.웹서비스니까 웹 어플리케이션을 선택한다 ->Authorized redirect URls 입력하고 create
여기서 말하는 redirect URI는 우리 프론트에 있어야하는 엔드포인트다.
왜냐하면 사용자가 구글 로그인에 성공하면 구글은 인가코드를 url의 파라미터로 우리에게 전달한다.
이때 우리가 미리 입력해놓은 우리 프론트 엔드포인트와 파라미터를 조합해서 우리 서비스로 돌아오기 때문이다.
(구글 로그인을 하려할 때는 우리 페이지가 아닌 구글페이지니까 우리 서비스로 돌아와야하니까)
이 uri에는 현재 테스트 중이라 localhost:3000이지만, 배포 후 에는 배포된 주소를 입력해도 된다.
6.그러면 아래와 같이 클라이언트 ID와 클라이언트 Secrets가 생김.
이 클라이언트 ID는 우리가 프론트에서 구글 로그인 요청을 할 때 구글 페이지로 넘어가는 uri에 파라미터로 들어가야할 값들이다. 구글에서는 클라이언트 ID를 보고 어떤 어플리케이션이 구글 로그인을 요청했는지 식별하는 거고 우리는 미리 콘솔에 우리의 프로젝트를 등록해놓았으니 문제가 없는 것이다.
Secrets는 나중에 백엔드에서 이 값을 가지고 구글에 다시 AccessToken을 받는데 쓰인다.
스코프 설정
스코프는 구글 측에 사용자 정보를 요청하면 어떠한 범위까지의 정보를 받을지 설정하는 것이다.
기본적으로 openid,profile,email을 받아올 수 있고 그 이상의 범위에는 본인의 서비스가 정식 출시 된 이후 따로 구글에 요청을 해야하는 것으로 알고 있다.
탭->데이터액세스->범위 추가 또는 제거-> 위에서부터 3가지 체크하고 업데이트.
'스프링부트 > Security' 카테고리의 다른 글
| [Spring]JWT 로그인 - 2.CORS , CSRF란? (0) | 2025.07.09 |
|---|---|
| [Spring]JWT 로그인 - 1. 구현 절차 (3) | 2025.07.09 |