Рубрики
Без рубрики

Учебное пособие по колбе: Простая регистрация пользователя и вход в систему

Этот пост проводит вас через создание простого веб -приложения Flask с регистрацией пользователей и входом в систему. Tagged с помощью Python, Flask, Beginters, Security.

Колба – мой любимый веб -фреймворк Python. Это минимально, это быстро и больше всего: это весело . Я люблю почти все в разработке Флаг, за одним исключением: управление пользователями.

Управление пользователями в Флке, как и во многих других веб -структурах, сложно. Я не могу сказать вам, сколько раз я создавал базы данных пользователей, настраивал группы и роли, интегрированные поставщики социального входа, обработанные рабочие процессы сброса пароля, настроенные многофакторные рабочие процессы аутентификации и т. Д. Даже потрясающие библиотеки, такие как Flask-login и Колбская безопасность Может быть трудно настроить и поддерживать в течение длительных периодов времени по мере изменения ваших требований.

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

Следуйте ниже, и вы узнаете, как:

  • Создайте простой веб -сайт Flask
  • Используйте OpenID Connect для аутентификации и авторизации пользователя
  • Используйте Okta в качестве сервера авторизации для хранения и управления учетными записями пользователей простым и простым способом

Если вы хотите пропустить учебник и просто проверить полностью построенный проект, вы можете пойти Просмотреть его на GitHub Анкет

Инициализировать аутентификацию для вашего приложения Flask с Okta

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

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

Чтобы начать, вам сначала нужно пойти создать бесплатную учетную запись разработчика Okta: https://developer.okta.com/signup/ . После того, как вы создали свою учетную запись и вошли в систему, следуйте приведенным ниже шагам, настройте Okta, а затем вы будете готовы написать код!

Шаг 1: Храните свой URL ORG

Первое, что вам нужно сделать, это скопировать Org url Из правой части вашей страницы приборной панели Окта. Этот URL будет использоваться для маршрута на ваш сервер авторизации, общаться с ним и многое другое. Вам понадобится это значение позже, так что не забудьте об этом.

Шаг 2: Создайте приложение OpenID Connect

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

Приложения в OpenID Connect имеют имя пользователя и пароль (называемые идентификатором клиента и секретом клиента), которые позволяют вашему серверу авторизации распознавать, какое приложение с ним разговаривает в любой момент времени.

Чтобы создать новое приложение, просматривая Приложения Вкладка и нажмите Добавить приложение Анкет

Далее нажмите на Интернет Опция платформы (так как этот проект является веб -приложением).

На странице настроек введите следующие значения:

  • Имя : Простое приложение Flask
  • Базовый урок : http://localhost:5000
  • Вход в перенаправление Uris : http://localhost:5000/oidc/callback

Вы можете оставить все остальные значения без изменений.

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

Шаг 3: Создайте токен аутентификации

Чтобы получить доступ к API -интерфейсам OPTA и иметь возможность управлять своими учетными записями пользователей с большой гранулярностью, вам также необходимо создать токен аутентификации Okta. Это ключ API, который будет использоваться позже для общения с API -интерфейсом Opta и позволяет вам делать что -то вроде:

  • Создать, обновлять и удалять пользователей
  • Создать, обновить и Удалить группы
  • Управление настройками приложения
  • И т. д.

Чтобы создать токен аутентификации, щелкните API Вкладка в верхней части страницы, за которой следует Создайте токен кнопка. Дайте вашему токену имя, предпочтительно то же имя, что и ваше приложение, затем нажмите Создайте токен Анкет Как только ваш токен будет создан, скопируйте значение токена, так как вам понадобится позже.

Шаг 4: Включить регистрацию пользователя

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

На вашей панели Okta вы заметите небольшую кнопку с надписью <> Консоль разработчика в верхней части левого страницы. Наведите на эту кнопку и выберите Классический пользовательский интерфейс Опция меню появляется.

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

