☔Google Calendar 연동 앱 / Google OAuth 구현하기

📌 Google 소셜 로그인 플로우

1. 구글 로그인 요청
2. Google OAuth 2.0 인증 서버에 리디렉션되어 로그인 창이 표시
3. 사용자가 로그인을 완료(접근 scope 동의)
4. 미리 설정한 리다이렉트 주소로 code 줌
5. code와 accesstoken, refreshtoken 교환
6. token 저장
7. access 토큰을 헤더에 포함시켜 요청
8. access 토큰 만료 → 오류
9. refresh 토큰으로 access 토큰 갱신 요청
10. 새로운 access 토큰 응답
11. 새로운 access 토큰 저장
12. access 토큰을 헤더에 포함시켜 요청

로그인을 위한 구글 프로젝트 생성, 인증 방법은 여러 문서, 블로그에 나와있다.

이 글에서는 구글 cloud 측 설정을 완료했음을 가정하고 클라이언트 측 코드 로직을 알아볼 것이다.

Google Cloud

 

---

 

☔ Google 로그인 구현

📖 Google 로그인 구현 방법 종류

• OAuth 2.0 인증 플로우 직접 구현 ✔️
• react-google-login 라이브러리
• googleapis(node.js 모듈)
• Firebase Authentication
• Google Identity Platform
• Google Cloud Identity-Aware Proxy

나는 인증 후에도 구글 캘린더 api를 사용했기 때문에

내가 구현할 앱의 기능에 더욱 적합하게 사용할 수 있도록 직접 구현했다.

위 세가지를 가장 많이 사용하는 것 같다.

 

 

🐸 구글 로그인 요청 준비

google cloud project 설정을 통하여 아래의 변수 값을 가지고 있어야한다.

scope를 제외한 모든 값을 환경변수에 저장하여 사용 하는 것이 좋다.

• google client ID
• google client secret
• google API key
• google calendar ID (캘린더 공개 설정과 id가 필요하다)
• scope

google cloud project 설정을 마친 후에는 필요한 api 문서를 참고하여 scope를 구성한다.

 

scope 안내 예시

나는 calendar event list에 대하여 get, insert를 할 것이기 때문에 아래의 scope를 구성하였다.

  '<https://www.googleapis.com/auth/calendar.readonly>',
  '<https://www.googleapis.com/auth/calendar>',
  '<https://www.googleapis.com/auth/calendar.events>',

 

 

🐸 구글 소셜 로그인 요청

OpenID Connect  |  Authentication  |  Google Developers

