• Оптимизация
  • Социальные сети
  • Sitemap
  • Drupal
  • Usability
  • Юзабилити
  • B2b
  • Антивирус
  • Семантическое ядро
  • Новости
    • <

    Як програмувати з Yii2: Вхід через соціальні сервіси (Twitter, Google, Facebook)

    1. Що таке AuthClient?
    2. Установка AuthClient в наш додаток
    3. Настрйока AuthClient
    4. Реєструємо наше Twitter додаток
    5. Реєструємо наше Google додаток
    6. Захист ключів від публікації на Github
    7. Оновлюємо схему бази даних для зберігання сесійних ключів
    8. Додаємо віджет AuthClient в інтерфейс
    9. Корисні посилання:

    Yii2 дозволяє легко створити механізм реєстрації / входу / профілю через розширення yii2-user .

    Після його установки, на сайті з'являються: реєстрація користувачів, особистий кабінет, скидання пароля і так далі. Повний список всіх розділів цього розширення досить великий:

    • / User / registration / register Реєстрація
    • / User / registration / resend Повторна відправка інструкцій по реєстрації
    • / User / registration / confirm Підтвердження пароля
    • / User / security / login Форма авторизації
    • / User / security / logout Вихід (працює тільки через POST)
    • / User / recovery / request Відновлення паролю
    • / User / settings / profile Налаштування профілю
    • / User / settings / account Налаштування облікового запису (email, username, password )
    • / User / settings / networks прив'язані соціальні акаунти
    • / user / profile / show Профіль користувача (вимагає id)
    • / User / admin / index Менеджер користувачів

    Після того, як механізм роботи з користувачами налагоджений, на сайт треба прикрутити реєстрацію через соц. мережі. Як це зробити буде розказано тут:

    Що таке AuthClient?

    AuthClient є вбудованим механізмом Yii для перевірки автентичності за допомогою сторонніх сервісів з використанням OpenID, OAuth або OAuth2.

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

    З коробки, є підтримка наступних клієнтів:

    • facebook
    • GitHub
    • Google (Через OpenID і OAuth)
    • LinkedIn
    • Microsoft Жива
    • Twitter
    • Також популярні російські служби ВКонтакте і Яндекс (Через OpenID і OAuth)

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

    У цьому уроці буде лише додавання аутентифікації Twitter і Google.

    Установка AuthClient в наш додаток

    Додаємо AuthClient в composer.json

    Перше, що потрібно зробити, це додати бібліотеку AuthClient в composer.json:

    "Minimum-stability": "stable", "require": { "php": "> = 5.4.0", "yiisoft / yii2": "*", "yiisoft / yii2-bootstrap": "*", " yiisoft / yii2-swiftmailer ":" * "," dektrium / yii2-user ":" 0.8.2 "," stichoza / google-translate-php ":" ~ 2.0 "," yiidoc / yii2-redactor ":" 2.0 .0 "," yiisoft / yii2-authclient ":" * "},

    Далі, виконуємо

    php composer.phar update

    Настрйока AuthClient

    Нам потрібно додати параметри конфігурації AuthClient в наш файл конфігурації config / web.php

    Додаємо елемент масиву для всіх сторонніх сервісів, які ви будете підтримувати (подробиці по кожному можна знайти в Керівництві по AuthClient ).

    На даний момент, ми заповнимо настройки для Twitter і Google.

    &lt;? Php $ params = require (__ DIR__. '/Params.php'); $ Config = [ 'id' => 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => [ 'log'], 'language' => 'en', // back to English 'components '=> [' authClientCollection '=> [' class '=>' yii \ authclient \ Collection ',' clients '=> [' google '=> [' class '=>' yii \ authclient \ clients \ GoogleOAuth ', 'clientId' => 'google_client_id', 'clientSecret' => 'google_client_secret',], 'twitter' => [ 'class' => 'yii \ authclient \ clients \ Twitter', 'consumerKey' => 'twitter_consumer_key', 'consumerSecret' => 'twitter_consumer_secret',],],],

    Розглянемо налаштування Twitter. Необхідно зареєструвати додаток.

    Реєструємо наше Twitter додаток

    заходимо Twitter Application Dashboard:

    Натисніть кнопку Create New App. Заповнювати Callback URL немає необхідності, але зараз можетезаполніть так заповнювач http://sitename.ru/usitenameity/auth

    Ось нова сторінка для вашого застосування:

    Перейдітев на вкладку Keys and Access Tokens. Тут скопіюйте Consumer Key (API Key) і Consumer Secret (API Secret):

    Ми будемо використовувати ці ключі в подальшому.

    Реєструємо наше Google додаток

    Переходимо по посиланню https://console.developers.google.com/project

    Тиснемо на кнопку Create Project

    Заповнюємо ім'я проекту. Після цього він трохи задумається. Треба почекати. Далі ви побачите сторінку вибору API. Але нам вона не потрібна. Переходимо на сторінку Credentials. І заповнюємо обов'язкові поля. Необов'язкові позначені як 'Optional'

    Тиснемо Save. У віконці, що з'явилося тиснемо Create credenails і вибираємо OAuth clientID

    Після чого вибираємо в списку Web application і заповнюємо всі поля як на скрині.

    Зверніть увагу на поле Authorized redirect URIs і Authorized JavaScript origins. Без їх заповнення, форма дасть себе схраніть, однак авторизація не працюватиме. У Authorized JavaScript origins треба вписати адресу хоста (із зазначенням протоколу), а в Authorized redirect URIs вписати http://sitename.ru/user/security/auth?authclient=google. Не забудьте поміняти хост на свій.

    Тиснемо Create. І бачимо наші ключі.

    Захист ключів від публікації на Github

    Величезна кількість зломів сайтів пов'язано з тим, що ключі, подібні до тих, що ми зробили вище, витікають у відкритий github репозиторій, при кому. Адже файл конфігурації в Yii2, це звичайний php файл, який також, як і всі інші індексується git.

    У цій ситуації, вірним рішенням буде - тримати всі паролі, секретні ключі і т.д. в окремому ini файлі, вище папки сховища. І підключати файл окремо.

    Створюємо /var/secure/hello.ini. Шлях може бути будь-який, головне, щоб файл не був доступний через браузер, (тобто знаходився вище кореневої категорії сайту) і лежав вище кореня сховища.

    oauth_twitter_key = "xxxxxxxxxxxxxxxxxx" oauth_twitter_secret = "xxxxxyyyyzzzzzzz222222x1111xx" smtp_host = "mysmtp.com" smtp_username = "apple12345678" smtp_password = "yyyzz !!!! 32vd"

    Далі, просто підключаємо цей файл за допомогою зручної функції parse_ini_file

    >? Php $ config = parse_ini_file ( '/ var / secure / hello.ini', true); $ Params = require (__ DIR__. '/Params.php'); $ Config = [ 'id' => 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => [ 'log'], 'language' => 'en', // back to English 'components '=> [' authClientCollection '=> [' class '=>' yii \ authclient \ Collection ',' clients '=> [' google '=> [' class '=>' yii \ authclient \ clients \ GoogleOpenId '] , 'twitter' => [ 'class' => 'yii \ authclient \ clients \ Twitter', 'consumerKey' => $ config [ 'oauth_twitter_key'], 'consumerSecret' => $ config [ 'oauth_twitter_secret'],], ],],

    Як ви могли помітити, ми ще приховали конфігурацію відправки пошти через SMTP сервер. Адже це просто логін пароль від вашої поштової аккаунта. Їх втрата чревата. Налаштування параметрів SMTP для SwiftMailer:

    'Mailer' => [ 'class' => 'yii \ swiftmailer \ Mailer', 'viewPath' => '@ app / mailer', 'useFileTransport' => false, 'transport' => [ 'class' => ' Swift_SmtpTransport ',' host '=> $ config [' smtp_host '],' username '=> $ config [' smtp_username '],' password '=> $ config [' smtp_password '],' port '=>' 25 ' , 'encryption' => 'tls',],],

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

    Оскільки ми використовуємо Yii2-User, він уже представив таблицю токена для зберігання ключів AuthClient.

    use yii \ db \ Schema; use dektrium \ user \ migrations \ Migration; / ** * @author Dmitry Erofeev <[email protected]> * / class m140504_130429_create_token_table extends Migration {public function up () {$ this-> createTable ( '{{% token}}', [ 'user_id' => Schema :: TYPE_INTEGER. 'NOT NULL', 'code' => Schema :: TYPE_STRING. '(32) NOT NULL', 'created_at' => Schema :: TYPE_INTEGER. 'NOT NULL', 'type' => Schema :: TYPE_SMALLINT. 'NOT NULL'], $ this-> tableOptions); $ This-> createIndex ( 'token_unique', '{{% token}}', [ 'user_id', 'code', 'type'], true); $ This-> addForeignKey ( 'fk_user_token', '{{% token}}', 'user_id', '{{% user}}', 'id', 'CASCADE', 'RESTRICT'); } Public function down () {$ this-> dropTable ( '{{% token}}'); }}

    Додаємо віджет AuthClient в інтерфейс

    Сторінка входу Yii2-User відображає віджет послуг AuthClient, зверніть увагу на Google і Twitter іконки в нижній частині сторінки:

    Але з якихось причин, вони не включені на сторінці реєстрації.

    Для того, щоб змінити сторінку реєстрації, ми повинні перевизначити вид реєстрації. На щастя, Yii і Yii2-user зробити це досить просто, використовуючи механізм перевизначень Yii2-user .

    Повертаємося до \ config \ web.php, додаємо компонент view:

    &lt;? Php $ config = parse_ini_file ( '/ var / secure / hello.ini', true); $ Params = require (__ DIR__. '/Params.php'); $ Config = [ 'id' => 'basic', 'basePath' => dirname (__ DIR__), 'bootstrap' => [ 'log'], 'language' => 'en', // back to English 'components '=> [' view '=> [' theme '=> [' pathMap '=> [' @ dektrium / user / views '=>' @ app / views / user '],],],' authClientCollection '= > [

    Після чого, ми поміщаємо модифіковану версію register.php Yii2-user в @ app / views / user / registration / register.php.

    На сторінці реєстрації, ми будемо підключати нашу версію з підключеним виджетом AuthConnect

    &lt;? Php / * * This file is part of the Dektrium project. * * (C) Dektrium project <http://github.com/dektrium> * * For the full copyright and license information, please view the LICENSE.md * file that was distributed with this source code. * / Use yii \ helpers \ Html; use yii \ widgets \ ActiveForm; use dektrium \ user \ widgets \ Connect; / ** * @var yii \ web \ View $ this * @var yii \ widgets \ ActiveForm $ form * @var dektrium \ user \ models \ User $ user * / $ this-> title = Yii :: t ( 'user ',' Sign up '); $ This-> params [ 'breadcrumbs'] [] = $ this-> title; ?> <Div class = "row"> <div class = "col-md-4 col-md-offset-4"> <div class = "panel panel-default"> <div class = "panel-heading"> <h3 class = "panel-title"> &lt;? = Html :: encode ($ this-> title)?> </ h3> </ div> <div class = "panel-body"> &lt;? php $ form = ActiveForm :: begin ([ 'id' => 'registration-form',]); ?> &lt;? = Connect :: widget ([ 'baseAuthUrl' => [ '/ user / security / auth']])?> &lt;? = $ Form-> field ($ model, 'username')?> &lt;? = $ form-> field ($ model, 'email')?> &lt;? php if (Yii :: $ app-> getModule ( 'user') -> enableGeneratingPassword == false):?> &lt;? = $ form- > field ($ model, 'password') -> passwordInput ()?> &lt;? php endif?> &lt;? = Html :: submitButton (Yii :: t ( 'user', 'Sign up'), [ 'class' => 'btn btn-success btn-block'])?> &lt;? php ActiveForm :: end (); ?> </ Div> </ div> <p class = "text-center"> &lt;? = Html :: a (Yii :: t ( 'user', 'Already registered? Sign in!'), [ '/ user / security / login '])?> </ p> </ div> </ div>

    Тепер сторінка реєстрації буде виглядати приблизно так:

    На цьому все. Задавайте ваші питання в коментарях. Всього найкращого.

    Корисні посилання:

    Розповісти друзям

    Що таке AuthClient?
    Lt;?
    Ru/user/security/auth?
    Html :: encode ($ this-> title)?
    Php $ form = ActiveForm :: begin ([ 'id' => 'registration-form',]); ?
    Connect :: widget ([ 'baseAuthUrl' => [ '/ user / security / auth']])?
    Form-> field ($ model, 'username')?
    Form-> field ($ model, 'email')?
    Php if (Yii :: $ app-> getModule ( 'user') -> enableGeneratingPassword == false):?
    IRC (Internet Relay Chat)

    Все права защищены © 2013 IRC-сервер — Irc.Online.com.ua