Как добавить вход в Google одним кликом в WordPress (шаг за шагом)

Хотите ли вы добавить вход в систему Google одним кликом на свой сайт WordPress?? Когда ваши пользователи смогут войти в систему с помощью своего...

Хотите ли вы добавить вход в систему Google одним кликом на свой сайт WordPress??

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

В этой статье мы расскажем, как легко добавить вход в систему Google одним кликом в WordPress.

Зачем добавлять вход в Google одним кликом в WordPress?

Многие пользователи Интернета постоянно заходят в свои аккаунты Google. Это позволит им быстро получить доступ к приложениям Google, таким как Gmail, Drive и Docs, не регистрируясь отдельно для каждого приложения.

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

Как подключить Google Maps на сайт Создание и тонкая настройка

Если вы ведете простой блог WordPress, то, возможно, эта функция не покажется вам полезной.

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

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

Учитывая вышесказанное, давайте рассмотрим, как легко добавить вход в систему Google одним кликом на ваш сайт WordPress.

Совет: Чтобы добавить вход в Google одним щелчком мыши, ваш сайт должен иметь безопасное SSL-шифрование. Чтобы узнать, как настроить безопасное соединение, смотрите наше руководство для начинающих о том, как перейти с HTTP на HTTPS в WordPress.

Как добавить вход в Google одним кликом в WordPress

Сначала вам нужно установить и активировать плагин Nextend Social Login and Register. Для получения более подробной информации, пожалуйста, ознакомьтесь с нашим руководством для начинающих о том, как установить плагин WordPress.

В этом учебнике мы будем использовать бесплатный плагин, который поддерживает вход в Google, Twitter и Facebook (признана экстремистской организацией на территории РФ). Существует также платная версия Nextend Social Login, которая добавляет социальный вход для множества различных сайтов, включая PayPal, Slack и TikTok.

После активации приложения вам необходимо перейти к следующему разделу Настройки » Nextend Social Login в области администратора WordPress. На этом экране вы видите различные варианты социального входа, которые доступны.

Добавление социального входа на ваш сайт WordPress

Чтобы добавить вход Google на ваш сайт WordPress, вам нужно нажать кнопку ‘Getting Started’ под логотипом Google.

Здесь вы увидите, что вашим первым шагом будет создание приложения Google.

Создание приложения Google звучит технически сложно, но не волнуйтесь.

Вкладка Nextend Social Login Getting Started

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

Создание приложения Google

Чтобы создать это приложение, вам нужно будет переключаться между вашей приборной панелью WordPress и Google Developers Console. Рекомендуется оставить панель WordPress открытой в текущей вкладке и открыть новую вкладку браузера.

Теперь вы можете посетить веб-сайт Google Developers Console. Если вы еще не вошли в систему, то вам будет предложено войти в систему под своим аккаунтом Google.

Далее вам нужно нажать на «Выбрать проект» в верхнем меню. Откроется всплывающее окно, в котором нужно нажать кнопку «Новый проект», чтобы продолжить.

Создайте новый проект в Google Developers Console

Откроется страница «Новый проект. Вам нужно будет добавить название проекта и выбрать местоположение. Название проекта может быть любым, например, ‘Google Login.’

Если вы вошли в систему, используя аккаунт Google Workspace, то местоположение будет автоматически заполнено названием вашей организации. Если нет, то вы должны оставить значение ‘Нет организации.’

Дайте проекту имя и местоположение

Далее нажмите кнопку «Создать», чтобы продолжить.

Теперь вы будете перенаправлены на приборную панель «API и службы». На этой странице вам нужно щелкнуть на «Экран согласия OAuth» в левом меню.

Решите, кто будет использовать ваше приложение - внутренние или внешние пользователи

Здесь вы выбираете тип пользователя, которому вы разрешаете войти в систему.

Выберите «Внутренний», если вход будет осуществляться только для пользователей с учетной записью Google вашей организации. В качестве альтернативы вы можете выбрать «Внешний», если у ваших пользователей есть адреса электронной почты за пределами вашей организации. Например, любой адрес @gmail.com аккаунт против @yourcompanyemail.com-адрес.

Когда вы будете готовы продолжить, нажмите кнопку «Создать». Теперь вы можете начать добавлять информацию о вашем приложении.

Добавьте информацию о вашем приложении Google

Сначала введите название вашей компании в поле «Название приложения». Он будет показан пользователю при входе в систему, например, ‘Smith Training Services хочет получить доступ к вашему аккаунту Google.’

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

Совет: Мы рекомендуем вам не загружать логотип для вашего приложения. Если вы это сделаете, то ваше приложение должно будет пройти процесс проверки в команде Google Trust and Safety Team. Этот процесс длительный и может занять 4-6 недель.

После этого прокрутите вниз до раздела ‘Домен приложения’. Здесь вам нужно добавить ссылки на главную страницу вашего сайта, страницу политики конфиденциальности и страницу условий предоставления услуг.

Добавьте ссылки на эти важные страницы сайта

Затем вам нужно нажать кнопку ‘Добавить домен’, чтобы добавить доменное имя вашего сайта, например, ‘example.com.’

Если вы хотите добавить вход в Google в один клик на несколько сайтов, то вы можете нажать кнопку ‘+ Добавить домен’, чтобы добавить еще один домен.

Добавьте свой веб-сайт

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

Когда вы закончите, не забудьте нажать кнопку «Сохранить и продолжить».

Далее вы попадете на страницы Области действия и Тестовые пользователи. На обеих этих страницах просто прокрутите страницу до самого низа и нажмите кнопку «Сохранить и продолжить».

