Статьи

Добавление входа в Google+ в WordPress

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

Пример входа в Google+ на Flixster

Пример входа в 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+. Если вы интегрируете ее в свою тему, то можете разместить эту кнопку где угодно, но если она в плагине, вам нужно будет добавить виджет.

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

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