L'authentification Google sur différents appareils ne fonctionne pas lors des tests locaux (Reactjs)

Question

Tout d'abord, l'authentification Google v.9 (connexion et enregistrement) fonctionne correctement lorsque je la teste sur mon ordinateur portable local (Windows) (la même machine sur laquelle le serveur NodeJS s'exécute).

L'application est presque entièrement terminée et prête à être déployée, je souhaite donc également la tester sur d'autres appareils. Ainsi, en utilisant mon iPad et mon iPhone, j'ai accédé à ip.address:3000, où j'ai ouvert la page. Mais lorsque je clique sur « Se connecter avec Google », il n'y a pas de popup. Ouvrez simplement un nouvel onglet vide (accounts.google). Les pop-ups sont autorisés sur les deux appareils.

Est-ce un comportement normal ? Ou est-ce que je fais quelque chose de mal dans mon code. Ensuite, j'ai vérifié à nouveau sur mon ordinateur portable Windows (local) et tout allait bien. Mais j'ai remarqué un message d'erreur dans la console "La politique Cross-Origin-Opener-Policy empêchera l'appel window.postMessage.". Est-ce pour cela que cela ne fonctionne pas sur les appareils iOS ? Je cherche depuis des heures mais il ne semble pas y avoir de solution à ce problème.

Le même comportement se produira-t-il lorsque je le déploierai sur www ?

Je sais, c'est une question bizarre. Je suis pleinement conscient que j'ai peut-être fait quelque chose de mal ou oublié quelque chose. Mais j'espère que quelqu'un pourra m'aider.

Modifier : C'est le code que j'exécute

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

Cela fonctionne bien sur mon ordinateur local. Mais lorsque je l'essaye sur un iPad ou un iPhone, il n'y a pas de popup, juste un écran vide. Je pense que c'est ici que je peux choisir quel compte Google. Actualisez cette page... restez vide. Safari, Chrome présentent le même comportement. Voici l'URL de l'onglet vide qui s'ouvre : https://accounts.google.com/gsi/xxx.apps.googleusercontent.com&ux_mode=popup&ui_mode=card&asxxxxxxxxxxxx192.168.0.999%3A3000

Answer 1

J'ai rencontré le même problème en travaillant sur d'autres plateformes. Je ne connais pas la syntaxe React, mais je soupçonne que vous définissez l'URL de rappel en utilisant les lignes suivantes...

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

Je soupçonne également que l'adresse IP fait référence à votre machine, tout va bien. Vous voudrez peut-être essayer d'utiliser localhost ou 127.0.0.1 pour les appareils iOS et voir si vous pouvez au moins voir l'expression « rappel renvoyé » sur les iPhones et iPads. D’ici là, tout fonctionnera normalement. Lorsque vous revenez à l'application (que cela se produise automatiquement ou que vous deviez revenir manuellement à l'application), l'authentification doit être approuvée.