Googleスプレッドシート:認証

Googleスプレッドシートのデータをアプリケーションに表示したら、一部のユーザーがデータを変更できるようにしたい場合があります。シートに共有権限を設定したときに編集アクセス権を付与したユーザーを思い出してください。シートを編集する前に、検証する必要があります。

これらのアクセス許可を付与するには、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変数は、使用するサービスをサーバーに通知します。この場合、「メール」スコープだけを要求しています。アクセスする情報は、ユーザーではなくアプリに属します。

APIKEYとCLIENTIDを使用すると、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 を使用してユーザーを識別し、アクセス許可を付与または拒否して、シートの共有時に選択したユーザーがデータを編集できるようにします。

Googleスプレッドシート:認証