GAPI란?

GAPI는 구글이 브라우저 쪽 자바스크립트를 위해 제공하는 클라이언트 라이브러리다. 구글 로그인, 구글 드라이브, 구글 캘린더 등 다양한 구글 API와 쉽게 연동할 수 있도록 도와준다. 나는 React 프로젝트에서 GAPI를 이용해 Google Calendar API와 FullCalendar를 연동하여 캘린더 이벤트를 관리하는 기능을 구현했다.

1. index.html에 GAPI 로드하기

<script src="https://apis.google.com/js/client.js"></script>
위 스크립트 태그를 넣어 GAPI 라이브러리를 불러온다.
npm 패키지로 설치하는 방법도 있으나, 간단하게 html에서 바로 불러오는 방식을 주로 사용한다.

2. GAPI 사용 준비하기

var gapi = window.gapi;

gapi.load('auth2', () => {
    var gauth = gapi.auth2.init({
        apiKey: '[API_KEY]',
        clientId: '[CLIENT_ID]',
        scopes: 'https://www.googleapis.com/auth/calendar',
        discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest'],
    });
});
  • gapi.auth2.init는 GoogleAuth 객체를 초기화하는 메소드다. 이 메소드는 다른 인증 관련 호출보다 먼저 실행해야 한다.
  • 여기서 중요한 점은 scope가 아니라 복수형인 scopes로 정확히 입력해야 한다. scope로 입력 시 권한 부족 오류(Insufficient Permission)가 발생해 한 시간 넘게 삽질했던 기억이 있다.

3. clientId 만드는 법

  • Google Cloud Console에 접속해 Google Calendar API를 활성화한다.
  • 사용자 인증정보에서 OAuth 클라이언트 ID를 생성한다.
  • 리다이렉트 URL(redirect_uri)을 등록할 때, IP 주소를 직접 입력하면 인식하지 못한다. 반드시 DNS 주소(.com 등)로 등록해야 한다.
  • IP 주소를 쓸 경우에는 xip.io 같은 서비스(x.x.x.x.xip.io:포트번호)를 이용하면 임시 DNS처럼 동작하여 인식 가능하다.

만약 redirect_uri가 올바르게 설정되지 않으면 redirect_uri_mismatch 에러가 발생한다.

4. Google API KEY도 함께 발급받아야 한다.

5. 로그인 및 이벤트 등록 예시

var gauth = gapi.auth2.getAuthInstance();
gauth.signIn().then(function() {
    var event = {
        summary: "요약",
        description: reason,
        start: {
            dateTime: start + 'T20:00:00',
            timeZone: 'Asia/Seoul',
        },
        end: {
            dateTime: end + 'T20:00:00',
            timeZone: 'Asia/Seoul',
        },
        recurrence: ['RRULE:FREQ=DAILY;COUNT=2'],
        attendees: [{ email: 'test@example.com' }, { email: 'test@example.com' }],
        reminders: {
            useDefault: false,
            overrides: [
                { method: 'email', minutes: 24 * 60 },
                { method: 'popup', minutes: 10 },
            ],
        },
    };
    var request = gapi.client.calendar.events.insert({
        calendarId: 'writer@example.com',
        resource: event,
    });
    request.execute(function(event) {
        console.log('Event created: ' + event.htmlLink);
    });
});
  • gapi.auth2.getAuthInstance()로 인증 인스턴스를 가져온다.
  • gauth.signIn()으로 구글 로그인 후, 캘린더 이벤트 객체를 만들어 gapi.client.calendar.events.insert로 등록한다.
  • 이벤트가 등록되면 등록된 캘린더 ID에 이벤트가 추가되는 것을 확인할 수 있다.

참고자료