Die Google-Authentifizierung auf verschiedenen Geräten funktioniert beim lokalen Testen nicht (Reactjs)

Question

Zuallererst funktioniert die Google-Authentifizierung v.9 (Anmeldung und Registrierung) einwandfrei, wenn ich sie auf meinem lokalen (Windows-)Laptop teste (dem gleichen Computer, auf dem der NodeJS-Server läuft).

Die App ist fast fertig und einsatzbereit, daher möchte ich sie auch auf anderen Geräten testen. Also habe ich mit meinem iPad und iPhone auf ip.address:3000 zugegriffen und dort die Seite geöffnet. Aber wenn ich auf „Mit Google anmelden“ klicke, erscheint kein Popup. Öffnen Sie einfach einen leeren neuen Tab (accounts.google). Pop-ups sind auf beiden Geräten erlaubt.

Ist das normales Verhalten? Oder mache ich etwas falsch in meinem Code? Dann habe ich es noch einmal auf meinem (lokalen) Windows-Laptop überprüft und alles war in Ordnung. Aber mir ist in der Konsole eine Fehlermeldung aufgefallen: „Die Cross-Origin-Opener-Policy-Richtlinie verhindert den Aufruf von window.postMessage.“ Funktioniert es deshalb nicht auf iOS-Geräten? Ich habe stundenlang gesucht, aber es scheint keine Lösung für dieses Problem zu geben.

Wird das gleiche Verhalten auftreten, wenn ich es auf www bereitstelle?

Ich weiß, das ist eine seltsame Frage. Mir ist völlig bewusst, dass ich möglicherweise etwas falsch gemacht oder etwas vergessen habe. Aber ich hoffe, dass mir jemand helfen kann.

Bearbeiten: Dies ist der Code, den ich ausführe

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]);

Auf meinem lokalen Computer funktioniert es einwandfrei. Aber wenn ich es auf einem iPad oder iPhone versuche, erscheint kein Popup, nur ein leerer Bildschirm. Ich denke, hier sollte ich das Google-Konto auswählen können. Aktualisieren Sie diese Seite ... bleiben Sie leer. Safari und Chrome zeigen das gleiche Verhalten. Dies ist die URL des leeren Tabs, der geöffnet wird: https://accounts.google.com/gsi/xxx.apps.googleusercontent.com&ux_mode=popup&ui_mode=card&asxxxxxxxxxxx192.168.0.999%3A3000

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”这一短语。到那时，一切都会正常进行。当您返回应用程序时（无论是自动发生还是需要手动切换回应用程序），身份验证应获得批准。