На странице конфигурации оставьте все настройки в качестве значений по умолчанию, за исключением двух:

  • Отключить Пользователь должен проверить адрес электронной почты для активации. флажок. Этот настройка устраняет требование для новых пользователей, чтобы проверить свой адрес электронной почты, прежде чем будет разрешено получить доступ к вашему веб -приложению.
  • Установить По умолчанию перенаправление Опция, нажав Пользовательский URL радио коробка и вход http://localhost: 5000/dashboard как значение. Этот параметр сообщает серверу авторизации, где перенаправить пользователей после успешного создания новой учетной записи на вашем сайте.

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

Нависнуть над Классический пользовательский интерфейс Кнопка в правом верхнем углу страницы и выберите <> Консоль разработчика Пункт меню из раскрываемости.

Установить зависимости от питона и колбы

Первое, что вам нужно сделать, чтобы инициализировать приложение вашего колбы, – это установить все необходимые зависимости. Если на вашем компьютере уже нет Python, пожалуйста, перейдите Установите его сейчас Анкет

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

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

pip install Flask>=1.0.0
pip install flask-oidc>=1.4.0
pip install okta==0.0.4

Инициализируйте приложение Flask

Теперь, когда зависимости установлены, давайте начнем с создания простого приложения Flask. Мы опишем это простое “Привет, мир!” приложение, пока у нас не будет включена вся нашу функциональность.

Создать app.py Файл и введите следующий код:

from flask import Flask

app = Flask( __name__ )

@app.route('/')
def index():
    return 'hello, world!'

Откройте терминал и запустите следующий код, чтобы запустить новое приложение Flask.

FLASK_APP=app.py flask run

