Google Sitesで、パスワード認証

Google Sitesでは、無料でホームページを作成できます。自由度は少なめですが、操作性もよいホームページです。

ただ、ホームページ内にはパスワードをかけることはできません。
正確には、Googleアカウントで編集権限・閲覧権限が自由に設定できますが、一般向けのページで限定公開ページを作りたくてパスワード認証がしたいと思いました。

パスワード認証の作り方

Google Sitesには、HTMLタグを埋め込める機能があります。その機能を利用して、簡易的ですがホームページ内にパスワード認証がかかったページを作ることができました。

まずは、Google Sitesでホームページを作り、ホームのページと隠しページも作ります。
パスワードを12345とする時、隠しページの「プロパティ＞カスタムパス」を「12345」としてください。

一旦公開してサイトのURLをメモしておきます。
ホームページ　：　https://sites.google.com/view/*****/
隠しページ　　：　https://sites.google.com/view/*****/12345/

ホームページにHTMLタグを設置します。HTMLタグの中身は、以下です。

<form name="myform" onsubmit="return checkText()">
 <input type="password" name="PW">
 <input type="submit" value="ログイン" />
</form>
<script>
 function checkText() {
    //*****に、サイトのページ名を入れてください
    document.myform.action = "https://sites.google.com/view/*****/"+ document.myform.PW.value;;
 }
</script>

すると、このようなものができます。

また、フォームにデザインをつけることができます。HTMLタグの上部に、<style>〜</style>で囲むとCSSデザインを組み込むことができます。

フォームのCSSデザインは、こちらから拝借しました。
https://www.seleqt.net/programming/login-pages-html5-css-1/

これで、公開するとパスワード 12345 を入力して ログイン を押すと、隠しページに飛びます。それ以外のパスワードを入力すると 404 Error のページが出てくるようになっています。

注意点

パスワードがそのままURLに入れるしくみになっています。セキュリティ的には微妙かもしれないですが、簡易的にパスワード認証の仕組みをつくることができました。

当然ですが、URLに隠しページをそのまま入力しても、隠しページへ飛んでしまいます。強固なパスワード認証は難しそうです。

ぜひ、ご活用ください。