Web Crypto API를 사용하여 Apple MapKit JS 토큰 생성

Web Crypto API를 사용하여 Apple MapKit JS 토큰 생성: 모듈식 접근 방식

이 스크립트는 Edge 환경에서 JavaScript의 Web Crypto API를 사용하여 Next.js 런타임과의 호환성에 중점을 둡니다. 이는 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 Crypto에 필요한 이유는 무엇입니까?
2. PKCS#8은 개인 키를 안전하게 저장하는 데 사용되는 키 인코딩 형식입니다. 그만큼 Web Crypto API 호환성과 보안 키 가져오기를 위해서는 이 형식이 필요합니다.
3. TextEncoder는 암호화 작업에 어떻게 도움이 되나요?
4. 그만큼 TextEncoder 문자열을 바이너리로 변환 Uint8Array, 이는 서명 및 기타 암호화 프로세스에 필요합니다.
5. 이 과정에서 ECDSA의 역할은 무엇입니까?
6. ECDSA(Elliptic Curve Digital Signature Algorithm)는 안전한 디지털 서명을 생성하는 데 사용됩니다. 그만큼 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는 토큰 서명과 같은 중요한 작업을 강력하게 유지하여 보다 원활한 사용자 경험을 제공합니다. 🔐