Basic 認証ヘッダ — Authorization: 'Basic ' + btoa(user + ':' + pass)
Web API にアクセスするときに「Basic 認証」を使う場合があります。
これは「ユーザー名とパスワードを組み合わせて、HTTP ヘッダに送る」仕組みです。
初心者は「ユーザー名とパスワードを合体させて、Base64 で暗号っぽく変換して送る」と覚えると理解しやすいです。
基本のコード例
const user = "myUser";
const pass = "myPass";
// ユーザー名:パスワード を Base64 に変換
const token = btoa(user + ":" + pass);
// fetch でヘッダに追加
fetch("https://api.example.com/data", {
method: "GET",
headers: {
"Authorization": "Basic " + token
}
})
.then(res => res.json())
.then(data => console.log("取得成功:", data))
.catch(err => console.error("エラー:", err));
btoa()→ 文字列を Base64 に変換する関数。Authorization: Basic ...→ Basic 認証の決まり文句。- サーバー側 → このヘッダを見てユーザー認証を行う。
よく使うテンプレート集
POST リクエストで送る
const token = btoa(user + ":" + pass);
fetch("https://api.example.com/update", {
method: "POST",
headers: {
"Authorization": "Basic " + token,
"Content-Type": "application/json"
},
body: JSON.stringify({ name: "Aki" })
});
async/await で書く
async function getData() {
const token = btoa(user + ":" + pass);
const res = await fetch("https://api.example.com/data", {
headers: { "Authorization": "Basic " + token }
});
return res.json();
}
getData().then(console.log);
例題: ユーザー情報取得 API
const user = "admin";
const pass = "secret";
async function fetchUser(id) {
const token = btoa(user + ":" + pass);
const res = await fetch(`https://api.example.com/users/${id}`, {
headers: { "Authorization": "Basic " + token }
});
const data = await res.json();
console.log("ユーザー情報:", data);
}
fetchUser(101);
- 効果: サーバーが Basic 認証を要求している場合、正しいユーザー名とパスワードを送ればアクセスできる。
実務でのコツ
- HTTPS を必ず使う: Basic 認証は「ユーザー名:パスワード」を Base64 で送るだけなので、暗号化されていないと危険。
- 長期利用には不向き: セキュリティ的に弱いため、トークン認証（Bearer Token, OAuth など）が推奨される。
- 開発や簡易 API に便利: 小規模な環境やテスト用 API ではよく使われる。
練習問題（商品一覧取得）
const user = "shopUser";
const pass = "shopPass";
async function getProducts() {
const token = btoa(user + ":" + pass);
const res = await fetch("https://api.example.com/products", {
headers: { "Authorization": "Basic " + token }
});
const products = await res.json();
console.log(products);
}
getProducts();
直感的な指針
- Basic 認証 = ユーザー名とパスワードを Base64 にして送る。
Authorization: Basic ...ヘッダに入れる。- HTTPS と組み合わせて安全に使う。
- 初心者は「GET」「POST」「async/await」で練習すると理解が深まる。
これを覚えれば「Basic 認証が必要な API」にアクセスできるようになり、認証付きの Web サービスを扱えるようになります。