【GAS】パスワード保護（が掛かったように見える）WEBページを作成する方法

GAS(GoogleAppsScript)

2022.02.092022.03.03

GASを使って「パスワードが掛かったページを作って、パスワードを入力したときのみ中のコンテンツを表示できるようにしたい…」と思ったときに使える方法です。

サンプルページはこちら

全体の流れ（ページにパスワード）
まずはWEBページを作る
index.htmlファイルを準備する
パスワードを入力してみる
パスワードは見ようと思えば見れる点に注意
まとめ

全体の流れ（ページにパスワード）

全体の流れとしては、

GASでWEBページを作る
パスワード入力欄を作る
入力した値がパスワードと一致したら特定のページにリダイレクトする
パスワードが違った場合は「パスワードが違います」と出る

といった流れです。

まずはWEBページを作る

まずは、公開用のWEBページを作ります。

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

GASは上記のスクリプトだけでHTMLファイルを公開できます。たったこれだけでWEBページとして作れてしまうというのも…すごいですね。

doGet()メソッドを使うと、レスポンスとしてクライアントに返すデータの処理や表示する画面をHTMLで記述することがきでるようになります。

この場合は「index.html」というファイルを読み込むことになります。

index.htmlファイルを準備する

次に、公開用のHTMLファイルを準備します。

下記のようなHTMLコードを使います。入力欄があるだけのシンプルなWEBページです。

[rml_read_more]

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>閲覧ページ</title>
<script type="text/javascript">
　function nextPage(){
  var pwd = prompt('パスワードを入力ください');
  if(pwd=="1234"){
　　location.href="https://docs.google.com/presentation/d/XXXXXXXXXXXX/edit";
　  }else{
  alert('パスワードが違います');
}
  }
</script>
</head>
<body>
<form name="form1">
<!-- <input type="password" name="pass"> -->
<input type="button" value="閲覧する" onClick="nextPage();">
</form>
</body>
</html>

location.href=には、パスワード入力が成功したらリダイレクトさせたいページのURLを設定しておきます。今回はGoogleスライドを設定しました。

ページを作ったら、新しいデプロイからページをデプロイさせます。