Как только ваше приложение Flask будет запущено, посетите посетите http://localhost: 5000 В браузере, чтобы увидеть сообщение Hello World!

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

  • Импортировать библиотеку колбы
  • Создать объект приложения Flask
  • Определите функцию (называемую представлением), которая работает, когда пользователь запрашивается конкретный URL -адрес (в данном случае /

Неплохо, верно?

Создайте индекс и видение приборной панели в колбе

Следующим шагом к созданию простого приложения Flask является создание домашней страницы и панели панели. Домашняя страница – это то, что будет показано пользователю, когда он посетит / URL и страница панели приборной панели ( /Dashboard ) будут показаны пользователю после того, как они войдут в свою учетную запись.

Когда я строю веб -приложения, мне нравится сначала определять свои шаблоны и просмотры, чтобы я мог избавиться от трудной части (дизайн не мой сильный костюм).

Чтобы начать, откройте вас app.py Файл из предыдущего и изменить его, чтобы выглядеть следующим образом:

from flask import Flask, render_template

app = Flask( __name__ )

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/dashboard")
def dashboard():
    return render_template("dashboard.html")

Вы заметите, что теперь у вас есть две функции представления: Индекс (которая делает домашнюю страницу) и Панель инструментов (который отдает страницу панели панели). Обе функции представления вызывают render_template Функция Flask, которая отвечает за отображение HTML -страницы пользователю.

Теперь вы, очевидно, еще не создали эти HTML -шаблоны, так что давайте сделаем это дальше!

Шаблоны в колбе построены с использованием Язык шаблона Jinja2 . Если вы знакомы с HTML, это должно выглядеть естественно.

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

mkdir templates
touch templates/{layout.html,index.html,dashboard.html}

Все шаблоны в колбе должны жить внутри Шаблоны папка.

Далее откройте шаблоны/макет.html Файл и введите следующий код.




  
    
    
    
    
    Simple Flask App | {% block title %}{% endblock %}
  
  
    

      
Simple Flask App

      
    

    

      {% block body %}{% endblock %}

Это Mayout.html Файл наш база шаблон. Это в основном строительный блок, от которого будут наследовать все остальные шаблоны. Определяя наш общий, Общий HTML В этом файле мы можем избежать написания избыточного HTML везде. Да!

Теперь этот файл содержит все основные вещи, которые вы можете ожидать:

  • Простой, Bootstrap -Са основанная на макете
  • Батончик навигации (который содержит какую -то специальную логику Jinja2)
  • Специальное тело Jinja2
  • Нижний колонтитул

Давайте посмотрим на одну интересную часть шаблона.

{% if not g.user %}
  Log In / Register
{% else %}
  Dashboard
  Logout
{% endif %}

Все в теге Jinja2 ( { %… %} материал) будет составлено Flask, прежде чем будет показан пользователю. В приведенном выше примере мы в основном рассказываем Флбу, что, если объект g.user Существует, мы должны отображать приборную панель и ссылку на вход в Navbar, но если нет g.user Объект существует, вместо этого мы должны показать кнопку входа в систему.

Мы делаем это, потому что в конечном итоге у нас будет доступна учетная запись пользователя через g.user Объект, и мы хотим, чтобы Navbar был умным в отношении того, что видит пользователь.

Следующей интересной частью шаблона является тег тела:


  {% block body %}{% endblock %}

Блок Jinja2 Тег позволяет нам вводить контент из шаблона ребенка в этот родительский шаблон. Это то, что позволяет нам создавать сложные HTML -страницы без написания избыточного кода.

Теперь, когда макет определен, давайте создадим домашнюю страницу. Откройте шаблоны/index.html файл и вставьте следующий код.

{% extends "layout.html" %}

{% block title %}Home{% endblock %}

{% block body %}
  
Simple Flask App

  

    

      

        Welcome to this simple Flask example app. It shows you how to easily
        enable users to register, login, and logout of a Flask web app using Okta.
      

    

  

{% endblock %}

{ % расширяет "layout.html" %} Тег – это то, что говорит шаблонному двигателю, что этот шаблон зависит от Mayout.html шаблон для работы.

Все внутри Блок Затем теги вводятся обратно в родительский шаблон из ранее. Объединяя эти две вещи вместе, теперь вы можете получить полностью отображаемую домашнюю страницу!

Далее, идите вперед и поместите следующий код в Шаблоны/Dashboard.html файл.

{% extends "layout.html" %}

{% block title %}Dashboard{% endblock %}

{% block body %}
  
Dashboard

  

    

      
Welcome to the dashboard, {{ g.user.profile.firstName }}!

      
Your user information has been pulled from the g.user
      object, which makes accessing your user information simple. Your first
      name, for example, is available via the g.user.profile.firstName
      property. Your user id ({{ g.user.id }}), is pulled from the g.user.id property!

    

  

{% endblock %}

Этот шаблон работает таким же образом, за исключением того, что он также выводит некоторые переменные. Например, {{g.user.id}} Значение выведет это значение идентификатора в шаблон HTML напрямую. Эти переменные в конечном итоге будут доступны, как только мы подключаем библиотеку OpenID Connect.

Последнее, что вам нужно сделать, прежде чем тестировать вещи, это добавить немного CSS, чтобы все выглядело лучше.

mkdir static
touch static/style.css

Open static/style.css и копировать в следующем CSS.

h1 {
  margin: 1em 0;
}

footer {
  padding-top: 2em;
}

Наконец, теперь, когда ваши шаблоны были созданы, протестируйте их!

Посетите http://localhost:5000 И вы должны увидеть ваш красивый новый сайт.

Добавьте регистрацию пользователя и войдите в приложение Flask

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

Шаг 1: Создайте файл конфигурации OpenID Connect

Создайте новый файл с именем client_secrets.json В корне папки проекта и вставьте следующий код.

{
  "web": {
    "client_id": "{{ OKTA_CLIENT_ID }}",
    "client_secret": "{{ OKTA_CLIENT_SECRET }}",
    "auth_uri": "{{ OKTA_ORG_URL }}/oauth2/default/v1/authorize",
    "token_uri": "{{ OKTA_ORG_URL }}/oauth2/default/v1/token",
    "issuer": "{{ OKTA_ORG_URL }}/oauth2/default",
    "userinfo_uri": "{{ OKTA_ORG_URL }}/oauth2/default/userinfo",
    "redirect_uris": [
      "http://localhost:5000/oidc/callback"
    ]
  }
}

Обязательно замените переменные заполнителя на фактическую информацию OKTA.

  • Заменить {{Okta_org_url}} с URL ORG на странице панели инструментов
  • Заменить {{Okta_client_id}}} с идентификатором клиента на странице приложения
  • Заменить {{Okta_client_secret}} С секретом клиента на странице приложения

