Настройка кнопок авторизации через Google

В данной статье мы рассмотрим, как настроить авторизацию в интернет-магазине через Google.

Для настройки вам необходимо иметь учётную запись Google. Если у вас ещё нет учётной записи Google - создайте её.

Как только учётная запись Google создана - перейдите по ссылке и нажмите "Create project"(рис. 1).

Рисунок 1.

Придумайте и введите название проекта, а затем нажмите кнопку "Create" (рис. 2).

Рисунок 2.

После этого откройте меню Google Cloud Platform и перейдите в пункт "APIs & Services - Library" (рис. 3).

Рисунок 3.

На открывшейся странице введите в строку поиска "analytics api" (рис. 4) и нажмите клавишу Enter.

Рисунок 4.

В результатах поиска нажмите на "Google Analytics API" (рис. 5).

Рисунок 5.

На открывшейся странице нажмите на кнопку "Enable" (рис. 6).

Рисунок 6.

Перейдите в раздел "OAuth consent screen" и выберите пункт "External" (рис.7).

Рисунок 7.

На шаге "1. OAuth consent screen" введите название приложения и email-адрес (рис.8).

Рисунок 8.

Внизу страницы в секции "Authorized domains" добавьте доменное имя своего сайта (рис.9).

Если к магазину привязан только поддомен, то в данном разделе укажите домен первого уровня. Поддомен укажем на следующем этапе настройки (рис.12). 

Рисунок 9.

В секции "Developer contact information" введите email-адрес, на который Google будет отправлять вам информацию об изменениях в работе этого проекта, далее нажмите кнопку "SAVE AND CONTINUE" (рис.10).

Рисунок 10.

На шагах "2. Scopes" и "3. Test users" нажмите на кнопку "SAVE AND CONTINUE". Затем откройте раздел "Credentials", нажмите на кнопку "CREATE CREDENTIALS" и выберите "OAuth client ID" (рис.11).

Рисунок 11.

Выберите тип приложения "Web application".

В поле "Authorized JavaScript origins" введите домен.

В поле "Authorized redirect URIs" введите адрес вида https://shop.ru/login. Замените shop.ru на домен своего сайта (рис.12).

Если к магазину привязан только поддомен, то в разделах "Authorized JavaScript origins" и "Authorized redirect URIs" укажите поддомен. 

Нажмите на кнопку "CREATE".

Рисунок 12.

Скопируйте значения "Your Client ID" и "Your Client Secret" (рис.13).

Рисунок 13.

Далее перейдите в административную панель магазина, в раздел "Настройки - Системные настройки" (рис. 14).

Рисунок 14.

В разделе "Авторизация" поставьте галочку напротив "Включен" и укажите ранее скопированные Client ID и Client secret (рис.15).

Рисунок 15.

Теперь клиенты смогу авторизоваться в вашем интернет-магазине с помощью Google (рис. 16, 17).

Рисунок 16.

Рисунок 17.

Готово. Мы рассмотрели, как настроить авторизацию в интернет-магазине через Google.