Google: вход на сайте через аккаунт Google

Шпаргалка: что настроить в Google Cloud, чтобы кнопка «Войти через Google» работала на сайте, и что делать при смене домена. Значения в примерах взяты из Place, в новом проекте подставь свои (таблица в самом конце). Соседние инструкции: Google-сервисы, Meta, TikTok.

Как всё связано

Кнопка на сайте

→

Окно входа Google

→

Токен credential

→

Наш сервер проверяет токен

→

Сессия пользователя

Google показывает окно входа только на тех доменах, которые указаны в настройках клиента. Если домена там нет, пользователь увидит «Доступ заблокирован» ещё до того, как запрос дойдёт до нашего сервера. Поэтому эта ошибка чинится в Google Cloud, а не в коде.

Вход в мобильном приложении от домена не зависит. Там работают клиенты iOS и Android, их при смене домена не трогаем.

Кто есть кто

Google Cloud Consoleconsole.cloud.google.com: проекты, клиенты OAuth, экран согласия.

ПроектКонтейнер настроек. У него есть имя, Project ID и Project number.

OAuth Client IDИдентификатор клиента. Начинается с номера проекта, его можно не скрывать.

Client secretСекрет сервера. Его нельзя публиковать и присылать на скриншотах.

JavaScript originАдрес сайта: протокол и домен, без пути и / в конце.

Authorized domainsДомены из настроек экрана согласия: основной домен без https://.

Чек-лист

Шаги по порядку. Галочки сохраняются только в этом браузере.

Войти нужной почтой и найти проект
Определить, какой клиент использует сайт
Добавить домен в Authorized JavaScript origins
Добавить домен в Authorized domains
Проверить настройки проекта
сайт и сервер должны использовать один клиент
Проверить вход в окне инкогнито
изменения могут применяться до нескольких часов

Настройка

Когда это нужно. Запуск нового сайта, смена домена, появление поддомена или ошибка origin_mismatch.

Так выглядит ошибка, если домен не добавлен:

1Почта и проект

Зачем: проекты видны только аккаунтам, у которых есть к ним доступ. Пустой список значит, что вход выполнен не той почтой.

Открой console.cloud.google.com.
Вверху справа нажми на аватар и выбери почту.
Вверху слева открой выбор проекта, вкладка All.
Найди проект по номеру. Номер это цифры в начале Client ID: 728122372039-...

Правильный проект показывает тот же номер на главной странице. Предложение Free Trial для этой настройки не нужно.

Google Cloud: главная страница проекта с Project number и Project ID

2Какой клиент использует сайт

Зачем: в проекте может быть несколько клиентов. Домен нужно добавить именно в тот, что указан у сайта.

Открой APIs & Services → Credentials.
Посмотри значение GOOGLE_CLIENT_ID в client/.env.
Найди в разделе OAuth 2.0 Client IDs клиент типа Web application с таким ID.

Клиент	Для чего	Менять?
Production	Сайт и сервер Place	да
Web client 1, iOS client 1, Android client 1	Мобильное приложение	нет
aiPair	Другой продукт в этом же проекте	нет

3Authorized JavaScript origins

Зачем: это главный шаг. Он разрешает открывать окно входа Google с нашего сайта.

Нажми на имя клиента.
В Authorized JavaScript origins нажми Add URI.
Вставь адрес сайта:
```
https://pllace.cc
```
Если сайт открывается и через www, добавь https://www.pllace.cc отдельной строкой.
Нажми Save внизу страницы.

Только протокол и домен: без / в конце и без пути. Старый домен удаляй, когда вход на новом уже работает.

Authorized redirect URIs для этой кнопки не нужны: сайт использует всплывающее окно Google. Адрес там понадобится, только если в проекте есть вход с переадресацией по коду.

4Authorized domains

Зачем: Google показывает пользователю, какому сайту он даёт доступ, и домен должен быть указан в настройках.

Слева открой OAuth consent screen (в новом интерфейсе Google Auth Platform → Branding).
В Authorized domains нажми Add domain.
Введи домен без https://:
```
pllace.cc
```
Сохрани. Если Google попросит подтвердить владение доменом, сделай это в Search Console.

5Настройки проекта

Зачем: сервер принимает токен только от известных ему клиентов. Если сайт и сервер настроены на разные клиенты, окно Google откроется, но войти не получится.

Файл	Значение
`client/.env`	`GOOGLE_CLIENT_ID`: ID веб-клиента, `DOMAIN`: адрес сайта
`server/.env`	`GOOGLE_CLIENT_ID`: тот же ID, `CLIENT_URL`: адрес сайта
`server/.env` (если нужно)	`GOOGLE_EXTRA_CLIENT_IDS`: дополнительные клиенты через запятую

Сайт может брать значения из удалённого конфига config.webbro.org, при смене домена проверь и его. После правки client/.env сайт нужно пересобрать и загрузить заново:

cd client
npm run build

6Проверка

Зачем: окно инкогнито исключает старые сессии и кэш браузера.

Подожди 5–10 минут: Google может применять изменения дольше, до нескольких часов.
Открой сайт в окне инкогнито и нажми «Войти через Google».
Выбери аккаунт. После входа должен открыться сайт с твоим профилем.

Значения для нового проекта

Что	Place	Где взять в новом
Project number	`728122372039`	Главная страница проекта
Project ID	`pllace-399520`	Главная страница проекта
Веб-клиент	Production, `728122372039-op7l...`	Credentials
Сайт	`https://pllace.cc`	Адрес сайта

Если что-то не работает

Симптом	Что делать
`origin_mismatch`	Домена нет в Authorized JavaScript origins нужного клиента, либо адрес указан неточно
`redirect_uri_mismatch`	Сайт использует вход с переадресацией: добавить точный адрес в Authorized redirect URIs
Домен добавлен, ошибка осталась	Подождать, проверить в окне инкогнито и убедиться, что правился клиент с ID сайта
Проекта нет в списке	Войти другой почтой или попросить доступ у владельца проекта
Окно Google прошло, но вход не выполнен	Проверить, что `GOOGLE_CLIENT_ID` сайта и сервера совпадают, или добавить ID в `GOOGLE_EXTRA_CLIENT_IDS`
На сайте после сборки ключи вместо текста	Это не связано с Google: проверить, что загружено всё содержимое `client/dist`