スキルアップを始める!

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

JavaScript(ジャバスクリプト)
JavaScript(ジャバスクリプト)
この記事は約7分で読めます。

※記事中に広告情報を含みます。

\ワードプレスのスキルアップはこちら!/ WordPress入門読本

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

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

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

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

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

このコードは、一般的なフローを示していますが、実際の実装には、セキュリティ対策やサーバーサイドの処理など、さまざまな要素が追加される必要があります。

まとめ

これは一般的な手順の概要です。実際の実装には、セキュリティ対策(トークンの有効期限、SSLの使用など)、エラーハンドリング、データベースの設計などの詳細が含まれることがあります。

また、サーバーサイドの処理は、使用しているフレームワークやライブラリによって異なる場合があります。

なお、作成は慎重に行ってください。

URLをコピーしました!