🪪 Credential Management API 완벽 가이드

// 브라우저 지원 여부 및 보안 컨텍스트 확인
if ('credentials' in navigator && window.isSecureContext) {
  console.log('Credential Management API를 안전하게 사용할 수 있습니다.');
} else {
  console.warn('이 브라우저는 Credential Management API를 지원하지 않거나 보안 컨텍스트가 아닙니다.');
}

async function autoLogin() {
  try {
    const credential = await navigator.credentials.get({
      password: true,
      federated: {
        providers: ['https://accounts.google.com', 'https://appleid.apple.com']
      },
      mediation: 'conditional' // 'silent', 'optional', 'required', 'conditional' 중 택일
    });

    if (!credential) {
      console.log('사용가능한 저장된 자격 증명이 없습니다.');
      return;
    }

    console.log('가져온 자격 증명 타입:', credential.type);
    console.log('가져온 자격 증명 ID:', credential.id);

    if (credential.type === 'password') {
      console.log('비밀번호 자격 증명 감지됨. 자동 인증 시도...');
      await submitToServer({
        username: credential.id,
        password: credential.password,
        type: 'password'
      });
    } else if (credential.type === 'federated') {
      console.log('페더레이션 자격 증명 감지됨. 제공자:', credential.provider);
      await submitToServer({
        username: credential.id,
        provider: credential.provider,
        type: 'federated'
      });
    }
  } catch (err) {
    console.error('자격 증명 요청 중 예외 발생:', err);
  }
}

async function submitToServer(payload) {
  // 실제 백엔드 인증 엔드포인트 통신 로직
  const response = await fetch('/api/v1/auth/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  });
  if (response.ok) {
    window.location.href = '/dashboard';
  }
}

async function saveUserCredential(username, password, displayName) {
  try {
    // 1. PasswordCredential 인스턴스 생성
    const cred = new PasswordCredential({
      id: username,
      password: password,
      name: displayName || username,
      iconURL: 'https://example.com/assets/default-avatar.png'
    });

    // 2. 브라우저 저장소에 저장 요청
    await navigator.credentials.store(cred);
    console.log('자격 증명이 브라우저 저장소에 성공적으로 저장되었습니다.');
  } catch (err) {
    console.error('자격 증명 저장 중 오류 발생:', err);
    // 사용자가 프롬프트를 거부했거나 브라우저 설정에 의해 차단된 경우 처리
  }
}

// 회원가입 완료 버튼 이벤트 리스너 예시
document.getElementById('signup-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const emailInput = document.getElementById('email').value;
  const passwordInput = document.getElementById('password').value;
  const nameInput = document.getElementById('name').value;

  // 회원가입 API 통신 성공 가정
  const isRegistered = true; 
  if (isRegistered) {
    await saveUserCredential(emailInput, passwordInput, nameInput);
  }
});

async function registerPasskey(publicKeyCreationOptions) {
  try {
    // 서버로부터 전달받은 challenge 및 옵션을 파싱
    const options = {
      publicKey: {
        challenge: Uint8Array.from(publicKeyCreationOptions.challenge, c => c.charCodeAt(0)),
        rp: { name: "Example Corp", id: "example.com" },
        user: {
          id: Uint8Array.from(publicKeyCreationOptions.userId, c => c.charCodeAt(0)),
          name: "user@example.com",
          displayName: "홍길동"
        },
        pubKeyCredParams: [{ alg: -7, type: "public-key" }, { alg: -257, type: "public-key" }],
        timeout: 60000,
        attestation: "direct"
      }
    };

    // 플랫폼 인증기 호출 (TouchID, Windows Hello, Android Biometrics 등)
    const credential = await navigator.credentials.create(options);
    
    console.log('생성된 퍼블릭 키 자격 증명 ID:', credential.id);
    
    // 서버로 인증서 및 공개키 전달하여 등록 완료
    await sendPublicKeyToServer(credential);
  } catch (err) {
    console.error('패스키 등록 실패:', err);
  }
}

async function sendPublicKeyToServer(credential) {
  const payload = {
    id: credential.id,
    rawId: btoa(String.fromCharCode(...new Uint8Array(credential.rawId))),
    response: {
      clientDataJSON: btoa(String.fromCharCode(...new Uint8Array(credential.response.clientDataJSON))),
      attestationObject: btoa(String.fromCharCode(...new Uint8Array(credential.response.attestationObject)))
    },
    type: credential.type
  };

  await fetch('/api/v1/passkey/register-response', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  });
}

async function handleSocialLoginSuccess(socialProfile) {
  try {
    // 소셜 로그인 제공자로부터 받은 사용자 정보 구성
    const cred = new FederatedCredential({
      id: socialProfile.email,
      provider: 'https://accounts.google.com', // 소셜 제공자 고유 URI
      name: socialProfile.name,
      iconURL: socialProfile.picture
    });

    // 브라우저 저장소에 소셜 자격 증명 등록
    await navigator.credentials.store(cred);
    console.log('페더레이션 자격 증명이 성공적으로 저장되었습니다.');
  } catch (err) {
    console.error('페더레이션 자격 증명 저장 실패:', err);
  }
}

// 소셜 로그인 버튼 클릭 핸들러 내부 예시
document.getElementById('google-login-btn').addEventListener('click', async () => {
  // 실제 OAuth 2.0 인증 팝업 또는 리다이렉트 흐름 수행 후 프로필 획득 가정
  const mockProfile = {
    email: 'user@gmail.com',
    name: '김철수',
    picture: 'https://lh3.googleusercontent.com/a-/A'
  };
  await handleSocialLoginSuccess(mockProfile);
});