MENU
  1. ホーム
  2. プログラミング
  3. スプレッドシート
  4. GASのWebアプリケーションでログイン認証機能を実装する

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

スプレッドシート
2021年3月1日

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

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

目次

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

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

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

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

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

コード.gs

function doGet(e) {
  var template = HtmlService.createTemplateFromFile('login').evaluate();
  return template;
}


function doPost(postdata) {
  var email = postdata.parameters.email.toString();
  var password = postdata.parameters.password.toString();
  var checkAccount = judgeAccounts(email, password)
  if(checkAccount === true) {
    var template = HtmlService.createTemplateFromFile('index');
    return template.evaluate();
  } else {
    var template = HtmlService.createTemplateFromFile('error');
    return template.evaluate();
  }
}


function judgeAccounts(email, password){
  var accounts = [
    {"email": "8base.tech@gmail.com", "password": "google"},
    {"email": "8base.tech@yahoo.co.jp", "password": "yahoo"}
  ]

  return accounts.some(function(value) {
    return value["email"] === email && value["password"] === password;
  });
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

error.html

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

login.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
  </head>
  <body>
    <div class="form-wrapper">
      <h1>Login</h1>
      <form method="post" action="https://script.google.com/macros/s/AKfycbwVdWrEfIUlaOqWUDT02wi8Vlka7vVQbYEaqv_z41Vh2YsQClpc6osB/exec">
        <div class="form-item">
          <label for="email"></label>
          <input type="email" name="email" required="required" placeholder="Email Address"></input>
        </div>
        <div class="form-item">
          <label for="password"></label>
          <input type="password" name="password" required="required" placeholder="Password"></input>
        </div>
        <div class="button-panel">
          <input type="submit" class="button" title="Login" value="Login"></input>
        </div>
      </form>
      <div class="form-footer">
      </div>
    </div>
  </body>
</html>

css.html

<style type="text/css">
/* Fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400);

/* fontawesome */
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

/* Simple Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* body */
body {
  background: #e9e9e9;
  color: #5e5e5e;
  font: 400 87.5%/1.5em 'Open Sans', sans-serif;
}

/* Form Layout */
.form-wrapper {
  background: #fafafa;
  margin: 3em auto;
  padding: 0 1em;
  max-width: 370px;
}

h1 {
  text-align: center;
  padding: 1em 0;
}

form {
  padding: 0 1.5em;
}

.form-item {
  margin-bottom: 0.75em;
  width: 100%;
}

.form-item input {
  background: #fafafa;
  border: none;
  border-bottom: 2px solid #e9e9e9;
  color: #666;
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  height: 50px;
  transition: border-color 0.3s;
  width: 100%;
}

.form-item input:focus {
  border-bottom: 2px solid #c0c0c0;
  outline: none;
}

.button-panel {
  margin: 2em 0 0;
  width: 100%;
}

.button-panel .button {
  background: #f16272;
  border: none;
  color: #fff;
  cursor: pointer;
  height: 50px;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2em;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  transition: background 0.3s ease-in-out;
  width: 100%;
}

.button:hover {
  background: #ee3e52;
}

.form-footer {
  font-size: 1em;
  padding: 2em 0;
  text-align: center;
}

.form-footer a {
  color: #8c8c8c;
  text-decoration: none;
  transition: border-color 0.3s;
}

.form-footer a:hover {
  border-bottom: 1px dotted #8c8c8c;
}    
</style>

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

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

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

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

おまけ

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

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

スプレッドシート

この記事が気に入ったら
フォローしてね！

よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

コメント

コメント一覧 （1件）

  • 非常に参考になる記事感謝です。
    が残念なことのandroid 12 のスマホで input タグにフォーカスを当てると画面が勝手にズームしていきます。デモでも再現するので、chrome のバグのように思うのですが、対応方法ご存知ありませんか?

目次