gapi oauth2 - google Calendar

GAPI is Google's client library for browser-side JavaScript. It's used in Google Sign-in, Google Drive, and thousands of internal and external web pages for easily connecting with Google APIs.

 

gapi 란  브라우저 쪽 자바스크립트를 위한 구글에서 제공해주는 클라이언트 라이브러리다. gapi는 구글 로그인, 드라이브 등 api를 쉽게 연결할 수 있도록 도와준다. 나는 리액트를 이용하여 gapi Google Calendar와 FullCalendar을 연동 시켰다.

 

1. index.html

index.html에 gapi를 로드하기 위해 

  <script src="https://apis.google.com/js/client.js"></script>  

를 넣어준다. 이 외의 npm을 이용해서 설치하는 방법들도 있다. 

 

2. gapi

먼저 gapi를 사용하기 위해 gapi를 선언해주고  

var gapi = window.gapi  

 

//gapi.auth2.init이나 다른 api를 호출하기 위한 준비단계 (load)     
    gapi.load('auth2', () => {

                var gauth = gapi.auth2.init({

                    apiKey: '[API_KEY]',

                    clientId: '[CLIENT_ID]',

                    scope: 'https://www.googleapis.com/auth/calendar',

                    discoveryDocs: 'https://www.googleapis.com/discove ry/v1/apis/calendar/v3/rest',

                });

- gapi.auth2.init
GoogleAuth 오브젝트를 초기화 시켜주는 것이다. 이 init 메소드는 auth2.GoogleAuth 메소드 보다 빨리 호출해줘야한다.
초기화 시켜주기 위해선 OAuth2.0 clientId와 구체적으로 기입하고 싶은 추가적 메소드를 사용하면 된다. 이때 난 
초기설정에 scop가 아니라 "scopes"를 쳐서 계속 
 
Insufficient Permission: Request had insufficient authentication scopes 

이 에러가 한 시간 넘게 나의 삽질의 원동력이 되어줬다.

 - clientId를 만드는 방법은

console.developers.google.com/apis/dashboard

이곳에서 Google Calendar API 를 추가해준 다음 [사용자 인증정보] 로 들어가서 Redirct_URL에 리다이렉트 해줄 url을 기입해준다.

 

http://localhost:3000/accounts/google/login/callback

 

*** 이때 redirect_url을 지정해줄땐 ip주소로 하면 인식이 안된다. 그러므로 DNS (.com)으로 끝나는 주소를 입력해줘야한다. 하지만 ip주소를 입력해주는 방법 중 하나는 xip.io라고 ip주소를 dns로 제공해주는 서비스가 있다. 그러므로 

x.x.x.x/xip.io:포트번호 이렇게 될 경우 googleRedirect_url 에 인식을 해준다.

 

xip.io is a magic domain name that provides wildcard DNS for any IP address. Say your LAN IP address is 10.0.0.1. Using xip.io,

 

 

만약 이 곳이 잘못되어있다면 

 [Error : redirect_uri_mismatch ] 에러가 발생한다. 

 

그리고 google API KEY도 발급받아주면 된다.

 

  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,
                    });

 

그다음 var gauth = gapi.auth2.getAuthInstance();

gapi의 인증정보를 받아온 다음 

gauth.signIn() 으로 로그인을 한 후 insert해줄 이벤트를 등록한다. 

그다음 gapi.client.calendar.events.insert를 하고 이벤트를 insert해줄 캘린더 ID를 넣으면

등록이 되는걸 볼 수가 있다.

 - 참고자료

1. github.com/google/google-api-javascript-client/blob/master/docs/start.md

google/google-api-javascript-client