Здравствуй, дорогой хабрадруг! В этом туториале мы научимся создавать две формы HTML5: форма входа и форма регистрации. Эти формы будут меняться друг с другом местами с помощью псевдо-класса CSS3 :target . Мы будем использовать CSS3 и шрифт с иконками. Идея этого демо в том, чтобы показать пользователю форму входа и предоставить ему ссылку “перехода” к форме регистрации.
В этом туториале я подробно расскажу о том, как создавать эффект как в Демо 1 . HTML Log in

Your email or username

Your password

Keep me logged in

Not a member yet ? Join us

Sign up

Your username

Your email

Your password

Please confirm your password

Already a member ? Go and log in

Здесь мы использовали несколько приемов HTML5. Например, элемент type=password автоматически скрывает то, что пользователь печатает и заменяет символы точками или звездочками (зависит от браузера). Элемент type=email позволяет браузеру проверить правильность формата email адреса. Кроме того, мы использовали параметр require=required ; браузеры, поддерживающие данный параметр не позволят пользователю отправить форму до тех пор, пока поле не заполнено, JavaScript здесь не требуется. Параметр autocomplete=on будет автоматически заполнять некоторые поля. Мы также использовали замещающийся текст, который поможет пользователю при заполнении формы.

Теперь о двух хитрых моментах. Вы наверное заметили две ссылки в начале формы. Этот ловкий прием позволит нашей формы вести себя правильно при работе с якорями (anchors).

Второй момент связан с применением шрифта с иконками. Мы будем использовать data-attribute , чтобы отобразить иконки. Устанавливая параметр data-icon=”icon_character” с соответствующим символов в HTML, мы должны назначить лишь одно правило в CSS для установления стиля всех иконок. Подробнее об этом приеме можно почитать на сайте: 24 Ways: Displaying Icons with Fonts and Data- Attributes .

CSS Для чистоты кода я пропущу базовые параметры (html, body и т.п.), но вы сможете найти их в исходных файлах. Повторяю, что я использую приемы CSS3, которые не будут работать во всех браузерах. Итак, давайте же приступим!Стилизуем формы, используя CSS3 Во-первых, давайте назначим нашим формам базовый стиль.

#subscribe, #login{ position: absolute; top: 0px; width: 88%; padding: 18px 6% 60px 6%; margin: 0 0 35px 0; background: rgb(247, 247, 247); border: 1px solid rgba(147, 184, 189,0.8); box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset; border-radius: 5px; } #login{ z-index: 22; }

Здесь мы назначим свойства для шапки:

/**** текст ****/ #wrapper h1{ font-size: 48px; color: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: "FranchiseRegular","Arial Narrow",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; } /** На донный момент только webkit поддерживает background-clip:text; **/ #wrapper h1{ background: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: transparent; -webkit-background-clip: text; } #wrapper h1:after{ content:" "; display:block; width:100%; height:2px; margin-top:10px; background: linear-gradient(left, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, rgba(147,184,189,1) 53%, rgba(147,184,189,0.8) 79%, rgba(147,184,189,0) 100%); }

Замечу, что сегодня только браузеры с webkit поддерживают background-clip: text , поэтому мы сделаем полосатый фон только для webkit и привяжем его к заголовку H1. Так как параметр background-clip: text работает только в Webkit браузерах, я решил работать только со свойствами webkit. Именно поэтому я разделил CSS на две части и использовал только градиент webkit. Однако вы не должны использовать лишь webkit на своих вебсайтах! Так, например, параметр -webkit-text-fill-color: transparent позволяет нам иметь прозрачный фон, но только для браузеров webkit, все другие браузеры проигнорируют это свойство.

Мы также создали тонкую линию под заголовком с помощью элемента:after pseudo-class. Мы использовали градиент с 2px в высоту и уменьшили прозрачность по краям до нуля.

Теперь давайте позаботимся о полях ввода и придадим им приятный вид.

/**** advanced input styling ****/ /* placeholder */ ::-webkit-input-placeholder { color: rgb(190, 188, 188); font-style: italic; } input:-moz-placeholder, textarea:-moz-placeholder{ color: rgb(190, 188, 188); font-style: italic; } input { outline: none; }

Во-первых, мы стилизуем поля и уберем обводку. Но будьте осторожны: обводка помогает пользователю понять, на каком поле он находится. Если же вы уберете ее, то нужно применить свойства:active и:focus.

