Web Crypto API を使用した Apple MapKit JS トークンの生成

Web Crypto API を使用した Apple MapKit JS トークンの生成: モジュール式アプローチ

このスクリプトは、Next.js ランタイムとの互換性に重点を置き、エッジ環境で JavaScript の Web Crypto API を使用します。これにより、Apple の MapKit 用に最適化され、モジュール化され、再利用可能なトークンが生成されます。

// Frontend solution using Web Crypto API
async function generateAppleMapKitToken() {
  // Header for the JWT
  const header = {
    alg: 'ES256',
    kid: 'your-key-id', // Replace with your actual key ID
    typ: 'JWT'
  };
  const epoch = Math.floor(Date.now() / 1000);
  const claims = {
    iss: 'your-team-id', // Replace with your actual team ID
    iat: epoch,
    exp: epoch + 60 * 60 * 24 * 7,
    origin: 'http://localhost:3000'
  };
  const unsignedToken = btoa(JSON.stringify(header)) + '.' + btoa(JSON.stringify(claims));
  const privateKeyPem = `-----BEGIN PRIVATE KEY-----\\nYOUR_PRIVATE_KEY\\n-----END PRIVATE KEY-----`;
  const privateKeyBuffer = convertPemToBinary(privateKeyPem);
  const key = await crypto.subtle.importKey(
    'pkcs8',
    privateKeyBuffer,
    { name: 'ECDSA', namedCurve: 'P-256' },
    false,
    ['sign']
  );
  const signature = await crypto.subtle.sign(
    { name: 'ECDSA', hash: { name: 'SHA-256' } },
    key,
    new TextEncoder().encode(unsignedToken)
  );
  const base64Signature = btoa(String.fromCharCode(...new Uint8Array(signature)));
  return unsignedToken + '.' + base64Signature.replace(/=/g, '').replace(/\+/g, '-').replace(/\//g, '_');
}

// Helper function to convert PEM to binary
function convertPemToBinary(pem) {
  const base64 = pem.replace(/-----\\w+ PRIVATE KEY-----/g, '').replace(/\\s+/g, '');
  return Uint8Array.from(atob(base64), c => c.charCodeAt(0));
}

Node.js のバックエンド代替

このバージョンでは、サーバー側のランタイム機能を活用して、PKCS#8 秘密キーを処理するための Node.js `crypto` モジュールの使用を示します。

const crypto = require('crypto');
function generateAppleMapKitTokenNode() {
  const header = {
    alg: 'ES256',
    kid: process.env.APPLE_MAPS_P8_KEY_ID,
    typ: 'JWT'
  };
  const epoch = Math.floor(Date.now() / 1000);
  const claims = {
    iss: process.env.APPLE_TEAM_ID,
    iat: epoch,
    exp: epoch + 60 * 60 * 24 * 7,
    origin: 'http://localhost:3000'
  };
  const unsignedToken = Buffer.from(JSON.stringify(header)).toString('base64') + '.' +
    Buffer.from(JSON.stringify(claims)).toString('base64');
  const signer = crypto.createSign('sha256');
  signer.update(unsignedToken);
  signer.end();
  const signature = signer
    .sign({
      key: process.env.APPLE_MAPS_P8_KEY.replace(/\\n/g, '\\n'),
      format: 'pem'
    })
    .toString('base64')
    .replace(/=/g, '')
    .replace(/\\+/g, '-')
    .replace(/\\//g, '_');
  return unsignedToken + '.' + signature;
}

Web Crypto API と Apple MapKit トークンに関するよくある質問

1. PKCS#8 とは何ですか? なぜ Web 暗号化に必要なのでしょうか?
2. PKCS#8 は、秘密鍵を安全に保管するために使用される鍵エンコード形式です。の Web Crypto API 互換性と安全なキーのインポートのためにこの形式が必要です。
3. TextEncoder は暗号化操作にどのように役立ちますか?
4. の TextEncoder 文字列をバイナリに変換します Uint8Array、署名やその他の暗号化プロセスに必要です。
5. このプロセスにおける ECDSA の役割は何ですか?
6. ECDSA (楕円曲線デジタル署名アルゴリズム) は、安全なデジタル署名を生成するために使用されます。の crypto.subtle.sign メソッドは、このアルゴリズムを Web Crypto API に適用します。
7. キーのインポート中に keyData が無効になるのはなぜですか?
8. 無効 keyData エラーは、PEM からバイナリへの変換が正しくなかったり、キー文字列の形式が間違っていたりすることが原因で発生することがよくあります。
9. 署名されていないトークンの問題をデバッグするにはどうすればよいですか?
10. 次を使用して、JWT コンポーネントの Base64 エンコーディングを確認します。 btoa そして文字列が暗号化機能に正確に渡されることを保証します。

安全なトークン生成のまとめ

Node.js から Web Crypto API に移行すると、最新の暗号化ツールについての理解を深めることができます。開発者は、キー処理、エンコード技術、高度な API に焦点を当ててプロセスを適応させ、エッジ ランタイムと安全なトークン生成の要求を満たすことができます。 🚀

Next.js にデプロイする場合でも、ブラウザ用に構築する場合でも、Web Crypto API を使用すると、開発者はスケーラブルで安全なアプリケーションを構築できます。 API はその互換性と効率性により、トークンへの署名など​​の重要なタスクの堅牢性を確保し、よりスムーズなユーザー エクスペリエンスを実現します。 🔐