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

今回の記事では、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;
  });
}

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>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

error.html

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

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>アクセス権限のないユーザーです。</h1>

</body>

</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>

<!DOCTYPE html>

<html>

<head>

<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>

</head>

<body>

<h1>Login</h1>

</div>

</div>

</div>

</form>

</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>

100

/* 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プログラムの開発やお悩み相談を受け付けておりますので、詰まってしまった方はお問い合わせください。