/* все поля исключают submit и checkbox */ #wrapper input:not(){ width: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178); box-sizing: content-box; border-radius: 3px; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; transition: all 0.2s linear; } #wrapper input:not():active, #wrapper input:not():focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; }

Здесь мы использовали псевдо класс:not, чтобы стилизовать все поля, кроме чекбоксов. Кроме того, я решил убрать обводку и добавил свойства:focus и:active.

Теперь время веселиться: шрифт с иконками. Так как мы не можем использовать псевдо-классы:before и:after, мы добавим иконку в параметр label, а затем разместим в поле. Я буду использовать библиотеку fontomas . Вы можете сами сопоставить иконки с соответствующей буквой. Помните атрибут data-icon ? Именно в него нужно вставить букву. Я использовал data-icon=’u’ для логина, ‘e’ для email, ‘p’ для пароля. Как только я выбрал буквы, я скачал шрифт и использовал генератор шрифтов fontsquirrel для конвертации в формат, пригодный для @font-face.

@font-face { font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/fontomas-webfont.woff") format("woff"), url("fonts/fontomas-webfont.ttf") format("truetype"), url("fonts/fontomas-webfont.svg#FontomasCustomRegular") format("svg"); font-weight: normal; font-style: normal; } /** магический трюк! **/ :after { content: attr(data-icon); font-family: "FontomasCustomRegular"; color: rgb(106, 159, 171); position: absolute; left: 10px; top: 35px; width: 30px; }

Вот собственно и все. Вам не требуется иметь отдельный класс для каждой иконки. Мы использовали параметр content: attr(data-icon) , чтобы получить букву из атрибута data-icon. Таким образом, нам нужно лишь назначить шрифт, выбрать цвет и разместить иконку.

Теперь назначим правила для кнопки отправки формы.

/*стилизуем обе кнопки*/ #wrapper p.button input{ width: 30%; cursor: pointer; background: rgb(61, 157, 179); padding: 8px 5px; font-family: "BebasNeueRegular","Arial Narrow",Arial,sans-serif; color: #fff; font-size: 24px; border: 1px solid rgb(28, 108, 122); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); border-radius: 3px; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb(210, 210, 210); transition: all 0.2s linear; } #wrapper p.button input:hover{ background: rgb(74, 179, 198); } #wrapper p.button input:active, #wrapper p.button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; } p.login.button, p.signin.button{ text-align: right; margin: 5px 0; }

Трюк заключается в том, чтобы использовать box-shadow, чтобы создать несколько рамок. Естественно, вы можете использовать лишь одну рамку, но также можно и несколько. Мы будем использовать параметр length для создания “фейковой” второй белой рамки, 3px в ширину, без размытия.

Теперь стилизуем чекбокс, здесь мы ничего необычного не сотворим:

/* стилизуем чекбокс "запомнить меня"*/ .keeplogin{ margin-top: -5px; } .keeplogin input, .keeplogin label{ display: inline-block; font-size: 12px; font-style: italic; } .keeplogin input#loginkeeping{ margin-right: 5px; } .keeplogin label{ width: 80%; }

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

P.change_link{ position: absolute; color: rgb(127, 124, 124); left: 0px; height: 20px; width: 440px; padding: 17px 30px 20px 30px; font-size: 16px ; text-align: right; border-top: 1px solid rgb(219, 229, 232); border-radius: 0 0 5px 5px; background: rgb(225, 234, 235); background: repeating-linear-gradient(-45deg, rgb(247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px); } #wrapper p.change_link a { display: inline-block; font-weight: bold; background: rgb(247, 248, 241); padding: 2px 6px; color: rgb(29, 162, 193); margin-left: 10px; text-decoration: none; border-radius: 4px; border: 1px solid rgb(203, 213, 214); transition: all 0.4s linear; } #wrapper p.change_link a:hover { color: rgb(57, 191, 215); background: rgb(247, 247, 247); border: 1px solid rgb(74, 179, 198); } #wrapper p.change_link a:active{ position: relative; top: 1px; }

Сейчас вы видите, что у нас две приятные формы, но ведь мы хотим, чтобы отображалась только лишь одна из них. Пришло время анимации!

Создаем анимацию Первое, что мы сделаем, мы спрячем вторую форму, назначив opacity на 0:

#register{ z-index: 21; opacity: 0; }

Помните, что форма входа имеет параметр z-index: 22? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа.

Теперь самое интересное: меняем формы местами, используя псевдо класс:target. Вам нужно понять одну вещь по поводу:target: для перемещения мы будем использовать якоря. Нормальное поведение якоря - прыжок на определенный элемент страницы. Но мы не хотим этого, мы лишь хотим поменять формы местами. И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас прямо на вторую форму, рискуя испытать эффект “прыжка”, мы придадим ссылкам параметр display: none . Это поможет избежать прыжков. Я обнаружил этот трюк на сайте: CSS3 create (французский язык).

#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login{ z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; }

Вот, что происходит: когда мы кликаем на кнопку Присоединиться , мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием fadeInLeft . Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться. Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form.
Вот код для анимации. Мы использовали CSS3 animation framework от Dan Eden и адаптировали этот фреймворк под наш туториал.

Animate{ animation-duration: 0.5s; animation-timing-function: ease; animation-fill-mode: both; } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } }

