Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Yii
Code

Учимся программировать с Yii2: Интеграция AuthClient с Twitter и Google

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called How to Program With Yii2.
How to Program With Yii2: Specialized Validations
How to Program With Yii2: Using the Advanced Application Template

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

Final product image
What You'll Be Creating

Если вы интересуетесь: «Что такое Yii?», то ознакомьтесь с моим предыдущим уроком: Введение в Yii Framework, в котором рассматриваются преимущества Yii и который включает обзор нового в Yii 2.0, выпущенного в октябре 2014 года.

В этой серии статей Программирование с Yii2 я рассказываю про недавно обновленный Yii2 Framework для PHP. В этом уроке я покажу вам интеграцию встроенной поддержки AuthClient для обеспечения входа в сторонние сети, такие как Twitter, Google и Facebook.

В этих примерах мы продолжим считать, что мы создаем фреймворк для публикации простых обновлений статуса, например, наш собственный мини-Twitter, используя нашу кодовую базу. Используйте ссылки GitHub на этой странице, чтобы загрузить репозиторий c кодом.

В уроке Программирование с Yii2: интеграция регистрации пользователей я реализовал интеграцию библиотеки Yii2-User для регистрации и аутентификации пользователей. В этом уроке мы узнаем, как интегрировать AuthClient с Yii2-User и переопределять его представления.

Напоминаю, что я участвую в обсуждениях ниже. Если у вас есть вопрос или предложение, пожалуйста, напишите свой комментарий ниже. Вы также можете связаться со мной в Twitter @reifman или отправить мне письмо по электронной почте в Lookahead Consulting.

Что такое AuthClient?

AuthClient - это встроенная поддержка Yii для ваших приложений для аутентификации через сторонние службы с OpenID, OAuth или OAuth2.

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

Из коробки доступна поддержка следующих клиентов:

Конфигурация для каждого клиента немного отличается. Для OAuth требуется получить идентификатор клиента и секретный ключ из службы, которую вы собираетесь использовать. Для OpenID в большинстве случаев работает прямо из коробки.

В этом учебном пособии я расскажу вам об использовании Twitter и Google.

Установка AuthClient в нашем приложении

Добавим AuthClient в Composer

Во-первых, нам нужно добавить библиотеку AuthClient в composer.json:

Затем нам нужно обновить composer:

Настройка поддержки AuthClient

Нам нужно добавить настройки конфигурации AuthClient в наш файл веб-конфигурации в \config\web.php.

Добавьте элементы массива для всех сторонних служб, которые вы хотите поддерживать (подробности для каждого можно найти в руководстве AuthClient Guide). На данный момент мы будем использовать ключи для Twitter.

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

Зарегистрируйте наше приложение для Twitter

Создайте новое приложение Twitter на панели инструментов приложения Twitter:

Twitter Apps Dashboard

Нажмите Создать новое приложение. Я обнаружил, что URL-адрес обратного вызова не нужен, но на данный момент я использовал плейсхолдер http://mydomain.com/user/security/auth.

Twitter Apps Create an application

Вот новая страница для нашего приложения:

Twitter Apps App Page

На странице настроек:

Twitter Apps App Settings Page

Вот страница Ключи и доступ. Здесь нам нужно скопировать Consumer Key (API Key) и Consumer Secret (API Secret):

Twitter Apps App Keys and Access Tokens

Мы воспользуемся этими ключами в одно мгновение.

Защита ключей от GitHub

В Защита ваших ключей от GitHub я подробно описал, как я использую конфигурационный файл для хранения всех моих ключей от моего репозитория GitHub. Затем я подключаю этот файл в начале моих файлов конфигурации Yii. Это помешает мне случайно добавить мои ключи в мой репозиторий и поставить под угрозу мои учетные записи.

Кроме того, во Введение в MailTrap: Поддельный SMTP-сервер для предварительного тестирования электронной почты приложения я начал интегрировать настраиваемые параметры SMTP MailTrap в мою конфигурацию Yii SwiftMailer для целей тестирования. Это обеспечит получение регистрационных писем при регистрации на нашей локальной платформе разработки.

MailTrap SMTP Settings

Мы размещаем как ключи приложения Twitter, так и ключи SMTP MailTrap в /var/secure/hello.ini вне репозитория:

Вот код в \config\web.php, который включает эти параметры и устанавливает отдельные переменные конфигурации:

Ниже описано, как мы настраиваем параметры SMTP для SwiftMailer:

Обновление схемы базы данных для хранения ключей сеанса

Поскольку мы используем Yii2-User, он уже предоставил таблицу Token для хранения ключей AuthClient.

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

Добавим виджет AuthClient в пользовательский интерфейс

На странице входа в систему Yii2 отображается свой виджет Connect для служб AuthClient. Обратите внимание на значки Google и Twitter в нижней части страницы:

AuthClient Widget on Sign In Page

По какой-то причине, однако, они не включены на страницу регистрации. Мне это кажется упущением.

Чтобы изменить страницу регистрации, нам необходимо переопределить соответствующее представление. К счастью, с Yii и Yii2-user это просто - см. также Переопределение отображений в Yii2-User.

Возвращаясь к \config\web.php, добавим компонент вида ниже:

Затем мы помещаем нашу собственную модифицированную версию Yii2-user register.php в @app/views/user/registration/register.php. Когда запрашивается страница регистрации, Yii загрузит нашу версию, которая включает виджет Connect:

Вот наша страница регистрации:

AuthClient Widget on Our Sign Up Page

Пользовательский опыт подключения через службы

Вот как выглядит процесс регистрации. Когда вы нажмете на значок Twitter выше, он попросит вас войти в свою учетную запись Twitter:

Twitter OAuth Sign In Page

Затем он попросит вас авторизировать приложение в своей учетной записи:

Twitter OAuth Authorize App

Затем он перенесет вас в форму регистрации Connect в нашем приложении - эта страница также предоставляется Yii2-User:

Yii2-User Connect Your Account to Twitter

Когда вы нажимаете Готово, приложение вставляет ваш токен OAuth в таблицу Token и перенаправляет вас на домашнюю страницу, уже полностью аутентифицированным.

Hello App Signed In Via Twitter

Вот загляните в таблицу Token, где хранятся ключи сеанса для каждого пользователя:

The Token Table with codes from Twitter

При последующих попытках входа Twitter перенаправляет вас, не требуя дополнительного разрешения.

Вот как мы интегрируем сторонние службы в шаблон основного приложения Yii2 с Yii2-User. Надеюсь, вы остались довольны этим уроком.

Вы можете проверить нашу серию статей Пишем свой стартап на PHP, в которой будет использоваться расширенный шаблон Yii2 с интеграцией сторонних компонентов (помимо Yii2-User).

Что дальше?

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

Я приветствую пожелания по темам. Вы можете опубликовать их в комментариях ниже или отправить мне по электронной почте на моем веб-сайте Lookahead Consulting.

Если вы хотите узнать, когда выйдет следующий учебник по Yii2, подпишитесь на меня @reifman в Twitter или проверьте мою страницу инструктора. Моя страница инструктора будет включать все статьи из этой серии, как только они будут опубликованы.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.