本機測試時，不同裝置上的 Google 驗證不起作用（Reactjs）

Question

首先，當我在本機（Windows）筆記型電腦（與執行 NodeJS 伺服器的電腦相同）上測試時，Google Authentication v.9（登入和註冊）運作良好。

應用程式幾乎完全完成並準備好部署，所以我也想在其他設備上測試它。 因此，我使用 iPad 和 iPhone 訪問 ip.address:3000，在那裡我得到了打開的頁面。但是當我點擊“使用 Google 登入”時，沒有彈出視窗。僅開啟一個空白的新選項卡 (accounts.google)。兩種設備都允許彈出視窗。

這是正常行為嗎？或者我在程式碼方面做錯了什麼。 然後我再次檢查我的（本地）Windows 筆記型電腦，一切正常。 但我注意到控制台中有一條錯誤訊息「Cross-Origin-Opener-Policy 策略將阻止 window.postMessage 呼叫。」。這就是它不能在 ios 設備上運行的原因嗎？我已經尋找了幾個小時，但似乎還沒有解決這個問題的方法。

當我將其部署在 www 上時，是否會出現相同的行為？

我知道，這是一個奇怪的問題。我完全意識到我可能做錯了什麼或忘記了什麼。 但我希望有人能幫助我。

編輯： 這是我運行的程式碼

const { handleGoogle, loading, error } = useFetch('http://192.168.0.999:8800/login');


useEffect(() => {
    /* global google */
    if (window.google) {
        google.accounts.id.initialize({
            client_id: 'xxxxxxxxxxx.apps.googleusercontent.com',
            callback: handleGoogle
        });
        google.accounts.id.renderButton(document.getElementById('loginDiv'), {
                    theme: 'outline',
                    text: 'continue with',
                    shape: 'pill',
                    //size: 'small'
        })
    }
}, [handleGoogle]);

它在我的本機電腦上運作良好。但當我在 iPad 或 iPhone 上嘗試時，沒有彈出窗口，只有空白螢幕。我認為這個應該是我可以選擇哪個Google帳戶的地方。刷新此頁面...保持空白。 Safari、Chrome 顯示相同的行為。 這是開啟的空白標籤的網址：https://accounts.google.com/gsi/xxx.apps.googleusercontent.com&ux_mode=popup&ui_mode=card&asxxxxxxxxxxx192.168.0.999:3000

#

Answer 1

我在其他平台上工作時也遇到過同樣的問題。我不熟悉 React 語法，但我懷疑您正在使用以下行設定回調 URL...

const { handleGoogle, loading, error } = useFetch('http://192.168.0.999:8800/login');

我還懷疑該 IP 位址正在引用您的機器，一切正常。您可能想嘗試使用 localhost 或 iOS 裝置的 127.0.0.1，看看是否至少可以在 iphone 和 ipad 上看到「callback returned」這一短語。到那時，一切都會正常進行。當您返回應用程式時（無論是自動發生還是需要手動切換回應用程式），身份驗證應獲得批准。