Форма, которая “исчезает”, будет иметь анимацию затемнения влево:

#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register{ animation-name: fadeOutLeftBig; } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } }

Теперь вы можете использовать другие анимации от Dan Eden’ с помощью файла animate.css: просто измените класс.animate class и названия анимаций. Вы также обнаружите несколько других анимаций в конце файла animate-custom.css file.

Вот и все, друзья. Надеюсь вам понравился этот туториал!

Заметим, что в некоторых браузерах параметр background-clip: text не поддерживается. В Internet Explorer 9 анимации не работают. В Internet Explorer 8 и ниже псевдо-класс:target pseudo-class не поддерживается, поэтому там этот эффект вообще работать не будет.

P.S. Все замечания по поводу перевода с удовольствием приму в личку. Спасибо!

Теги: Добавить метки

Инструкция

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

Открываем html файл и начинаем ввод кода. Тэг отвечающий за создание формы - "form". Записываем тэг вместе с атрибутами "form action=”obrabotka.php” method=”post” name”forma1”". Приступаем к созданию элементов формы. Практически все элементы делаются с помощью тэга , и его атрибут “type”, который отвечает за тип данных, к примеру текста, пароля и прочего. Всегда задаем имя “name“ любому из атрибутов.

Прописываем: "br"Введите фио:"br"

"input type="text" name="fio""

"br" Введите пароль:"br"

"input type="password" name="pass""

"br"Введите E-mai:l"br"

"input type="text" name="email"".

Далее создаем элемент выбора радио кнопки. Радио кнопка это элемент формы, который при нажатии на нее курсором , а другие радио кнопки выключаются. Поясним примером нашей формы. При заказе курса выбор будет состоять либо из CD либо DVD , поэтому нужно выбрать что то одно. Отвечает за создание такой кнопки элемент атрибута “type” – “radio”. Мы будем прописывать одно и тоже имя для вида носителя, поэтому укажем атрибут “value” для того, чтобы обработчик смог точно определить значение переменной. Прописываем код: "br"Выберите вариант носителя информации:"br"

"input type="radio" name="disc" value="cd"" CD "br"

"input type="radio" name="disc" value="dvd"" DVD "br"

Если атрибут “value” поставить к тексту, то в форме сразу будет отображаться то значение которое мы присвоили этому атрибуту. Например чтобы в форме ФИО уже стояло какое нибудь имя(value=”имя”).

Введите другой элемент и установите type равным "checkbox", чтобы предоставить пользователям возможность отметить более одного варианта в форме . Для примера:
(Свяжитесь со мной, когда будет отправлен)
(Подписаться на )

Создайте кнопку «Отправить», набрав тег и type равным "submit", value присвойте значение «Отправить». Кроме того, в другом теге сделайте кнопку «Сброс», установив type равным "reset", а value соотвественно «Сброс». Например, так:


Кнопка «Отправить» предназначена для отправки данных, а кнопка «Сброс» - для очистки формы, если потребуется.

Введите закрывающий тег , чтобы закончить форму . Сохраните страницу.

Источники:

• Сайт Консорциума W3C
• форма заказа товара для сайта

Форма регистрации является встроенным модулем панели Joomla. Для того чтобы ее добавить, не требуется быть экспертом в веб-программировании. Однако если вы решили изменить ее, то реализовать это можно при помощи компонента Community Builder или вручную. Нужно лишь отредактировать нужные элементы, изучив основы сайтостроения.

