Хотите ли вы добавить вход в систему 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. На этом экране вы видите различные варианты социального входа, которые доступны.
Чтобы добавить вход Google на ваш сайт WordPress, вам нужно нажать кнопку ‘Getting Started’ под логотипом Google.
Здесь вы увидите, что вашим первым шагом будет создание приложения Google.
Создание приложения Google звучит технически сложно, но не волнуйтесь.
Вам не нужно знать какой-либо код, и мы проведем вас через все шаги.
Создание приложения Google
Чтобы создать это приложение, вам нужно будет переключаться между вашей приборной панелью WordPress и Google Developers Console. Рекомендуется оставить панель WordPress открытой в текущей вкладке и открыть новую вкладку браузера.
Теперь вы можете посетить веб-сайт Google Developers Console. Если вы еще не вошли в систему, то вам будет предложено войти в систему под своим аккаунтом Google.
Далее вам нужно нажать на «Выбрать проект» в верхнем меню. Откроется всплывающее окно, в котором нужно нажать кнопку «Новый проект», чтобы продолжить.
Откроется страница «Новый проект. Вам нужно будет добавить название проекта и выбрать местоположение. Название проекта может быть любым, например, ‘Google Login.’
Если вы вошли в систему, используя аккаунт Google Workspace, то местоположение будет автоматически заполнено названием вашей организации. Если нет, то вы должны оставить значение ‘Нет организации.’
Далее нажмите кнопку «Создать», чтобы продолжить.
Теперь вы будете перенаправлены на приборную панель «API и службы». На этой странице вам нужно щелкнуть на «Экран согласия OAuth» в левом меню.
Здесь вы выбираете тип пользователя, которому вы разрешаете войти в систему.
Выберите «Внутренний», если вход будет осуществляться только для пользователей с учетной записью Google вашей организации. В качестве альтернативы вы можете выбрать «Внешний», если у ваших пользователей есть адреса электронной почты за пределами вашей организации. Например, любой адрес @gmail.com аккаунт против @yourcompanyemail.com-адрес.
Когда вы будете готовы продолжить, нажмите кнопку «Создать». Теперь вы можете начать добавлять информацию о вашем приложении.
Сначала введите название вашей компании в поле «Название приложения». Он будет показан пользователю при входе в систему, например, ‘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 клиента’.
После этого вы перейдете на страницу ‘Create OAuth client ID.
Вы должны выбрать ‘Web-приложение’ из выпадающего списка ‘Тип приложения’.
На страницу будут добавлены некоторые настройки. Вам нужно прокрутить вниз до раздела ‘Authorized redirect URIs’ и нажать кнопку ‘+ Add URI’.
Теперь вы должны ввести этот URL:
Убедитесь, что вы заменили пример.com с адресом вашего собственного сайта.
После этого вы должны нажать кнопку ‘Создать’, чтобы сохранить настройки. Для того чтобы настройки вступили в силу, может потребоваться от пяти минут до нескольких часов.
Ваш клиент OAuth теперь создан!
Вы увидите всплывающее окно, содержащее ‘Ваш идентификатор клиента’ и Ваш секрет клиента.’ Вам нужно будет вставить эти ключи на страницу настроек плагина в админке WordPress.
Вы можете просто нажать на значок ‘copy’ справа, чтобы скопировать ключи по одному.
Добавление ключей Google в ваш плагин
Теперь просто переключитесь обратно на вкладку браузера вашего сайта и нажмите на вкладку «Настройки» Настройки « Nextend Social Login. Здесь вы увидите поля для ID клиента и секрета клиента.
Вам нужно скопировать ключи из Google Cloud Console и вставить их в эти поля.
После этого не забудьте нажать кнопку «Сохранить изменения», чтобы сохранить настройки.
Теперь вам нужно проверить, что настройки работают правильно. Это важно, поскольку вы не хотите, чтобы реальные пользователи сталкивались с ошибками при попытке войти на ваш сайт.
Просто нажмите кнопку ‘Проверить настройки’, и плагин убедится, что созданное вами приложение 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, который они использовали на вашем сайте. Кроме того, если вы разрешили регистрацию пользователей на вашем сайте WordPress, то пользователи могут быстро зарегистрироваться на вашем сайте, используя один клик Google login.
Если вы хотите добавить кнопку входа в Google в любое другое место на вашем сайте, то вы можете сделать это с помощью шорткода. Вы можете узнать больше, перейдя на вкладку Nextend «Использование».
Надеемся, что эта статья помогла вам узнать, как добавить вход в систему Google в WordPress в один клик. Вы также можете узнать, как создать сайт членства WordPress, и посмотреть наш список лучших плагинов WordPress для бизнес-каталогов.
Источник: www.wpbeginner.com