Google Authentication(OAuth2.0) 을 이용하여 자동 로그인 구현하는 방법

지니박스에 카카오와 네이버의 소셜 로그인을 구현후 구글의 자동 로그인이 필요하여 잼민이(Gemini)에게 먼저 물어보았다.
그리고 답변은 다음과 같다.

사용자 로그인 경험을 향상시키기 위해 첫 로그인 이후 알림 없이 자동 로그인을 설정하고 싶으시군요! 
Google OAuth를 이용하면 간단하게 자동 로그인 기능을 구현할 수 있습니다. 

두 가지 방법을 소개해 드리겠습니다.

1. 서버 측 코드를 이용한 자동 로그인
사용자 동의: 로그인 과정에서 사용자에게 자동 로그인 여부를 선택할 수 있는 옵션을 제공합니다.
Authorization Code 획득: 사용자가 자동 로그인을 선택하면, Google OAuth를 통해 Authorization Code를 발급받습니다.
Refresh Token 발급: Authorization Code를 사용하여 Refresh Token을 발급받습니다. Refresh Token은 만료 기간이 길기 때문에 사용자의 로그인 상태를 유지하는 데 사용됩니다.
Refresh Token 저장: Refresh Token을 사용자의 기기에 안전하게 저장합니다. 일반적으로 쿠키 또는 로컬 스토리지에 저장합니다.
자동 로그인: 사용자가 사이트 또는 앱을 다시 방문할 때, 저장된 Refresh Token을 사용하여 자동으로 로그인합니다.

2. 클라이언트 측 코드를 이용한 자동 로그인
Google APIs Client Library: Google APIs Client Library를 사용하여 OAuth 흐름을 구현합니다.
사용자 동의: 로그인 과정에서 사용자에게 자동 로그인 여부를 선택할 수 있는 옵션을 제공합니다.
Authorization Code 획득: 사용자가 자동 로그인을 선택하면, Google OAuth를 통해 Authorization Code를 발급받습니다.
Refresh Token 발급: Authorization Code를 사용하여 Refresh Token을 발급받습니다.
Refresh Token 저장: Refresh Token을 사용자의 기기에 안전하게 저장합니다. 일반적으로 쿠키 또는 로컬 스토리지에 저장합니다.
자동 로그인: 사용자가 사이트 또는 앱을 다시 방문할 때, 저장된 Refresh Token을 사용하여 자동으로 로그인합니다.

참고 사항
자동 로그인 기능은 사용자 편의성을 위해 제공하지만, 보안 측면에서 주의가 필요합니다.
사용자에게 자동 로그인 기능의 장점과 단점을 명확하게 설명하고, 선택권을 제공해야 합니다.
자동 로그인 기능을 비활성화할 수 있는 방법도 제공해야 합니다.
Refresh Token을 안전하게 저장하고 관리해야 합니다.

추가 정보
Google OAuth 2.0: [유효하지 않은 URL 삭제됨]
Google APIs Client Library: https://developers.google.com/api-client-library/
자동 로그인 기능 구현 시 참고할 수 있는 샘플 코드와 라이브러리
Google OAuth 2.0 Playground: [유효하지 않은 URL 삭제됨]
Auth0: https://auth0.com/
Okta: https://www.okta.com/
 
도움이 되었기를 바랍니다! 궁금한 점이 있으면 언제든지 질문해 주세요.

위 내용에 따라 refresh token 를 얻어서 스토리지에 저장후 사용자가 서비스에 로그인 할때마다 꺼내서 구글 계정도 함께 인증하는데 사용하면 되겠다! 라고 생각했다.

그래서 이전부터 조사중에 있던 Google API 에서 Authentication(인증) 관련된 javascript library 에서 refresh token 을 얻는 방법을 열심히 찾았었다.

관련 javascript library 는 다음과 같다.

Google Accounts JavaScript Library
    https://accounts.google.com/gsi/client 라이브러리를 임포트하고
    google.accounts.oauth2 객체를 이용하여 사용자 인증 프로세스를 진행한다.

