OAuth フローの基本（認可コード方式） — サーバー・クライアントの連携が必要
OAuth は「外部サービスの認証・認可」を安全に行う仕組みです。
初心者は「OAuth = 他サービスのアカウントを使ってログインする仕組み」と覚えると理解しやすいです。
その中でも 認可コードフロー（Authorization Code Flow） は、セキュリティが高く、Web アプリやモバイルアプリでよく使われます。
認可コードフローの流れ（ざっくり）
- ユーザーがログインを選ぶ
→ 「Googleでログイン」「GitHubでログイン」などのボタンをクリック。 - クライアント（フロントエンド）が認可サーバーへリダイレクト
→ ユーザーは外部サービスのログイン画面へ移動。 - ユーザーが認証して許可する
→ 「このアプリにプロフィール情報を渡していいですか？」と確認。 - 認可サーバーが「認可コード」を返す
→ 一時的なコード（短時間だけ有効）。 - クライアントがサーバーへコードを送る
→ フロントエンドは直接トークンをもらわず、自分のサーバーに渡す。 - サーバーが認可コードを使ってアクセストークンを取得
→ サーバーが外部サービスに問い合わせて「アクセストークン」を受け取る。 - サーバーがアクセストークンを使って API にアクセス
→ ユーザー情報やデータを安全に取得。
基本のコード例（Node.js + Express）
認可リクエスト（フロントエンドからリダイレクト）
// Google OAuth の例
const clientId = "YOUR_CLIENT_ID";
const redirectUri = "http://localhost:3000/callback";
const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=${clientId}&redirect_uri=${redirectUri}&scope=profile email`;
res.redirect(authUrl);
コールバックで認可コードを受け取る
app.get("/callback", async (req, res) => {
const code = req.query.code;
// 認可コードを使ってアクセストークンを取得
const tokenRes = await fetch("https://oauth2.googleapis.com/token", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: new URLSearchParams({
code,
client_id: clientId,
client_secret: "YOUR_CLIENT_SECRET",
redirect_uri: redirectUri,
grant_type: "authorization_code"
})
});
const tokens = await tokenRes.json();
console.log("アクセストークン:", tokens.access_token);
res.send("ログイン成功！");
});
例題: 「Googleでログイン」ボタンの仕組み
- ユーザーが「Googleでログイン」をクリック。
- Google のログイン画面に飛ぶ。
- ユーザーが承認すると「認可コード」が返る。
- サーバーがそのコードを使って「アクセストークン」を取得。
- サーバーが Google API からユーザー情報を取得。
→ ユーザーは「Googleアカウントでログイン」できる。
実務でのコツ
- クライアントだけでトークンを扱わない: セキュリティのため、必ずサーバーを介す。
- HTTPS 必須: トークンやコードは暗号化されていないと危険。
- リフレッシュトークン: アクセストークンが期限切れになったら更新用トークンを使う。
- ライブラリを活用:
passport.jsやnext-authなどを使うと実装が楽になる。
練習問題（GitHub OAuth）
// 認可リクエスト
const authUrl = `https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&scope=read:user`;
// コールバックでコードを受け取り、トークン取得
const tokenRes = await fetch("https://github.com/login/oauth/access_token", {
method: "POST",
headers: { "Content-Type": "application/json", "Accept": "application/json" },
body: JSON.stringify({
client_id: clientId,
client_secret: clientSecret,
code
})
});
const tokens = await tokenRes.json();
console.log(tokens.access_token);
直感的な指針
- OAuth = 外部サービスのアカウントでログインする仕組み。
- 認可コードフロー = 一時コードをサーバー経由でトークンに交換。
- クライアントとサーバーの連携が必須。
- 初心者は「Googleログイン」「GitHubログイン」で練習すると理解が深まる。
これを覚えれば「OAuth 認可コードフロー」を理解でき、セキュアなログイン機能を Web アプリに組み込めるようになります。