初心者向けの認証：メール/パスワード、OAuth、OTP、JWT — 完全ガイド2026

1年前、大きなプロジェクトのログインページを見て、「ああ、これはどう機能するのだろうか？」と考えていたのを覚えています。4つのログインボタン、いくつかのトークン、リダイレクト...頭が混乱しています。今日、このテクノロジーの海で溺れないように、すべてを整理します。

認証が単なる「パスワード入力」ではない理由🔐

2026年には、ユーザーは迅速かつ安全に、頭痛の種にならないアプリケーションにログインしたいと考えています。従来のメールとパスワードを好む人もいれば、「Google でログイン」ボタンを使う人もいます。SMS でコードを受け取り、パスワードを気にせずに済むことを望む人もいます。

開発者としてのあなたの仕事は、システムが安全で、スパゲッティコードにならないように、これらすべてを提供することです🍝

まずはすべてのジュニアが理解すべき基礎から始めて、それから先に進みましょう。

メール/パスワード：どこにも行かない古いやり方✉️

メールとパスワードによる従来の認証は基礎です。確かに、多くの人が古いと言いますが、実際には何百万ものサービスがまだ使用されています。そして、それがどのように正しく機能するかを知ることは非常に重要です。

登録時に起こること

ユーザーはメールアドレスとパスワードを入力します。最初のタスクは検証です。メールアドレスは本物である必要があり（少なくとも構文的に正しい）、パスワードは十分に複雑である必要があります。

2026 年の最小値は 8 文字、大文字と小文字、数字、特殊文字です。しかし、要件はプロジェクトによって異なります。どこにでも「銀行の金庫のようなパスワード」が必要なわけではありません。

そして最も重要なことは、決して、聞いてください、 決して パスワードを平文で保存しないでください。データベースに保存する前にパスワードをハッシュする必要があります。2026 年の標準は bcrypt または Argon2.

// bcrypt（Node.js）の例
const bcrypt = require('bcrypt');

// 登録時
const saltRounds = 10;
const hashedPassword = await bcrypt.hash(userPassword, saltRounds);
// データベースに hashedPassword を保存します

// ログイン時
const isValid = await bcrypt.compare(userPassword, hashedPasswordFromDB);
if (isValid) {
  // ユーザーは認証されています
}

ログイン時に起こること

ユーザーはメールアドレスとパスワードを入力します。データベースでこのメールを検索し、パスワードのハッシュを取得し、bcrypt.compareを介して入力されたパスワードと比較します。一致する場合は、トークン（通常はJWT）を生成してクライアントに渡します。

JWTはあなたの新しい親友です🤝

JSON Web Tokenは、暗号化されたユーザー情報を含む文字列です。認証に成功した後、ユーザーデータ（ID、メールアドレス、ロール）を使用してJWTを作成し、クライアントに送信します。クライアントはトークンを保存し、APIへの各リクエストとともに送信します。

const jwt = require('jsonwebtoken');

// トークンの作成
const token = jwt.sign(
  { userId: user.id, email: user.email },
  process.env.JWT_SECRET,
  { expiresIn: '7d' }
);

// トークンの確認
const decoded = jwt.verify(token, process.env.JWT_SECRET);

リフレッシュトークン：アクセストークンが古くなったとき🧊

アクセストークンの有効期間は通常、15分から数時間までです。期限が切れても、ユーザーはパスワードを再入力する必要はありません。このために、安全な場所に保存されている長寿命のトークンであるリフレッシュトークンが使用されます（通常 httpOnly cookie）を使用して、新しいアクセストークンを取得します。

ロジックはシンプルです。 短いトークン 仕事用、 長いトークン 短いものを更新します。このパターンは、ほとんどの実際のプロジェクトで見られます。

OAuth 2.0：「Googleでサインイン」とそのすべての魔法✨

ユーザーが「Googleでサインイン」または「Appleでサインイン」をクリックすると、その背後でOAuth 2.0プロトコルに従ってダンスが行われます。これは、サードパーティのサービスがパスワードを送信せずにユーザーを認証できるようにする標準です。

簡単な仕組み

1. ユーザーが「Googleでサインイン」をクリックします

2. Googleページにリダイレクトします

3. ユーザーがログインして許可を与える

4. Googleは一時的なリダイレクトを使用してサイトに戻ります code

5. あなたは変えます code トークンでユーザーデータを取得します

ジュニアが知っておくべきこと

• コンソール（Google/Apple）でアプリを登録して取得する必要があります Client ID と Client Secret.

• 最も人気のあるシナリオは Authorization Code Flow.

• リダイレクト間の状態を失わないように、stateパラメータ（CSRFからの保護）を使用してください。

• Client Secret フロントエンドに入るべきではありません。

// Passport.js (Node.js) の例
const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;

passport.use(new GoogleStrategy({
    clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: "http://localhost:3000/auth/google/callback"
  },
  async (accessToken, refreshToken, profile, done) => {
    // ここではユーザーデータを取得します
    // データベースで検索するか、新しいものを作成します
    const user = await findOrCreateUser(profile);
    return done(null, user);
  }
));

Apple Sign In：機能🍏

