. GAS】GASで作成したWebサイトでBasic認証（もどき）を実装する | 俺が最強エンジニア
GAS】GASで作成したWebサイトでBasic認証（もどき）を実装する | 俺が最強エンジニア
GAS】GASで作成したWebサイトでBasic認証（もどき）を実装する | 俺が最強エンジニア

【GAS】GASで作成したWebサイトでBasic認証（もどき）を実装する

GASで作成したWebサイトはデフォルトで「自分のみ」「Googleアカウントを持つ全員」「全員」という公開範囲を設定可能です。さらにアクセスしているユーザの情報を取得することで細かなアクセス制御も可能ですが、Googleアカウントの情報を取得するため厳密に制限ができる反面、事前にアクセスを許可するメールアドレスをリストに追加し、閲覧ユーザにユーザ情報の取得を許可してもらう必要があります。今回紹介する方法では 事前のメールアドレス把握やユーザ情報の取得は不要 です。ただし通常のbasic認証同様、IDとPWがわかればアクセスできてしまう点にはご注意ください。

1. 仕組み

2. コード一覧

「ファイルを追加」から以下のファイルを作成し、各々コードを書き換えてください。※ ID/PWをコードに直接記述すると、ライブラリとして公開されるURLを利用した際に外部のユーザが取得できてしまうため、 から変更しないでください

gas.gs function setup() < PropertiesService.getScriptProperties().setProperty('auth', JSON.stringify(", pw:"">)); > function doGet() < const authOwn = JSON.parse(PropertiesService.getUserProperties().getProperty('auth_users')); if (tryAuth(authOwn) == "success")< var htmlOutput = HtmlService.createTemplateFromFile("index").evaluate(); >else < var htmlOutput = HtmlService.createTemplateFromFile("auth").evaluate(); >return htmlOutput; > function tryAuth(authOwn) < if (authOwn != null)< const auth = JSON.parse(PropertiesService.getScriptProperties().getProperty('auth')); if (auth.id == authOwn.id && auth.pw == authOwn.pw) < PropertiesService.getUserProperties().setProperty('auth_users', JSON.stringify(authOwn)); return "success"; >> return "fail"; > function deleteAuth() auth.html window.addEventListener("load", function()< document.querySelector("form").addEventListener("submit", function (event) < event.preventDefault(); >); >); function handleSubmit() < document.querySelector("input[type=submit]").disabled = true; const authOwn = document.querySelector("form"); google.script.run .withFailureHandler(onFailure) .withSuccessHandler(onSuccess) .tryAuth(authOwn); >function onSuccess(rslt)< if (rslt == "success")< window.open("", "_top"); > else < alert("認証情報が一致しません"); document.querySelector("input[type=submit]").disabled = false; >> function onFailure() index.html 認証成功 認証情報削除 function reset() < google.script.run .withFailureHandler(reload) .withSuccessHandler(reload) .deleteAuth(); >function reload()< window.open("", "_top"); >

3. セットアップ方法

GASの編集画面から setup() を実行開いたGoogleアカウントの権限確認画面で許可を選択

画面最下部までスクロールし、「スクリプトプロパティを編集」を押下し、 と の部分を変更

4. コード解説

gas.gs setup()：スクリプトプロパティのデフォルト値を設定

PropertiesServiceクラスの getScriptProperties() メソッドでスクリプトプロパティを取得取得したプロパティに対してPropertiesクラスの setProperty(key, value) メソッドでキーauthに対してidとpwを保存このとき、Object型ではプロパティの値として扱えないため、JSON形式に変換を行う

PropertiesService.getScriptProperties().setProperty('auth', JSON.stringify(", pw:"">)); doGet()：認証結果別にフロントへ返すHTMLファイルを定義

PropertiesServiceクラスの getUserProperties() メソッドでユーザプロパティを取得取得したプロパティに対してPropertiesクラスの getProperty(key) メソッドでキーauth_usersに紐づく値を取得JSON形式で保存されているため、Object型に戻して変数authOwnへ格納

const authOwn = JSON.parse(PropertiesService.getUserProperties().getProperty('auth_users'));

関数tryAuthへ変数authOwnで認証をリクエスト戻り値に応じたhtmlファイルを変数htmlOutputにHtmlOutputオブジェクトとして格納HtmlOutputオブジェクトはHtmlServiceクラスの createTemplateFromFile(filename) メソッドでhtmlファイルをHtmlTemplateオブジェクトに変換し、HtmlTemplateクラスの evaluate() メソッドで変換して生成

今回はhtml内にGASコードが含まれるため createTemplateFromFile(filename) を使用

if (tryAuth(authOwn) == "success") < var htmlOutput = HtmlService.createTemplateFromFile("index").evaluate(); >else return htmlOutput; tryAuth(authOwn) ：認証を実行

変数authOwnが空でない場合、PropertiesServiceクラスの getScriptProperties() メソッドでスクリプトプロパティを取得取得したプロパティに対してPropertiesクラスの getProperty(key) メソッドでキーauthに紐づく値を取得JSON形式で保存されているため、Object型に戻して変数authへ格納

さらに変数authOwnと変数authのid/pwがどちらも一致した場合、PropertiesServiceクラスの getUserProperties() メソッドでユーザープロパティを取得取得したプロパティに対してPropertiesクラスの setProperty(key, value) メソッドでキーauth_usersに対してidとpwを保存このとき、Object型ではプロパティの値として扱えないため、JSON形式に変換を行う

if (authOwn != null) < const auth = JSON.parse(PropertiesService.getScriptProperties().getProperty('auth')); if (auth.id == authOwn.id && auth.pw == authOwn.pw) < PropertiesService.getUserProperties().setProperty('auth_users', JSON.stringify(authOwn)); return "success"; >> return "fail"; deleteAuth()：ユーザプロパティをクリア

PropertiesServiceクラスの getUserProperties() メソッドでユーザープロパティを取得取得したプロパティに対してPropertiesクラスの deleteAllProperties() メソッドで全てのキーとそれに紐づく値を削除

PropertiesService.getUserProperties().deleteAllProperties(); auth.html window.addEventListener(“load”, function)：イベントを追加 document.querySelector("form").addEventListener("submit", function (event) < event.preventDefault(); >); handleSubmit()：GAS側へ認証をリクエスト document.querySelector("input[type=submit]").disabled = true; const authOwn = document.querySelector("form"); google.script.run .withFailureHandler(onFailure) .withSuccessHandler(onSuccess) .tryAuth(authOwn); onSuccess(rslt)：フロントへ返すHTMLファイルを変更するためリロード

認証が成功した場合、現在のURLに再アクセスを行いGAS側の関数doGetを動作させる現在のURLはGASのScriptAppクラスの getService() メソッドでウェブアプリのServiceオブジェクトを取得し、 getUrl() メソッドで取得

GASのwebサイトはiframe構造のためJSの location.href では取得できません

if (rslt == "success")< window.open("", "_top"); > else onFailure()：関数実行失敗を通知 alert("正常に完了しませんでした"); document.querySelector("input[type=submit]").disabled = false; index.html reset()：GAS側へ認証情報削除をリクエスト google.script.run .withFailureHandler(reload) .withSuccessHandler(reload) .deleteAuth(); reload()：フロントへ返すHTMLファイルを変更するためリロード

現在のURLに再アクセスを行いGAS側の関数doGetを動作させる現在のURLはGASのScriptAppクラスの getService() メソッドでウェブアプリのServiceオブジェクトを取得し、 getUrl() メソッドで取得※ GASのwebサイトはiframe構造のためJSの location.href では取得できません

window.open("", "_top");

まとめ

Class HtmlService | Apps Script | Google for Developers Google for Developers Class PropertiesService | Apps Script | Google for Developers Google for Developers

関連記事

【GAS】スプレッドシートからセルの値を取得・追加するベストプラクティス

GASでスプレッドシートを操作する場合の基本となるセルの値の取得・追加の方法を解説します。この記事では以下のステップでコードを解説しています。非表示目次を読み込み中. 1. スプレッドシートを取得するGASでスプレッドシートの操作を行うにはSpreadsheetA

Googleドライブのフォルダを一括コピー！GASで実現する自動化手順 【GAS】GASでGET/POSTの受取データを処理するベストプラクティス 【GAS&ChatGPT】GASとAI連携で実現する最強の業務効率化スプレッドシート入門

「GASとChatGPTを連携させることで、スプレッドシートの可能性は無限に広がります。本記事では、Google Apps ScriptとOpenAIのAPIを組み合わせた実践的な開発手法から、AIを活用したデータ処理の自動化まで、ビジネスパーソン向けに分かりやすく解説。業務効率を劇的に向上させる

📎📎📎📎📎📎📎📎📎📎