One place for hosting & domains

      autenticação

      Como adicionar uma autenticação ao seu aplicativo com o Flask-Login


      Introdução

      Permitir que usuários façam login em seu aplicativo é um dos recursos mais comuns a ser adicionado ao seu aplicativo Web. Este artigo irá abordar como adicionar uma autenticação ao seu aplicativo Flask com o pacote Flask-Login.

      Gif animado do aplicativo Flask e caixa de login

      Construiremos algumas páginas de inscrição e login que permitem que os usuários façam login e acessem páginas protegidas que usuários não autenticados são incapazes de visualizar. Coletaremos informações do modelo de usuário e as exibiremos em nossas páginas protegidas quando o usuário fizer login, de forma a simular como seria um perfil.

      Iremos abordar os seguintes assuntes neste artigo:

      • Como usar a biblioteca Flask-Login para o gerenciamento de sessão
      • Como usar o utilitário integrado do Flask para o hash de senhas
      • Como adicionar páginas protegidas ao nosso aplicativo acessíveis somente por usuários autenticados
      • Como usar o Flask-SQLAlchemy para criar um modelo de usuário
      • Como criar formulários de inscrição e login para que nossos usuários criem contas e façam login
      • Como exibir mensagens de erro aos usuários quando algo der errado
      • Como usar informações da conta do usuário para exibi-las na página do perfil

      O código fonte para este projeto está disponível no GitHub.

      Pré-requisitos

      Para concluir este tutorial, você precisará do seguinte:

      Nosso aplicativo irá utilizar os padrões de fábrica do aplicativo Flask com blueprints. Teremos um blueprint que processa tudo que está relacionado à autenticação e outro para nossas rotas regulares, que incluem o índice e a página de perfil protegida. Em um aplicativo real, é possível desmembrar as funcionalidades da maneira que achar melhor, mas a solução abordada aqui irá funcionar bem para este tutorial.

      Aqui está um diagrama para entendermos melhor como ficará a estrutura de arquivos do seu projeto após completar o tutorial:

      .
      └── flask_auth_app
          └── project
              ├── __init__.py       # setup our app
              ├── auth.py           # the auth routes for our app
              ├── db.sqlite         # our database
              ├── main.py           # the non-auth routes for our app
              ├── models.py         # our user model
              └── templates
                  ├── base.html     # contains common layout and links
                  ├── index.html    # show the home page
                  ├── login.html    # show the login form
                  ├── profile.html  # show the profile page
                  └── signup.html   # show the signup form
      

      À medida que avançarmos neste tutorial, iremos criar esses diretórios e arquivos.

      Passo 1 — Instalando os pacotes

      Existem três pacotes principais que precisamos para o nosso projeto:

      • Flask
      • Flask-Login: para processar as sessões de usuário após a autenticação
      • Flask-SQLAlchemy: para representar o modelo de usuário e interagir com nosso banco de dados

      Iremos utilizar o SQLite para evitar a instalação de dependências extras para o banco de dados.

      Primeiro, começaremos criando o diretório de projeto:

      Em seguida, precisamos navegar até o diretório de projeto:

      Crie um ambiente Python caso não tenha um. Dependendo da forma como o Python foi instalado em sua máquina, seus comandos serão semelhantes a:

      • python3 -m venv auth
      • source auth/bin/activate

      Nota: consulte o tutorial relevante ao seu ambiente de trabalho para configurar o venv.

      Execute os comandos a seguir a partir do seu ambiente virtual para instalar os pacotes necessários:

      • pip install flask flask-sqlalchemy flask-login

      Agora que você instalou os pacotes, tudo está pronto para a criação do arquivo principal do aplicativo.

      Passo 2 — Criando o arquivo principal do aplicativo

      Vamos começar criando um diretório project:

      O primeiro arquivo no qual trabalharemos será o arquivo __init__.py para o nosso projeto:

      Esse arquivo será responsável pela criação do nosso aplicativo, inicializando o banco de dados e registrando nossos blueprints. Neste momento, aparentemente nada irá mudar. No entanto, isso será necessário para o resto do nosso aplicativo. Precisamos inicializar o SQLAlachemy, definir alguns valores de configuração e registrar nossos blueprints aqui.

      project/__init__.py

      from flask import Flask
      from flask_sqlalchemy import SQLAlchemy
      
      # init SQLAlchemy so we can use it later in our models
      db = SQLAlchemy()
      
      def create_app():
          app = Flask(__name__)
      
          app.config['SECRET_KEY'] = 'secret-key-goes-here'
          app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///db.sqlite'
      
          db.init_app(app)
      
          # blueprint for auth routes in our app
          from .auth import auth as auth_blueprint
          app.register_blueprint(auth_blueprint)
      
          # blueprint for non-auth parts of app
          from .main import main as main_blueprint
          app.register_blueprint(main_blueprint)
      
          return app
      

      Agora que temos o arquivo principal do aplicativo, podemos começar a adicionar nossas rotas.

      Passo 3 — Adicionando rotas

      Para nossas rotas, iremos utilizar dois blueprints. Para o nosso blueprint principal, teremos uma página inicial (/) e uma página de perfil (/profile) para depois da sessão ser iniciada. Se o usuário tentar acessar a página de perfil sem estar autenticado, ele será enviado para a rota de login.

      Para o nosso blueprint de autenticação, teremos rotas para recuperar tanto a página de login (/login) quanto a página de inscrição (/sign-up). Também teremos rotas para lidar com as solicitações POST de ambas as rotas. Por fim, teremos uma rota de logoff (/logout) para efetuar o logoff de um usário ativo.

      Por enquanto, iremos definir login, signup e logout com devoluções simples. Iremos revisitá-los em um passo posterior e atualizá-los com a funcionalidade desejada.

      Primeiro, crie o main.py para o seu main_blueprint:

      project/main.py

      from flask import Blueprint
      from . import db
      
      main = Blueprint('main', __name__)
      
      @main.route('/')
      def index():
          return 'Index'
      
      @main.route('/profile')
      def profile():
          return 'Profile'
      

      Em seguida, crie o auth.py para o seu auth_blueprint:

      project/auth.py

      from flask import Blueprint
      from . import db
      
      auth = Blueprint('auth', __name__)
      
      @auth.route('/login')
      def login():
          return 'Login'
      
      @auth.route('/signup')
      def signup():
          return 'Signup'
      
      @auth.route('/logout')
      def logout():
          return 'Logout'
      

      Em um terminal, defina os valores FLASK_APP e FLASK_DEBUG:

      • export FLASK_APP=project
      • export FLASK_DEBUG=1

      A variável de ambiente FLASK_APP instrui o Flask sobre como carregar o aplicativo. Ela deve apontar para o local onde o create_app está localizado. Para o nosso caso, iremos apontar para o diretório project.

      A variável de ambiente FLASK_DEBUG é habilitada quando definida em 1. Isso irá habilitar um depurador que exibirá erros do aplicativo no navegador.

      Certifique-se de estar no diretório flask_auth_app e então execute o projeto:

      Agora, em um navegador, deve ser possível navegar até as cinco URLs possíveis e ver o texto retornado que foi definido em auth.py e main.py.

      Por exemplo, visitar o localhost:5000/profile exibe Profile:

      Captura de tela do projeto em localhost porta 5000 no navegador

      Agora que verificamos que nossas rotas estão se comportando conforme esperado, podemos seguir em frente para a criação de modelos.

      Passo 4 — Criando modelos

      Vamos continuar e criar os modelos usados em nosso aplicativo. Este é o primeiro passo antes de podermos implementar de fato a funcionalidade de login. Nosso aplicativo irá utilizar quatro modelos:

      • index.html
      • profile.html
      • login.html
      • signup.html

      Além disso, teremos um modelo base que terá partes de código comuns a cada uma das páginas. Neste caso, o modelo base terá links de navegação e o layout geral da página. Vamos criá-los agora.

      Primeiro, crie um diretório templates no seu diretório project:

      • mkdir -p project/templates

      Em seguida, crie o base.html:

      • nano project/templates/base.html

      Depois, adicione o código a seguir ao arquivo base.html:

      project/templates/base.html

      <!DOCTYPE html>
      <html>
      
      <head>
          <meta charset="utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Flask Auth Example</title>
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
      </head>
      
      <body>
          <section class="hero is-primary is-fullheight">
      
              <div class="hero-head">
                  <nav class="navbar">
                      <div class="container">
      
                          <div id="navbarMenuHeroA" class="navbar-menu">
                              <div class="navbar-end">
                                  <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("main.index') }}" class="navbar-item">
                                      Home
                                  </a>
                                  <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("main.profile') }}" class="navbar-item">
                                      Profile
                                  </a>
                                  <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("auth.login') }}" class="navbar-item">
                                      Login
                                  </a>
                                  <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("auth.signup') }}" class="navbar-item">
                                      Sign Up
                                  </a>
                                  <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("auth.logout') }}" class="navbar-item">
                                      Logout
                                  </a>
                              </div>
                          </div>
                      </div>
                  </nav>
              </div>
      
              <div class="hero-body">
                  <div class="container has-text-centered">
                     {% block content %}
                     {% endblock %}
                  </div>
              </div>
          </section>
      </body>
      
      </html>
      

      Esse código irá criar uma série de links de menu para cada página do aplicativo e uma área onde o conteúdo irá aparecer.

      Nota: nos bastidores, estamos usando o Bulma para lidar com a estilização e o layout. Para entender mais sobre o Bulma, leia a documentação oficial do Bulma.

      Em seguida, crie o templates/index.html:

      • nano project/templates/index.html

      Adicione o código a seguir ao arquivo recém-criado para adicionar conteúdo à página:

      project/templates/index.html

      {% extends "base.html" %}
      
      {% block content %}
      <h1 class="title">
        Flask Login Example
      </h1>
      <h2 class="subtitle">
        Easy authentication and authorization in Flask.
      </h2>
      {% endblock %}
      

      Esse código irá criar um uma página básica de índice com um título e um subtítulo.

      Em seguida, crie o templates/login.html:

      • nano project/templates/login.html

      Esse código gera uma página de login com campos para E-mail e Senha. Há também uma caixa de seleção para “lembrar” uma sessão iniciada.

      project/templates/login.html

      {% extends "base.html" %}
      
      {% block content %}
      <div class="column is-4 is-offset-4">
          <h3 class="title">Login</h3>
          <div class="box">
              <form method="POST" action="/login">
                  <div class="field">
                      <div class="control">
                          <input class="input is-large" type="email" name="email" placeholder="Your Email" autofocus="">
                      </div>
                  </div>
      
                  <div class="field">
                      <div class="control">
                          <input class="input is-large" type="password" name="password" placeholder="Your Password">
                      </div>
                  </div>
                  <div class="field">
                      <label class="checkbox">
                          <input type="checkbox">
                          Remember me
                      </label>
                  </div>
                  <button class="button is-block is-info is-large is-fullwidth">Login</button>
              </form>
          </div>
      </div>
      {% endblock %}
      

      Em seguida, crie o templates/signup.html:

      • nano project/templates/signup.html

      Adicione o código a seguir para criar uma página de inscrição com campos para e-mail, nome e senha:

      project/templates/signup.html

      {% extends "base.html" %}
      
      {% block content %}
      <div class="column is-4 is-offset-4">
          <h3 class="title">Sign Up</h3>
          <div class="box">
              <form method="POST" action="/signup">
                  <div class="field">
                      <div class="control">
                          <input class="input is-large" type="email" name="email" placeholder="Email" autofocus="">
                      </div>
                  </div>
      
                  <div class="field">
                      <div class="control">
                          <input class="input is-large" type="text" name="name" placeholder="Name" autofocus="">
                      </div>
                  </div>
      
                  <div class="field">
                      <div class="control">
                          <input class="input is-large" type="password" name="password" placeholder="Password">
                      </div>
                  </div>
      
                  <button class="button is-block is-info is-large is-fullwidth">Sign Up</button>
              </form>
          </div>
      </div>
      {% endblock %}
      

      Em seguida, crie o templates/profile.html:

      • nano project/templates/profile.html

      Adicione este código para criar uma página simples com um título embutido em código para dar boas vindas ao Anthony:

      project/templates/profile.html

      {% extends "base.html" %}
      
      {% block content %}
      <h1 class="title">
        Welcome, Anthony!
      </h1>
      {% endblock %}
      

      Posteriormente, iremos adicionar um código para saudar dinamicamente qualquer usuário.

      Assim que os modelos forem adicionados, podemos atualizar as declarações de retorno em cada uma de nossas rotas para que retornem os modelos ao invés do texto.

      Em seguida, atualize o main.py alterando a linha de importação e as rotas para o index e profile:

      project/main.py

      from flask import Blueprint, render_template
      ...
      @main.route('/')
      def index():
          return render_template('index.html')
      
      @main.route('/profile')
      def profile():
          return render_template('profile.html')
      

      Agora, você irá atualizar o auth.py modificando a linha de importação e rotas para login e signup:

      project/auth.py

      from flask import Blueprint, render_template
      ...
      @auth.route('/login')
      def login():
          return render_template('login.html')
      
      @auth.route('/signup')
      def signup():
          return render_template('signup.html')
      

      Assim que as alterações forem feitas, a página de inscrição ficará desta forma, caso navegue até /sign-up:

      Página de inscrição em /signup

      Também deve ser possível ver as páginas para /, /login e /profile.

      Não iremos alterar /logout por enquanto, pois ela não irá exibir um modelo quando for finalizada.

      Passo 5 — Criando modelos de usuário

      Nosso modelo de usuário representa o que significa para o nosso aplicativo ter um usuário. Teremos campos para um endereço de e-mail, senha e nome. Em seu aplicativo, fique a vontade para decidir se quer que mais informações sejam armazenadas por usuário. É possível adicionar coisas como aniversário, imagem de perfil, localização ou qualquer preferência do usuário.

      Os modelos criados no Flask-SQLAlchemy são representados por classes que então se traduzem em tabelas em um banco de dados. Os atributos dessas classes transformam-se então em colunas para essas tabelas.

      Vamos continuar e criar o modelo de usuário:

      Este código cria um modelo de usuário com colunas para um id, email, password e name:

      project/models.py

      from . import db
      
      class User(db.Model):
          id = db.Column(db.Integer, primary_key=True) # primary keys are required by SQLAlchemy
          email = db.Column(db.String(100), unique=True)
          password = db.Column(db.String(100))
          name = db.Column(db.String(1000))
      

      Agora que um modelo de usuário foi criado, continue para a configuração do seu banco de dados.

      Passo 6 — Configurando o banco de dados

      Como mencionado nos pré-requisitos, iremos utilizar um banco de dados SQLite. Poderíamos criar um banco de dados SQLite por conta própria, mas vamos deixar o Flask-SQLAlchemy fazer isso por nós. Nós já temos o caminho do banco de dados especificado no arquivo __init__.py. Portanto, precisamos apenas dizer ao Flask-SQLAlchemy para criar o banco de dados no REPL do Python.

      Se você parar o aplicativo e abrir um REPL do Python, seremos capazes de criar o banco de dados usando o método create_all no objeto db. Certifique-se de que você ainda esteja no ambiente virtual e no diretório flask_auth_app.

      • from project import db, create_app
      • db.create_all(app=create_app()) # pass the create_app result so Flask-SQLAlchemy gets the configuration.

      Nota: caso usar o interpretador do Python seja algo novo para você, consulte a documentação oficial.

      Agora, você verá um arquivo db.sqlite em seu diretório de projeto. Esse banco de dados terá a nossa tabela de usuário em seu interior.

      Passo 7 — Configurando a função de autorização

      Para a nossa função de inscrição, enviaremos os dados que o usuário digita no formulário ao nosso banco de dados. Antes de adicioná-la, precisamos garantir que o usuário não exista no banco de dados. Se ele não existir, então precisamos nos certificar que a senha passará pelo hash antes de colocá-la no banco de dados, pois não queremos que nossas senhas sejam armazenadas em texto simples.

      Vamos começar adicionando uma segunda função para lidar com os dados do formulário POST. Nesta função, coletaremos dados passados pelo usuário primeiro.

      Crie a função e adicione um redirecionamento no final. Isso proporcionará uma experiência de usuário de uma inscrição bem-sucedida e direcionamento à Página de login.

      Atualize o auth.py alterando a linha de importação e implementando o signup_post:

      project/auth.py

      from flask import Blueprint, render_template, redirect, url_for
      ...
      @auth.route('/signup', methods=['POST'])
      def signup_post():
          # code to validate and add user to database goes here
          return redirect(url_for('auth.login'))
      

      Agora, vamos adicionar o resto do código necessário para a inscrição de um usuário.

      Para começar, será necessário usar o objeto de solicitação para obter os dados do formulário.

      Continue atualizando o auth.py adicionando as importações e implementando o signup_post:

      auth.py

      from flask import Blueprint, render_template, redirect, url_for, request
      from werkzeug.security import generate_password_hash, check_password_hash
      from .models import User
      from . import db
      ...
      @auth.route('/signup', methods=['POST'])
      def signup_post():
          email = request.form.get('email')
          name = request.form.get('name')
          password = request.form.get('password')
      
          user = User.query.filter_by(email=email).first() # if this returns a user, then the email already exists in database
      
          if user: # if a user is found, we want to redirect back to signup page so user can try again
              return redirect(url_for('auth.signup'))
      
          # create a new user with the form data. Hash the password so the plaintext version isn't saved.
          new_user = User(email=email, name=name, password=generate_password_hash(password, method='sha256'))
      
          # add the new user to the database
          db.session.add(new_user)
          db.session.commit()
      
          return redirect(url_for('auth.login'))
      

      Nota: armazenar senhas em texto simples é considerada uma prática de segurança ruim. De maneira geral, é vantajoso utilizar um algoritmo de hash complexo e um valor de sal de senha para manter as senhas em segurança.

      Passo 8 — Testando o método de inscrição

      Agora que o método de inscrição está finalizado, devemos ser capazes de criar um novo usuário. Use o formulário para criar um usuário.

      Existem duas maneiras de verificar se a inscrição foi bem-sucedida: usando o visualizador do banco de dados para observar a linha que foi adicionada à sua tabela, ou tentando inscrever-se com o mesmo e-mail novamente e, caso receba um erro, saberá que o primeiro e-mail foi salvo corretamente. Portanto, vamos tomar esta segunda abordagem.

      Podemos adicionar um código para informar ao usuário que o e-mail já existe e pedir para que vá à página de login. Ao chamar a função flash, iremos enviar uma mensagem para a próxima solicitação, que, neste caso, é o redirecionamento. Dessa forma, a página em que chegarmos terá acesso a essa mensagem no modelo.

      Primeiro, adicionamos o flash antes de redirecionarmos o processo de volta à nossa página de inscrição.

      project/auth.py

      from flask import Blueprint, render_template, redirect, url_for, request, flash
      ...
      @auth.route('/signup', methods=['POST'])
      def signup_post():
          ...
          if user: # if a user is found, we want to redirect back to signup page so user can try again
              flash('Email address already exists')
              return redirect(url_for('auth.signup'))
      

      Para o recebimento da mensagem de flash no modelo, podemos adicionar este código acima do formulário. Isso fará com que a mensagem seja exibida diretamente acima do formulário.

      project/templates/signup.html

      ...
      {% with messages = get_flashed_messages() %}
      {% if messages %}
          <div class="notification is-danger">
              {{ messages[0] }}. Go to <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("auth.login') }}">login page</a>.
          </div>
      {% endif %}
      {% endwith %}
      <form method="POST" action="/signup">
      

      Caixa de inscrição exibindo uma mensagem de que o

      Passo 9 — Adicionando o método de login

      O método de login é semelhante à função de inscrição, já que também iremos pegar informações do usuário para fazer algo com elas. Neste caso, iremos analisar o endereço de e-mail inserido para checar se ele está presente no banco de dados. Caso esteja, iremos testar a senha fornecida pelo usuário utilizando o hash na senha passada pelo usuário e comparando-a com a senha já com hash no banco de dados. Sabemos que o usuário digitou a senha correta quando ambas as senhas com hash correspondem.

      Assim que o usuário passar pela checagem de senha, sabemos que ele possui as credenciais corretas e podemos autenticá-los usando o Flask-Login. Ao chamar o login_user, o Flask-Login irá criar uma sessão para aquele usuário que irá persistir enquanto o usuário permanecer conectado. Isso permitirá que o usuário visualize páginas protegidas.

      Podemos começar com uma nova rota para o manuseio dos dados em POST. Redirecionaremos o usuário para a página de perfil quando o login for realizado com sucesso:

      project/auth.py

      ...
      @auth.route('/login', methods=['POST'])
      def login_post():
          # login code goes here
          return redirect(url_for('main.profile'))
      

      Agora, é necessário verificar se o usuário possui as credenciais corretas:

      project/auth.py

      ...
      @auth.route('/login', methods=['POST'])
      def login_post():
          email = request.form.get('email')
          password = request.form.get('password')
          remember = True if request.form.get('remember') else False
      
          user = User.query.filter_by(email=email).first()
      
          # check if the user actually exists
          # take the user-supplied password, hash it, and compare it to the hashed password in the database
          if not user or not check_password_hash(user.password, password):
              flash('Please check your login details and try again.')
              return redirect(url_for('auth.login')) # if the user doesn't exist or password is wrong, reload the page
      
          # if the above check passes, then we know the user has the right credentials
          return redirect(url_for('main.profile'))
      

      Vamos adicionar o bloco de código no modelo para que o usuário possa ver a mensagem em flash. Assim como no formulário de inscrição, vamos adicionar a mensagem de erro em potencial diretamente acima do formulário:

      project/templates/login.html

      ...
      {% with messages = get_flashed_messages() %}
      {% if messages %}
          <div class="notification is-danger">
              {{ messages[0] }}
          </div>
      {% endif %}
      {% endwith %}
      <form method="POST" action="/login">
      

      Agora, somos capazes de dizer que um usuário foi conectado com sucesso, mas não há nada para fazer o login do usuário. É aqui onde trazemos o Flask-Login para o gerenciamento de sessões de usuário.

      Antes de iniciarmos, precisamos de algumas coisas para que o Flask-Login funcione. Comece adicionando o UserMixin ao seu Modelo de usuário. O UserMixin irá adicionar atributos do Flask-Login ao modelo para que o Flask-Login seja capaz de trabalhar com ele.

      models.py

      from flask_login import UserMixin
      from . import db
      
      class User(UserMixin, db.Model):
          id = db.Column(db.Integer, primary_key=True) # primary keys are required by SQLAlchemy
          email = db.Column(db.String(100), unique=True)
          password = db.Column(db.String(100))
          name = db.Column(db.String(1000))
      

      Em seguida, é necessário especificar nosso carregador de usuário. Um carregador de usuário informa ao Flask-Login como encontrar um usuário específico a partir do ID armazenado em seu cookie de sessão. Podemos adicionar isso em nossa função create_app, juntamente com o código init para o Flask-Login:

      project/__init__.py

      ...
      from flask_login import LoginManager
      ...
      def create_app():
          ...
          db.init_app(app)
      
          login_manager = LoginManager()
          login_manager.login_view = 'auth.login'
          login_manager.init_app(app)
      
          from .models import User
      
          @login_manager.user_loader
          def load_user(user_id):
              # since the user_id is just the primary key of our user table, use it in the query for the user
              return User.query.get(int(user_id))
      

      Por fim, adicionamos a função login_user um pouco antes de redirecionarmos o usuário para a página de perfil para criar a sessão:

      project/auth.py

      from flask_login import login_user
      from .models import User
      ...
      @auth.route('/login', methods=['POST'])
      def login_post():
          ...
          # if the above check passes, then we know the user has the right credentials
          login_user(user, remember=remember)
          return redirect(url_for('main.profile'))
      

      Com o Flask-Login configurado, podemos usar a rota /login. Quando tudo estiver no lugar, você verá a página de perfil.

      Página de perfil com

      Passo 10 — Protegendo as páginas

      Se o seu nome não é Anthony, então verá que a mensagem está errada. O que queremos é que o perfil exiba o nome presente no banco de dados. Portanto, primeiro, é necessário proteger a página e então acessar os dados do usuário para obter o seu nome.

      Para proteger uma página ao usar o Flask-Login, adicionamos o decorador @login_requried entre a rota e a função. Isso impede que um usuário que não esteja conectado veja a rota. Se o usuário não estiver conectado, ele será redirecionado para a página de login, conforme a configuração do Flask-Login.

      Com as rotas decoradas com o decorador @login_required, somos capazes de usar o objeto current_user dentro da função. O current_user representa o usuário do banco de dados e podemos acessar todos os atributos desse usuário com uma notação de ponto. Por exemplo, current_user.email, current_user.password, current_user.name e current_user.id irão retornar os valores reais armazenados no banco de dados para o usuário conectado.

      Vamos usar o nome do usuário atual e enviá-lo ao modelo. Em seguida, usaremos esse nome e exibiremos seu valor.

      project/main.py

      from flask_login import login_required, current_user
      ...
      @main.route('/profile')
      @login_required
      def profile():
          return render_template('profile.html', name=current_user.name)
      

      Depois disso, no arquivo profile.html, atualize a página para exibir o valor name:

      project/templates/profile.html

      ...
      <h1 class="title">
        Welcome, {{ name }}!
      </h1>
      

      Ao acessarmos nossa página de perfil, vemos agora que o nome do usuário aparece.

      Página de boas-vindas com o nome do usuário atualmente conectado

      A última coisa que podemos fazer é atualizar a visualização de logoff. Podemos chamar a função logout_user em uma rota para o logoff. Adicionamos o decorador @login_required porque não faz sentido fazer logoff de um usuário que não esteja conectado em primeiro lugar.

      project/auth.py

      from flask_login import login_user, logout_user, login_required
      ...
      @auth.route('/logout')
      @login_required
      def logout():
          logout_user()
          return redirect(url_for('main.index'))
      

      Depois de fazer o logoff, se tentarmos visualizar a página de perfil novamente, vemos que uma mensagem de erro aparece. Isso ocorre porque o Flask-Login exibe uma mensagem quando o usuário não é autorizado a acessar uma página.

      Página de login com uma mensagem mostrando que o usuário deve fazer login para acessar a página

      Uma última coisa que podemos fazer é colocar declarações if nos modelos para que apenas os links relevantes ao usuário sejam exibidos. Assim, antes do usuário fazer login, haverá a opção de fazer login ou se inscrever. Após ter feito o login, é possível ir ao perfil ou fazer logoff:

      templates/base.html

      ...
      <div class="navbar-end">
          <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("main.index') }}" class="navbar-item">
              Home
          </a>
          {% if current_user.is_authenticated %}
          <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("main.profile') }}" class="navbar-item">
              Profile
          </a>
          {% endif %}
          {% if not current_user.is_authenticated %}
          <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("auth.login') }}" class="navbar-item">
              Login
          </a>
          <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("auth.signup') }}" class="navbar-item">
              Sign Up
          </a>
          {% endif %}
          {% if current_user.is_authenticated %}
          <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("auth.logout') }}" class="navbar-item">
              Logout
          </a>
          {% endif %}
      </div>
      

      Página inicial com as opções Home, Login e Sign Up no topo da tela

      Com isso, você terminou de construir seu aplicativo de autenticação com sucesso.

      Conclusão

      Utilizamos neste tutorial o Flask-Login e o Flask-SQLAlchemy para construir um sistema de login para o nosso aplicativo e abordamos como autenticar um usuário. Primeiro, criamos um modelo de usuário e armazenamos suas informações. Em seguida, foi necessário verificar se a senha do usuário estava correta utilizando o hash na senha do formulário e comparando-a com a armazenada no banco de dados. Por fim, adicionamos a autorização ao nosso aplicativo usando o decorador @login_required em uma página de perfil para que apenas usuários conectados possam ver essa página.

      O que criamos neste tutorial será o suficiente para aplicativos menores, mas se você quiser ter mais funcionalidades logo no início, considere usar as bibliotecas Flask-User ou Flask-Security, que são desenvolvidas com base na biblioteca Flask-Login.



      Source link

      Como configurar a autenticação por senha com o Apache no Ubuntu 18.04 [Início Rápido]


      Introdução

      Este tutorial trará um passo a passo sobre como proteger ativos em um servidor Web Apache em execução no Ubuntu 18.04. O cumprimento desses passos dará segurança adicional para seu servidor, de modo que usuários não autorizados não possam acessar certas partes de sua página.

      Para obter uma versão mais detalhada deste tutorial, com explicações mais detalhadas de cada passo, consulte o artigo sobre Como configurar a autenticação por senha com o Apache no Ubuntu 18.04.

      Pré-requisitos

      Para completar este tutorial, você precisará acessar o seguinte em um servidor Ubuntu 18.04:

      • Um usuário sudo no seu servidor

      • Um servidor de Web Apache2

      • Um site protegido com o protocolo SSL

      Passo 1 — Instalar o pacote de utilitários do Apache

      Instalaremos um serviço chamado htpasswd, que faz parte do pacote apache2-utils para gerenciar nomes de usuário e senhas de acesso ao conteúdo restrito.

      • sudo apt-get update
      • sudo apt-get install apache2-utils

      Passo 2 — Criar o arquivo de senha

      Criaremos o primeiro usuário do seguinte modo (substitua o `first_username pelo nome de usuário de sua escolha):

      • sudo htpasswd -c /etc/apache2/.htpasswd first_username

      Será solicitado que forneça e confirme uma senha para o usuário.

      Deixe o argumento -c para quaisquer usuários adicionais que queira adicionar para que você não substitua o arquivo:

      • sudo htpasswd /etc/apache2/.htpasswd another_user

      Passo 3 — Configurar a autenticação por senha do Apache

      Neste passo, precisamos configurar o Apache para verificar esse arquivo, antes de atender nosso conteúdo protegido. Faremos isso usando o arquivo de host virtual do site. Há, porém, outra opção detalhada no tutorial mais longo, caso não tenha acesso ou prefira usar os .htaccess.

      Abra o arquivo de host virtual que deseja adicionar uma restrição com um editor de texto, como o nano:

      • sudo nano /etc/apache2/sites-enabled/default-ssl.conf

      A autenticação é feita com base em cada diretório. Em nosso exemplo, iremos restringir o diretório base inteiro. Entretanto, você poderá alterar essa listagem para atingir um diretório específico, dentro do espaço Web.

      Neste passo, adicione as linhas destacadas no seu arquivo:

      /etc/apache2/sites-enabled/default-ssl.conf

      <VirtualHost *:80>
        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/html
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
      
        <Directory "/var/www/html">
            AuthType Basic
            AuthName "Restricted Content"
            AuthUserFile /etc/apache2/.htpasswd
            Require valid-user
        </Directory>
      </VirtualHost>
      

      Verifique a configuração com o seguinte comando:

      É possível reiniciar o servidor para implementar sua política de senha e, em seguida, verificar o status do seu servidor.

      • sudo systemctl restart apache2
      • sudo systemctl status apache2

      Passo 4 — Confirmar a autenticação por senha

      Para confirmar se o seu conteúdo está protegido, tente acessar seu conteúdo restrito em um navegador Web. Você deve receber um prompt com nome de usuário e senha:

      Prompt de senha do Apache2

      Tutoriais relacionados

      Aqui estão os links para os guias mais, detalhados relacionados a este tutorial:



      Source link

      Como configurar a autenticação por senha com o Apache no Ubuntu 18.04


      Introdução

      Como um administrador Web, pode ser interessante restringir o acesso de visitantes a algumas partes de um site, seja temporária ou permanentemente. Embora os aplicativos Web possam fornecer seus próprios métodos de autenticação e autorização, você também pode confiar no próprio servidor Web para restringir o acesso, se eles forem inadequados ou estiverem indisponíveis.

      Este tutorial traz um passo a passo sobre como proteger ativos com senha em um servidor Web do Apache que executa no Ubuntu 18.04, de modo a proporcionar mais segurança ao seu servidor.

      Pré-requisitos

      Para completar este tutorial, será necessário ter acesso a um servidor Ubuntu 18.04.

      Além disso, você precisará da seguinte configuração antes de começar:

      Quando tudo isso estiver funcionando, faça login no seu servidor como o usuário sudo e continue abaixo.

      Passo 1 — Instalando o pacote de utilitários do Apache

      Vamos começar atualizando nosso servidor e instalando um pacote que precisaremos. Para completar este tutorial, usaremos um utilitário chamado htpasswd, que faz parte do pacote apache2-utils, para criar o arquivo e gerenciar os nomes de usuários e senhas necessários para acessar conteúdo restrito.

      • sudo apt-get update
      • sudo apt-get install apache2-utils

      Com isso instalado, temos agora acesso ao comando htpasswd.

      Passo 2 — Criando o arquivo de senha

      O comando htpasswd nos permitirá criar um arquivo de senha que o Apache poderá usar para autenticar os usuários. Criaremos um arquivo oculto para esse fim, chamado .htpasswd, dentro do nosso diretório de configuração /etc/apache2.

      A primeira vez que usarmos esse utilitário, precisaremos adicionar a opção -c para criar o arquivo passwdfile especificado. Assim, especificamos um nome de usuário (sammy, neste exemplo) – no final do comando – para criar uma nova entrada dentro do arquivo:

      • sudo htpasswd -c /etc/apache2/.htpasswd sammy

      Você será solicitado a fornecer e confirmar uma senha para o usuário.

      Deixe o argumento -c para quaisquer usuários adicionais que queira adicionar para que não substitua o arquivo:

      • sudo htpasswd /etc/apache2/.htpasswd another_user

      Se visualizarmos o conteúdo do arquivo, podemos ver o nome de usuário e a senha criptografada de cada registro:

      • cat /etc/apache2/.htpasswd

      Output

      sammy:$apr1$.0CAabqX$rb8lueIORA/p8UzGPYtGs/ another_user:$apr1$fqH7UG8a$SrUxurp/Atfq6j7GL/VEC1

      Agora, temos nossos usuários e senhas em um formato que o Apache pode ler.

      Passo 3 — Configurando a autenticação por senha do Apache

      Neste passo, precisamos configurar o Apache para verificar esse arquivo antes de atender nosso conteúdo protegido. Podemos fazer isso de duas maneiras: diretamente no arquivo do host virtual de um site, ou colocando os arquivos .htaccess nos diretórios que precisam de restrição. Geralmente, é melhor usar o arquivo de host virtual. Porém, se você precisa permitir que os usuários não raiz gerenciem suas próprias restrições de acesso, verifique as restrições no controle de versão ao longo do site, ou caso já tenha um aplicativo Web que usa os arquivos .htaccess para outros fins, confira a segunda opção.

      Escolha a opção que melhor atenda às suas necessidades.

      Opção 1: configurando o controle de acesso dentro da definição de host Virtual (Preferencial)

      A primeira opção é editar a configuração do Apache e adicionar a proteção por senha ao arquivo do host virtual. De maneira geral, isso irá proporcionar um desempenho melhor, pois evita o custo de ler arquivos de configuração distribuídos. Essa opção exige acesso à configuração – que nem sempre está disponível; porém, quando de fato tiver acesso, é recomendável.

      Comece abrindo o arquivo de host virtual para o qual deseja adicionar uma restrição. No nosso exemplo, estaremos usando o arquivo default-ssl.conf, que contém o host virtual padrão instalado através do pacote Apache do Ubuntu. Abra o arquivo com um editor de texto de linha de comando, como o nano:

      • sudo nano /etc/apache2/sites-enabled/default-ssl.conf

      Ali dentro, com os comentários removidos, o arquivo deverá ficar parecido com este:

      /etc/apache2/sites-enabled/default-ssl.conf

      <VirtualHost *:80>
        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/html
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
      </VirtualHost>
      

      A autenticação é feita com base em cada diretório. Para configurar a autenticação, você precisará selecionar o diretório que deseja restringir com um bloco de <Directory ___>. No nosso exemplo, vamos restringir o diretório base inteiro, mas você pode modificar essa listagem para escolher um diretório específico dentro do espaço Web:

      /etc/apache2/sites-enabled/default-ssl.conf

      <VirtualHost *:80>
        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/html
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
      
        <Directory "/var/www/html">
        </Directory>
      </VirtualHost>
      

      Dentro desse bloco de diretório, especifique que estamos configurando a autenticação Basic (básica). Para o AuthName, escolha um nome de realm que será exibido para o usuário quando for solicitado por credenciais. Use a diretiva AuthUserFile para apontar o Apache para o arquivo de senha que criamos. Por fim, estabeleça como requisito que somente um valid-user poderá acessar esse recurso. Isto significa dizer que, se o usuário puder confirmar sua identidade através de uma senha, ele terá permissão para entrar:

      /etc/apache2/sites-enabled/default-ssl.conf

      <VirtualHost *:80>
        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/html
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
      
        <Directory "/var/www/html">
            AuthType Basic
            AuthName "Restricted Content"
            AuthUserFile /etc/apache2/.htpasswd
            Require valid-user
        </Directory>
      </VirtualHost>
      

      Salve e feche o arquivo quando você terminar. Se estiver usando o nano, você pode fazer isso pressionando CTRL+X seguido de Y e, depois, ENTER.

      Antes de reiniciar o servidor Web, verifique a configuração com o seguinte comando:

      • sudo apache2ctl configtest

      Se tudo estiver correto e você receber um Syntax OK como resultado, reinicie o servidor para implementar sua política de senha. Como o systemctl não mostra o resultado de todos os comandos de gerenciamento de serviços, usaremos o status para ter certeza de que o servidor está em funcionamento:

      • sudo systemctl restart apache2
      • sudo systemctl status apache2

      Agora, o diretório que você especificou deve estar protegido por senha.

      Opção 2: configurando o controle de acesso com arquivos .htaccess

      O Apache pode usar arquivos .htaccess para permitir que certos itens de configuração sejam definidos dentro de um diretório de conteúdo. Como o Apache precisa reler esses arquivos a cada pedido que envolva o diretório – o que pode ter impacto negativo no desempenho, a Opção 1 é preferencia. Porém, se você já estiver usando o arquivo .htaccess ou precisar permitir que usuários não raiz gerenciem restrições, os arquivos .htaccess fazem sentido.

      Para habilitar a proteção por senha usando arquivos .htaccess, abra o arquivo de configuração principal do Apache com um editor de texto de linha de comando, como o nano:

      • sudo nano /etc/apache2/apache2.conf

      Encontre o bloco <Directory> para o diretório /var/www que contém o diretório base. Ative o processamento do .htaccess, modificando a diretiva AllowOverride dentro desse bloco, de None para All:

      /etc/apache2/apache2.conf

      . . .
      
      <Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
      </Directory>
      
      . . .
      

      Salve e feche o arquivo quando você terminar. Se estiver usando o nano, você pode fazer isso pressionando CTRL+X seguido de Y e, depois, ENTER.

      Em seguida, precisamos adicionar um arquivo .htaccess ao diretório que queremos restringir. Em nossa demonstração, vamos restringir o diretório base inteiro (o site inteiro), que fica em /var/www/html, mas você pode colocar esse arquivo em qualquer diretório onde queira restringir o acesso:

      • sudo nano /var/www/html/.htaccess

      Dentro desse arquivo, especifique que queremos configurar a autenticação Basic. Para o AuthName, escolha um nome de realm que será exibido para o usuário quando for solicitado por credenciais. Use a diretiva AuthUserFile para apontar o Apache para o arquivo de senha que criamos. Por fim, vamos exigir um valid-user para acessar esse recurso, o que significa que alguém que consiga confirmar sua identidade com uma senha terá permissão para entrar:

      /var/www/html/.htaccess

      AuthType Basic
      AuthName "Restricted Content"
      AuthUserFile /etc/apache2/.htpasswd
      Require valid-user
      

      Salve e feche o arquivo. Reinicie o servidor Web para proteger com senha todo o conteúdo dentro ou abaixo do diretório com o arquivo .htaccess e use o systemctl status para verificar o sucesso da reinicialização:

      • sudo systemctl restart apache2
      • sudo systemctl status apache2

      O diretório que você especificou deve estar agora protegido por senha.

      Passo 4 — Confirmando a autenticação por senha

      Para confirmar se seu conteúdo está protegido, tente acessar seu conteúdo restrito em um navegador Web. Você deve receber um prompt de usuário e senha que se parece com este:

      Prompt de senha do Apache2

      Se digitar as credenciais corretas, você poderá acessar o conteúdo. Se digitar as credenciais erradas ou clicar em “Cancel” (cancelar), você verá a página de erro “Unauthorized” (não autorizado):

      Erro não autorizado do Apache2

      Conclusão

      Parabéns! Se você acompanhou o tutorial até este ponto, você já pode configuar a autenticação básica para o seu site.

      Há muito mais que pode ser feito com a configuração do Apache e .htaccess. Para aprender mais sobre a flexibilidade e a eficácia que estão disponíveis na configuração do Apache, teste um desses tutoriais:



      Source link