Appleはプライバシーを重視しています。ユーザーの実際のメールアドレスを非表示にし、randomstring@privaterelay.appleid.comのようなプロキシメールを提供できます。さらに、client_secretの生成には独自の仕様があります。これは単にコンソールで出力されるのではなく、ソフトウェアによって作成されます。

主な問題：不正な redirect_uri（1対1で一致する必要があります）、stateの欠如、「ユーザーがキャンセルした」が処理されていない、およびフロントへのクライアントシークレットの漏洩。

OTP：ワンタイムパスワードとSMSコード📲

ワンタイムパスワードは、数分間有効で、一度だけ使用されるコードです。2026年には、特にモバイルアプリケーションで最も人気のある認証方法の1つです。

仕組み

1. ユーザーが電話番号を入力します

2. コード（4〜6桁）を生成し、TTL（多くの場合Redis）で保存します

3. SMSゲートウェイを介してコードを送信します

4. ユーザーがコードを入力 → 確認 → セッションを作成

// OTPの生成
function generateOTP(length = 6) {
  const digits = '0123456789';
  let otp = '';
  for (let i = 0; i < length; i++) {
    otp += digits[Math.floor(Math.random() * 10)];
  }
  return otp;
}

// TTL (Redis) で保存
await redis.setex(`otp:${phoneNumber}`, 300, otp); // 5 分

// SMSを送信中
await smsService.send(phoneNumber, `Your code: ${otp}`);

// チェック
const storedOTP = await redis.get(`otp:${phoneNumber}`);
if (storedOTP === userInputOTP) {
  // 認証に成功しました
  await redis.del(`otp:${phoneNumber}`);
}

TOTP：SMSが利用できない場合⏱️

時間ベースのワンタイムパスワードは、Google Authenticator や Authy などのアプリケーションによって生成されるコードです。秘密鍵と時間に基づいて動作します。2FAに最適です。

const speakeasy = require('speakeasy');

// シークレットの生成
const secret = speakeasy.generateSecret({ name: 'MyApp (user@email.com)' });
// secret.base32はデータベースに保存する必要があるものです

// コードの確認
const verified = speakeasy.totp.verify({
  secret: secret.base32,
  encoding: 'base32',
  token: userInputCode,
  window: 2 // 時間の非同期許容範囲
});

OTPのセキュリティ

• 入力試行回数を制限する（通常3〜5回）

• レート制限を使用する（1時間あたりの番号あたりのSMSはN以下）

• コードは十分な長さにしてください（最低6桁）

• 必ずTTLを設定してください（5〜10分）

ここでは、「認証マップ」のイラストがうまく機能します。すべてを1つの画像に視覚的にまとめるために、電子メール/パスワード→JWT→更新→OAuth→OTP。

ジュニアが知っておくべきこと：面接チェックリスト 🧠

基本的なもの

• 認証と承認の違い

• JWT とは何か、どのような部分で構成されているか（ヘッダー、ペイロード、署名）

• パスワードを平文で保存しない理由

• パスワードハッシュのソルトとは

中級レベル

• Access token vs refresh token

• OAuth 2.0の仕組み

• CSRF と state/token/origin による保護とは

• フロントエンドでトークンを保存する場所とその理由（httpOnly cookies / memory / localStorage）

上級

• JWT でのログアウト (Redis のブラックリストまたは短い TTL)

• OAuthのPKCEとその必要性

• OTP によるブルートフォース攻撃からの保護（レート制限、バックオフ、キャプチャ）

2026年には、これはもはやロケットサイエンスではありません🚀

5〜10年前、OAuthは利用できないもののように思えました。現在では、これはすべての通常のフレームワークに組み込まれている標準です。ライブラリは作業の80％を実行し、コンセプトを理解し、すべてを正しく結合する能力が必要です。

基本から始めましょう。メールアドレス/パスワードとJWTです。次に、OAuthを追加します。必要に応じて、利便性または追加のセキュリティのためにOTPを追加します。パスワードのハッシュ化、トークンの確認、ログイン試行の制限、HTTPSの使用など、最低限のルールを常に覚えておいてください。

これらすべて、そしてさらに多くのことをコーディックで学ぶことができます🎓

この記事を読んだ後、質問が生じた場合（認証は深いテーマであるため、間違いなく生じるでしょう）、 コディック.

コディック — プログラミングの学習 実践に重点を置いています。コードの実例と落とし穴の説明を交えながら、テーマを詳細に分析します。「コードをコピーしてください」ではなく、すべてがどのように、そしてなぜ機能するのかを理解します。

• 実践的なタスク：メール/パスワードからOAuthと2FAまで、認証をゼロから構築する

• 演習とミニプロジェクトを通じてスキルを強化する

• 実際のアプリケーションからの一般的なエラーとパターンの分析

サポートが必要ですか？コミュニティがあります👥

当社では 活発なTelegramチャンネル2000人以上の開発者がいる場所です。質問をしたり、問題を話し合ったり、コードのレビューを依頼したり、同じ道を歩む人々とチャットしたりすることができます。

コーディックに参加しよう — 認証について、目を閉じて他の人に説明できるように理解しましょう 😉