![見出し画像](https://assets.st-note.com/production/uploads/images/24524852/rectangle_large_type_2_94ca76455b9398472de910bfe607aa80.png?width=1200)
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>
すると、このようなものができます。
![画像1](https://assets.st-note.com/production/uploads/images/24526340/picture_pc_957fa8005b4977a9ee7f260a7fea5240.png)
また、フォームにデザインをつけることができます。HTMLタグの上部に、<style>〜</style>で囲むとCSSデザインを組み込むことができます。
フォームのCSSデザインは、こちらから拝借しました。
https://www.seleqt.net/programming/login-pages-html5-css-1/
これで、公開するとパスワード 12345 を入力して ログイン を押すと、隠しページに飛びます。それ以外のパスワードを入力すると 404 Error のページが出てくるようになっています。
注意点
パスワードがそのままURLに入れるしくみになっています。セキュリティ的には微妙かもしれないですが、簡易的にパスワード認証の仕組みをつくることができました。
当然ですが、URLに隠しページをそのまま入力しても、隠しページへ飛んでしまいます。強固なパスワード認証は難しそうです。
ぜひ、ご活用ください。
この記事が気に入ったらサポートをしてみませんか?