로컬에서 테스트할 때 다른 장치의 Google 인증이 작동하지 않음(Reactjs)

Question

우선 Google 인증 v.9(로그인 및 등록)는 내 로컬(Windows) 노트북(NodeJS 서버가 실행되는 것과 동일한 시스템)에서 테스트할 때 제대로 작동합니다.

앱이 거의 완성되어 배포 준비가 완료되었으므로 다른 기기에서도 테스트해보고 싶습니다. 그래서 아이패드와 아이폰을 이용해 ip.address:3000에 접속해서 페이지를 열었습니다. 그런데 'Google로 로그인'을 클릭해도 팝업이 표시되지 않습니다. 빈 새 탭(accounts.google)을 열면 됩니다. 팝업은 두 장치 모두에서 허용됩니다.

이게 정상적인 행동인가요? 아니면 내 코드에 뭔가 문제가 있는 걸까요? 그런 다음 (로컬) Windows 랩톱에서 다시 확인했는데 모든 것이 정상이었습니다. 하지만 콘솔에서 "Cross-Origin-Opener-Policy 정책으로 인해 window.postMessage 호출이 차단됩니다."라는 오류 메시지를 발견했습니다. 이것이 iOS 장치에서 작동하지 않는 이유입니까? 몇 시간 동안 검색해 보았지만 이 문제에 대한 해결책이 없는 것 같습니다.

www에 배포해도 동일한 동작이 발생합니까?

알아요, 이상한 질문이네요. 나는 내가 뭔가 잘못했거나 뭔가를 잊었을 수도 있다는 것을 충분히 알고 있습니다. 하지만 누군가가 나를 도울 수 있기를 바랍니다.

편집: 이것이 제가 실행하는 코드입니다

으아아아

내 로컬 컴퓨터에서는 잘 작동합니다. 하지만 아이패드나 아이폰에서 시도해 보면 팝업도 없고 빈 화면만 나타납니다. 여기에서 어떤 Google 계정을 선택할 수 있어야 한다고 생각합니다. 이 페이지를 새로 고치세요...비워두세요. Safari, Chrome은 동일한 동작을 보여줍니다. 열리는 빈 탭의 URL은 다음과 같습니다. https://accounts.google.com/gsi/xxx.apps.googleusercontent.com&ux_mode=popup&ui_mode=card&asxxxxxxxxxxx192.168.0.999%3A3000

Answer 1

다른 플랫폼에서 작업할 때도 같은 문제가 발생했습니다. 저는 React 구문에 익숙하지 않지만 다음 줄을 사용하여 콜백 URL을 설정하고 있는 것 같습니다...

으아악

또한 IP 주소가 귀하의 컴퓨터를 참조하고 있는 것으로 의심됩니다. 모든 것이 정상입니다. iOS 장치용 localhost 또는 127.0.0.1을 사용해보고 iPhone 및 iPad에서 최소한 "콜백 반환됨"이라는 문구가 표시되는지 확인하는 것이 좋습니다. 그때까지는 모든 것이 정상적으로 작동할 것입니다. 앱으로 돌아오면(이 작업이 자동으로 수행되거나 수동으로 앱으로 다시 전환해야 하는지 여부) 인증이 승인되어야 합니다.