Инструкция

Зайдите в административную панель Joomla и откройте настройки встроенных модулей. Перейдите на вкладку «Расширенные» и нажмите на кнопку «Создать». Появится окно «Менеджера модулей», в котором необходимо выбрать и активировать форму регистрации . Укажите желаемое название для заголовка поставьте галочку возле строки «Показать заголовок».

Откройте раздел «Начальный текст» в модуле формы регистрации и отредактируйте стандартный текст для посетителей, если он вам не подходит. В пункте «Логин» вы можете выбрать, как будет именоваться пользователь на сайте: под своим именем или логином. Нажмите кнопку «Сохранить», чтобы изменения вступили в силу.

Загрузите компонент Community Builder на ваш сайт. Для этого перейдите в раздел «Загрузить файл пакета» и нажмите кнопку «Обзор». После выбора нужных документов щелкните на кнопку «Загрузить и установить». Перейдите в панель администратора и запустите установленный компонент.

Откройте вкладку «Регистрация» и внесите все необходимые изменения в форму регистрации . Данное приложение очень удобно в использовании, однако если вы хотите изменить только одно-два поля, то удобнее будет выполнить редактирование вручную.

Создайте резервную копию файлов, которые вы будете изменять для внесения корректировок в форму регистрации . Это позволит вам откатить все действия и восстановить работоспособность сайта в случае неудачи. Определите, какие поле вы хотите отредактировать или добавить. К примеру, вы хотите добавить в форму регистрации поле «Город».

Откройте файл default.php, который находится по ссылке components/com_user/views/register/tmpl. Добавьте отображение «Города», вставив в форму регистрации соответствующий HTML-код. Для этого вы можете скопировать любой другой пункт и отредактировать его под город (city). Внесите данные изменения в таблицу jos_users. Откройте файл user.php, который находится по ссылке libraries/joomla/database/table. Добавьте в него новую переменную. Сохраните настройки и перезапустите сайт.

Источники:

• как изменить модуль в joomla

Совет 7: Как сделать временную регистрацию без собственника

Далеко не всегда счастливым новоселам удается выполнить требование закона о регистрации по месту пребывания (сделать временную регистрацию) в установленные сроки – 90 дней. Иногда причиной этому может стать нежелание или отсутствие возможности у собственника квартиры явиться в соответствующую организацию для осуществления регистрационных действий.

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

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

Если основанием для вселения является договор найма, то можно направить нотариальный договор по почте с приложением остальных документов (копия паспорта, заполненное заявление). В такой ситуации у лиц, которые ответственны за приемку документов, нет обязанности по заверке копии данного договора, а собственник помещения не проставляет свою подпись в заявлении.

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

Свидетельство о регистрации по месту пребывания можно получить также через почтовое отправление.

Хотя присутствия собственника при получении временной регистрации не требуется, надеяться, что он не узнает о новых жильцах, не стоит. После совершенных регистрационных действий органы ФМС направят ему уведомление о зарегистрированном на его жилплощади лице.

Совет 8: Как заполнить форму 3-ндфл по продаже автомобиля

Если вы продали автомобиль, которым владели более трех лет, дальше можете не читать: начиная с 2011 года, права на имущественный налоговый вычет признается за вами автоматически. Это значит, что подавать декларацию вы не должны. А вот если он был у вас в собственности меньшее время, оформить нужные бумаги придется. Проще всего это сделать с помощью программы «Декларация».

Вам понадобится

• - компьютер;
• - доступ в интернет;
• - программа «Декларация» от ГНИВС ФНС РФ;
• - договор купли-продажи автомобиля;
• - документы, подтверждающие прочие ваши доходы и уплату с них НДФЛ за прошлый год.

Инструкция

Скачать самую свежую версию программы вы можете на сайте Главного научно-исследовательского центра Федеральной налоговой службы (ГНИВЦ ФНС) России. Она распространяется

Предлагаю вашему вниманию очень простой и функциональный скрипт регистрации и авторизации на сайте , который состоит из 3-ёх файлах PHP с подключением 2-ух java скриптов, с помощью которых ошибки выводятся в самой форме без перезагрузки страницы.

Скрипт был успешно протестирован на версии PHP 5.3.3 и PHP 5.6.3

