Как сделать авторизацию на сайте html: Как сделать адаптивную форму входа авторизации

Leave a Comment / Html / By /

Содержание

Форма авторизации на сайт — как сделать самостоятельно

Пояснения к статье:

  1. <link>, <script> — HTML теги. Используются для подключения стилей и скриптов.
  2. <div>, <h3>, <input> — Парные HTML теги.
  3. <Form> — Общий блок-контейнер. Необходим для создания формы.
  4. {Margin: 0 auto} — абсолютное выравнивание по центру. Работает за счет изменения внешних отступов, делает их ровными.

Здравствуйте, в этой статье мы расскажем вам о том, как создать форму авторизации для входа на сайт. Для этого нам понадобятся просто HTML и CSS, JavaScript будем использовать по минимуму.

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

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

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

Форма авторизации: HTML разметка.

Начнем с «HTML», первое что нам нужно сделать, так это подключить все необходимые инструменты — JavaScript и CSS. Для этого создадим 2 тега в блоке head: script(для подключения скриптов, с помощью атрибута «src») и «link»(для подключения стилей, с помощью атрибута «href»).

Теперь можно приступать к разметке нашей формы, открываем тег body. Внутри мы создадим небольшую конструкцию:

  1. Внешний блок с классом pinkbox — тег <div>.
  2. Блоки для авторизации и регистрации с классами signup и signin.
  3. Заголовок и форма с различными элементами — теги <form>, <h3>, <input> и т.д. Находятся внутри каждого блока.

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

Здесь уже другая конструкция. Нам также придется использовать изображения(тег <img>).

После того, как мы создали все блоки, закрываем тег <body> и все готово.

Форма авторизации: стилизация. CSS

Перед тем, как стилизировать все наши элементы и создавать отличнейший дизайн, нам необходимо прописать общие свойство для главного контейнера.

Из свойств мы применим только центрирование(margin 0 auto), изменим позиционирование, размеры и расположение по координатам.

После этого приступаем к стилизации слайдеров. Здесь будут применены стандартные свойства CSS, такие как фон, изменение ширины и высоты, рамки, тени и т.д.

После стилизации слайдера, нам необходимо провести изменение небольших деталей, а также поработать над дизайном высшего блока.

Ваш CSS код должен выглядеть примерно так:

После этого нам нужно задать стилизацию для формы, а также для псевдоклассов активных форм.

Форма авторизации на сайт: JavaScript

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

Заключение

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

Если хотите более детально разобраться в работе слайдера, а также в его конструкции — смотрите исходники. Желаем удачи в изучении!

Теги:

CSS html JavaScript Уроки 

Регистрация пользователей · Django в примерах

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

Измените файл forms.py, расположенный в каталоге приложения account, и добавьте в него следующий код:

from django.contrib.auth.models import User
class UserRegistrationForm(forms.ModelForm):
    password = forms.CharField(label='Password', widget=forms.PasswordInput)
    password2 = forms.CharField(label='Repeat password', widget=forms.PasswordInput)
    class Meta:
        model = User
        fields = ('username', 'first_name', 'email')
    def clean_password2(self):
        cd = self.cleaned_data
        if cd['password'] != cd['password2']:
            raise forms.ValidationError('Passwords don\'t match.')
        return cd['password2']

Мы создали модель form для модели User

. В нашей форме мы включаем только поля username, first_name и email. Эти поля будут проверены на основе соответствующих полей модели. Например, если пользователь выбирает имя пользователя, которое уже существует, он получит ошибку проверки. Мы добавили два дополнительных поля password и password2, чтобы пользователь установил свой пароль и подтвердит его. Мы определили метод clean_password2() для проверки совпадения password с password2. Эта проверка выполняется при проверке формы, вызывающей ее метод is_valid(). Можно предоставить clean_<fieldname>() для любого из полей формы, чтобы очистить значение или вызвать ошибки проверки формы для конкретного поля. Формы также включают общий метод
clean() для проверки всей формы, что полезно для проверки полей, зависящих друг от друга.

