Bearer トークン利用 — headers: { 'Authorization': 'Bearer ' + token }
Web API にアクセスするときに「Bearer トークン認証」を使う場合があります。
これは「サーバーから配布された秘密のトークンを、HTTP ヘッダに入れて送る」仕組みです。
初心者は「Bearer トークン = サーバーからもらった入場券」と覚えると理解しやすいです。
基本のコード例
const token = "abcdef123456"; // サーバーから受け取ったトークン
fetch("https://api.example.com/data", {
method: "GET",
headers: {
"Authorization": "Bearer " + token
}
})
.then(res => res.json())
.then(data => console.log("取得成功:", data))
.catch(err => console.error("エラー:", err));
Authorization: Bearer ...→ Bearer 認証の決まり文句。token→ サーバーから配布された秘密の値。- 効果: トークンが正しければ API にアクセスできる。
よく使うテンプレート集
POST リクエストで送る
const token = "abcdef123456";
fetch("https://api.example.com/update", {
method: "POST",
headers: {
"Authorization": "Bearer " + token,
"Content-Type": "application/json"
},
body: JSON.stringify({ name: "Aki" })
});
async/await で書く
async function getData() {
const res = await fetch("https://api.example.com/data", {
headers: { "Authorization": "Bearer " + token }
});
return res.json();
}
getData().then(console.log);
トークンを関数に渡す
function apiFetch(url, token) {
return fetch(url, {
headers: { "Authorization": "Bearer " + token }
}).then(res => res.json());
}
apiFetch("/api/users", "myToken123").then(console.log);
例題: ユーザー情報取得 API
const token = "mySecretToken";
async function fetchUser(id) {
const res = await fetch(`https://api.example.com/users/${id}`, {
headers: { "Authorization": "Bearer " + token }
});
const data = await res.json();
console.log("ユーザー情報:", data);
}
fetchUser(101);
- 効果: サーバーが Bearer 認証を要求している場合、正しいトークンを送ればアクセスできる。
実務でのコツ
- HTTPS を必ず使う: トークンは秘密情報なので暗号化されていないと危険。
- トークンは期限付き: 多くのシステムではトークンに有効期限がある。
- 更新用トークン（Refresh Token）: 長期利用では「更新用トークン」で新しいトークンを取得する仕組みがある。
- セッション管理に便利: Cookie より安全に API 認証を行える。
練習問題（商品一覧取得）
const token = "shopToken";
async function getProducts() {
const res = await fetch("https://api.example.com/products", {
headers: { "Authorization": "Bearer " + token }
});
const products = await res.json();
console.log(products);
}
getProducts();
直感的な指針
- Bearer トークン = サーバーからもらった入場券。
Authorization: Bearer ...ヘッダに入れて送信。- HTTPS と組み合わせて安全に使う。
- 初心者は「GET」「POST」「async/await」で練習すると理解が深まる。
これを覚えれば「Bearer 認証が必要な API」にアクセスできるようになり、セキュリティを守りながら Web サービスを扱えるようになります。