Этот файл будет использоваться библиотекой Flask-oidc, которую мы будем настраивать через мгновение. Эти настройки, по сути, сообщают библиотеке OpenID Connect, что вы используете для аутентификации OpenID Connect для аутентификации, и каковы конечные точки API сервера авторизации.

URI выше просто указывают на ваши недавно созданные ресурсы Okta, чтобы библиотека Flask могла правильно поговорить с ним.

Шаг 2: Настройте Flask-oidc

Откройте app.py и вставьте в следующий код.

from flask import Flask, render_template
from flask_oidc import OpenIDConnect

app = Flask( __name__ )
app.config["OIDC_CLIENT_SECRETS"] = "client_secrets.json"
app.config["OIDC_COOKIE_SECURE"] = False
app.config["OIDC_CALLBACK_ROUTE"] = "/oidc/callback"
app.config["OIDC_SCOPES"] = ["openid", "email", "profile"]
app.config["SECRET_KEY"] = "{{ LONG_RANDOM_STRING }}"
oidc = OpenIDConnect(app)

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/dashboard")
def dashboard():
    return render_template("dashboard.html")

Мы делаем здесь настройка библиотеки Flask-oidc.

  • Oidc_client_secrets Настройка рассказывает Flask-oidc, где находится ваш файл конфигурации OpenID Connect (тот, который вы создали в предыдущем разделе).
  • Oidc_cookie_secure Настройка позволяет вам проверить вход пользователей и регистрацию в разработке без использования SSL. Если вы собирались запустить свой сайт публично, вы бы удалили эту опцию и использовали SSL на своем сайте.
  • Oidc_callback_route Настройка сообщает Flask-oidc, какой URL на вашем сайте будет обрабатывать вход пользователей. Это стандартная часть потоков OpenID Connect. Это не так, как для этой статьи, но если вы хотите узнать больше, идите, прочитайте наше OpenID Connect Primer Анкет
  • OIDC_SCOPES Настройка сообщает Flask-oidc, какие данные запросить о пользователе при входе в систему. В этом случае мы запрашиваем базовую информацию пользователя (электронная почта, имя и т. Д.).
  • Secret_key Настройка должна быть установлена на длинный , случайная строка. Это используется для обеспечения ваших сеансов колбы (файлов cookie), чтобы никто не мог вмешиваться с ними. Убедитесь, что эта переменная остается частной. Это никогда не должно быть публично выставлено.

Наконец, после завершения всей конфигурации мы инициализируем расширение Flask-oidc, создав oidc объект.

Шаг 3: Введите пользователя в каждый запрос

Откройте app.py и вставьте в следующий код.

from flask import Flask, render_template, g
from flask_oidc import OpenIDConnect
from okta import UsersClient

app = Flask( __name__ )
app.config["OIDC_CLIENT_SECRETS"] = "client_secrets.json"
app.config["OIDC_COOKIE_SECURE"] = False
app.config["OIDC_CALLBACK_ROUTE"] = "/oidc/callback"
app.config["OIDC_SCOPES"] = ["openid", "email", "profile"]
app.config["SECRET_KEY"] = "{{ LONG_RANDOM_STRING }}"
app.config["OIDC_ID_TOKEN_COOKIE_NAME"] = "oidc_token"
oidc = OpenIDConnect(app)
okta_client = UsersClient("{{ OKTA_ORG_URL }}", "{{ OKTA_AUTH_TOKEN }}")

@app.before_request
def before_request():
    if oidc.user_loggedin:
        g.user = okta_client.get_user(oidc.user_getfield("sub"))
    else:
        g.user = None

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/dashboard")
def dashboard():
    return render_template("dashboard.html")