Google APIs Client Library
    https://apis.google.com/js/api.js 라이브러리를 임포트하고
    gapi.client 객체를 이용하여 사용자 인증 프로세스에서 얻은 access token 으로
    google workspace api 에 필요한 데이터를 요청하게 된다.

하지만 위와 같은 javascript library 들에서는 refresh token 을 얻는 API를 찾을 수가 없었다.
대신 Google REST API 에서는 몇가지 옵션을 통해서 refresh token 을 얻을 수 있었는데 (실습 내용)
어떻게든 javascript library 를 이용해보려고 Gemini 와 Bing 그리고 Google 공식 사이트를 샅샅이 뒤져보았지만 해당 API에 대한 Specification Document 를 찾을 수도 없었다.

그래서 API 찾는 것을 포기하고 Stackoverflow 에서 "google.accounts.oauth2 refresh token" 키워드로 검색한 결과 다음과 같은 Q&A 를 통해 javascript api 를 이용할게 아니라 애초에 Google Identity 에 대한 전체적인 흐름 학습이 먼저였다는 것을 겨우 알게 되었다.

https://stackoverflow.com/questions/77796811/google-accounts-oauth2-tokenclient-how-to-get-refresh-token

google.accounts.oauth2 TokenClient, how to get refresh token

위에 나온 Gemini 의 답변에서 누락된 부분은
client(브라우저) 로만 인증 프로세싱을 구현하게 되면 인증에서의 중요한 key와 code, token 등이 노출 될 수 있으므로
안전한 사용자 자동 인증 서비스를 위해서 client(브라우저) 와 service server(지니박스) 를 연계하여 인증 프로세스를 구축하는 것을 권장한다.

그리고 인증 프로세스의 전체 내용은
client(브라우저) 에서 authorization code(승인 코드) 를 발급받고 이를 service server(지니박스) 에 넘겨  authorization server(구글 인증서버) 로부터  access token 와 refrsh token 을 발급받아
access token 은 지금 요청받은 사용자 요구를 처리하고 refresh token 은 스토리지에 저장하여
사용자가 이후 서비스에 재로그인시 google authentication 에도 함께 자동 로그인하게 처리하라는 내용이었다.
token 요청시 client_secret 이라는 매우 조심스러운 값을 인증 서버로 전달해야 하므로 위와 같은 인증 처리 절차가 필요하다.

참고로 google identity 의 Authentication 과 Authorization 에 대한 내용은 다음의 문서에서 학습이 가능하다.

Google Identity  |  Google for Developers

Google ID 플랫폼  |  Google for Developers

 

위 문서에서 Google OAuth2.0 에 대한 전체적인 Flow 는 다음의 문서에 잘 나와 있다.

Using OAuth 2.0 to Access Google APIs  |  Authorization  |  Google for Developers

OAuth 2.0을 사용하여 Google API에 액세스하기  |  Authorization  |  Google for Developers

 

마지막으로 다음의 내용에서 sample code 를 보면 Google APIs Client Library (JavaScript) 를 이용하지 않고 순수 JavaScript code 로 form submit 을 이용하여 REST API를 호출하는 방법을 보여준다.

https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#redirecting

클라이언트 측 웹 애플리케이션용 OAuth 2.0  |  Authorization  |  Google for Developers

 

또한 다음의 sample code 에서는 XMLHttpRequest 객체를 이용한 완전한 Ajax 예제도 보여주고 있다. 

https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#example

클라이언트 측 웹 애플리케이션용 OAuth 2.0  |  Authorization  |  Google for Developers

 

어차피 Google REST API 를 알고 있다면 복잡하게 Google APIs Client Library 를 이용하지 말고
그냥 REST API 를 호출하는 것이 추후 유지보수에서도 효율적일 것으로 판단하였다.
그래서 웹브라우저와 서버 CGI 모두 Google REST API 를 호출하여 데이터를 취할 수 있도록 수정 적용하였다.