728x90
1. 네이버 소셜 로그인 연동 개요
웹 애플리케이션에서 네이버 소셜 로그인을 연동하는 과정은 다음과 같습니다:
- 사용자가 네이버 로그인 버튼을 클릭하면, 팝업 창을 통해 네이버 로그인 페이지로 리다이렉트됩니다.
- 사용자가 네이버에서 인증을 완료하면, 팝업 창은 액세스 토큰을 포함한 정보를 부모 창(메인 애플리케이션)으로 전달합니다.
- 부모 창은 전달받은 액세스 토큰을 사용하여 네이버 API로부터 사용자 정보를 가져옵니다.
2. 팝업 창에서 부모 창으로 데이터 전달
팝업 창에서 부모 창으로 데이터를 전달하기 위해 window.opener.postMessage 메서드를 사용합니다. 예를 들어, 백엔드에서 다음과 같은 HTML을 반환하여 팝업 창에서 부모 창으로 데이터를 전달할 수 있습니다:
var html = $@"
<!DOCTYPE html>
<html>
<body>
<script>
window.opener.postMessage({{
message: '네이버 SSO 성공',
token: '{accessToken}',
name: '{name}',
}}, '{origin}');
window.close();
</script>
</body>
</html>";
return Results.Content(html, "text/html");위 코드에서 accessToken, name는 실제 값으로 대체되어야 합니다. origin은 부모 창의 도메인을 지정하여, 보안상 허용된 도메인에서만 메시지를 수신하도록 합니다.
3. 부모 창에서 메시지 수신 및 처리
부모 창에서는 window.addEventListener를 사용하여 메시지를 수신하고 처리합니다:
window.addEventListener('message', (event) => {
if (event.origin !== "https://...") return;
const { message, token, name } = event.data;
if (token) {
console.log('받은 토큰:', token, name);
// 여기에 로그인 처리 로직 추가 (예: localStorage 저장)
// localStorage.setItem('access_token', token);
}
});여기서 "https://..."는 부모 창의 도메인을 나타내며, 수신한 메시지의 출처를 검증하여 보안성을 높입니다.
4. 보안 고려사항
이러한 방식으로 소셜 로그인을 연동할 때, 다음과 같은 보안 사항을 고려해야 합니다:
- 출처 검증:
event.origin을 사용하여 메시지의 출처를 검증함으로써, 악의적인 사이트로부터의 메시지 수신을 방지합니다. - 민감 정보 최소화: 팝업 창에서 부모 창으로 전달하는 데이터는 최소한으로 제한하는 것이 좋습니다. 예를 들어, 액세스 토큰만 전달하고, 나머지 사용자 정보는 부모 창에서 해당 토큰을 사용하여 직접 가져오는 방식이 더 안전합니다.
- 토큰 보안: 액세스 토큰은 클라이언트 측 저장소(localStorage 등)에 저장할 경우, XSS(Cross-Site Scripting) 공격에 노출될 수 있으므로 주의가 필요합니다. 가능한 경우, 토큰은 서버 측 세션에 저장하고, 클라이언트에는 세션 식별자만 전달하는 방식이 권장됩니다.
5. 장점
- window.opener.postMessage(...)는 도메인 기반 통신으로 설계되어 있어, 크로스 도메인 보안 문제(CORS) 없이도 안전하게 통신 가능
- 브라우저 자체가 origin 검증을 제공하므로, event.origin 체크만 제대로 하면 충분히 안정적
6. 결론
네이버 소셜 로그인 연동 시 팝업 창과 부모 창 간의 통신은 postMessage를 통해 안전하게 이루어질 수 있습니다. 그러나, 보안성을 높이기 위해 출처 검증, 민감 정보 최소화, 토큰 보안 등의 사항을 철저히 고려해야 합니다. 이를 통해 안전하고 신뢰성 있는 소셜 로그인 기능을 구현할 수 있습니다.
728x90
'React > React 실습' 카테고리의 다른 글
| System.Text.Json을 활용한 네이버 로그인 응답 처리 개선 (1) | 2025.04.10 |
|---|---|
| [OAuth2] 기존 시스템에 네이버 소셜 로그인 기능 연동하기 (JWT + 팝업 방식) (0) | 2025.04.02 |
| [React] Material-UI Popover 위치 보정과 애니메이션 적용 시행착오 기록 (0) | 2025.03.14 |
| [React] Material-UI Popover에서 Popper로 전환한 시행착오 (0) | 2025.03.14 |
| [React] Drawer와 Tab, Accordian - Console 콘솔에러 제거하기 (0) | 2025.02.04 |
댓글