본인인증 모듈을 연결하면서 팝업으로 띄웠다가 아이프레임으로 변경했다.
팝업도 나쁘지는 않았지만 사파리에서 window.close가 안 먹히는지 몰랐다. 사파리 누가써...?ㅠ
iframe컴포넌트 생성
일단 아이프레임을 작성해준다. 모달처럼 띄워줬음.
이 때 서버측 주소를 src주소로 설정했는데, X-Frame어쩌구 에러 발생..
+ Spring Boot | 스프링 시큐리티 X-Frame-Option 설정
import React from "react";
const IdentityAuthiFrame = () => {
return (
<div>
<iframe src="url" />
</div>
);
};
export default IdentityAuthiFrame;
일단 잘 띄워지기는 하는데, 본인인증이 완료되고 난 결과값을 어떻게 알아내지 싶었다.
window.parent...어쩌구 하면 Uncaught DOMException발생...
postMessage를 사용해야 한다고 함. 안전하게 window간의 통신을 가능하게 해준답니다...
클라이언트 측에 addEventListener등록
아이프레임에서 보낸 메시지를 듣겠다~~
useEffect(() => {
window.addEventListener(
"message",
(e) => {
if (e.origin === SERVER_URL && e.data.message) {
// 생략
}
},
false
);
}, []);
아이프레임으로 띄운 html혹은 jsp에서는 postMessage로 메시지 전송
window.parent.postMessage({ message: "어쩌구저쩌구" }, '*');
'STUDY > React' 카테고리의 다른 글
React | 이미지 여러 장 미리보기 (preview multiple images) (0) | 2020.12.03 |
---|---|
React | react-facebook-login ( + 차단된 URI... 화이트리스트... ) (0) | 2020.12.01 |
React | 페이지 이동 제어하기 ( prevent navigation | react-router-dom Prompt Custom) (0) | 2020.11.03 |
React | react-datepicker (+ 커스텀) (0) | 2020.10.19 |
React | 타이머 만들기 ( Hooks, setInterval ) (0) | 2020.10.14 |