Джанго также предоставляет форму UserCreationForm, которую можно использовать, которая находится в django.contrib.auth.forms и очень похожа на созданные нами формы.

Отредактируйте файл views.py приложения account и добавьте в него следующий код:

from . forms import LoginForm, UserRegistrationForm
def register(request):
    if request.method == 'POST':
        user_form = UserRegistrationForm(request.POST)
        if user_form.is_valid():
            # Create a new user object but avoid saving it yet
            new_user = user_form.save(commit=False)
            # Set the chosen password
            new_user.set_password(user_form.cleaned_data['password'])
            # Save the User object
            new_user.save()
            return render(request, 'account/register_done.html', {'new_user': new_user})
    else:
        user_form = UserRegistrationForm()
    return render(request, 'account/register.html', {'user_form': user_form})

Представление для создания учетных записей пользователей является довольно простым. Вместо сохранения необработанного пароля, введенного пользователем, мы используем метод set_password() модели User, обрабатывающей шифрование для сохранения безопасности.

Теперь отредактируйте файл urls. register/$’, views.register, name=’register’),

И наконец создайте шаблон register.html в каталоге шаблонов account/ и добавьте в него следующий код:

{% extends "base.html" %}
{% block title %}Create an account{% endblock %}
{% block content %}
    <h2>Create an account</h2>
    <p>Please, sign up using the following form:</p>
    <form action="." method="post">
        {{ user_form.as_p }}
        {% csrf_token %}
        <p><input type="submit" value="Create my account"></p>
    </form>
{% endblock %}

Добавьте еще один шаблон в ту же директорию и назовите его register_done.html:

{% extends "base.html" %}
{% block title %}Welcome{% endblock %}
{% block content %}
    <h2>Welcome {{ new_user.first_name }}!</h2>
    <p>Your account has been successfully created. Now you can <a href="{% url "login" %}">log in</a>.</p>
{% endblock %}

Откройте в браузере страницу http://127. 0.0.1:8000/account/register/ . Вы должны увидеть страницу регистрации:

Заполните все поля и нажмите на кнопку Create my account. Если все поля пройдут валидацию вы увидите сообщение об удачной регистрации пользователя:

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

Теперь мы можем добавить кнопку регистрации в шаблон входа на сайт. Измените шаблон registration/login.html и замените эту строку:

<p>Please, use the following form to log-in:</p>

…на эту:

<p>Please, use the following form to log-in. If you don't have an account <a href="{% url "register" %}">register here</a></p>

Мы сделали страницу регистрации доступной со страницы входа.

15+ страниц входа в HTML с кодом CSS — CodeHim

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

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

Этот набор форм регистрации/входа имеет разные типы страниц входа. Каждая страница входа имеет различные функции и функции. Вы можете просмотреть демонстрацию и загрузить исходный код HTML и CSS для страницы входа, которая вам подходит.

1. Простая страница входа в систему в формате HTML

Ниже приведена простая форма входа с чистым пользовательским интерфейсом для входа в систему. Этот шаблон формы входа имеет заголовок, поле ввода для электронной почты и пароля, ссылку на страницу с забытым паролем. и две кнопки «зарегистрироваться» и «войти». Кроме того, он имеет достойную цветовую схему, вдохновленную Material Design. Цветовая схема может быть настроена в соответствии с вашими потребностями.

Автор: Nitesh Kumar Niranjan

Скачать демоверсию

2. Страница входа с фоновым изображением

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

Автор: Tobias Rickmann

Скачать демоверсию

3. Страница входа в HTML5 с проверкой

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

Автор: Roary Tubbs

Загрузка демоверсии

4. Страница входа с именем пользователя и паролем

Иногда шаблону веб-сайта требуется дизайн страницы входа со значком поля имени пользователя и пароля. Следующая страница входа выполнена в черно-розовой цветовой гамме. Он использует значки SVG внутри поля имени пользователя и пароля. Этот шаблон страницы входа лучше всего подходит для темных тем и веб-страниц.

Автор: Марко Бидерманн

Скачать демоверсию

5. Страница входа в систему в формате HTML с кодом CSS