const scopes = [
  '<https://www.googleapis.com/auth/calendar.readonly>',
  '<https://www.googleapis.com/auth/calendar>',
  '<https://www.googleapis.com/auth/calendar.events>',
];
const oAuthURL = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${
  process.env.REACT_APP_GOOGLE_CLIENT_ID
}&response_type=code&redirect_uri=http://localhost:3000/oauth2callback&
access_type=offline&prompt=consent&scope=${scopes.join(' ')}`;
const googleOauthHandler = () => {
  window.location.assign(oAuthURL);
};

export default googleOauthHandler;

• client_id
• response_type: 구글측 인증에 성공할 시, access token과 교환하기 위해 받을 응답 타입으로, code로 설정
• redirect_uri: 성공 시 리다이렉트 주소. 이 주소의 params로 code 값이 온다. google cloud에서 미리 설정한 주소와 일치해야한다.
• (선택) access_type: refresh 토큰을 받기 위해서는 offline으로 설정한다
  최초 로그인 시 이 값이 offline으로 설정되어 있지 않으면 구글은 refresh 토큰을 응답하지 않는다. 만약 이미 로그인에 성공하고, 이후에 refresh 토큰이 필요하다면 쿠키를 지워서 다시 로그인 요청한다.
  허용되는 값은 offline 및 online. 효과는 오프라인 액세스에 문서화되어 있다. 액세스 토큰이 요청되면 offline 값이 지정되지 않으면 클라이언트는 갱신 토큰을 수신하지 않는다.
• (선택) prompt: 로그인 할 때마다 refresh 토큰을 받아오기 위해 consent로 설정한다.
  prompt consent는 사용자에게 Google 계정에 액세스하려는 서드파티 앱 또는 웹사이트에서 요청하는 권한에 대한 동의를 묻는 창을 말한다. 사용자가 이 창에서 권한을 허용하면 해당 앱이나 웹사이트는 사용자의 Google 계정에 액세스하여 필요한 정보를 사용할 수 있게 된다. 관련 문서

prompt (선택사항)
승인 서버에서 사용자에게 재인증 및 동의를 요청하는지 여부를 지정하는 문자열 값의 목록이며 공백으로 구분됩니다.
가능한 값은 다음과 같습니다.

• none
승인 서버는 인증 또는 사용자 동의 화면을 표시하지 않습니다. 사용자가 아직 인증되지 않았고 요청된 범위에 대해 사전 구성된 동의가 없으면 오류를 반환합니다. none을 사용하여 기존 인증 또는 동의를 확인할 수 있습니다.

•consent
승인 서버는 클라이언트에 정보를 반환하기 전에 사용자에게 동의를 요청합니다.

•select_account
승인 서버에서 사용자에게 사용자 계정을 선택하라는 메시지를 표시합니다. 이렇게 하면 승인 서버에 여러 계정이 있는 사용자가 현재 세션을 사용할 수 있는 여러 계정 중에서 선택할 수 있습니다. 값이 지정되지 않고 사용자가 이전에 액세스를 승인한 적이 없으면 사용자에게 동의 화면이 표시됩니다.

'prompt'를 'consent'로 설정하게 되면 매 로그인 마다 사용자에게 동의를 요청하기 때문에

강제로 Refresh Token을 받도록 지정할 수 있다.

아래는 도움을 얻은 블로그.

Google은 Refresh Token을 쉽게 내주지 않는다

 

😈 url 주소는 당연히 줄바꿈하면 안된다. 나는 자동으로 계속 줄바꿈이 되어서 오류가 났었다.

 

 

🐸  리다이렉트 페이지

import React, { useEffect } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import { useSetRecoilState } from 'recoil';
import { isLoginAtom, isLoadingAtom } from '../state/atoms';

function Oauth2callback() {
  const navigate = useNavigate();
  const setIsLogin = useSetRecoilState(isLoginAtom);
  const setIsLoading = useSetRecoilState(isLoadingAtom);
  useEffect(() => {
    setIsLoading(true);
    const fetchData = () => {
      const url = new URL(window.location.href);
      const { searchParams } = url;
      const code = searchParams.get('code');

      if (code) {
// code로 access 토큰 요청
      }
    };
    fetchData();
  }, []);

  return <div>구글 연동중 ... </div>;
}

export default Oauth2callback;

• 구글 로그인(사용자 동의 등)이 정상적으로 이루어지면 구글은 미리 약속된 리다이렉트 주소의 params에 code를 넣어 응답
• 그럼, 해당 페이지에서는 얻은 code를 access 토큰과 교환하여 저장하고
• 원하는 페이지로 navigate 한다
• // code로 access 토큰 요청  주석 처리한 부분은 아래에서 자세히 다룬다.

 

🐸 리다이렉트 페이지 access 토큰 요청 코드

axios
          .post(
            '<https://oauth2.googleapis.com/token>',
            {
              code,
              client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID,
              client_secret: process.env.REACT_APP_GOOGLE_SECRETE,
              redirect_uri: '',
              grant_type: 'authorization_code',
            },
            {
              headers: {
                'Content-Type': 'application/json',
              },
            },
          )
          .then((response) => {
            console.log(response);
            const accessToken = response.data.access_token;
            localStorage.setItem('access_token', accessToken);

            const refreshToken = response.data.refresh_token;
            localStorage.setItem('refresh_token', refreshToken);

            setIsLogin(true);
            navigate('/');
          })
          .then(() => {
            setIsLoading(false);
          })
          .catch((error) => console.log(error));
      }

✔️ params 에 포함된 code (구글 측에서 갖고 있는 code와 이 값이 일치하는지 확인한다)

✔️ client secret: 최초 요청 시에도 포함되어 있던 값과 같다

✔️ client_secret: google cloud 구성할 때 저장한 값

post 요청의 응답에는 access token과 refresh token 값이 포함되어 있다. localstorage에 저장한다.

 

 

 

---

 

 

☔ Development Detail 더 보기

🍎 access token, refresh token

access token은 실사용하는 토큰, refresh token은 갱신을 위한 비상용 토큰이라고 생각하면 쉽다.

✔️ google 액세스 토큰은 기본적으로 1시간(3,600초) 동안 유효하다. 유효 시간을 따로 설정할 수 있지만 만료 시간을 길게 잡을 경우, 제약 조건을 충족시켜야 한다. 위의 문서에서 자세히 볼 수 있으니 참고한다.

✔️ access token이 만료되면 refresh 토큰을 보내, 새로운 access token 으로 갱신한다. 간단하게 아래와 같은 흐름이다.

 

토큰 유형  |  인증  |  Google Cloud

 

💡 access token, refresh token flow

1. access 토큰 만료 → 오류(401)
2. refresh 토큰으로 access 토큰 갱신 요청(POST)
3. 새로운 access 토큰 응답
4. 새로운 access 토큰 저장
5. access 토큰을 헤더에 포함시켜 요청

💡 refresh token은 의무가 아니다

access token 이 인증의 기본이지, refresh 토큰은 아니다. access 토큰 만료 시 로그아웃 처리 하면 된다.

하지만 한 시간 마다 로그아웃-로그인을 하는 것은 사용자 경험에 좋지 않다.

서비스를 보다 매끄럽게 제공하기 위해 refresh 토큰도 사용하는 게 좋다.

 

❗ 모든 google api 요청이 access token을 필요로 하는 것은 아니다

사용하고자 하는 구글 api가 ‘인증’을 필요한다면, 위의 요청을 통해 받은 access token을 헤더에 포함시켜 요청해야한다.

나는 calendar api를 사용하는데, get은 ‘인증’이 필요하지 않지만 list insert(post) 요청은 인증이 필요하다.

그래서 list를 새로 post 할 때만 인증 토큰 값을 같이 넘겼다. 필요한 api 문서를 꼼꼼히 확인하자.

 

 

 

🐸 axios interceptor와 access token 갱신 요청

access token이 언제 만료될지, 우리는 모른다.

토큰이 필요한 api에 요청을 했는데, 만료되었다고 오류가 발생하고 나서야 토큰이 만료된지 알 수 있다.

그럼, 이미 요청한 request는 어떻게 할까?

이 때 axios interceptor가 많이 쓰인다.

axios interceptor를 사용하면 then 또는 catch 처리되기 전에 요청과 응답을 가로채,

원하는 코드를 수행 후 then 또는 catch 로 뱉어낸다.

그럼, 아래와 같은 로직으로 구현하면 된다.

axios interceptor와 함께 axios instance를 사용한다.

 

✔️ axios interceptor 에러 → 재요청 flow

1. response에 401 access token 만료 에러가 온다
2. refresh token을 실어 'https://oauth2.googleapis.com/token?'’ 에 POST 요청을 보낸다
3. 새로운 access token이 온다
4. 저장한다
5. 새로운 access token을 사용하여 original request를 재요청한다 </aside>

 

토큰 갱신 후 재요청 코드

PostEventInstance.interceptors.response.use(
  (response: AxiosResponse) => {
    return response;
  },
  async (error: AxiosError) => {
    const originalRequest = error.config as InternalAxiosRequestConfig;

    if (error.response?.status === 401 && !originalRequest.retry) {
      originalRequest.retry = true;
      const refreshToken = localStorage.getItem('refresh_token');
      return axios
        .post(
          '<https://oauth2.googleapis.com/token?'>,
          {
            grant_type: 'refresh_token',
            client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID,
            refresh_token: refreshToken,
            client_secret: process.env.REACT_APP_GOOGLE_SECRETE,
          },
          {
            headers: {
              'Content-Type': 'application/json',
            },
          },
        )
        .then((response) => {
          localStorage.setItem('access_token', response.data.access_token);
          PostEventInstance.defaults.headers.Authorization = `Bearer ${response.data.access_token}`;
          console.log('토큰 갱신');

          originalRequest.headers.Authorization = `Bearer ${response.data.access_token}`;
          console.log('새토큰 장착');

          return PostEventInstance(originalRequest);
        })
        .catch((error) => {
          console.log(error);
        });
    }
    return Promise.resolve();
  },
);

갱신 요청 시 client_id, refresh_token, client_secret 을 포함시켜야한다.

 

 

😈 에러 파티: refresh 토큰 도입기

refresh 토큰을 도입하고 많은 오류를 겪었다. 크게 아래 세 가지를 알아두면 좋다.

 

❗ 구글은 최초 로그인 시에 refresh token 요청을 한 경우에만 refresh token을 제공한다

최초 로그인 시 refresh 토큰을 요청하기 위해서는 Oauth 요청 시 **access_type**을 offline으로 설정한다.

이 값이 offline으로 설정되어 있지 않으면 구글은 refresh 토큰을 응답하지 않는다.

✔️ 만약 이미 로그인에 성공하고, 이후에 refresh 토큰이 필요하다면 쿠키를 지워서 다시 로그인 요청한다

 

❗ refresh token은 최초 로그인 시에만 제공한다

로그아웃 후 다음 로그인을 할 때는 refresh token은 응답되지 않는다.

만약 로그아웃 시 token 값을 모두 삭제한다면, 다음 로그인 때 access token만 온다.

그럼 해당 access token 만료 시 토큰을 갱신할 수 없다. 이 오류를 겪으며 절망스러웠다.

 

❗ 매번 로그인할 때마다 refresh token을 받고싶다면

구글 Oauth 요청 시, prompt를 consent로 설정한다.

이렇게 설정하면 로그인 할 때마다 사용자에게 최초 로그인할 때처럼 구글 계정을 선택하고 인증 scope에 대한 동의를 요청한다.

이 때 refresh token도 새로 발급해준다.

prompt 
prompt consent는 사용자에게 Google 계정에 액세스하려는 서드파티 앱 또는 웹사이트에서 요청하는 권한에 대한 동의를 묻는 창을 말합니다. 사용자가 이 창에서 권한을 허용하면 해당 앱이나 웹사이트는 사용자의 Google 계정에 액세스하여 필요한 정보를 사용할 수 있게 됩니다.

prompt 를 consent 로 설정하게 되면 매 로그인 마다 사용자에게 동의를 요청하기 때문에 강제로 Refresh Token 을 받도록 지정할 수 있다.

 

이러한 과정을 거쳐 나의 구글 인증 요청 코드가 만들어졌다.

const scopes = [
  '<https://www.googleapis.com/auth/calendar.readonly>',
  '<https://www.googleapis.com/auth/calendar>',
  '<https://www.googleapis.com/auth/calendar.events>',
];
const oAuthURL = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${
  process.env.REACT_APP_GOOGLE_CLIENT_ID
}&response_type=code&redirect_uri=http://localhost:3000/oauth2callback&
access_type=offline&prompt=consent&scope=${scopes.join(' ')}`;
const googleOauthHandler = () => {
  window.location.assign(oAuthURL);
};

export default googleOauthHandler;

 

참고로 refresh token 역시 만료 될 수 있다.

📖 refresh token 도입 후 발생하는 오류 해결 과정에서 이 문서에서 도움을 얻었다.

 

 

 

---

 

☔ 참고한 문서

Google Cloud

Google Calendar api 문서

OpenID Connect  |  Authentication  |  Google Developers

https://developers.google.com/identity/openid-connect/openid-connect?hl=ko#re-consent

Google은 Refresh Token을 쉽게 내주지 않는다

토큰 유형  |  인증  |  Google Cloud

refresh token 만료에 대한 문서