【GAS】Gメール投稿するだけでWEBページの掲載画像を更新できる、かんたん日報表示システム（4）～パスワードを認証するシンプルな仕組み～

グループ内のメンバーに日課を画像で掲示するだけの、かんたんな日報ページをGAS（Google Apps Script）で作ってみました。WEBページの様に固定ページから確認でき、投稿者が電子メールで画像を送ることで、掲載画像が自動更新できるものです。

「かんたん日報表示システム」と名付けてみました。

このシステムは、簡単な画像しか掲載できないものの、一般のWEBページと違って管理者が更新の手間を負う必要がありませんし、電子メール（あるいは他のメッセージアプリ）と違って、スレッドをさかのぼってチェックしなくてもページに最新情報が常に掲示されている、という特長があります。

無料のGoogleアプリとGASで作ったシステムであり、全体の概要はこちらの記事で解説しています。

ーーーーー

GASのコードについて、最初にユーザがログインする部分のコードをちらで解説しました。

今回の記事では、ユーザがログインパスワードを打ち込んだ後、日報のページが表示されるまでの短い間に自動実行される、ログイン認証と掲載画像の準備の部分について、GASのコードの中身をご説明します。

ユーザからPOSTされたパスワードを認証するしくみ

このシステムでは、最初にアクセスした際に、まずdoGet( )関数を使って表示される以下のログイン用のWEBページが表示されます。ユーザはここからパスワードを打ち込んでボタンを押すと、GASの側にパスワード情報がPOSTされます。

デモのため、パスワード（"toko"）はキャプションにわざと表示させています。

前の記事でご紹介しましたが、このページの機能はテンプレートに<form>タグで送信ボタンを配置し、自分自身のURLに対してPOSTすることで実装しています。（この部分はGASでなく、HTMLによるコードです）

<form
　method="post"
　action="https://script.google.com/macros/s/★デプロイID★/exec">
　　<input type="text" name="PW">
　　<input type="submit" value="送信する">
</form>

キーとなる部分は上記のコードとなります。

さて、GASに情報がPOSTされると、GASの側ではdoPost（　）関数が作動します。今回の記事は、ここでパスワード認証をする部分からご説明します。

doPost（）関数で入力値を照合する

doPost( )関数は、WEBページからPOSTされた情報を引数として使える関数で、ユーザのPOST送信を受けて作動します。

ユーザから入力された情報は、以下のコードで取り出します。

function doPost(e) {
　var 変数 = e.parameter.変数名;
}

（上記でdoPostの引数としているeは宣言なしで使えます）

数値や文字の場合、変数eの子要素「parameter.変数名」指定することで、ユーザが＜form＞要素から「変数名」でPOSTした情報を取得できます。

そして、POSTした時に指定した変数名「PW」から文字を取り出し、これがパスワード”toko”と一致しているか比較することでパスワード認証を行っています。

具体的なGASのコードは以下の様になります。（テンプレートではなく、スプリプと内の記述です）

function doPost(e) {
 
  //POST送信された要素名＜PW＞のデータを取得
  var myPW = e.parameter.PW;

  //パスワードは適宜なものに変えて使用ください
  if(myPW == "toko"){
   ・・・（日報を表示するコード）・・・
  }
}

if(myPW == "toko"){
・・・（日報を表示するコード）・・・
}

if構文で比較演算子を使って、一致する場合だけ日報を表示するための処理を行うという、非常にシンプルなコードで、これが今回のシステムのパスワード認証の仕組みです。

一般的なWEBページのパスワード認証方法との比較

WEBページにパスワード認証を実装する場合、アマチュア向けの最も簡単な方法はBasic認証と呼ばれる方法です。

これは特殊なファイル（.htaccessファイル）をWEBサーバにアップするだけで実装できる一方、機能としては単純なアクセス制限だけであり、複雑なログイン機能は実装できません。

今回のdoPOST()関数を用いた方法では、その後の処理を自由に記述できますので、パスワードに応じた複雑な機能（分岐処理など）を実装する事が可能です。

GASにはサーバを利用する仕組みが無い（Gドライブはストレージであり、サーバとは似て非なるものです）ため、GASではそもそもこの方法は適用できませんが・・・。

その他、ごく簡易な方法として、WEBページにJavaScriptでコードを埋め込んで実装する方法も使われます。

この方法は非常に簡便ですが、ブラウザでコードが読めてしまう（JavaScriptのコードはブラウザのメニューから閲覧可能です）ので、容易にパスワードがページ閲覧者に判明してしまう欠点があり、セキュリティ的にはかなり甘いものです。

GASによる今回ご紹介の方法では、GASのコード本体はGドライブ内にあり、WEBページ内にはパスワードの情報が無いので、ずっと安全な方法です。

さて、日報ページを表示する前に、本システムでは掲載する画像（メールで投稿されるものとします）を準備しています。

最初にログイン画面を出すタイミングで、fetchFile_List()　というユーザ定義関数を起動させていますが、この機能はここで実装しています。

function doGet(e){

//投稿画像をGメールのスレッドから検索しリストを更新
fetchFile_List()
｝

この関数で投稿された画像をGメールから抽出して、日報に掲載する準備をするのですが、これについては、次の記事でご説明します。

←前の記事はこちら

次の記事はこちら⇒