この章では、R100サイトの一部コンテンツに認証・認可（アクセス制御）を実装した方法をまとめます。 Auth0によるID管理・OAuth2連携と、Netlify FunctionsによるAPI保護の仕組みをステップごとに解説します。

1. なぜ認証・認可が必要になったか

  • プライベートな実験記録や限定公開資料の管理ニーズ
  • 静的サイト（Hugo）ではデフォルトで認証機能がないため、外部認証の仕組みを後付け

2. Auth0セットアップ手順

  • Auth0に無料アカウント作成
  • 新規アプリケーション（SPA or Regular Web App）を作成
  • ドメイン・ClientID・Audienceなどを控える
  • コールバックURL・許可ドメインにNetlifyの公開URLを追加
  • ユーザーロールや権限制御が必要な場合はAuth0のRule/Actionを設定

3. Netlify FunctionsでAPI/ファイルアクセス保護

  • Netlifyプロジェクトに netlify/functions/ ディレクトリを作成
  • JWTトークン（IDトークン/アクセストークン）を受け取り、検証するサーバーレス関数を実装
const { NetlifyJwtVerifier } = require('@serverless-jwt/netlify')

const verifyJwt = NetlifyJwtVerifier({
  issuer: process.env.AUTH0_DOMAIN,
  audience: process.env.AUTH0_AUDIENCE,
})

exports.handler = verifyJwt(async (event, context) => {
  // 認証済みユーザーのみ処理を継続
  return {
    statusCode: 200,
    body: JSON.stringify({ message: '認証OK!' }),
  }
})
  • Markdownなど保護したいファイルはAPI経由で取得し、認証通過時のみ返却
  • ファイルパスやアクセス権チェック（パストラバーサル対策）も必須

4. フロントエンド認証連携（例：Auth0 SPA JS）

  • auth0-spa-jsでフロント側にログインボタン設置
  • ログイン成功後、アクセストークンをAPIリクエストに付与
  • 認証状態に応じてUI表示/非表示を切り替え
  • JS例：
import createAuth0Client from '@auth0/auth0-spa-js';

const auth0 = await createAuth0Client({
  domain: 'YOUR_AUTH0_DOMAIN',
  client_id: 'YOUR_CLIENT_ID',
  audience: 'YOUR_AUTH0_AUDIENCE',
});

await auth0.loginWithRedirect();
const token = await auth0.getTokenSilently();

// APIにトークン付きでアクセス
fetch('/.netlify/functions/protected-api', {
  headers: { Authorization: `Bearer ${token}` },
});

5. 実装時のハマりどころ・Tips

  • ローカル開発と本番でのCORSやリダイレクト先URLの違いに注意
  • Netlify Functionsの環境変数管理（公開/非公開の分離）
  • Auth0の無料枠制限やロール設計の落とし穴
  • JavaScript無効化時や古いブラウザでのフォールバック案
  • セキュリティ観点ではパストラバーサルや情報露出リスクにも配慮