Вам нужен многофункциональный дизайн страницы входа? хорошо, эта страница входа вполне соответствует вашим потребностям. Он поставляется со всеми необходимыми элементами, которые должны быть на идеальной странице входа. Он имеет стильные кнопки для входа через профили Facebook и Twitter.

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

Автор: Claudia Romano

Скачать демоверсию

6. Форма входа и регистрации в HTML

Ниже представлена ​​многофункциональная форма входа и регистрации, созданная на HTML, CSS и jQuery. По сути, он отображает две кнопки для входа и регистрации. Когда пользователь нажимает кнопку, открывается всплывающее модальное окно с вкладками для входа и регистрации. Пользователи могут легко переключаться между вкладками «Войти» и «Новая учетная запись».

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

Автор: Эмиль. Он создан с помощью HTML и CSS со всеми необходимыми элементами, которые требуются для отправки студентом. По сути, дизайн действительно прост, но его можно настроить с помощью дополнительного CSS в соответствии с вашими потребностями.

Автор: Рошан

Скачать демонстрационную версию

8. Шаблон формы входа и регистрации

Это еще одна форма с вкладками с параметрами входа и регистрации. Эта страница регистрации/входа использует Bootstrap для адаптивного дизайна и jQuery для проверки входных данных. Тело страницы содержит фоновое изображение, а форма имеет слегка прозрачный темный цвет. Цветовая схема по умолчанию представлена ​​черно-желтой темой. Однако вы можете установить собственный цвет в соответствии с шаблоном вашего веб-сайта, если хотите интегрировать эту форму.

Автор: Petia

Скачать демоверсию

9. HTML-страница входа с Bootstrap

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

Автор: Ганеш

Загрузка демо-версии

10. HTML-страница входа с проверкой JavaScript

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

Автор: ioSkye

Скачать демоверсию

11.

Форма входа в систему в современном плоском дизайне

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

Автор: Айгарс Силкалнс

Скачать демоверсию

12. Классическая форма входа

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

Автор: Bridges

Загрузка демоверсии

13.

Экран входа в систему с анимированным фоном

Если вы работаете над веб-проектом, этот экран входа может быть вам полезен. Он поставляется с анимированным фоном, который взаимодействует с движением мыши.

Автор: Jay. В любом случае, иногда вам нужен HTML-компонент без CSS для различных целей. Если вам нужна простая форма входа без CSS, вам может подойти следующая форма.

Автор: Jun

Загрузка демоверсии

Связанные фрагменты кода:

Создание системы авторизации с помощью HTML, CSS и JavaScript

5 февраля 2020 г.

Я создал систему входа в систему с помощью HTML, CSS и JavaScript, когда создавал студенческий портал Learn JavaScript. Я хотел бы поделиться с вами этой системой, так как она работает хорошо.

Как работает система

Система работает так:

  1. Разрешить вход пользователя на странице входа
    1. При входе в систему хранить информацию о пользователе в localStorage .
    2. Перенаправление на страницу содержимого
  2. Когда учащийся переходит на страницу
    1. Проверить, может ли учащийся получить доступ к странице
    2. Если да, разрешить учащемуся ввести
    3. Если нет, перенаправить на страницу входа

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

Когда они отправляют форму, я отправляю их адрес электронной почты и пароль на свой сервер через запрос POST. Вот как выглядит запрос:

 асинхронная функция basiclogin (адрес электронной почты, пароль) {
  константный ответ = ожидание zlFetch.post(loginEndpoint, {
    авторизация: {
      имя пользователя: электронная почта,
      пароль: пароль
    },
    тело: { /*...*/ }
  })
}

zlFetch — это библиотека, которую я создал для упрощения использования Fetch API. Вы можете узнать больше о zlFetch здесь. Параметр auth преобразует имя пользователя и пароль в заголовок базовой аутентификации.

Мой сервер использует веб-маркеры JSON (JWT) для аутентификации пользователей. Он отправляет обратно токен JWT. Токен JWT представляет собой длинную строку, которая выглядит следующим образом:

