【GAS Webアプリ】ホワイトリストを使ってWebページのアクセス制御する

# はじめに
Google Apps Scriptを使えばウェブアプリケーションを簡単に作成できる。
Gsuiteのユーザーの場合、[アプリケーションにアクセスできるユーザー]をGsuiteユーザー内で公開できるが、「全員」に公開した場合細かな **アクセス制御** がGUIからできないので、それを簡単に実装するコード

<img width="413" alt="スクリーンショット 2019-07-04 16.21.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252959/dd06c27d-91b1-1b70-6709-91276dc6c4cd.png">

#やり方

## 前準備

``シート1``にアクセス権限を管理するデータを入力する。
``status``が``ok``のユーザのみがアクセスできる。
<img width="412" alt="スクリーンショット 2019-07-04 16.46.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252959/e7dfe743-e0fe-b335-237e-8dfac9cf4471.png">


## ソースコード

スプレッドシートの[ツール]→[スクリプトエディタ]を開き以下のようにファイルを作成する。
<img width="150" alt="スクリーンショット 2019-07-04 16.26.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252959/eefde909-b516-8496-1631-1304516e4fa9.png">

``index.html``は表示したいHTMLファイル
``error.html``はアクセス権限の内ユーザーに対するHTMLファイル

**※HTMLファイルの中身は自由に変えてもらって大丈夫です。**

``` index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
   <h1>こんにちは世界！</h1>
  </body>
</html>
```

``` error.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
   <h1>アクセス権限のないユーザーです。</h1>
  </body>
</html>
```

```js:コード.gs
//現在ログインしているユーザーのメールアドレスを取得
LOGIN_USER = Session.getActiveUser().getEmail();

function doGet(e) {
  //ログインしているユーザーのメールアドレスを使ってアクセス権を確認
  if(getUserData(LOGIN_USER).status == 'ok'){
    htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
  }else{
    htmlOutput = HtmlService.createTemplateFromFile("error").evaluate();
  }

  htmlOutput
  .setTitle('メールアドレスでアクセス権限してみる')
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')

  return htmlOutput
}

//シート名を指定してシートを取得
function getSheetData(sheetName) {
  var sheet = SpreadsheetApp.getActive().getSheetByName(sheetName);
  var rows = sheet.getDataRange().getValues();
  var keys = rows.splice(0, 1)[0];
  return rows.map(function(row) {
    var obj = {};
    row.map(function(item, index) {
      obj[String(keys[index])] = String(item);
    });
    return obj;
  });
}

//メールアドレスをしていしてユーザーデータを返す
function getUserData(email) {
  var user_data = getSheetData('シート1');

  var user = user_data.filter(function(value) {
    return email == value.email;
  });

  if (user[0] != undefined) {
    return user[0];
  }

  Logger.log('そのメールアドレスに対応するユーザーは存在しません。');
  return {status: 'ng'};
}
```

[公開]→[ウェブアプリケーションとして導入]を押して、承認画面がいろいろ出てくるので、承認してから
**アプリケーションにアクセスできるユーザー**を``全員``にすると使えます！
もちろんGsuite内のユーザーの中で更にアクセス制御・制限したい場合でも使えます。

<img width="406" alt="スクリーンショット 2019-07-04 16.35.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252959/5cd3104e-619e-de8e-938e-ea4b4c45848a.png">



# お疲れ様です

うまく行けば以下のように表示されるはずです！

**うまくいかない場合は** アプリケーションのURL末尾が``/exec``になっているか確認してください。 ``/dev`` の場合はテストモードなので``スクリプトエディタ``にアクセスできるユーザーではないとアクセスできません。
<img width="531" alt="スクリーンショット 2019-07-04 16.39.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252959/2230ed7b-633d-bc68-f485-59d7010bd007.png">
<img width="405" alt="スクリーンショット 2019-07-04 16.38.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252959/43511094-d8ad-c3bf-e7b4-b44993654347.png">