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

php — Авторизация на сайте через другой сайт

Вопрос задан 10 лет 6 месяцев назад

Изменён 6 лет 1 месяц назад

Просмотрен 4k раза

Доброго всем времени.

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

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

Подскажите что-нибудь дельное.

• php
• битрикс
• cms
• авторизация

<form action='http://domain.com/login.php' method='get'>
    Логин: <input type='text' name='login'><br/>
    Пароль: <input type='password' name='pass'><br/>
    <input type='submit' name='submit'>
</form>`

Может так?

<form action="http://site. com/index.php" method="POST">
<input type="text" name="login"> <br>
<input type="text" name="password"> <br>
<input type="submit" value="Войти"> </form>

Имена полей login и password посмотри в исходном коде на сайте где нужно авторизоваться, и замени их! Или если можешь просто оставь тут ссылку где хочешь авторизовывать пользователей я тебе напишу готовую форму.

Как только написал, сам понял как сделать.

<form method="post" action="http://localhost.ru/index.html">
<h2>Login</h2><input type="text" value="Логин" maxlength="20" name="login"></br>
<h2>Pass</h2>
<input type="password" maxlength="20" name="pass"></br>
<input type="image" value="Войти">
</form>

Ответ правильный, только пост у меня.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

#20.

class LoginUser(DataMixin, LoginView):
    form_class = AuthenticationForm
    template_name = 'women/login.html'
 
    def get_context_data(self, *, object_list=None, **kwargs):
        context = super().get_context_data(**kwargs)
        c_def = self.get_user_context(title="Авторизация")
        return dict(list(context.items()) + list(c_def.items()))

{% extends 'women/base.html' %}
 
{% block content %}
<h2>{{title}}</h2>
 
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Войти</button>
</form>
 
{% endblock %}

path('login/', LoginUser.as_view(), name='login'),

class LoginUser(DataMixin, LoginView):
...
    def get_success_url(self):
        return reverse_lazy('home')

LOGIN_REDIRECT_URL = '/'

class LoginUserForm(AuthenticationForm):
    username = forms.CharField(label='Логин', widget=forms.TextInput(attrs={'class': 'form-input'}))
    password = forms.CharField(label='Пароль', widget=forms.PasswordInput(attrs={'class': 'form-input'}))

class LoginUser(DataMixin, LoginView):
    form_class = LoginUserForm
...

<div>{{ form.non_field_errors }}</div>
 
{% for f in form %}
<p><label for="{{ f.id_for_label }}">{{f.label}}: </label>{{ f }}</p>
<div>{{ f.errors }}</div>
{% endfor %}

{% if request.user.is_authenticated %}
<li> {{user.username}} | <a href="{% url 'logout' %}">Выйти</a></li>
{% else %}
<li><a href="{% url 'register' %}">Регистрация</a> | <a href="{% url 'login' %}">Войти</a></li>
{% endif %}

path('logout/', LoginUser.as_view(), name='logout'),

def logout_user(request):
    logout(request)
    return redirect('login')

    def form_valid(self, form):
        user = form.save()
        login(self.request, user)
        return redirect('home')

10 шаблонов страницы входа с открытым исходным кодом, созданных с использованием HTML и CSS

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

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

Эта коллекция предлагает 10 страниц входа с открытым исходным кодом, которые вы можете использовать и переформатировать для любого веб-проекта.

1. Пользовательский интерфейс страницы входа

Разработчик Khaled Mneimneh создал этот стильный пользовательский интерфейс входа с некоторыми базовыми свойствами CSS3.

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

Но одна часть, которая выделяется для меня, — это настраиваемый градиент в кнопке отправки. Это внимание к деталям.

2. Градиентная форма

Тайлер Фрай разработал забавную градиентную страницу с темной формой входа.

Больше всего мне здесь нравится более темный фон и то, как он отлично работает с более светлым текстом в форме.

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

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

3. Чистый HTML5

Форма входа в систему с использованием бумажной стопки — довольно распространенный прием среди дизайнеров. В настоящее время мы видим это не так часто благодаря популярности плоского дизайна.

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

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

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

4. Показать/скрыть поле пароля

Основной темный дизайн в этом фрагменте очень чистый и простой в использовании. Но это даже не фокус.

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

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

5. Чистая форма входа в систему

Вот очень чистая синяя страница входа с использованием некоторых блестящих эффектов градиента.

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

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

6. Вход в систему Apple Dev

Разработчик Кристоф Молина создал это поле входа в систему в стиле Apple, предназначенное для практической панели Apple Dev.

Это не то, что большинство пользователей Apple узнают или даже будут использовать в повседневной жизни.

Но у него действительно сумасшедший стиль дизайна со скевоморфизмом и блестящей лентой заголовка.

Не говоря уже о том, что вся форма работает на чистом CSS, что само по себе является настоящим достижением.

7. Анимированная форма

Всегда интересно добавить анимацию в ваш пользовательский интерфейс. Это то, что предлагает эта форма с короткой анимацией формы на основе jQuery.

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

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

8. Темный вход

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

Взгляните на эту темную форму входа, созданную Андреасом Стормом. Он использует ярко-зеленые цвета для кнопки входа в систему и пользовательского переключателя.

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

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

9. Модальное окно входа с регистрацией

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

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

Это отображается поверх формы входа, поэтому оно работает как обычное модальное окно. Довольно крутой эффект!

Требуется немного jQuery, но в целом это работает на 25 строках JS. Это впечатляет, учитывая невероятное удобство использования этой формы.

10. Minimalist Логин

Суперлегкий и супербазовый — так лучше всего можно описать эту непринужденную форму, разработанную Марчелло Африкано.

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

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

Зарегистрируйтесь для входа в Amazon

Vielen Dank für deinen Besuch. Diese Seite ist Nur на английском языке verfügbar.