Pengesahan Google pada peranti berbeza tidak berfungsi apabila menguji secara setempat (Reactjs)

Question

Pertama sekali, Google Authentication v.9 (log masuk dan pendaftaran) berfungsi dengan baik apabila saya mengujinya pada komputer riba tempatan saya (Windows) (mesin yang sama yang sedang dijalankan oleh pelayan NodeJS).

Apl hampir siap sepenuhnya dan sedia untuk digunakan, jadi saya mahu mengujinya pada peranti lain juga. Jadi, menggunakan iPad dan iPhone saya, saya mengakses ip.address:3000, tempat saya membuka halaman. Tetapi apabila saya mengklik pada "Log masuk dengan Google", tiada pop timbul. Cuma buka tab baharu kosong (accounts.google). Pop timbul dibenarkan pada kedua-dua peranti.

Adakah ini kelakuan normal? Atau adakah saya melakukan sesuatu yang salah dalam kod saya. Kemudian saya menyemak semula pada komputer riba Windows (tempatan) saya dan semuanya baik-baik saja. Tetapi saya perasan mesej ralat dalam konsol "Dasar Cross-Origin-Opener-Policy will prevent the window.postMessage call.". Adakah ini sebabnya ia tidak berfungsi pada peranti ios? Saya telah mencari selama berjam-jam tetapi nampaknya tidak ada penyelesaian untuk masalah ini.

Adakah kelakuan yang sama berlaku apabila saya menggunakan ia pada www?

Saya tahu, ini soalan yang pelik. Saya sedar sepenuhnya bahawa saya mungkin telah melakukan sesuatu yang salah atau terlupa sesuatu. Tetapi saya harap seseorang boleh membantu saya.

Sunting: Ini adalah kod yang saya jalankan

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

Ia berfungsi dengan baik pada komputer tempatan saya. Tetapi apabila saya mencubanya pada iPad atau iPhone, tiada pop timbul, hanya skrin kosong. Saya fikir ini sepatutnya menjadi tempat saya boleh memilih akaun Google yang mana. Muat semula halaman ini...kekalkan kosong. Safari, Chrome menunjukkan gelagat yang sama. Ini ialah URL tab kosong yang dibuka: https://accounts.google.com/gsi/xxx.apps.googleusercontent.com&ux_mode=popup&ui_mode=card&asxxxxxxxxxxx192.168.0.999%3A3000

Answer 1

Saya mengalami masalah yang sama semasa bekerja pada platform lain. Saya tidak biasa dengan sintaks React, tetapi saya mengesyaki anda menetapkan URL panggil balik menggunakan baris berikut...

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

Saya juga mengesyaki bahawa alamat IP merujuk kepada mesin anda, semuanya baik-baik saja. Anda mungkin ingin mencuba menggunakan localhost atau 127.0.0.1 untuk peranti iOS dan lihat sama ada anda sekurang-kurangnya dapat melihat frasa "panggilan balik" pada iPhone dan iPad. Sehingga itu, semuanya akan berfungsi seperti biasa. Apabila anda kembali ke apl (sama ada ini berlaku secara automatik atau anda perlu menukar kembali ke apl secara manual), pengesahan harus diluluskan.