플러터 웹 successUrl 리다이렉트 권한 관련 문의
안녕하세요!
플러터로 웹앱을 개발 중인데, 토스페이먼츠로 빌링 결제 기능을 붙이려고 합니다.
pub.dev에 있는 플러터용 토스 페이먼츠 sdk는 안드로이드와 iOS에서만 잘 동작해서, 웹에 띄우기 위해 웹뷰와 javaScript sdk를 사용해 적용해보는 중에 문제가 있어 문의 남깁니다.
WebViewX 패키지로 빌링 결제를 위한 카드 등록 화면을 띄우는 데는 성공했고, tossPayments.requestBillingAuth 메서드를 호출해 successUrl에 원하는 url을 넘겼습니다. 그런데 이때 새창으로 해당 주소가 열리지 않고 있습니다.
개발자도구 콘솔에 살펴보니, redirect url은 제대로 전달이 되고 있는 걸로 확인됩니다. customerKey, authKey를 쿼리 파라미터로 받아서 url이 뜨는데, 그걸 열 권한이 없다는 에러 메시지가 뜹니다.
살펴보니 새창으로 여는 권한이 webview에서 제공되지 않는 게 원인인 것도 같은데, 찾아봐도 해결방법이 잘 안나와 질문드려요. 에러메시지도 함께 첨부합니다!
Uncaught DOMException: Failed to set the 'href' property on 'Location': The current window does not have permission to navigate the target frame to (넘긴 successUrl)
플러터 웹으로 구현한 다른 사례가 있다면 살펴봐주시면 큰 도움이 될 것 같습니다!14 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
(토스 공식답변은 아닙니다) 일단 플러터 ”웹“ 에서 “웹뷰”를 띄우시면 이는 iframe으로 로드되며,
iframe 안에서 결제창을 로드하는 것이 되므로 결제창이 작동하지 않습니다.
Webview 연관 라이브러리 없이 플러터에서 바로 script태그를 여는 방법을 찾아보셔야 할거 같습니다.
웹뷰 내 tossPayments.requestBillingAuth를 직접 호출하고 있나요?
아니면 웹서버에 올려서 하고 있나요?
@hyeonbin_hereiam 위 답변바라며, 저희 계약은 완료되셨을까요
네 직접 호출하고 있고, 계약 진행 전 테스트해보는 중입니다
successUrl은 지금 어떤식으로 적으셨어요
디플로이하는 저희 사이트 url뒤에 /success 로 넘겼습니다
주간회의 기반 성과관리 시스템, 티키타카
주간회의와 연계해 지속적 성과관리를 실현하세요. 주간회의 문제 해결, 성과관리 문제 해결, 직원 피드백 문제 해결.
웹뷰에서 웹서버로 리다이렉트 시키려니까
cors에러가 떠서 그래요
지금 successUrl호출하는 페이지는 같은 웹서버가 아니라 웹뷰 로컬에서 하고 계씬거잖아요?
이런경우 웹서버러 리다이렉트 시키는게 아니라
tikitaka://success 이런식으로 선언하면, 웹뷰 내에서 해당 url로 이동할거에요
(빈 흰색 화면)
그러면 해당 화면에서 getParam만 받아와서 그 이후 단계를 진행해주시면 됩니다.
로컬에서도 해보고, 디플로이 하고 웹서버에서도 테스트했습니다! 알려주신 방식으로도 해볼게요 감사합니다!
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
알려주신 방법은 웹서버 말고 로컬 환경에서 저렇게 선언하는 방법 맞을까요? 수정해서 로컬에서도 배포환경에서도 테스트해봤는데, 에러 발생하면서 리다이렉트가 제대로 이루어지지 않습니다.
Unsafe attempt to initiate navigation for frame with origin 'https://tickitacka.com' from frame with URL 'https://api.tosspayments.com/proxy/pages/billing/setup/${테스트키}/${AUTHKEY}'. The frame attempting navigation is sandboxed, and is therefore disallowed from navigating its ancestors. 이 에러와 앞전에 발생하던 에러 두개가 함께 뜨고 있습니다.
혹시 위에 다른 답변 말씀대로 iframe에서는 결제창이 제대로 작동하지 않나요?iframe 안에서는 남겨주신 CORS 이슈가 발생해서 권장드리지 않지만, 앱 내 웹뷰의 경우 예외적으로 위 이실장님 답변처럼 로드할 수 있는것으로 알고있습니다. 플러터 웹으로 구현된 케이스가 많지 않아서 확답드리기는 어렵네요.
flutter web은 저희가 공식 지원하지 않다보니 우선 이것저것 해보셔야할 거에요
넵 알겠습니다 답변 감사합니다!