【JavaScript】パスワードを入力してページ遷移をさせる方法

WEBサイトを制作する時に、パスワードを知っている人だけが入れるページをよく目にします。

代表的なものでいえば、ブログサービスのようにログインしてマイページにアクセスする方法や、ベーシック認証を使って、特定のユーザーへIDとパスワードを発行してログインする場合もあります。

今回はJavasscriptを使って、パスワードを入力してページへ遷移する方法についてご紹介したいと思います！

パスワードを入力してページ遷移をさせる方法

<script type="text/javascript">  
  function checkPassWorrd() {  
    if ( document.getElementById("pass").value == "password_here" ) {  // ここのvalueにパスワードの値を入れる  
      location.href="遷移させたいページのURL";  // URLは任意でOK
    }  
  }  
</script>  
<input type="password" id="pass">  
<input type="button" onclick='checkPassWorrd()' value="認証">

コードの解説

type属性がpasswordのinputボタンにidを付けてif文のvalueでパスワードを設定します。

if文では今回ページ遷移をさせたいので、処理を「location.href=”ここにURLを入力”;」としています。

また、type属性がbuttonのinputに、onclick属性でパスワードチェックをさせ、入力されたパスワードと設定したパスワードが合っていれば、ページに遷移する仕組みとなっています。

まとめ

Javasscriptでパスワードを入力してページ遷移をさせる方法についてご紹介いたしましたが、いかがだったでしょうか？

公開する対象を制限する場合や、特定のユーザーにのみ閲覧を許可する場合、多くはベーシック認証やアカウント登録をしてマイページにログインをさせる仕組みをとりますが、規模や場合によっは今回のようにJavasscriptのみで簡単に作成する方法もありますので、ご興味のある方は是非試してみて下さい！