소셜로그인 2. 구글 콘솔에서 Oauth 앱 생성하기 - 승인된 리다이렉션 URI란

구글 콘솔에서 oauth 앱을 생성해봅시다.

구글 API 콘솔에서 새 프로젝트를 생성합니다.

 

 

 

OAuth 클라이언트 ID를 만들어줍니다.

 

 

 

OAuth 동의화면부터 채우라고 나오네요.

 

여기서 필수적인것만 채워주고

다시  OAuth 클라이언트 ID 만들기를 시도하겠습니다.

 

저는 누구나 소셜로그인을 통해 사용할 수 있는 웹 사이트를 만들것이기 때문에 [외부]를 선택했습니다.

 

OAuth 동의화면 페이지에서는

앱 도메인, 앱 로고, 승인된 도메인, 뭐시기뭐시기 등 물어보는게 많은데

필수 정보(앱이름, 사용자 지원 이메일, 개발자 연락처 정보 이메일)만 채우고 다음으로 넘어가겠습니다.

 

 

 

사용자의 어떤 정보를 얻고자하는지 선택합니다.

이메일만 선택하겠습니다.

 

 

테스트 사용자로는 저만 등록했습니다.

 

 

 

이제 다시 OAuth 클라이언트 ID 만들기를 시도해보겠습니다.

 

어플리케이션 유형 : 브라우저로 접속하는 웹사이트를 만들것이기 때문에 웹 애플리케이션을 선택합니다.

 

승인된 자바스크립트 원본

제 경우 프론트엔드를 http://localhost:3000 으로 사용하고있기 때문에

http://localhost:3000 을 추가해줬습니다.

 

 

승인된 리다이렉션 URI 란?

저는 처음에 이게 뭔지 이해하기가 어려웠는데요.

승인된 리다이렉션 URI가 뭔지 이해하려면 OAuth2의 인증 과정을 알아야합니다.

 

OAuth2 인증 과정

OAuth2 인증 과정을 그림으로 그려보겠습니다.

PPT로 그렸는데

자리가 부족해서 여러장에 걸쳐서 그렸습니다.

승인된 리다이렉션 URI는 바로 이것입니다!

 

 

아무튼 oauth2 인증 과정을 마저 이어서 봅시다!

 

 

7번과정까지 무사히 끝나면

우리의 서버는

구글 서버의 사용자 정보에 접근하기 위한

access token 을 갖게됩니다.

 

이 상태에서

DefaultOAuth2UserService 서비스의

OAuth2User loadUser(OAuth2UserRequest oAuth2UserRequest) 메서드가 실행됩니다.

 

그래서 승인된 리다이렉션 URI란?

앞서 등장한 접은글 ▶ 여기서 잠깐! 승인된 리다이렉션 URI 에서 이해가 되셨나요?!

 

정리해보겠습니다.

 

그림의 3번 과정에서

브라우저가 구글서버로 인증 요청을 보낼 때

리다이렉션 URI 를 파라미터로 보냅니다.

 

그러면 구글 서버는

사용자 인증 성공시

요청에서 리다이렉션 URI 파라미터를 확인하여

승인된 리다이렉션 URI 인 경우

code와 함께 해당 URI 로 리다이렉트하도록

302 응답을 내려줍니다.

 

만약 요청의 리다이렉션 URI가

승인된 리다이렉션 URI가 아닌경우

오류가 발생합니다.