Что такое идентификатор клиента?
Идентификатор клиента Google (или ClientID) — это уникальный идентификатор, присваиваемый приложению/пользователю. Он используется для аутентификации клиентов и серверов с использованием OAuth (Auth 2.0).

Чтобы получить идентификатор клиента Google, откройте Google Cloud Console и начните новый проект. В этом руководстве мы назовем проект «Вход в GoogleReact», но вы можете выбрать любое имя по своему усмотрению.

После создания проекта перейдите в раздел «Учетные данные» в меню API и сервисы. Здесь вы найдете панель управления, на которой название вашего текущего проекта должно быть видно в верхнем левом углу, рядом с логотипом Google Cloud.

Теперь, прежде чем создавать учетные данные, давайте перейдем к экрану согласия OAuth, чтобы настроить экран согласия.

Настройте экран согласия на вход в Google.

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

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

Чтобы настроить страницу согласия Google для вашего приложения React, перейдите на вкладку «Экран согласия OAuth» в левом меню Google Cloud Console.

На этой вкладке выберите «внешний» (единственный разрешенный вариант, если вы не используете проверенную Google компанию или приложение), затем нажмите кнопку «Создать», чтобы создать экран согласия.

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

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

Пока вы можете пропустить оставшиеся разделы регистрации. Просто прокрутите вниз в каждом разделе, нажмите «Сохранить», а затем вернитесь на панель управления после завершения.

После разработки страницы согласия OAuth мы должны опубликовать приложение, прежде чем экспериментировать с ним или проверять работу аутентификации. По умолчанию его состояние — «Тестирование», и после публикации оно переводится в производство.

Как только вы пометите свое приложение как «В разработке», оно станет доступно всем, у кого есть учетная запись Google.

Создайте идентификатор веб-клиента.

Теперь мы вернемся к опции учетных данных для доступа к странице, где вы можете создать свой идентификатор веб-клиента.
На экране выберите СОЗДАТЬ УЧЕТНЫЕ ДАННЫЕ в верхней части страницы, а затем щелкните идентификатор клиента OAuth.

Вам будет предложено выбрать тип приложения, как показано ниже. Перейти к веб-приложению. Если вы выполняете эти шаги для React (мы используем идентификатор клиента Google для Интернета).

Далее мы выберем имя для нашего идентификатора клиента, чтобы идентифицировать или указать конкретную ссылку на идентификатор одного приложения, это имя используется. Чтобы различать веб-идентификаторы, идентификаторы iOS и Android, мы можем указать «Веб-идентификатор», «Идентификатор Android», «Идентификатор iOS» и т. д. в их соглашениях об именах:

После этого мы представим два типа URL-адресов: авторизованные источники JavaScript и авторизованные URL-адреса перенаправления.

«URL-адрес авторизованного источника JavaScript» — это URL-адрес, с которого выполняется вход в ваше приложение. Для разработчиков React это localhost (localhost:3000) или ваш размещенный URL-адрес, если вы размещали свое приложение.

«URL-адрес авторизованного перенаправления» — это ссылка, по которой Google вернет пользователя после успешного входа в систему. Например, вы можете вернуть его на исходную ссылку или перенаправить на другую ссылку. Вам нужно будет добавить URL-адрес сюда.

Добавьте следующие URL-адреса к авторизованным источникам JavaScript и авторизованным URL-адресам перенаправления: http://localhost:3000 и http://localhost соответственно:

Чтобы создать идентификатор веб-клиента, вам нужно будет нажать кнопку «СОЗДАТЬ». Вы вернетесь на домашнюю страницу, где сможете просмотреть свои только что созданные учетные данные. Чтобы скопировать новый идентификатор веб-клиента, нажмите значок «Копировать».

Теперь, когда мы успешно создали идентификатор веб-клиента, вы зайдете в наше приложение React и добавите свой идентификатор клиента в файл .env.