Что умеет и имеет скрипт

• Регистрировать новых пользователей;
• Авторизовывать пользователей и записывать куки на определённый срок (нет необходимости каждый раз авторизовываться);
• Показывать и скрывать определённую информацию для авторизованных и не авторизованных соответственно;
• Имеет АДМИН ПАНЕЛЬ , где можно редактировать все данные и удалять пользователей.

Там же DEMO и Админ Панели

1 ШАГ .
Если вы используете скрипт регистрации и авторизации на локалке с помощью DENWER, то изменения в файлах для соединения с базой данных делать не нужно.
В противном случае откройте файлы: stayt.php , classes/Auth.class.php и adminka/connect.php , и в самом верху замените данные для связи с базой данных на свои.

2 ШАГ .
Переходим (если используете DENWER) по адресу: http://localhost/Tools/phpmyadmin/ , если на хостинге, то нажимаете Базы Данных, и создаёте новую базу с именем: registr и сравнение: utf8_general_ci .
Вы можете задать разумеется своё имя, но тогда замените его обязательно в файлах для соединения с базой (см. шаг 1).

3 ШАГ .
Нажмите на созданную базу registr и затем на верхнюю вкладку SQL и в появившееся окно для ввода вставьте этот код и нажмите ОК.

CREATE TABLE IF NOT EXISTS `my_users` (`id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(255) NOT NULL, `names` varchar(15) NOT NULL, `password` varchar(255) NOT NULL, `salt` varchar(100) NOT NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Всё! Переходите в браузере по своему адресу, пробуйте и экспериментируйте.

Админ Панель

После того, как вы сделали хоть одну регистрацию, можете перейти в АДМИНКУ.
Вход в АДМИН-ПАНЕЛЬ :

Http://Ваш_сайт.ru/adminka/

Не забудьте запоролить эту папку для безопасности и можно так же переименовать её.
При открытие Админ Панели нажмите кнопку ПОИСК и вам отобразятся все зарегистрированные пользователи, где при нажатие на определённый номер ID , вам откроются данные пользователя для редактирования.

Можно так же быстро найти пользователя по его E-mail, для этого достаточно ввести в поле для ПОИСКа известную электронную почту и нажать на кнопку.
Кнопкой ДОБАВИТЬ не советую пользоваться, так как пользователь добавляется в систему без пароля. И не имею понятия зачем её вообще сделали.

На этом всё, что не получается или не понятно, - задавайте вопросы.

Попутно можете попробовать для продажи информации (товаров).

Знаете ли вы, что вы можете, воспользовавшись сервисом компании Google, создать регистрационную форму для Вашего сайта одним щелчком мыши? Каждый, у кого есть аккаунт Google, может кликнуть по кнопке и сразу же авторизоваться в вашем приложении, со своей электронной почтой, именем и фотографией.

Этот сервис называется federated login , и построен на основе протокола OAuth2 . Это сложный процесс, который включает в себя обмен данными между вашим сервером и Google, но мы оставим всю эту работу PHP-библиотеке от Google , которая будет почти все обрабатывать на стороне сервера.

Используя этот сервис вы можете значительно упростить процесс авторизации/регистрации для вас и ваших пользователей. Вот некоторые из преимуществ:

• Не нужно создавать и проверять формы регистрации и авторизации;
• Нет необходимости в функции восстановления забытого пароля;
• Очень упрощенная авторизация/регистрация - вы получите электронную почту человека, имя и фото с помощью одного щелчка мыши;
• Адрес уже проверен Google, так что вам не нужно отправлять сообщение для подтверждения.
• Серьезная безопасность со стороны Google.

Конечно, это будет работать только если у человека есть аккаунт Google, поэтому имеет смысл использовать этот сервис как дополнение к существующей системе регистрации. Итак, давайте начнем!

Установка

Первый шаг заключается в создании нового приложения через Google’s API Console . Следуйте инструкциям для получения дополнительной информации. После завершения процесса, скопируйте полученные ключи в файл setup.php.

Запустите код из schema.sql (вы можете найти его в архиве) в PhpMyAdmin или ему подобном инструменте. Он создаст glogin_users таблицу в базе данных, которая будет использоваться для хранения информации об учетных записях пользователей вашего приложения. После этого, напишите свои данные подключения к базе данных в setup.php.

PHP

Форму входа мы делаем используя Google’s Federated login. Это означает, что посетители вашего веб-сайта переходят по ссылке на страницу Google, где они предоставляют приложению доступ к своему аккаунту, и затем будут перенаправлены обратно. После этого вы получаете token для доступа, который можно использовать для запроса информации о них. Вот упрощенное описание процесса авторизации:

• Когда пользователь нажимает кнопку "Sign in with Google " в нашем демо, они переходят на страницу авторизации Google, где они видят, какие разрешения просит наше приложение.
• После разрешения дать доступ этому приложению, они будут перенаправлены обратно на сайт, при этом специальный параметр code передается в URL. Наше приложение будет использовать этот код, чтобы получить token доступа;
• С помощью token, приложение запрашивает информацию о пользователе, которая сохраняется в базу данных.

Для чтения и вставки в базу данных, я использую крошечную библиотеку Idiorm , которую вы можете найти в папке library.

Наш PHP-код организован следующим образом:

• index.php - это основной файл приложения;
• setup.php - этот файл содержит информацию соединения с базой данных и ключи полученные из Google’s API Console;
• Папка library - содержит библиотеку Idiorm, PHP библиотеки Google, и класс для включения метки относительного времени.

Давайте взглянем на код в начале index.php:

require "setup.php" ; // Create a new Google API client
$client = new apiClient() ;
//$client->setApplicationName("Tutorialzine"); // Configure it
$client -> setClientId ($client_id ) ;
$client -> setClientSecret ($client_secret ) ;
$client -> setDeveloperKey ($api_key ) ;
$client -> setRedirectUri ($redirect_url ) ;
$client -> setApprovalPrompt (false ) ;
$oauth2 = new apiOauth2Service($client ) ; // The code parameter signifies that this is
// a redirect from google, bearing a temporary code
if (isset ($_GET [ "code" ] ) ) { // This method will obtain the actuall access token from Google,
// so we can request user info
$client -> authenticate () ; // Get the user data
$info = $oauth2 -> userinfo -> get () ; // Find this person in the database
$person = ORM:: for_table ("glogin_users" ) -> where ("email" , $info [ "email" ] ) -> find_one () ; if (! $person ) {
// No such person was found. Register! $person = ORM::for_table("glogin_users")->create(); // Set the properties that are to be inserted in the db
$person -> email = $info [ "email" ] ;
$person -> name = $info [ "name" ] ;

if (isset ($info [ "picture" ] ) ) {
// If the user has set a public google account photo
$person -> photo = $info [ "picture" ] ;
}
else {
// otherwise use the default
$person -> photo = "assets/img/default_avatar.jpg" ;
} // insert the record to the database
$person -> save () ;
} // Save the user id to the session
$_SESSION [ "user_id" ] = $person -> id () ; // Redirect to the base demo URL
header ("Location: $redirect_url " ) ;
exit ;
} // Handle logout
if (isset ($_GET [ "logout" ] ) ) {
unset ($_SESSION [ "user_id" ] ) ;
} $person = null ;
if (isset ($_SESSION [ "user_id" ] ) ) {
// Fetch the person from the database
$person = ORM:: for_table ("glogin_users" ) -> find_one ($_SESSION [ "user_id" ] ) ;
}

Что происходит здесь, мы проверяем наличие code в $ _GET параметрах. Как я уже упоминал выше, этот параметр установливается Google, когда пользователь перенаправляется обратно после того как разрешит доступ приложению. Затем мы запрашиваем информацию о пользователе и записываем её в базу данных. Идентификатор пользователя (значение идентификатора в базе данных) записывается в сессию. Он сохраняется между запросами и используется в качестве флага, о том что пользователь прошел идентификацию

Если вы хотите узнать больше о OAuth, прочитайте соответствующую информацию от Google по этому вопросу. Там вы также можете увидеть таблицу с полями которые возвращает метод get().

Ближе к концу, мы определяем переменную $person . Она содержит объект, который возвращается библиотекой Idiorm, со свойствами для каждого столбца таблицы glogin_users . Вы можете видеть, как этот объект используется в следующем разделе.

HTML

HTML-код для нашего примера находится в нижней части index.php. Поэтому у нас есть доступ к объекту $person , который пригодиться при выводе на экран имени и фотографии пользователя. Сама страница является стандартным документом HTML5:

Google Powered Login Form




Login Form