ローカルでテストすると、さまざまなデバイスでの Google 認証が機能しない (Reactjs)

Question

まず第一に、ローカル (Windows) ラップトップ (NodeJS サーバーが実行されているのと同じマシン) でテストすると、Google 認証 v.9 (ログインと登録) は正常に動作します。

アプリケーションはほぼ完全に完成し、デプロイの準備ができたので、他のデバイスでもテストしたいと思います。 そこで、iPad と iPhone を使用して ip.address:3000 にアクセスし、ページを開きました。しかし、「Google でサインイン」をクリックしても、ポップアップは表示されません。空白の新しいタブ (accounts.google) を開くだけです。ポップアップは両方のデバイスで許可されます。

これは正常な動作ですか?それともコードで何か間違ったことをしているのでしょうか。 次に、(ローカルの) Windows ラップトップで再度確認しましたが、すべて問題ありませんでした。 しかし、コンソールに「Cross-Origin-Opener-Policy ポリシーにより window.postMessage 呼び出しが防止されます。」というエラー メッセージが表示されることに気付きました。これがiOSデバイスで動作しない理由ですか?何時間も検索してきましたが、この問題の解決策はないようです。

www にデプロイした場合も同じ動作が発生しますか?

わかっていますが、これは奇妙な質問です。私は何か間違ったことをしたり、何かを忘れたりした可能性があることを十分に承知しています。 しかし、誰かが私を助けてくれることを願っています。

＃＃＃編集： これは私が実行するコードです

リーリー

私のローカルコンピュータでは正常に動作します。しかし、iPad や iPhone で試してみると、ポップアップは表示されず、空白の画面が表示されるだけです。ここで Google アカウントを選択できると思います。このページを更新します...空白のままにしてください。 Safari、Chromeでも同様の挙動を示します。 これは、開く空のタブの URL です: https://accounts.google.com/gsi/xxx.apps.googleusercontent.com&ux_mode=popup&ui_mode=card&asxxxxxxxxxxx192.168.0.999:3000

Answer 1

他のプラットフォームで作業しているときに同じ問題に遭遇しました。 React の構文には詳しくありませんが、次の行を使用してコールバック URL を設定しているのではないかと思います...

リーリー

IP アドレスがあなたのマシンを参照しているのではないかとも思いますが、すべて問題ありません。 iOS デバイスに localhost または 127.0.0.1 を使用して、少なくとも iPhone と iPad で「コールバックが返されました」というフレーズが表示されるかどうかを確認してみるとよいでしょう。それまでは、すべてが正常に動作します。アプリに戻ると (これが自動的に行われるか、手動でアプリに戻る必要があるかに関係なく)、認証が承認される必要があります。