Руководство по входу пользователей и вызову API Microsoft Graph из одностраничного приложения JavaScript с помощью потока кода авторизации
В этом руководстве показано, как создать одностраничное приложение (SPA) JavaScript, которое поддерживает вход пользователей и вызовы Microsoft Graph с использованием потока кода авторизации с PKCE. Создаваемое одностраничное приложение использует библиотеку проверки подлинности Майкрософт (MSAL) для JavaScript версии 2.0.
В этом руководстве рассматриваются следующие темы:
MSAL.js 2.0 — это расширенная версия MSAL.js 1.0, поддерживающая поток кода авторизации в браузере вместо потока неявного предоставления разрешения. MSAL.js 2.0 НЕ поддерживает неявный поток.
Предварительные требования
Принципы работы приложения из учебника
Приложение, созданное с помощью этого учебника, позволяет одностраничному приложению JavaScript отправлять запросы API Microsoft Graph, принимая маркеры безопасности от платформы удостоверений Майкрософт. В этом сценарии после входа в систему маркер доступа запрашивается и добавляется в HTTP-запросы в заголовок авторизации. Получение маркера и его обновление выполняет библиотека проверки подлинности Майкрософт (MSAL.js).
В этом учебнике используется следующая библиотека:
Библиотека проверки подлинности Майкрософт msal.js для пакета JavaScript версии 2.0 для браузера
Получение готового примера кода
Предпочитаете вместо этого загрузить готовый пример проекта для этого учебника? Клонируйте репозиторий ms-identity-javascript-v2.
git clone https://github.com/Azure-Samples/ms-identity-javascript-v2
Чтобы запустить скачанный проект в локальной среде разработки, создайте сервер localhost для приложения, как описано в шаге 1 статьи в разделе Создание проекта. После этого вы можете настроить пример кода, пропустив шаг настройки.
Чтобы продолжить работу с руководством и самостоятельно создать приложение, перейдите к разделу Создание проекта.
Создание проекта
Установив Node.js, создайте папку для размещения приложения, например msal-spa-tutorial.
Теперь реализуйте небольшой веб-сервер Express для обслуживания файла index.html.
Сначала перейдите в окне терминала в каталог проекта, а затем выполните следующие команды npm :
Далее создайте файл с именем server.js и добавьте в него следующий код:
Теперь у вас есть небольшой веб-сервер для обслуживания одностраничного приложения. После выполнения остальных инструкций в этом учебнике файл и структура папок проекта должны выглядеть следующим образом:
Создание пользовательского интерфейса одностраничного приложения
Создайте в каталоге проекта папку app, а в ней — файл index.html для одностраничного приложения JavaScript. Этот файл используется для реализации пользовательского интерфейса, созданного на платформе Bootstrap 4, и импорта файлов скриптов для настройки, проверки подлинности и вызовов API.
В файле index.html добавьте следующий код:
Затем в папке app создайте файл с именем ui.js и добавьте следующий код. Этот файл будет обращаться к элементам модели DOM и обновлять их.
Регистрация приложения
Выполните действия, описанные в статье Одностраничное приложение: регистрация приложения, чтобы создать регистрацию приложения для своего SPA.
Если вы хотите использовать другой порт, введите http://localhost:
Настройка одностраничного приложения JavaScript
В папке app создайте файл с именем authConfig.js, который будет содержать параметры конфигурации для проверки подлинности, а затем добавьте в него следующий код:
Если вы используете глобальное облако Azure, значение authority в файле authConfig.js должно выглядеть примерно так:
В той же папке app создайте файл с именем graphConfig.js. Добавьте следующий код, чтобы предоставить приложению параметры конфигурации для вызова API Microsoft Graph:
Если вы используете глобальную конечную точку, значения graphMeEndpoint и graphMailEndpoint в файле authConfig.js должно выглядеть примерно так:
Использование библиотеки проверки подлинности Майкрософт (MSAL) для входа пользователя
Всплывающее окно
В папке app создайте файл с именем authPopup.js и добавьте следующий код для проверки подлинности и получения маркера для всплывающего окна входа:
перенаправление
Создайте файл с именем authRedirect.js в папке app и добавьте следующий код для проверки подлинности и получения маркера для перенаправления входа:
Принцип работы кода
На этом этапе код авторизации, защищенный с помощью PKCE, отправляется в конечную точку маркеров, защищенную с помощью CORS, и обменивается на маркеры. Приложение получает маркер идентификатора, маркер доступа и маркер обновления, msal.js их обрабатывает, а информация из этих маркеров кэшируется.
Маркер идентификатора содержит основные сведения о пользователе, например отображаемое имя. Если вы планируете использовать какие-либо данные, предоставляемые этим маркером идентификации, внутренний сервер должен его проверить и подтвердить, что маркер выдан допустимому пользователю для вашего приложения.
Срок действия маркера доступа ограничен и истекает через 24 часа. Маркер обновления можно использовать для автоматического получения новый маркеров доступа.
Интерактивное получение маркера пользователя
При вызове acquireTokenPopup открывается всплывающее окно (или acquireTokenRedirect перенаправляет пользователей на платформу удостоверений Майкрософт). В этом окне пользователям необходимо подтвердить учетные данные, предоставить согласие на требуемый ресурс или выполнить двухфакторную проверку подлинности.
Автоматическое получение маркера пользователя
Вызов API Microsoft Graph
Создайте файл с именем graph.js в папке app и добавьте следующий код для отправки вызовов REST в API Microsoft Graph.
Тестирование приложения
Вы завершили создание приложения и теперь готовы запустить веб-сервер Node.js и протестировать функциональность приложения.
Запустите веб-сервер Node.js, выполнив следующие команды в командной строке из корневой папки проекта:
В браузере перейдите по адресу http://localhost:3000 или http://localhost:
— это порт, прослушиваемый вашим веб-сервером. Появится содержимое файла index.html с кнопкой Sign In (Войти).
Вход в приложение
После загрузки файла index.html в браузер нажмите кнопку Sign In (Войти). Вам будет предложено войти с помощью платформы удостоверений Майкрософт:
Предоставление разрешения на доступ к приложению
При первом входе в приложение вам будет предложено предоставить ему доступ к профилю, а также выполнить вход:
Если вы согласны предоставить запрошенные разрешения, веб-приложения выводят имя пользователя, что означает успешный вход.
Вызов API Graph
После входа выберите See Profile (Просмотреть профиль), чтобы просмотреть сведения о профиле пользователя, возвращенные в ответе на вызов API Microsoft Graph.
Дополнительные сведения об областях и делегированных разрешениях
Для чтения профиля пользователя API Microsoft Graph требуется область user.read. По умолчанию эта область автоматически добавляется в каждое приложение, зарегистрированное на портале Azure. Для других API Microsoft Graph, а также для пользовательских API вашего внутреннего сервера, могут потребоваться дополнительные области. Например, для отображения сообщений электронной почты пользователя API Microsoft Graph требуется область Mail.Read.
При добавлении областей приложение может запросить у пользователей дополнительное согласие на использование таких добавленных областей.
Если API серверной части не требуется область (что не рекомендуется), вы можете использовать clientId в качестве области в вызовах для получения маркеров.
Справка и поддержка
Если вам нужна помощь, если вы хотите сообщить о проблеме или узнать о доступных вариантах поддержки, воспользуйтесь статьей Возможности получения поддержки и справки для разработчиков.
Дальнейшие действия
Если вы хотите узнать больше о разработке одностраничных приложений JavaScript на платформе удостоверений Майкрософт, см. серию статей:
Создание формы авторизации для сайта. HTML, CSS & JavaScript
Пояснения к статье:
Здравствуйте, в этой статье мы расскажем вам о том, как создать форму авторизации для входа на сайт. Для этого нам понадобятся просто HTML и CSS, JavaScript будем использовать по минимуму.
Панель авторизации — очень важная часть любого сайта. Она позволяет пользователю зайти в свой личный кабинет на сайте, если такой имеется. На некоторых сайтах авторизация дает дополнительные привилегии для посетителя, взять то же написание комментариев.
Но в этой статье мы создадим необычную форму регистрации. Сегодня мы покажем вам конструкцию из двух блоков, плавно перелистывающихся.
Итак, мы создадим 2 блока — для авторизации и регистрации. При переключении между блоком форма будет плавно скользить. Ещё одним преимуществом является то, что это добавит интерактивности для вашего сайта.
Форма авторизации: HTML разметка.
Начнем с «HTML», первое что нам нужно сделать, так это подключить все необходимые инструменты — JavaScript и CSS. Для этого создадим 2 тега в блоке head: script(для подключения скриптов, с помощью атрибута «src») и «link»(для подключения стилей, с помощью атрибута «href»).
Теперь можно приступать к разметке нашей формы, открываем тег body. Внутри мы создадим небольшую конструкцию:
Это была первая часть. Мы только что создали разметку для активного слайдера, который будет расположен поверх другого. Теперь нужно сделать разметку для другого слайдера.
Здесь уже другая конструкция. Нам также придется использовать изображения(тег img >).
После того, как мы создали все блоки, закрываем тег и все готово.
Форма авторизации: стилизация. CSS
Перед тем, как стилизировать все наши элементы и создавать отличнейший дизайн, нам необходимо прописать общие свойство для главного контейнера.
Из свойств мы применим только центрирование(margin 0 auto), изменим позиционирование, размеры и расположение по координатам.
После этого приступаем к стилизации слайдеров. Здесь будут применены стандартные свойства CSS, такие как фон, изменение ширины и высоты, рамки, тени и т.д.
После стилизации слайдера, нам необходимо провести изменение небольших деталей, а также поработать над дизайном высшего блока.
Ваш CSS код должен выглядеть примерно так:
После этого нам нужно задать стилизацию для формы, а также для псевдоклассов активных форм.
Форма авторизации на сайт: JavaScript
Как мы говорили в самом начале, JavaScript особо не потребуется. Всё что нам нужно — пара скриптов для создания анимации и переключения между слайдерами. Это очень важная часть, но кода там не особо много.
Заключение
Теперь, если вам понадобится создать собственную панель регистрации или авторизации на сайт, вы знаете как это сделать. Огромным преимуществом станет то, то вам не нужно 2 вкладки для полей форм, все можно сделать с помощью слайдера.
Если хотите более детально разобраться в работе слайдера, а также в его конструкции — смотрите исходники. Желаем удачи в изучении!
Как сделать регистрацию и вход на React.js
В этой статье мы разберём как делается на React.js форма регистрации, и немного поговорим как сделать вход, думаю всем кто разрабатывает на React, это будет интересно.
Также стоит сказать, что по сути это продолжение предыдущих двух статей по разработки на Express.js, и если вы на нём разрабатываете, то вам точно они будут интересны.
Создание формы регистрации на React.js:
Первым делом разберём как сделать регистрацию, но стоит сказать, мы тут будем использовать принцип RestAPI, то есть у нас отдельно работает клиент и сервер, поэтому для отправки запросов нам нужно использовать AJAX запросы, а для это мы будем использовать библиотеку Axios.js.
Для того чтобы скачать эту библиотеку, нужно использовать команду NPM, вот что мы прописываем в терминал:
Ещё нам пригодиться библиотека для валидации формы, для этого мы будем использовать библиотеку validator.js, для скачивание так же используем NPM, вот что пишем в терминал:
В начале рассмотрим что мы в него подключили:
Когда мы всё подключили, создаём наш функциональный компонент, который тут же экспортируем, вот что пишем:
Теперь напишем пару функций для работы с регистрацией:
В начале мы создаём состояние, для регистрации, конкретно мы используем имя пользователя, его Email и два пароля, первый основной, а второй для повтора, вы же конечно может ещё какие либо параметры добавить, зависимо от ваших нужд.
Последние что осталось, это рендер самой формы, вот что, вот как строиться рендер:
Создание формы регистрации и авторизации
В этой статье вы узнаете, как создать форму регистрации и авторизации, используя HTML, JavaScript, PHP и MySql. Такие формы используются почти на каждом сайте, в независимости от его типа. Они создаются и для форума, и для интернет-магазина и для социальных сетей (такие как например Facebook, Twiter, Odnoklassniki) и для многих других типов сайтов.
Если у Вас сайт на локальном компьютере, то я надеюсь, что у Вас уже установлен и запущен локальный сервер. Без него ничего работать не будет.
Создание таблицы в Базе Данных
Для того чтобы реализовать регистрацию пользователей, в первую очередь нам нужна База Данных. Если она у Вас уже есть, то замечательно, иначе, Вам нужно её создавать. В статье Создание базы данных mysql в phpmyadmin, я подробно объясняю, как сделать это.
И так, у нас есть База Данных (сокращённо БД), теперь нам нужно создать таблицу users в которой будем добавлять наших зарегистрированных пользователей.
Как создавать таблицу в БД, я также объяснил в статье Создание базы данных mysql в phpmyadmin. Перед тем как создать таблицу, нам необходимо определить какие поля она будет содержать. Эти поля будут соответствовать полям из формы регистрации.
Значит, подумали, представили какие поля будут у нашей формы и создаём таблицу users с такими полями:
Все поля типа VARCHAR должны иметь значение по умолчанию NULL и кодировку utf8mb4_unicode_ci.
Если Вы хотите, чтобы Ваша форма регистрации имела ещё какие-то поля, то Вы можете их здесь также добавить.
Всё, наша таблица users готова. Переходим к следующему этапу.
Подключение к Базе Данных
Базу данных мы создали, теперь необходимо к ней подключиться. Подключение будем осуществлять с помощью PHP расширения MySQLi.
В папке нашего сайта, создаём файл с именем dbconnect.php, и в нём пишем следующий скрипт:
Этот файл dbconnect.php нужно будет подключить к обработчикам форм.
Обратите внимание на переменную $address_site, здесь я указал адрес (URL) моего тестового сайта, над которым буду работать. Вы соответственно, укажите адрес (URL) Вашего сайта.
Структура сайта
Теперь давайте разберёмся с HTML структурой нашего сайта.
Шапку и подвал сайта вынесем в отдельные файлы, header.php и footer.php. Их будем подключать на всех страницах. А именно на главной (файл index.php), на страницу с формой регистрации (файл form_register.php) и на страницу с формой авторизации (файл form_auth.php).
Блок с нашими ссылками, регистрация и авторизация, добавим в шапку сайта, чтобы они отображались на всех страницах. Одна ссылка будет ввести на страницу с формой регистрации (файл form_register.php) а другая на страницу с формой авторизации (файл form_auth.php).
Содержимое файла header.php:
Содержимое файла footer.php:
Подключение файлов header.php и footer.php будем делать с помощью функции require_once(«путь_к_файлу»).
И так, давайте подключим эти файлы к главному файлу нашего сайта index.php.
Для оформления вида страницы, в шапке (файл header.php) подключили файл стилей css/styles.css. Код данного файла сейчас нас не особо интересует, поэтому нет смысла его здесь показывать. Вы сможете увидеть его открыв этот файл css/styles.css, из архива с материалами данной статьи.
В итоге, главная страница, у нас выглядит так:
Конечно, у Вас на сайте может быть совсем другая структура, но это для нас сейчас не важно. Главное, чтобы присутствовали ссылки (кнопки) регистрации и авторизации.
Форма регистрации
Теперь перейдём к форме регистрации. Как Вы уже поняли, она у нас находится в файле form_register.php.
Идём в Базу Данных (в phpMyAdmin), открываем структуру таблицы users и смотрим какие поля нам нужны. Значит, нам нужны поля для ввода имени и фамилии, поле для ввода почтового адреса(Email) и поле для ввода пароля. И ещё в целях безопасности добавим поле для ввода капчи.
На сервере, в результате обработки формы регистрации, могут возникнуть различные ошибки, из-за которых пользователь не сможет зарегистрироваться. Поэтому для того чтобы пользователь понимал почему не проходит регистрация, необходимо вывести ему сообщения об этих ошибках.
Перед выводом формы добавляем блок для вывода сообщений об ошибках из сессии.
И ещё момент, если пользователь уже авторизован, и он ради интереса заходит на страницу регистрации напрямую, написав в адресную строку браузера адрес_сайта/form_register.php, то мы в этом случае вместо формы регистрации, выведем ему заголовок о том, что он уже зарегистрирован.
В общем, код файла form_register.php у нас получился таким:
В браузере, страница с формой регистрации выглядит так:
С помощью атрибута required, мы сделали все поля обязательными к заполнению.
Обратите внимание на код формы регистрации где выводится капча:
Мы в значение атрибута src для изображения, указали путь к файлу captcha.php, который генерирует данную капчу.
Посмотрим на код файла captcha.php:
Код хорошо закомментирован, поэтому я остановлюсь только на одном моменте.
Внутри функции imageTtfText(), указан путь к шрифту verdana.ttf. Так вот для корректной работы капчи, мы должны создать папку fonts, и поместить туда файл шрифта verdana.ttf. Его Вы можете найти и скачать из интернета, или взять из архива с материалами данной статьи.
С HTML структурой мы закончили, пора двигаться дальше.
Проверка email на валидность с помощью jQuery
Любая форма нуждается в проверки на валидность введённых данных, как на стороне клиента ( с помощью JavaScript, jQuery), так и на стороне сервера.
Особенную внимательность мы должны уделить полю Email. Очень важно чтобы введённый почтовый адрес был валидным.
Для данного поля input, мы задали тип email ( type=»email» ), это нас немножко предостерегает от неправильных форматов. Но, этого недостаточно, потому что через инспектор кода, которого предоставляет нам браузер, можно легко изменить значение атрибута type с email на text, и всё, наша проверка будет уже недействительна.
И в таком случае, мы должны сделать более надёжную проверку. Для этого, воспользуемся библиотекой jQuery от JavaScript.
Сразу после этой строчки, добавим код проверки валидации email. Здесь же добавим код проверки длины введённого пароля. Его длина должна быть не меньше 6 символов.
С помощью данного скрипта, мы проверяем введённого почтового адреса на валидность. Если пользователь ввёл неправильный Email, то мы выводим ему ошибку об этом и дезактивируем кнопку отправки формы. Если всё хорошо, то мы убираем ошибку и активируем кнопку отправки формы.
И так, с проверкой формы на клиентской части мы закончили. Теперь мы можем отправить её на сервер, где также сделаем пару проверок и добавим данные в БД.
Регистрация пользователя
Форму мы отправляем на обработку файлу register.php, через метод POST. Название данного файла обработчика, указано в значение атрибута action. А метод отправки указано в значение атрибута method.
Открываем этот файл register.php и первое что нам нужно сделать, это написать функцию запуска сессии и подключить созданный нами ранее файл dbconnect.php (В этом файле мы сделали подключение к БД). И ещё, сразу объявим ячейки error_messages и success_messages в глобальном массиве сессии. В error_mesages будем записывать все сообщения об ошибках возникающие при обработке формы, а в succes_messages, будем записывать радостные сообщения.
Перед тем как продолжить, мы должны проверить, была ли вообще отправлена форма. Злоумышленник, может посмотреть на значение атрибута action из формы, и узнать какой файл занимается обработкой данной формы. И ему может прийти в голову мысль перейти напрямую в этот файл, набирая в адресной строке браузера такой адрес: http://арес_сайта/register.php
Поэтому нам нужно проверить наличие ячейки в глобальном массиве POST, имя которой соответствует имени нашей кнопки «Зарегистрироваться» из формы. Таким образом мы проверяем была ли нажата кнопка «Зарегистрироваться» или нет.
Далее, нам необходимо проверить введённую капчу. То есть сравнивать полученное значение от пользователя со значением которая есть в сессии.
Значение капчи в сессии было добавлено при её генерации, в файле captcha.php. Для напоминания покажу ещё раз этот кусок кода из файла captcha.php, где добавляется значение капчи в сессию:
Теперь приступим к самой проверке. В файле register.php, внутри блока if, где проверяем была ли нажата кнопка «Зарегистрироваться», а точнее где указан комментарий » // (1) Место для следующего куска кода» пишем:
Далее, нам нужно обрабатывать полученные данные, из массива POST. Первым делом, нам нужно проверить содержимое глобального массива POST, то есть находится ли там ячейки, имена которых соответствуют именам полей input из нашей формы.
Если ячейка существует, то обрезаем пробелы с начала и с конца строки из этой ячейки, иначе, перенаправляем пользователя обратно на страницу с формой регистрации.
Далее, после того как обрезали пробелы, добавляем строку в переменную и проверяем эту переменную на пустоту, если она не является пустой, то идём дальше, иначе перенаправляем пользователя обратно на страницу с формой регистрации.
Этот код вставляем в указанное место «// (2) Место для следующего куска кода«.
Особенную важность имеет поле email. Мы должны проверить формат полученного почтового адреса и его уникальность в БД. То есть не зарегистрирован ли уже какой-то пользователь с таким же почтовым адресом.
В указанном месте «// (3) Место кода для проверки формата почтового адреса и его уникальности» добавляем следующий код:
И так, мы закончили со всеми проверками, пора добавить пользователя в БД. В указанном месте » // (4) Место для кода добавления пользователя в БД » добавляем следующий код:
Если в запросе на добавления пользователя в БД произошла ошибка, мы добавляем сообщение об этой ошибке в сессию и возвращаем пользователя на страницу регистрации.
Иначе, если все прошло хорошо, в сессию мы также добавляем сообщение, но уже более приятна, а именно говорим пользователю что регистрация прошла успешно. И перенаправляем его уже на страницу с формой авторизации.
С регистрацией мы закончили. Двигаемся дальше.
Форма авторизации
Форма авторизации находится у нас в файле form_auth.php. Она имеет поля для ввода почтового адреса, пароля и капчи.
Скрипт для проверки формата почтового адреса и длины пароля находится в файле header.php, поэтому он будет действовать и на поля из этой формы.
Запуск сессии также происходит в файле header.php, поэтому в файле form_auth.php сессию запускать не нужно, потому что получим ошибку.
Код формы авторизации ( файл form_auth.php ):
В браузере, форма авторизации выглядит следующем образом:
Как я уже сказал, скрипт проверки формата почтового адреса и длины пароля здесь также действует. Поэтому если пользователь введёт неправильный почтовый адрес или короткий пароль, то он сразу же получить сообщение об ошибке. А кнопка войти станет не активной.
После устранения ошибок кнопка войти становится активной, и пользователь сможет отправить форму на сервер, где она будет обрабатываться.
Авторизация пользователя
В значение атрибута action у форы авторизации указан файл auth.php, это значит, что форма будет обрабатываться именно в этом файле.
И так, открываем файл auth.php и пишем код для обработки формы авторизации. Первое что нужно сделать это запустить сессию и подключить файл dbconnect.php для соединения с БД.
Дальше нам нужно проверить была ли нажата кнопка отправки формы (кнопка войти). То есть проверяем не зашёл ли злоумышленник напрямую в файл auth.php.
Дальше, в указанное место «//(1) Место для следующего куска кода«, пишем код для проверки капчи.
Если пользователь ввёл проверочный код правильно, то идём дальше, иначе возвращаем его на страницу авторизации.
Проверка почтового адреса
Дальше, проверяем формат полученного почтового адреса. В указанное место «//(2) Место для обработки почтового адреса» пишем:
Если пользователь ввёл почтовый адрес в неправильном формате или значение поля почтового адреса является пустой, то мы возвращаем его на страницу авторизации где выводим ему сообщение об этом.
Проверка пароля
Следующее поле для обработки, это поле с паролем. В указанное место «//(3) Место для обработки пароля«, пишем:
Здесь мы с помощью функции md5() шифруем полученный пароль, так как в БД пароли у нас находятся именно в зашифрованном виде. Дополнительное секретное слово в шифровании, в нашем случае «top_secret» должна быть та которая использовалась и при регистрации пользователя.
Теперь необходимо сделать запрос к БД на выборке пользователя у которого почтовый адрес равен полученному почтовому адресу и пароль равен полученному паролю.
Выход с сайта
И последнее что мы реализуем, это процедура выхода с сайта. На данный момент в шапке у нас выводятся ссылки на страницу авторизации и на страницу регистрации.
После того как пользователь прошёл авторизацию успешно, необходимо убрать эти ссылки и вместо них вывести ссылку выхода с сайта. Эта ссылка будет ввести на файл logout.php, где мы и произведём выход.
В шапке сайта (файл header.php), с помощью сессии мы проверяем, авторизован ли уже пользователь. Если нет, то выводим ссылки регистрации и авторизации, в противном случае (если он авторизован ) то вместо ссылок регистрации и авторизации выводим ссылку Выход.
Модифицированный кусок кода из файла header.php:
При нажатии на ссылку выхода с сайта, мы попадаем в файл logout.php, где просто уничтожаем ячейки с почтовым адресом и паролем из сессии. После этого возвращаем пользователя обратно на ту страницу, на которой была нажата ссылка выход.
Код файла logout.php:
На этом всё. Теперь Вы знаете как реализовать и обрабатывать формы регистрации и авторизации пользователя на своём сайте. Эти формы встречаются почти на каждом сайте, поэтому каждый программист должен знать, как их создавать.
Ещё мы научились проверять вводимые данные, как на стороне клиента (в браузере, с помощью JavaScript, jQuery ) так и на стороне сервера ( с помощью языка PHP ). Также мы научились реализовать процедуру выхода с сайта.
Все скрипты проверены и рабочие. Архив с файлами этого маленького сайта Вы можете скачать по этой ссылке.
В будущем я напишу статью где опишу как реализовать подтверждение почты. И ещё планирую написать статью где объясню, как отправить данные из формы на сервер с помощью технологии Ajax (без перезагрузки страницы). Так что, для того чтобы быть в курсе о выходе новых статей можете подписаться на мой сайт.
При возникновении вопросов обращайтесь, также, если вы заметили, какую-то ошибку в статье прошу вас, сообщите, мне об этом.
Видео формат статьи
Если Вы что-то не поняли, то можете посмотреть видео формат статьи.
Не забываем подписаться на канал, ставить лайки и поделится с друзьями в социальных сетях. Впереди еще много интересного.
Исходные файлы из видео формата статьи немножко отличаются от тех которые были представлены выше в текстовом формате статьи. По этому исходные файлы из видео формата статьи Вы можете скачать по этой ссылке: Скачать исходные файлы из видео
Похожие статьи:
Понравилась статья?
Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.
Поделиться с друзьями:
Подписаться на новые статьи:
Поддержите пожалуйста мой проект!
Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.
Автор статьи: Мунтян Сергей