JavaScriptでパスワード制御！7つの実例で学ぶ

はじめに
●JavaScriptとパスワード制御
- ○パスワード制御の基本
●パスワード制御の実例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptでパスワード制御を行う方法が身につきます。

●JavaScriptとパスワード制御

JavaScriptは、ウェブページのインタラクティブな動作を実現するプログラミング言語です。

パスワード制御は、ユーザーアカウントのセキュリティを向上させるために重要な機能の1つです。

○パスワード制御の基本

パスワード制御では、パスワードの強度チェックや表示・非表示切り替えなど、さまざまな機能を実現できます。

●パスワード制御の実例

ここでは、JavaScriptを使ったパスワード制御の実例として、7つのサンプルコードを紹介します。

○サンプルコード1：パスワードの強度チェック

このコードでは、入力されたパスワードの強度をチェックして表示する機能を実現しています。

この例では、正規表現を使ってパスワードの文字種や長さを評価し、強度を表示しています。

// パスワードの強度チェック関数
function checkPasswordStrength(password) {
  // 強度の初期値
  let strength = 0;

  // 正規表現でパスワードの文字種をチェック
  if (/[a-z]/.test(password)) strength++; // 小文字
  if (/[A-Z]/.test(password)) strength++; // 大文字
  if (/\d/.test(password)) strength++;    // 数字
  if (/[^a-zA-Z0-9]/.test(password)) strength++; // 特殊文字

  // パスワードの長さをチェック
  if (password.length >= 8) strength++;

  return strength;
}

// パスワード入力欄にイベントリスナーを追加
document.getElementById('password').addEventListener('input', (e) => {
  const strength = checkPasswordStrength(e.target.value);
  document.getElementById('strength').textContent = `強度: ${strength}`;
});

○サンプルコード2：パスワードの表示・非表示切り替え

このコードでは、チェックボックスを使ってパスワードの表示・非表示を切り替える機能を実現しています。

この例では、チェックボックスの状態に応じてパスワード入力欄のtype属性を変更しています。

// チェックボックスにイベントリスナーを追加
document.getElementById('togglePassword').addEventListener('change', (e) => {
  const passwordInput = document.getElementById('password');
  passwordInput.type = e.target.checked ? 'text' : 'password';
});

○サンプルコード3：パスワードの有効期限設定

このコードでは、パスワードの有効期限を設定する機能を実現しています。

この例では、localStorageにパスワードと有効期限を保存し、期限切れをチェックしています。

// 有効期限を設定してパスワードを保存する関数
function setPasswordWithExpiration(password, days) {
  const expirationDate = new Date();
  expirationDate.setDate(expirationDate.getDate() + days);
  localStorage.setItem('password', password);
  localStorage.setItem('expirationDate', expirationDate.toISOString());
}

// 期限切れかどうかをチェックする関数
function isPasswordExpired() {
  const expirationDate = new Date(localStorage.getItem('expirationDate'));
  const currentDate = new Date();
  return currentDate > expirationDate;
}

○サンプルコード4：パスワードリセット機能

このコードでは、ユーザーがパスワードをリセットできる機能を実現しています。

この例では、メールアドレスを入力すると、新しいパスワードが送信される仕組みを作っています。

// パスワードリセット関数
async function resetPassword(email) {
  // 新しいパスワードを生成（実際にはセキュアな方法で生成すること）
  const newPassword = Math.random().toString(36).slice(-8);

  // 新しいパスワードをユーザーに送信（実際にはメール送信などを利用すること）
  console.log(`新しいパスワード: ${newPassword}`);

  // パスワードを更新する処理（実際にはデータベースなどを利用すること）
  await updateUserPassword(email, newPassword);
}

// メールアドレス入力欄とリセットボタンにイベントリスナーを追加
document.getElementById('resetButton').addEventListener('click', () => {
  const emailInput = document.getElementById('email');
  resetPassword(emailInput.value);
});

○サンプルコード5：二段階認証の実装

このコードでは、二段階認証を実装する方法を紹介しています。

この例では、SMSで送信される認証コードを入力してログインができるようにしています。

// 二段階認証用の認証コードを送信する関数
async function sendAuthCode(phoneNumber) {
  // 認証コードを生成（実際にはセキュアな方法で生成すること）
  const authCode = Math.floor(Math.random() * 1000000);

  // 認証コードをユーザーに送信（実際にはSMS送信などを利用すること）
  console.log(`認証コード: ${authCode}`);

  return authCode;
}

// 認証コードをチェックする関数
function checkAuthCode(inputCode, correctCode) {
  return inputCode === correctCode;
}

// 認証コード入力欄とログインボタンにイベントリスナーを追加
document.getElementById('loginButton').addEventListener('click', () => {
  const authCodeInput = document.getElementById('authCode');
  const isCorrect = checkAuthCode(parseInt(authCodeInput.value), correctAuthCode);

  if (isCorrect) {
    // ログイン処理（実際にはセッションを開始するなど）
    console.log('ログイン成功！');
  } else {
    console.log('認証コードが間違っています');
  }
});

○サンプルコード6：パスワードの自動生成

このコードでは、ランダムなパスワードを自動生成する方法を紹介しています。

この例では、英数字と記号を組み合わせた強固なパスワードを生成しています。

// パスワード自動生成関数
function generatePassword(length) {
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()';
  let result = '';
  for (let i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return result;
}

// パスワードを生成して表示
const newPassword = generatePassword(12);
console.log(`自動生成されたパスワード: ${newPassword}`);

○サンプルコード7：パスワードの盗難対策

このコードでは、パスワードの盗難対策として、パスワードをハッシュ化する方法を紹介しています。

この例では、bcryptライブラリを使ってパスワードをハッシュ化し、安全に保存しています。

const bcrypt = require('bcrypt');

// パスワードハッシュ化関数
async function hashPassword(password) {
  const saltRounds = 10;
  const hashedPassword = await bcrypt.hash(password, saltRounds);
  return hashedPassword;
}

// ハッシュ化されたパスワードを保存する関数（実際にはデータベースなどを利用すること）
async function storeHashedPassword(hashedPassword) {
  console.log(`ハッシュ化されたパスワード: ${hashedPassword}`);
}

// パスワードをハッシュ化して保存
const password = 'my_password';
hashPassword(password).then(hashedPassword => storeHashedPassword(hashedPassword));