Это руководство предназначено для разработчиков WordPress, которые хотят добавить логин Google+ в свою тему WordPress. Для тем, созданных для электронной коммерции, форумов и других сайтов, требующих входа пользователя в систему, предоставление кнопки входа в Google+ позволяет пользователям быстрее и проще регистрироваться и регистрироваться, поскольку им не нужно заполнять форму.
Пример входа в Google+ на Flixster
Библиотека WordPress OAuth Google+
Я создал библиотеку Google+ OAuth для WordPress, которая выполняет все сложные задачи входа в Google+ OAuth.
Эта библиотека также создает необходимые URL-адреса REST API, необходимые для входа в Google+ (официальная документация Google называется «вход в Google+» ).
Как только вы загрузили ZIP-файл выше, извлеките содержимое в папку вашей темы. Теперь в папке вашей темы будет каталог /inc
Загрузка библиотеки WordPress OAuth Google+
Теперь вам нужно загрузить библиотеку в WordPress. В файле functions.php вашей темы просто включите следующее:
require_once("inc/googleplusoauth.php");
Перенаправление пользователей
Затем, когда пользователь нажимает кнопку «Войти через Google+», вам необходимо перенаправить пользователя:
site_url() . "/wp-admin/admin-ajax.php?action=googleplus_oauth_redirect"
Этот URL будет обрабатывать все основные функции «Войти через Google+». После входа в систему пользователь будет перенаправлен на домашнюю страницу сайта.
Создание и установка приложения Google+
Пользователям, которые устанавливают вашу тему, необходимо создать проект разработчика Google и включить Google+ API.
При включении Google+ API запрашивается URL-адрес обратного вызова. Пользователи должны будут использовать следующее в качестве URL обратного вызова:
get_site_url() . "/wp-admin/admin-ajax.php?action=googleplus_oauth_callback"
После включения API Google+ им нужно скопировать имя проекта, ключ API и секретный ключ с панели инструментов проекта и сохранить их в качестве параметров WordPress.
Вы можете использовать следующие имена опций для хранения значений опций:
update_option("googleplus_client_id", $client_id_variable);
update_option("googleplus_client_secret", $client_secret_variable);
update_option("googleplus_app_name", $app_name_variable);
Это все, что вам нужно сделать, чтобы кнопка входа в Google+ была интегрирована с вашей темой.
Теперь давайте создадим виджет входа в Google+, который отображает кнопку входа в Google+.
Создание виджета входа в Google+
В этом разделе я перечислю код для создания виджета входа в Google+. Вы также можете поместить этот код в плагин, если хотите. Вам просто нужно убедиться, что вы включили библиотеку Google+ OAuth WordPress в свой плагин.
<?php
require_once("inc/googleplusoauth.php");
class Google_Plus_Login_Widget extends WP_Widget
{
public function __construct()
{
parent::__construct("Google_Plus_login_widget", "Google Plus Login", array("description" => __("Display a Google+ Login Button")));
}
public function form( $instance )
{
// Check values
if($instance)
{
$title = esc_attr($instance['title']);
$api_key = $instance['api_key'];
$secret_key = $instance['secret_key'];
$googleplus_app_name = $instance['googleplus_app_name'];
}
else
{
$title = '';
$api_key = '';
$secret_key = '';
$googleplus_app_name = '';
}
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php echo "Title"; ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('api_key'); ?>"><?php echo "Client Id"; ?></label>
<input type="text" class="widefat" id="<?php echo $this->get_field_id('api_key'); ?>" name="<?php echo $this->get_field_name('api_key'); ?>" value="<?php echo $api_key; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('secret_key'); ?>"><?php echo "Client Secret"; ?></label>
<input type="text" class="widefat" id="<?php echo $this->get_field_id('secret_key'); ?>" name="<?php echo $this->get_field_name('secret_key'); ?>" value="<?php echo $secret_key; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('googleplus_app_name'); ?>"><?php echo "App Name"; ?></label>
<input type="text" class="widefat" id="<?php echo $this->get_field_id('googleplus_app_name'); ?>" name="<?php echo $this->get_field_name('googleplus_app_name'); ?>" value="<?php echo $googleplus_app_name; ?>" />
</p>
<p>
While creating a Twitter app use "<?php echo get_site_url() . '/wp-admin/admin-ajax.php?action=googleplus_oauth_callback' ?>" as callback URL.
</p>
<?php
}
public function update( $new_instance, $old_instance )
{
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['api_key'] = strip_tags($new_instance['api_key']);
$instance['secret_key'] = strip_tags($new_instance['secret_key']);
$instance['googleplus_app_name'] = strip_tags($new_instance['googleplus_app_name']);
update_option("googleplus_client_id", $new_instance['api_key']);
update_option("googleplus_client_secret", $new_instance['secret_key']);
update_option("googleplus_app_name", $new_instance['googleplus_app_name']);
return $instance;
}
public function widget( $args, $instance )
{
extract($args);
$title = apply_filters('widget_title', $instance['title']);
echo $before_widget;
if($title)
{
echo $before_title . $title . $after_title ;
}
if(is_user_logged_in())
{
?>
<a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="Logout"><input type="button" value="Logout" /></a>
<?php
}
else
{
?>
<a href="<?php echo site_url() . '/wp-admin/admin-ajax.php?action=googleplus_oauth_redirect'; ?>"><input type="button" value="Login Using Google+" /></a>
<?php
}
echo $after_widget;
}
}
register_widget("Google_Plus_Login_Widget");
Давайте посмотрим, как работает приведенный выше код:
- Сначала мы включили библиотеку Google+ OAuth
- Затем мы создали виджет, который отображает кнопку входа в систему на передней панели и отображает поля ввода ключей на сервере.
- Когда пользователи отправляют форму виджета на сервер, значения сохраняются как параметры WordPress.
- Когда кто-то нажимает кнопку входа в Google+ в передней части виджета, пользователи перенаправляются на «URL-адрес перенаправления», как указано выше.
- Перенаправленный URL-адрес обрабатывает все задачи входа
Выполнение вызовов Google REST API
После того как вы вошли в систему, вы получите токен доступа, который действует как разрешение на публикацию и получение данных пользователя в Google+.
Маркер доступа уникален для каждого пользователя, поэтому эта библиотека хранит его как метаданные пользователя. Вы можете получить его, используя следующее:
get_user_meta(get_current_user_id(), "googleplus_access_token", true)
Теперь вы можете выполнять вызовы API REST Google+ , передав этот токен в заголовок запроса HTTP-авторизации .
Срок действия токена
Токены доступа имеют ограниченный срок службы и могут стать недействительными по нескольким причинам. Если вы получаете неверный токен доступа при выполнении вызовов REST API, то вам нужно будет получить новый токен доступа, снова выполнив вход в систему.
Вывод
Мы узнали, как создать кнопку входа в Google+. Если вы интегрируете ее в свою тему, то можете разместить эту кнопку где угодно, но если она в плагине, вам нужно будет добавить виджет.
Если вам нужна дополнительная информация по этой теме, вот несколько других полезных ресурсов:
- Документация для разработчиков платформы Google+
- Вход в Google+ Документация для разработчиков
- Интеграция Ajax в WordPress
Если у вас есть какие-либо отзывы, или вы используете вышеуказанный метод или что-то подобное в проекте самостоятельно, пожалуйста, дайте мне знать, комментируя ниже.