구글 OAuth2.0 - Flutter와 연동하기(1)

현재 개발을 진행중인 프로젝트에 대해서...

추가할 API나 로직을 위주로, 예상 문제 →  해결방법 → 얻게되는 점으로 트러블 슈팅 과정을 작성할 예정입니다. 앞으로 열심히 작성해볼테니 틀린 내용이 존재한다고해도 좋게 봐주세요...틀린 부분은 추후에 수정을 할 예정입니다!

---

OAuth란?

인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹 사이트 상의 자신들의 정보에 대해 웹 사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는 접근 위임을 위한 개방형 표준

• 연동되는 외부 웹 애플리케이션인 Facebook, Google, Naver, Kakao 등이 해당 사용자의 인증을 처리해주는 방식으로 일부 정보를 어플리케이션에 제공해줘서 해당 정보로 사용자를 관리한다.

OAuth 용어 정리

구분	설명
Resource Owner	웹 서비스를 이용하려는 유저, 자원(개인정보)을 소유하는 자, 사용자 Resource는 개인정보라고 생각하면 된다.
Client	자사 또는 개인이 만든 애플리케이션 서버
Authorization Server	권한을 부여(인증에 사용할 아이템을 제공주는) 해주는 서버 사용자는 이 서버로 아이디와 비밀번호를 넘겨 Authorization Code를 발급 받을 수 있다. 클라이언트는 이 서버로 Authorization Code을 넘겨 Token을 발급 받을 수 있다.
Resource Server	사용자의 개인정보를 가지고 있는 애플리케이션(Kakao, Google, Facebook 등) 회사 서버 클라이언트는 Token을 이 서버로 넘겨 개인정보를 응답 받을 수 있다.
Access Token	자원에 대한 접근 권한을 Resource Owner가 인가하였음을 나타내는 자격증명
Refresh Token	클라이언트는 Authorization Server로 부터 access token과 refresh token을 함께 부여 받는다. access token은 보안상 만료기간이 짧기 때문ㅇ네 얼마 지나지 않아 만료되면 사용자는 로그인을 다시 시도해야한다. 그러나 refresh token이 있다면 access token이 만료될 때 refresh token을 통해 access token을 재발급 받아 재 로그인 할 필요없게끔 한다.

 

사용자가 직접 로그인 하는 것이 아니라 소셜 미디어로 로그인 할 경우,

client(개인 서비스)는 Resource Owner(사용자)를 대신해 로그인하는데, 이때 필요한 정보를 Resource Server (Google, Kakao 등) 에서 얻어 서로 비교해 유효성을 판단한다.

즉, client가 유저의 로그인 정보/ 자원을 Resource Server에 요청해 대신 로그인 하는 것

 

OAuth에 대해서 간략하게 알아보았습니다. 그럼 직접 추가해보는 시간을 가져보도록 하겠습니다.

---

Google OAuth 0.2 추가하기

1.  Google Cloud 접속하여 [콘솔]로 접근

https://cloud.google.com/

클라우드 컴퓨팅 서비스 | Google Cloud

 

2. 새 프로젝트 생성

3. OAuth2 동의화면 구성

[API 및 서비스] → [OAuth 동의 화면] → [외부 선택] → 만들기

 

 

 

웹 애플리케이션으로 생성하여 승인된 리다이렉션 URI에 본인의 경로를 입력한다.

저는 웹 애플리케이션으로 했으며, 컨트롤러 경로가 /api/auth/google이기에 위와 같이 작성했습니다.

 

4. 범위 설정 화면에서 openid와 이메일 주소를 추가한 다음 [업데이트]를 눌러 마무리 한 다음 작업을 마치면 [저장 후 계속]을 누른다.

 

 

현재 구글의 OAuth 2.0 API를 사용하기 위해 설정은 완료되었습니다.

데이터를 처리하는 로직을 작성하기 앞서 API가 제대로 제공되었는지 확인하고자 프론트를 먼저 연동하도록 하겠습니다.

저는 Flutter를 이용해서 앱으로 만들고 있기에 안드로이드로 완료 되면 웹으로도 연동을 할 예정입니다. 

기존에 했던 방식과 다르게 프론트로 OAuth가 연동된걸 확인한 이후에 백엔드를 연동하도록 하겠습니다.

---

2편으로 나누는게 확인하는게 편할 것 같아서 나누도록 하겠습니다. 다음 시간에는 코드 구현부분으로 돌아오도록 하겠습니다.

인에 대한 추가적인 학습을 원하시면 아래로 들어가서 확인하시면 될 것 같습니다. 수고하셨습니다.

 

2026.04.22 - [백엔드 공부] - API(3) - API의 다양한 인증 방식

API(3) - API의 다양한 인증 방식

 

다음 편 : 

구글 OAuth2.0 - Flutter와 연동하기(2)