.
 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaXJzdE5hbWUiOiJaZWxsIiwiZW1haWwiOiJ6ZWxsd2tAZ21haWwuY29tIiwiaWF0IjoxNTc3ODYzNzc3LCJleHAiOjE1ODA0NTU3Nzd9.i3rOwqV1Bc-JEAaxT7lHZHUlDuFf9ADVP7qjy50WqT0

Этот токен действует как учетные данные для будущих входов в систему. Я сохраняю этот токен в localStorage , чтобы учащиеся могли автоматически входить в систему.

 асинхронная функция basiclogin (адрес электронной почты, пароль) {
  константный ответ = ожидание zlFetch.post(/*...*/)
  const {токен} = response.body
  
  localStorage.setItem('токен', токен)
}

Проверка, вошел ли учащийся в систему

Чтобы проверить, вошел ли ученик в систему, я проверяю localStorage для токена. Если localStorage не имеет токена , я знаю, что учащийся не вошел в систему.

 асинхронная функция isLoggedIn () {
  постоянный токен = store.get('токен')
  если (! токен) вернуть false
}

Если учащийся не вошел в систему, я перенаправляю его на страницу входа.

 асинхронная функция autoRedirect () {
  const validLogin = ожидание isLoggedIn()
  if (!validLogin && location.pathname !== '/login/') redirect('/login')
  if (validLogin && location.pathname === '/login/') перенаправить ('/')
}

Если у localStorage есть токен, мне все равно нужно проверить действительность этого токена. Для этого я отправляю на свой сервер еще один POST-запрос.

 асинхронная функция isLoggedIn () {
  // ...
  // Проверяем правильность токена
  константный ответ = ожидание zlFetch.post(loginEndpoint, {
    авторизация: токен,
    body: {курс: 'learn-javascript'}
  })
}

Если ответ успешен, мой сервер возвращает другой токен с новой датой истечения срока действия. Этот новый токен позволяет учащимся оставаться в системе в течение более длительного периода времени.

 асинхронная функция isLoggedIn () {
  // ...
  // Снова сохраняет токен в localStorage
  const {токен} = response.body
  localStorage.setItem('токен', токен)
  вернуть истину
}

Обновление уровня доступа учащегося

Помимо токена , я также храню «уровень доступа» учащегося в localStorage . Этот «уровень доступа» определяет, к каким урокам может получить доступ студент.

Учащиеся могут получить доступ к этим урокамУчащиеся не могут получить доступ к этим урокам

Я сохраняю этот уровень доступа при первом входе учащегося в систему.

 функция basiclogin (адрес электронной почты, пароль) {
  константный ответ = ожидание zlFetch.post(/*...*/)
  const { токен, пользователь } = response.body
  // ...
  // пользователь содержит уровень доступа
  localStorage.setItem('пользователь', пользователь)
}

Я снова сохраняю уровень доступа после проверки токена. Это позволяет мне:

  1. Запретить учащимся вмешиваться в свои localStorage (и получать доступ к урокам, которых у них не должно быть)
  2. Автоматическое обновление доступа учащегося после его перехода на более высокий уровень

Два зайца одним выстрелом!

 функция isLoggedIn () {
  // . ..
  const { токен, пользователь } = response.body
  localStorage.setItem('пользователь', пользователь)
}

Выйти просто. Нам просто нужно очистить элементы, которые мы разместили в localStorage .

 функция выхода из системы () {
  localStorage.removeItem('токен')
  localStorage.removeItem('пользователь')
}

Предотвращение доступа для учащихся без JavaScript

Этот курс создан с помощью генератора статических сайтов. Каждый урок представляет собой обычный HTML-файл. Учащиеся могут обойти уровень аутентификации и читать HTML напрямую, если они отключили JavaScript.

Этого не должно происходить.

Чтобы люди не отключали свой JavaScript для просмотра уроков, я добавил к элементу HTML класс no-js .

 ...

Я удаляю этот класс без js , когда есть JavaScript.

 document.documentElement.classList.remove('нет-js')

И я скрываю основной контент, если пользователь отключил JavaScript.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *