Flask OAuth, Dark-Mode, Docker — бесплатный стартовый BS5 • Wonz

Привет Кодеры!

В этой статье представлены последние обновления Мягкая панель пользовательского интерфейсапопулярный открытый Колба стартер недавно обновлен для поддержки Вход OAuth для Github, постоянный темный режим, улучшенные сценарии Docker, а также другие незначительные улучшения и исправления пользовательского интерфейса/UX. Продукт, основанный на разрешающей лицензии, может использоваться в коммерческих проектах или в деятельности по электронному обучению. Спасибо за чтение!

✨Особенности продукта

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

✅ Актуальные зависимости
✅ База данных: MySql, SQLite
✅ Аутентификация на основе сеанса
✅ Социальный вход (необязательно) для GitHub
✅ Скрипты докера
✅ Дизайн BS5, тёмный режим (постоянный)

Вероятно, самый быстрый способ запустить проект в локальной среде — выполнить настройку Docker, которая представляет собой одну строку, введенную в терминале.

👉 Шаг 1 — Клонировать/скачать исходники с Github

$ git clone 
$ cd flask-soft-ui-dashboard

👉 Шаг 2 — Запустить в Докере

$ docker-compose up --build

Как только команда завершит выполнение, мы сможем посетить приложение в браузере.

Мягкая панель инструментов — вход в темный режим (Flask Starter).

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

👉 Flask OAuth Добавлены модули — GH фиксирует

Flask-Dance==5.1.0
blinker==1.4

Flask-Dance — это библиотека, которая выполняет всю тяжелую работу, такую как создание плана Github, обработку маршрутизации и управление контекстом аутентификации для нас.

👉 Flask OAuth Обновить конфигурацию — GH фиксирует

    SOCIAL_AUTH_GITHUB  = False

    GITHUB_ID      = os.getenv('GITHUB_ID')
    GITHUB_SECRET  = os.getenv('GITHUB_SECRET')

    
    if GITHUB_ID and GITHUB_SECRET:
         SOCIAL_AUTH_GITHUB  = True

Функция становится активной, если приложение обнаруживает в .env файл секреты для Github. Действительный .env файл, который включает эту функцию, выглядит следующим образом:

# SOCIAL AUTH Github
GITHUB_ID=GITHUB_ID_value_here
GITHUB_SECRET=GITHUB_SECRET_value_here

👉 Flask OAuth Гитхаб План — GH фиксирует



github_blueprint = make_github_blueprint(
    client_id=Config.GITHUB_ID,
    client_secret=Config.GITHUB_SECRET,
    scope = 'user',
    storage=SQLAlchemyStorage(
        OAuth,
        db.session,
        user=current_user,
        user_required=False,        
    ),   
)

👉 Flask OAuth Обновление модели пользователей — GH фиксирует

Это обновление позволяет сохранить идентификатор пользователя Github в таблице Users (поле oauth_github) и привязывает таблицу Users к контексту OAuth.



class Users(db.Model, UserMixin):

    id            = db.Column(db.Integer, primary_key=True)
    username      = db.Column(db.String(64), unique=True)
    email         = db.Column(db.String(64), unique=True)
    password      = db.Column(db.LargeBinary) 
    oauth_github  = db.Column(db.String(100), nullable=True)   
    
class OAuth(OAuthConsumerMixin, db.Model):                     
    user_id = db.Column(db.Integer, db.ForeignKey("Users.id")) 
    user = db.relationship(Users)

👉 Flask OAuth Обновить маршруты — GH фиксирует

@blueprint.route("/github")
def login_github(): 

    """ Github login """
    if not github.authorized:
        return redirect(url_for("github.login"))

    res = github.get("/user")
    return redirect(url_for('home_blueprint.index'))

👉 Flask OAuth Зарегистрировать Github BP — GH фиксирует



from apps.authentication.oauth import github_blueprint           

def create_app(config):
    app = Flask(__name__)
    app.config.from_object(config)
    register_extensions(app)
    register_blueprints(app)

    app.register_blueprint(github_blueprint, url_prefix="/login") 

    configure_database(app)
    return app

👉 Flask OAuth Включить кнопку входа в GH — GH фиксирует


{ % if config.SOCIAL_AUTH_GITHUB % }

  <p class="mb-2">or SignIn with</p>

  <a class="btn btn-outline" 
     href="{{url_for('authentication_blueprint.login_github')}}">
  <span class="text-lg fs-1 fab fa-github"></span>
  </a>

{ % endif % }

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

Мягкая информационная панель — OAuth SignIN Active (Flask Starter)

Мягкая панель инструментов — страница диаграмм (Flask Starter)

✨ Особенности дизайна

Этот набор пользовательского интерфейса создан Creative-Тим поверх Bootstrap 5 с 10 образцами страниц и более чем 70 компонентами пользовательского интерфейса. Все компоненты могут иметь разные цвета, которые можно легко изменить с помощью файлов и классов SASS.

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

Для получения дополнительной информации об этом удивительном дизайне, не стесняйтесь обращаться к официальная страница продукта.

Soft UI Dashboard — версия шаблона от (Creative-Tim)