Окно входа в Google Oauth не работает должным образом

Question

У меня есть проект Java Spring + React.js.

Моя проблема

На моем сайте есть кнопка, при нажатии которой пользователь должен авторизоваться через Google. Проблема в том, что пользовательский интерфейс входа в Google OAuth просто не работает.Появляется следующая ошибка на консоли Google.

Но все же этот пользовательский интерфейс входа в Google можно получить, если перейти в раздел «Приложение».И, нажав на эту вкладку Google, я могу успешно войти в систему.

Это мой код конфигурации безопасности для Google OAuth

Это мой файл application.properties

На стороне React у меня есть кнопка, для нажатия которой будет выполнена эта функция.

 onOAuth2LiginClick = () => {
  axios.get("http://localhost:8080/oauth2/authorize/google", {
  "Access-Control-Allow-Origin": "*"
  });
};

В течение нескольких дней я не могу найти информацию об этом. Как я могу сделать так, чтобы это окно входа отображалось на моем сайте?Заранее спасибо за помощь.

Answer 1

Вам нужно будет направить браузер на конечную точку Google OAuth2, т. Е. По ссылке или с помощью window.location=..., вместо того, чтобы вызывать «бэкэнд» axios / XMLHttpRequests к конечной точке.

Из того, что я вижу, если вы просто свяжете пользователя с конечной точкой localhost:3000/oauth2/authorize/google, это, вероятно, должно работать.

Точный поток немного отличается в зависимости от того, выполняете ли вы OAuth на стороне сервера или на стороне клиента, но в любом случае в основном вам нужно отправить пользователя на URL-адрес авторизации Google, а после аутентификации Google отправит (перенаправит) пользователь возвращается на указанную вами ссылку