То, что мы делаем здесь, импортируют Окта Библиотека Python и использование ее для определения okta_client объект. Этот клиент -объект будет использоваться для извлечения надежного пользовательского объекта, который вы можете использовать для:

  • Определите в настоящее время зарегистрированный в пользователе
  • Вносить изменения в учетную запись пользователя
  • Хранить и получить информацию пользователя

Убедитесь, что вы замените {{Okta_org_url}} и {{Okta_auth_token}} С ценностями, которые вы записали в первом разделе этого урока. Эти две переменные являются обязательными, поэтому Окта Библиотека может общаться с службой API Opi.

@app.before_request
def before_request():
    if oidc.user_loggedin:
        g.user = okta_client.get_user(oidc.user_getfield("sub"))
    else:
        g.user = None

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

  • Проверьте, зарегистрируется ли пользователь через OpenID Connect или нет (значение oidc.user_loggedin
  • Если пользователь входит в систему, он получит уникальный идентификатор пользователя пользователя из сеанса пользователя, затем используйте этот идентификатор, чтобы получить объект пользователя из API Okta

Во всех случаях будет вновь созданная ценность: g.user Анкет В колбе вы можете хранить запросы данных на G объект, к которому можно получить доступ из любого места: просмотреть код, шаблоны и т. Д. Это делает его удобным местом для хранения чего -то вроде пользовательского объекта, поэтому его можно легко использовать позже.

Шаг 4: Включить регистрацию, вход и вход пользователей

Откройте app.py и вставьте следующий код.

from flask import Flask, render_template, g, redirect, url_for
from flask_oidc import OpenIDConnect
from okta import UsersClient

app = Flask( __name__ )
app.config["OIDC_CLIENT_SECRETS"] = "client_secrets.json"
app.config["OIDC_COOKIE_SECURE"] = False
app.config["OIDC_CALLBACK_ROUTE"] = "/oidc/callback"
app.config["OIDC_SCOPES"] = ["openid", "email", "profile"]
app.config["SECRET_KEY"] = "{{ LONG_RANDOM_STRING }}"
app.config["OIDC_ID_TOKEN_COOKIE_NAME"] = "oidc_token"
oidc = OpenIDConnect(app)
okta_client = UsersClient("{{ OKTA_ORG_URL }}", "{{ OKTA_AUTH_TOKEN }}")

@app.before_request
def before_request():
    if oidc.user_loggedin:
        g.user = okta_client.get_user(oidc.user_getfield("sub"))
    else:
        g.user = None

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/dashboard")
@oidc.require_login
def dashboard():
    return render_template("dashboard.html")

@app.route("/login")
@oidc.require_login
def login():
    return redirect(url_for(".dashboard"))

@app.route("/logout")
def logout():
    oidc.logout()
    return redirect(url_for(".index"))

Здесь есть только несколько вещей:

  • Теперь у вас есть Вход Посмотреть. Представление будет перенаправить пользователя на Okta (поставщик OpenID Connect) для регистрации или входа в систему. Это питается @oidc.require_login декоратор, который предоставляется библиотекой Flask-oidc. Как только пользователь будет вошел в систему, он будет перенаправлен на страницу панели панели.
  • Выход Вид также присутствует. Это просто регистрирует пользователя, используя oidc.logout () Метод, а затем перенаправляет пользователя на домашнюю страницу.

И с этим ваше приложение теперь полностью функционально!

Проверьте свое новое приложение Flask

Теперь, когда ваше приложение полностью построено, протестируйте его! Откройте http://localhost:5000 , создать учетную запись, войти в систему и т. Д.

Как вы можете видеть, создание приложения Flask с регистрацией пользователя, входом в систему и т. Д. Не должно быть трудным!

Если вы заинтересованы в узнать больше о веб -аутентификации и безопасности, вы также можете проверить некоторые из Наши другие статьи , или Следуйте за нами В Твиттере – мы много пишем о интересных темах веб -разработки.

Вот два моих любимых:

Оригинал: “https://dev.to/oktadev/flask-tutorial-simple-user-registration-and-login-23kk”

Читайте ещё по теме: