Google Sheets 인증
애플리케이션에서 Google Sheets의 데이터를 표시한 후에는 일부 사용자가 데이터를 수정할 수 있도록 설정하고 싶을 수 있습니다. 시트 공유 권한을 설정할 때 편집 권한을 부여한 사용자를 기억해줍니다. 이제 해당 사용자가 시트를 수정하기 전에 인증을 받아야 합니다.
이러한 권한을 부여하기 위해 OAuth2 클래스를 사용하여 애플리케이션에 OAuth 지원을 추가할 것입니다. 먼저, GoogleSheet와 OAuth2 클래스를 가져오고 OAuth2 객체를 생성해야 합니다.
import { GoogleSheet, OAuth2 } from '@mescius/wijmo.cloud';const SCOPES = [ 'https://www.googleapis.com/auth/userinfo.email' ];
const API_KEY = 'AIzaSyCvuXEzP57I5CQ9ifZDG2_K8M3nDa1LOPE';
const CLIENT_ID = '….apps.googleusercontent.com';
let auth = new OAuth2(API_KEY, CLIENT_ID, SCOPES, {
error: (s, e) => {
console.log(JSON.stringify(e.error, null, 2));
}
});SCOPES 변수는 서버에 어떤 서비스를 사용할지 알려줍니다. 이 경우, 우리가 관심 있는 것은 'email' 범위만 요청하고 있으며, 접근하는 정보는 사용자 것이 아니라 애플리케이션 소유입니다.
API_KEY와 CLIENT_ID는 OAuth가 우리의 애플리케이션을 식별할 수 있도록 해줍니다.
이제 OAuth2 객체가 생겼으니, 사용자들이 로그인하거나 로그아웃할 수 있도록 버튼을 추가할 수 있습니다.
// button to log in/out
let oAuthBtn = document.getElementById('auth_btn');
// click button to log user in or out
oAuthBtn.addEventListener('click', () => {
if (auth.user) {
auth.signOut();
} else {
auth.signIn();
}
});사용자가 로그인하고 로그아웃할 수 있게 되었으니, userChanged 이벤트를 듣고 버튼과 Spreadsheet의 accessToken을 업데이트해야 합니다.
// update button/sheet state when user changes
auth.userChanged.addHandler(s => {
let user = s.user;
// update button caption
oAuthBtn.textContent = user ? 'Sign Out' : 'Sign In';
// update Spreadsheet access token
gsNWind.accessToken = user ? s.accessToken : null;
});이제 사용자는 버튼을 눌러 로그인할 수 있습니다. 로그인이 성공하면 서버는 accessToken을 사용해 사용자를 식별하고 권한을 부여하거나 거부합니다. 공유 시트에 편집 권한을 부여한 사용자는 데이터를 수정할 수 있습니다.