Нажмите кнопку Сохранить и продолжить на страницах Области действия и Тестовые пользователи

На последней странице этого шага вы увидите сводку настроек экрана согласия OAuth.

Следующим шагом будет создание ключей, которые понадобятся вашему плагину для соединения с Google Cloud.

Вы должны выбрать пункт ‘Credentials’ в левом меню, а затем нажать кнопку ‘+ Create Credientials’ в верхней части экрана. Вам нужно выбрать опцию ‘OAuth ID клиента’.

Нажмите Создать учетные данные и выберите Идентификатор клиента OAuth

После этого вы перейдете на страницу ‘Create OAuth client ID.

Вы должны выбрать ‘Web-приложение’ из выпадающего списка ‘Тип приложения’.

Выберите веб-приложение для типа приложения

На страницу будут добавлены некоторые настройки. Вам нужно прокрутить вниз до раздела ‘Authorized redirect URIs’ и нажать кнопку ‘+ Add URI’.

Теперь вы должны ввести этот URL:

Убедитесь, что вы заменили пример.com с адресом вашего собственного сайта.

Вставьте этот URL в разрешенные URI перенаправления

После этого вы должны нажать кнопку ‘Создать’, чтобы сохранить настройки. Для того чтобы настройки вступили в силу, может потребоваться от пяти минут до нескольких часов.

Ваш клиент OAuth теперь создан!

Вы увидите всплывающее окно, содержащее ‘Ваш идентификатор клиента’ и Ваш секрет клиента.’ Вам нужно будет вставить эти ключи на страницу настроек плагина в админке WordPress.

Вы можете просто нажать на значок ‘copy’ справа, чтобы скопировать ключи по одному.

Теперь вы увидите идентификатор клиента и секрет клиента

Добавление ключей Google в ваш плагин

Теперь просто переключитесь обратно на вкладку браузера вашего сайта и нажмите на вкладку «Настройки» Настройки « Nextend Social Login. Здесь вы увидите поля для ID клиента и секрета клиента.

Вам нужно скопировать ключи из Google Cloud Console и вставить их в эти поля.

Вставьте идентификатор клиента Google и секрет клиента в плагин

После этого не забудьте нажать кнопку «Сохранить изменения», чтобы сохранить настройки.

Теперь вам нужно проверить, что настройки работают правильно. Это важно, поскольку вы не хотите, чтобы реальные пользователи сталкивались с ошибками при попытке войти на ваш сайт.

Нажмите кнопку Проверить настройки, чтобы убедиться, что приложение Google работает правильно

Просто нажмите кнопку ‘Проверить настройки’, и плагин убедится, что созданное вами приложение Google работает правильно.

Если вы правильно выполнили все шаги, то вы должны увидеть уведомление «Works Fine — Disabled».’

Вы должны увидеть уведомление с надписью

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

Вы увидите сообщение, подтверждающее, что вход в Google теперь включен.

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

Выбор стиля кнопок и ярлыков

Стиль кнопок Nextend по умолчанию и ярлык довольно стандартны и подойдут для большинства веб-сайтов. Однако вы можете настроить их, перейдя на вкладку ‘Buttons’ в верхней части экрана.

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

Выберите скин, нажав на его радиокнопку

После этого вы также можете изменить текст кнопки, отредактировав текст в поле ‘Метка входа’.

При желании вы можете применить базовое форматирование к ярлыку входа в систему с помощью HTML. Например, вы можете сделать текст жирным, используя и теги.

Вы можете настроить ярлыки кнопок и кнопки

Вы также можете редактировать поля ‘Link label’ и ‘Unlink label’, которые позволяют пользователям связывать и развязывать ваш сайт с их аккаунтами Google. Технические пользователи могут использовать HTML-код для кнопок, чтобы создать свою собственную кнопку входа в Google.

Обязательно нажмите кнопку «Сохранить изменения», чтобы сохранить настройки.

Вывод приложения Google из режима тестирования

Теперь вам осталось сделать еще одну вещь на вкладке браузера Google Cloud. Вы все еще должны видеть всплывающее окно с вашим идентификатором клиента и секретом клиента. Вы можете отклонить всплывающее окно, нажав ‘OK’ в нижней части всплывающего окна.

Теперь вам нужно нажать ‘OAuth экран согласия’ в левом меню.

Вы можете видеть, что ваше приложение Google находится в режиме «Тестирование». Это позволит вам протестировать ваше приложение с ограниченным числом пользователей. Теперь, когда вы получили уведомление ‘Works Fine’ при проверке настроек плагина, вы можете перевести его в режим ‘Production’.

Нажмите кнопку Опубликовать приложение, чтобы перевести его в режим производства

Для этого нажмите кнопку «Опубликовать приложение». Далее вы увидите всплывающее окно с заголовком «Push to production?’

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

Теперь нажмите кнопку подтверждения

Если вы внимательно следовали этому руководству, то статус верификации теперь должен быть «Верификация не требуется».’

Теперь ваше приложение будет работать со всеми пользователями Google.

Ваш статус верификации должен быть

Теперь, когда пользователи будут входить на ваш сайт, у них будет возможность войти в систему с помощью Google.

Однако при желании пользователь может войти в систему, используя свое стандартное имя пользователя и пароль WordPress.

Предварительный просмотр входа в Google

Помните, что пользователи могут войти в систему только с адресом аккаунта Google, который они использовали на вашем сайте. Кроме того, если вы разрешили регистрацию пользователей на вашем сайте WordPress, то пользователи могут быстро зарегистрироваться на вашем сайте, используя один клик Google login.

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

Добавление кнопки входа в Google с помощью шорткода

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

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий