本機測試時,不同裝置上的 Google 驗證不起作用(Reactjs)
P粉111641966
P粉111641966 2023-09-07 23:29:31
0
1
663

首先,當我在本機(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

#
P粉111641966
P粉111641966

全部回覆(1)
P粉797855790

我在其他平台上工作時也遇到過同樣的問題。我不熟悉 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」這一短語。到那時,一切都會正常進行。當您返回應用程式時(無論是自動發生還是需要手動切換回應用程式),身份驗證應獲得批准。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!