Почти все онлайн проекты состоят из двух частей – открытой, которая доступна всем пользователям, и закрытой, получить доступ к которой можно только после регистрации на сайте.
Очевидно, чтобы пользователи вашего веб-ресурса смогли оставить свои регистрационные данные для доступа к закрытым разделам сайта (будь то блог или ), необходимо создать регистрационную форму, на какой-либо странице сайта. И вот здесь многие задаются вопросом, как же создать и установить такую форму.
Проще тем, кто использует функциональность CMS, так как данные системы имеют готовые модули для работы с веб-формами. Правда их возможности ограничены. В остальных случаях необходимо изучать языки программирования (такие как PHP, HTML) и разобраться с системой управления базами данных (можно потратить много сил, а главное времени, но так и не добиться результата). Есть еще один вариант – нанять специалиста, который выполнит поставленную задачу. Но работа программистов стоит недешево, а как быть, если средств на оплату работы не хватает?
Совсем недавно появился новый способ создания веб-форм (регистрационной, формы обратной связи, онлайн заказа товаров или услуг и т.д.), не требующий знаний языков программирования (PHP, HTML) и прочих веб-технологий (CSS, MySQL) – это сервис MyTaskHelper.ru – онлайн конструктор форм. Данный сайт имеет интуитивно понятный интерфейс и не требует каких либо знаний в области программирования.
Создать регистрационную форму и установить ее на сайт просто, всего-то нужно потратить несколько минут и выполнить ряд простых шагов:
1.Во-первых пройти процесс регистрации и активации аккаунта (занимает меньше минуты);
2.Создать проект и форму (для каждого проекта можно создать сколько угодно форм);
3.Добавить на регистрационную форму нужные поля (выбор названий остается за вами, все зависит от назначения формы). В системе вы сможете выбрать тип каждого поля (MyTaskHelper предлагает 20 разных типов, таких как строка текста, многострочный текст, дата, файл, чекбокс, выпадающий список и прочие);
4.При необходимости, настроить функциональность каждого поля (это может быть валидация, авто дополнение, по-умолчанию, размер поля);
5.В модуле Виджеты создать дизайн формы, для гармонизации с уже существующим на сайте (доступно большое количество параметров). Также при помощи данного модуля можно задать “поведение” формы при заполнении ее пользователями, то есть сделать форму динамической.
6.Вот и все, регистрационная форма готова. Скопируйте код для вставки и разместите его на нужной веб-странице.
Работая с MyTaskHelper, для создания веб-форм, вам необходим лишь браузер и подключение к интернету. Важной особенностью сервиса является то, что все записи, вводимые пользователями в регистрационную форму, будут храниться на серверах нашей системы в специальной базе данных, которая создается вместе с формой. Информацию, собранную с помощью любой из форм, вы сможете не только просматривать. Каждому пользователю доступны такие опции, как группировка данных , сортировка базы данных , поиск и фильтрация.
Знаете ли вы, что вы можете, воспользовавшись сервисом компании 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 . Вы можете видеть, как этот объект используется в следующем разделе.
HTMLHTML-код для нашего примера находится в нижней части index.php. Поэтому у нас есть доступ к объекту $person , который пригодиться при выводе на экран имени и фотографии пользователя. Сама страница является стандартным документом HTML5:
Google Powered Login Form
Login Form