GASのWebアプリケーションでログイン認証機能を実装する

今回の記事では、GASのWebアプリケーションでGmail以外でのログイン認証を実装する方法をご紹介します。
Gmailだけの認証だけでよければ下記の記事でばっちりです。
「【GAS Webアプリ】ホワイトリストを使ってWebページのアクセス制御する」

アプリケーションにアクセスする人がChromeだけではなく、いろいろなブラウザからという場合には今回ご紹介する方法がよいでしょう。

スポンサーリンク

ログイン認証サンプルの概要

このサンプルアプリーケーションの仕組みは下記の通りです。
ベースは「【GAS Webアプリ】ホワイトリストを使ってWebページのアクセス制御する」です

  • 正しいIDとパスワードを入れたらHello Worldを表示
  • 不正なIDとパスワードの場合は「アクセス権限のないユーザーです。」を表示

ログイン認証のサンプルコード

サンプルアプリケーション

コード.gs

index.html

error.html

login.html

css.html

サンプルコードをまねて動かすには

このままコピペしてWebアプリケーションを作っても、動かないので注意が必要です。
あなたの環境で動かすには、login.htmlを修正する必要があります。

login.html内にある
<form method=”post” action=”https://script.google.com/macros/s/AKfycbwVdWrEfIUlaOqWUDT02wi8Vlka7vVQbYEaqv_z41Vh2YsQClpc6osB/exec”>

の部分を書き換えてあげる必要があります。
アプリケーションを公開したときに出るURLを貼り付けます。
なので、一度アプリケーションをデプロイして再度修正しないと使えないので注意です。

おまけ

今回のログインフォームのデザインは
おしゃれデザインのログインフォーム! コピペで差が付くデザインをCSSで
の一枚の紙というサンプルを使用しております。

普段、ココナラというスキルシェアサービスにて、GASプログラムの開発やお悩み相談を受け付けておりますので、詰まってしまった方はお問い合わせください。

コメント

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