【JavaScript】トークンを発行してメール認証する仕組みを作る(Part1)

JavaScript(ジャバスクリプト)

2023.07.212024.03.11

トークンを発行してメール認証を行う仕組みを作る
具体的なJavaScriptのコード例
フロントエンド
サーバーサイド
まとめ

トークンを発行してメール認証を行う仕組みを作る

JavaScriptを使用してトークンを発行してメール認証を行う仕組みを作るためには、いくつかのステップを考える必要があります。

以下に参考の流れを示します。

ユーザー登録フォームを作成します。このフォームには、ユーザー名、メールアドレス、パスワードなどの必要な情報が含まれます。
サーバーサイドで、ユーザーの情報をデータベースに保存します。パスワードはハッシュ化して保存することをおすすめします。
サーバーサイドで、ランダムなトークンを生成します。このトークンは、メール認証リンクに含まれる一意の識別子として使用されます。
生成されたトークンをデータベースに保存します。トークンと関連するユーザーIDなどの情報をトークンテーブルに保存することをおすすめします。
生成されたトークンをユーザーにメールで送信します。メールには、トークンを含む認証リンクを提供します。リンクのURLには、トークンをクエリパラメータとして含めます。
ユーザーがメールを受け取り、認証リンクをクリックします。リンクをクリックすると、JavaScriptを使用してブラウザ上でリンク先のURLを処理します。
JavaScriptで、クリックされたリンクからトークンを抽出します。
抽出したトークンをサーバーサイドに送信します。Ajaxなどの技術を使用して非同期リクエストを行うことができます。
サーバーサイドでは、送信されたトークンをデータベース内のトークンと照合します。
トークンが正しい場合、ユーザーのステータスを認証済みに変更します。

具体的なJavaScriptのコード例

以下に、JavaScriptを使用してトークンの発行とメール認証の仕組みを作る具体的なJavaScriptのコード例を示します。

フロントエンド

// 1. ユーザー登録フォームのHTML
<form id="registrationForm">
  <input type="text" id="username" placeholder="ユーザー名">
  <input type="email" id="email" placeholder="メールアドレス">
  <input type="password" id="password" placeholder="パスワード">
  <button id="registerBtn">登録</button>
</form>

サーバーサイド

// 2. サーバーサイドでのユーザー情報の保存とトークンの生成
app.post('/register', (req, res) => {
  const username = req.body.username;
  const email = req.body.email;
  const password = req.body.password;

  // ユーザー情報の保存処理

  // トークンの生成
  const token = generateToken();

  // トークンの保存処理

  // トークンをメールで送信
  sendVerificationEmail(email, token);

  res.send('ユーザー登録が完了しました。メールをご確認ください。');
});

// 3. トークン生成関数の例（ランダムな文字列を生成する）
function generateToken() {
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  const tokenLength = 32;
  let token = '';

  for (let i = 0; i < tokenLength; i++) {
    const randomIndex = Math.floor(Math.random() * characters.length);
    token += characters[randomIndex];
  }

  return token;
}

// 4. トークンの保存処理（データベースに保存することを想定）
function saveToken(userId, token) {
  // データベースにトークンを保存する処理
}

// 5. トークンを含んだメールの送信
function sendVerificationEmail(email, token) {
  const mailOptions = {
    from: 'your@example.com',
    to: email,
    subject: 'メール認証のご案内',
    html: `以下のリンクをクリックしてメールアドレスを認証してください：<br>
           <a href="http://example.com/verify?token=${token}">メール認証リンク</a>`
  };

  // メール送信処理
}

// 6. メール認証リンクのクリック時の処理（JavaScript側）
const urlParams = new URLSearchParams(window.location.search);
const token = urlParams.get('token');

if (token) {
  verifyEmail(token);
}
// 7. サーバーサイドでのトークンの検証と認証処理
function verifyEmail(token) {
app.get('/verify', (req, res) => {
  const token = req.query.token;

  // トークンの検証処理
  if (isValidToken(token)) {
    // ユーザーのステータスを認証済みに変更する処理

    res.send('メールアドレスが認証されました。');
  } else {
    res.send('無効なトークンです。');
  }
});

// 8. トークンの検証処理（データベース内のトークンと照合することを想定）
function isValidToken(token) {
  // データベースからトークンを検索し、照合する処理
  return true; // トークンが有効な場合はtrueを返す
}

ユーザー登録のAPIエンドポイント /register が定義されています。POSTメソッドでリクエストが送信されると、リクエストボディからユーザー名、メールアドレス、パスワードを取得します。
ユーザー情報の保存処理とトークンの生成が行われます。generateToken() 関数は、ランダムな文字列を生成してトークンとして使用します。
生成されたトークンは、データベースなどに保存されることを想定しています。saveToken() 関数は、ユーザーIDとトークンを引数として受け取り、データベースにトークンを保存します。
sendVerificationEmail() 関数は、ユーザーのメールアドレスにトークンを含んだ認証用のメールを送信します。メールの内容には、トークンを含んだ認証リンクが記載されます。
メール認証リンクをクリックした際の処理を行っています。URLのクエリパラメータからトークンを取得し、verifyEmail() 関数を呼び出してメールアドレスの認証を行います。
/verify エンドポイントにGETリクエストが送信されると、トークンの検証とユーザーのステータス変更が行われます。トークンが有効な場合は、ユーザーのステータスを認証済みに変更し、成功メッセージを返します。無効なトークンの場合は、エラーメッセージを返します。
isValidToken() 関数は、データベース内でトークンを検索し、トークンの有効性を検証します。データベースに保存されたトークンと照合することを想定しており、この処理は適切なデータベースアクセスコードに置き換える必要があります。