Как создать форму регистрации php. Форма входа и регистрации с помощью HTML5 и CSS3

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

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

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

Для реализации регистрации на сайте потребуется поддержка PHP и MySQL на хостинге. Если хостинг поддерживает только HTML, то, увы, создать скрипт регистрации на PHP у вас не получится. Весь алгоритм авторизации на сайте можно поделить на несколько этапов:

  • Пользователь заходит на сайт, открывает форму авторизации.
  • Если он уже зарегистрирован, то вводит пароль и логин в форме.
  • Скрипт-обработчик проверяет полученные данные:
    • если введенная пара логин/пароль верна, то пользователь авторизуется на сайте;
    • если данные не корректны, то пользователь вновь возвращается на страницу с формой авторизации.
  • Если пользователь не зарегистрирован, то сайт предлагает ему заполнить специальную форму для создания аккаунта.
  • Собственно говоря, регистрация представляет собой процесс сохранения данных о пользователе в специальном «месте». В качестве места хранения логинов и паролей пользователей сайта могут быть использованы текстовые файлы с расширением.txt и.dat, XML-файл и база данных. Первые два способа уже изжили себя и считаются небезопасными методами хранения данных, так как любой человек может получить к ним доступ прямо из адресной строки браузера.

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

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

    Первым делом вам нужно сделать базу данных на своем хостинге через phpMyAdmin. После чего создайте нового пользователя и «привяжите» его к базе данных. К примеру, вы сделали базу с названием «myuserbd», пользователем «myuser» и паролем «myuserpass».

    Перейдите в phpMyAdmin, выберите свежесозданную базу данных и выполните следующий запрос к базе (раздел SQL):

    CREATE TABLE IF NOT EXISTS `users` (

    `id` int(8) NOT NULL auto_increment,

    `login` char(32) collate utf8_unicode_ci default NULL,

    `pass` char(32) collate utf8_unicode_ci default NULL,

    PRIMARY KEY (`id`),

    KEY `login` (`login`)

    ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

    В БД «myuserbd» появится новая таблица с названием «users». В таблице имеется 3 строки: ID (ID регистрируемого пользователя), login (логин пользователя) и pass (пароль пользователя).

    Теперь нужно связать базу данных и скрипт регистрации. Создаем файл bd.php, вписываем в него нижеприведенный код и указываем название базы, пароль и логин пользователя.

    $db = mysql_connect («myuserbd»,»myuser»,»myuserpass»);

    mysql_select_db («mysql»,$db);

    Скрипт регистрации пользователей состоит из 4 файлов:

    • index.php – главная страница сайта с проверкой информации об авторизации пользователя;
    • reg.php – страница с формой регистрации пользователя;
    • testreg.php – файл, отвечающий за проверку данных пользователя;
    • saveuser.php – сохранение введенных данных в базу.

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

    Осталось только с вышеуказанными PHP-файлами, прописать свои данные к БД в файле bd.php и распаковать его на хостинге в корневую папку своего сайта. Как видите, сделать регистрацию на сайте не сложно.

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

    Создание формы

    Для создания опросов, регистрационных форм, форм подписки на новости и др. необходимо зайти в раздел «опросы».

    Кликаем на иконку создания нового опроса/регистрационной формы;.

    Заполняем следующие поля:

    • название;
    • тип – «опрос» или «регистрационная форма» (как правило вам нужна «регистрационная форма»);
    • время проведения – тот период времени, в течение которого можно ответить на вопросы;
    • статус – меняете на «активно» после того, как форма будет готова.
    • язык (если форма на английском языке, необходимо выставить язык - "английский")

    После этого нажимаете полоску «Добавить блок вопросов».

    В появившемся блоке переходим к созданию вопросов. Нажимаем на рыжую полоску «Добавить вопрос». Появляется следующее:

    Поле «Блок вопросов» оставляем пустым. В поле «Вопрос» вписываем непосредственно вопрос. В следующее поле можно добавить пояснения к вопросу. Если ответ на данный вопрос обязателен, ставим галку напротив соответствующего пункта. Если на вопрос допускается несколько вариантов ответов, также ставим галку напротив соответствующего пункта, нажимаем на полоску «Добавить ответ» и вписываем необходимый вариант. Добавляем необходимое количество вариантов ответа.

    Если ответы не заданы и опрашиваемый должен предложить свой вариант, в поле «Возможен ли свободный ответ» выбираем значение «Строка» (в готовом опросе будет выведена строка, куда пользователь сможет вписать ответ) или «Несколько строк» (в готовом опросе будет выведено текстовое поле, куда пользователь сможет вписать ответ).

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

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

    Ссылка на форму

    Полученную ссылку необходимо скорректировать , чтобы форма открывалась внутри вашего сайта. Для этого вместо https://www.hse.ru/ нужно подставить адрес вашего сайта..hse.ru/expresspolls/poll/148017072.html. Ссылку надо менять не в поле "Ссылка на опрос", а непосредственно там, где вы ее указываете на сайте вашего подразделения или в электронной рассылке. Если вам необходимо разместить форму на английском языке , то в ссылке необходимо подставить адрес английской версии вашего сайта (в адресе должно присутствовать en ).

    После того как появится хотя бы один ответ, в админке появятся ссылки на результаты . Вы можете посмотреть результаты либо в режиме html, либо выгрузить их в excel.

    Если в дальнейшем потребуется создать похожий опрос или регистрационную форму, у существующей формы нажимаем «Клонировать» , меняем название и сохраняем. В новой форме меняем необходимые поля/вопросы и сохраняем получившийся результаты.

    Уведомления об ответах/ответные письма о регистрации

    Если необходимо, чтобы вы получали уведомления о новых ответах, напишите на . В письме укажите ссылку на вашу форму и корпоративную почту сотрудников, которые должны получать уведомления о новых ответах.

    Если вы сами хотите обратиться к пользователю, то можете это сделать двумя способами:
    1. Размещаете текст в поле «Текст благодарности» - он будет выводиться на экране после того, как пользователь зарегистрируется.

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

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

    Пример того, как выглядит готовая форма в редакторском интерфейсе (код вопроса проставляется автоматически!):

    И так форма выглядит для пользователей.

    Здравствуйте! Сейчас мы попробуем реализовать самую простую регистрацию на сайте с помощью PHP + MySQL. Для этого на вашем компьютере должен быть установлен Apache. Принцип работы нашего скрипта изображен ниже.

    1. Начнем с создания таблички users в базе . Она будет содержать данные пользователя (логин и пароль). Зайдем в phpmyadmin (если вы создаете базу на своем ПК http://localhost/phpmyadmin/ ). Создаем таблицу users , в ней будет 3 поля.

    Я создаю ее в базе mysql, вы можете создавать в другой базе. Далее устанавливаем значения, как на рисунке:

    2. Необходимо соединение с этой таблицей. Давайте создадим файл bd.php . Его содержание:

    В моем случае это выглядит так:

    Сохраняем bd.php .
    Отлично! У нас есть таблица в базе, соединение к ней. Теперь можно приступать к созданию странички, на которой пользователи будут оставлять свои данные.

    3. Создаем файл reg.php с содержанием (все комментарии внутри):



    Регистрация


    Регистрация


    Ваш логин:




    Ваш пароль:








    4. Создаем файл , который будет заносить данные в базу и сохранять пользователя. save_user.php (комментарии внутри):

    5. Теперь наши пользователи могут регистрироваться! Далее необходимо сделать "дверь" для входа на сайт уже зарегистрированным пользователям. index.php (комментарии внутри) :




    Главная страница


    Главная страница


    Ваш логин:


    Ваш пароль:






    Зарегистрироваться



    Ну вот и все! Может урок и скучный, но очень полезный. Здесь показана только идея регистрации, далее Вы можете усовершенствовать ее: добавить защиту, оформление, поля с данными, загрузку аватаров, выход из аккаунта (для этого просто уничтожить переменные из сессии функцией unset ) и так далее. Удачи!

    Все проверил, работает исправно!

    Знаете ли вы, что вы можете, воспользовавшись сервисом компании 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