会員登録(無料)
ログイン
スキルアップは今すぐこちら!▶

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

GAS(グーグルアップススクリプト)
この記事は約4分で読めます。

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

サンプルページはこちら

全体の流れ(ページにパスワード)

全体の流れとしては、

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

といった流れです。

まずはWEBページを作る

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

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

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

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

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

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

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

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

<!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スライドを設定しました。

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

これで、パスワードを入力するボタンが設置されているだけの、シンプルなWEBページが出来上がります。

パスワードを入力してみる

実際にパスワードを入力してみます。

「閲覧する」ボタンを押すと、プロンプトが表示されます。

入力すると、パスワードが一致している場合は、location.href=で指定されたURLにリダイレクト、パスワードが違う場合は「パスワードが違います」と表示されて終了します。

シンプルですが、実現できました!

パスワードは見ようと思えば見れる点に注意

ちなみに上記の方法だと、パスワードは「コードを表示」などでHTMLファイルを見られてしまうと、中は丸見えになってしまいます。

もしパスワードを見せたくないといった場合は、GASの内側の関数部分やGoogleスプレッドシートなどに入れておいて読み込ませるか、HTMLコードが見れないような仕掛けをする必要があります。

とても簡易的な作りになっています。

まとめ

こちらの方法であれば、GASだけで完結させたいといった場合に使えます(あくまでパスワードが掛かっているように見えるだけですが…)。GASを使えば本当に色々とできますね。

もしページにパスワード保護が掛かったページを作りたい、となった場合は、ワードプレスなどの導入がオススメです。ワードプレスを使えば、標準機能でページのパスワード保護があるので簡単です。本格的なものであれば導入を検討されることをオススメします。

ご参考ください😃

サンプルページはこちら▼

https://script.google.com/macros/s/AKfycbxqmUlL09A9HDccMJaf1TE1S-hPQTV-lwJ_ZZ2L_niE-3jgcaTxK6BBCGDOIuiQqtmMOg/exec

0 件のコメント

コメント
タイトルとURLをコピーしました