Нужна помощь в открытии всплывающего окна в ReactJS. Войдите в систему с помощью Google и вызовите API из Laravel Backen ⇐ Php

[Anonymous]

Нужна помощь в использовании функции входа в Google и использовании всплывающего окна с window.open в ReactJS и вызове API из бэкэнда Laravel. Я использовал window.addEventListener для прослушивания «сообщения», и после отправки данных в API затем на внутренней стороне успешно вошел в систему, а затем вернул зарегистрированные данные клиента в форме json, включая uid клиента и токен, срок действия. И я не получил никакого события «сообщения»! И я до сих пор не знаю, как обращаться с API после возвращения. Вот пример данных, возвращаемых API после успешного входа клиента:

Код: Выделить всё

{
"check":true,
"uid":"CTdy7qF1733112180","
token":"170|n0FLWWIwJC9XlyVMDf2alHlwW3TSQZKyKItWUAmwcad9a97d",
"expiry":1733136280
}

Вот код приложения ReactJS:

Код: Выделить всё

import { useState } from "react";
import Header from "@layouts/Header";
import Footer from "@layouts/Footer";
import { Container, Row, Col, Form, Button, InputGroup } from "react-bootstrap";
import { Link } from "react-router-dom";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
import { Helmet } from "react-helmet";
import useAuthenContext from "@context/AuthenContext";
import axios from "axios";

function Login() {
const [formData, setFormData] = useState({ email: "", password: "", rememberToken: false });
const [errors, setErrors] = useState({});
const [showPassword, setShowPassword] = useState(false);
const { loginWithGoogle, login } = useAuthenContext();

const validate = () => {
let newErrors = {};
if (!formData.email.trim()) newErrors.email = "Email không được để trống!";
if (!formData.password.trim()) newErrors.password = "Mật khẩu không được để trống!";
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (formData.email && !emailRegex.test(formData.email)) {
newErrors.email = "Email không hợp lệ!";
}
if (formData.password && formData.password.length < 8) {
newErrors.password = "Mật khẩu phải có ít nhất 8 ký tự!";
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};

const handleSubmit = async (e) => {
e.preventDefault();
if (validate()) {
await login({ email: formData.email, password: formData.password, remember_token: formData.rememberToken });
} else {
window.notyf.error("Vui lòng kiểm tra thông tin đăng nhập!");
}
};

const handleChange = (e) => {
const { id, value } = e.target;
setFormData({ ...formData, [id]: value });
};

const togglePasswordVisibility = () => {
setShowPassword(!showPassword);
};

const handleGoogleLogin = async () => {
try {
const response = await axios.get(`${import.meta.env.VITE_API_URL}/auth/google`);
const data = response.data;

if (data.check) {
const width = 400;
const height = 600;
const left = (window.innerWidth - width) / 2;
const top = (window.innerHeight - height) / 2;

const popup = window.open(data.url, "GoogleLogin", `width=${width},height=${height},top=${top},left=${left}`);

if (!popup) {
window.notyf.error("Popup bị chặn! Hãy cho phép bật popup trên trình duyệt.");
return;
}

const handleMessage = (event) => {
console.log("Google Login Message:", event.data);
if (event.origin !== window.location.origin) return;

const { check, uid, token, expiry } = event.data;
console.log("Google Login Response:", event.data);

if (check) {
const responseData = { check, uid, token, expiry };
console.log("Google Login Response:", responseData);
loginWithGoogle(responseData);
} else {
window.notyf.error("Đăng nhập bị hủy hoặc thất bại.");
}

window.removeEventListener("message", handleMessage);
};

window.addEventListener("message", handleMessage);

const pollTimer = setInterval(() => {
if (googleWindow.closed) {
clearInterval(pollTimer);
window.notyf.error("Đăng nhập bị hủy.");
window.removeEventListener("message", handleMessage);  // Dọn dẹp
}
}, 5000);
} else {
window.notyf.error("Không thể lấy URL đăng nhập Google.");
}
} catch (error) {
console.error("Google Login Error:", error);
window.notyf.error("Có lỗi xảy ra khi đăng nhập với Google.");
}
};

return (


Đăng nhập - 30GLOW







Đăng nhập



{errors.email}








{errors.password}




 setFormData({ ...formData, rememberToken: e.target.checked })} />



Quên mật khẩu?


Bạn chưa có tài khoản?



Đăng nhập



Đăng nhập với Google






className="h-100 w-100"
style={{
backgroundImage: `url("https://i.pinimg.com/564x/4f/58/53/4f5853f340b64303be02dda402f06411.jpg")`,
backgroundSize: "cover",
backgroundPosition: "center",
}}
>





);
}

export default Login;

Код в Laravel Backend, который обрабатывает вход в Google, выглядит следующим образом:

Код: Выделить всё

public function redirectToAuth(): JsonResponse
{
return response()->json([
'check' => true,
'url' =>  Socialite::driver('google')->stateless()->redirect()->getTargetUrl(),
]);
}

public function handleAuthCallback(): JsonResponse
{
try {
$user = Socialite::driver('google')->stateless()->user();
$password = Str::random(8);

$this->instance = $this->model::active()->firstOrCreate([
'email' => $user->getEmail(),
], [
'uid' => $this->createCodeCustomer(),
'name' => $user->getName(),
'email' => $user->getEmail(),
'password' => Hash::make($password),
'status' => 1,
'email_verified_at' => now(),
'social_id' => $user->getId(),
'social_type' => 'google',
]);

if ($this->instance->wasRecentlyCreated) {
$dataMail = [
'name' => $user->getName(),
'email' => $user->getEmail(),
'password' => $password,
];
Mail::to($user->getEmail())->send(new createUser($dataMail));
}

Auth::guard('customer')->login($this->instance, false);
$this->instance->tokens()->delete();
$expiry = now()->addHours(6);
$token = $this->instance->createToken($this->instance->uid);
$token->expires_at = $expiry;

return response()->json(['check' => true, 'uid' => $this->instance->uid, 'token' => $token->plainTextToken, 'expiry' => $expiry->timestamp], 200);
} catch (\Throwable $e) {
Log::error("Đăng nhập Google thất bại: " . $e->getMessage());
return response()->json(['check' => false, 'message' => 'Đăng nhập thất bại!'], 400);
}
}

Маршрутизатор:

Код: Выделить всё

        Route::get('auth/google', 'redirectToAuth');
Route::get('auth/google/callback', 'handleAuthCallback');

Я хочу найти способ справиться с этим на стороне клиента после возврата данных об успешном входе в систему.

Подробнее здесь: https://stackoverflow.com/questions/792 ... om-laravel