Como adicionar autenticação de usuário usando o Devise (Bootstrap no Rails 7)

A autenticação do usuário é um recurso de segurança essencial para aplicativos da Web, especialmente aqueles que lidam com dados confidenciais do usuário ou fornecem acesso restrito a determinadas funcionalidades. Ao exigir que os usuários se autentiquem antes de acessar o aplicativo, os desenvolvedores podem garantir que apenas usuários autorizados possam visualizar ou modificar os dados e a funcionalidade do aplicativo.

O que é Devise?

Devise é uma Ruby Gem que fornece autenticação de usuário e recursos de autorização para aplicativos Rails. Ele reduz o processo de adição de funcionalidade de inscrição, login e logout ao seu aplicativo sem ter que escrever tudo do zero.

Possui recursos integrados, como redefinição de senha e confirmação de conta. Ele oferece suporte a várias estratégias de autenticação, como e-mail e senha, OAuth, OpenID e muito mais.

O Devise possui uma documentação detalhada que abrange recursos básicos e avançados.

Neste tutorial, construiremos um aplicativo rails simples com o Devise que permite aos usuários criar contas, entrar e sair de suas contas. Também abordaremos como adicionar estilo ao aplicativo usando o Bootstrap.

Pré-requisitos

Antes de iniciar este tutorial, você deve ter um bom entendimento dos fundamentos de Ruby e Rails. Além disso, você deve ter o seguinte software instalado em seu computador:

• Ruby: Se você não instalou o Ruby em sua máquina, você pode baixar a versão mais recente do site oficial Site Ruby .
• Ruby on Rails: você deve configurar seu ambiente de desenvolvimento local seguindo os trilhos guia.
• Node.js: Instalar Node.js para gerenciar o pipeline de ativos e executar o código JavaScript.
• Fio
• SQLite3
• Um editor de texto como o Visual Studio Code
• Um navegador como o Google Chrome

Também abordaremos como usar o Bootstrap no Rails 7 posteriormente no tutorial.

Etapa 1: criar um novo aplicativo Rails

• Para criar um novo aplicativo rails, abra um terminal em seu diretório preferido e execute o comando:

 rails new authApp

Isso irá gerar um novo aplicativo Rails chamado authApp em um diretório authApp . Abra este diretório em seu editor de texto preferido.

• Navegue até o diretório do aplicativo digitando: cd authApp
• Em seu terminal, inicie seu servidor Rails executando: rails server
• Abra http://127.0.0.1:3000/ em seu navegador para acessar a página de boas-vindas do Rails.

Etapa 2: criar uma página de destino

• Gere um novo controlador que tratará a solicitação para o caminho raiz usando o comando: $rails generate controller home index

  Isso cria um novo controlador chamado `Home` com uma ação `index`.

• Adicione o caminho raiz ao arquivo routes.rb na pasta 'config' adicionando a seguinte linha: root 'home#index'

• No diretório app/views/home , você encontrará um novo arquivo chamado index.html.erb . Essa exibição conterá o código HTML da sua página de destino.

• Reinicie o servidor e verifique o host local em seu navegador da web para visualizar sua página inicial recém-criada.

Passo 3: Instale e configure o Bootstrap

• Nesta seção, usaremos import maps , que carregam JS. Primeiro, verifique se você tem mapas de importação instalados executando cat config/importmap.rb . Caso contrário, execute rails importmap:install
• Em seguida, adicione Bootstrap 5 JS ao Rails por meio de mapas de importação: $ bin/importmap pin bootstrap . Isso adiciona JS, bootstrap e popperjs a config/importmap.rb .
• Importe o Bootstrap em app/javascript/application.js usando import 'bootstrap'; .
• Adicione gem 'bootstrap', '~> 5.1.3' ao seu Gemfile e execute bundle install .
• Em app/assets/stylesheets/application.css , importe Bootstrap usando @import "bootstrap"; e renomeie o arquivo para application.scss .
• Verifique se o arquivo app/views/layouts/application.html.erb contém:

 <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_importmap_tags %>

• Adicione estilos como preferir em seu arquivo app/views/home/index.html.rb .
• Recarregue o servidor e veja as alterações.

Etapa 4: Instalar e configurar o Devise

• Navegue até o Gemfile e adicione a gem Devise usando o comando:

  gem 'devise', github: 'heartcombo/devise', branch: 'main'

• Execute bundle install para instalar o Devise.

• Execute rails g devise:install para configurar o Devise em seu projeto. Isso gera vários arquivos iniciais para o Devise e fornece instruções no terminal.

• Descomente a linha config.navigational_formats = ['*/*', :html, :turbo_stream] no arquivo devise.rb . Isso adiciona turbo_stream como um formato de navegação, que é necessário para o Devise 4.9.2 funcionar com o Rails 7. Deixar de fazer isso resultará em um erro undefined method user_url .

• Abra app/layouts/applications.html.erb e adicione as seguintes linhas para aviso e mensagens de alerta:

 <p class="notice"><%= notice %></p> <p class="alert"><%= alert %></p>

Etapa 5: Criando um modelo de usuário com o Devise

• Para criar um modelo de usuário com o Devise, execute rails g devise user no terminal. Isso gerará os arquivos necessários e a configuração necessária para implementar a autenticação do usuário.

• Crie a tabela user executando o comando migration: rails db:migrate .

• Reinicie o servidor para carregar o novo arquivo inicializador do Devise e configure tudo para que a autenticação do usuário funcione.

• Vá para http://localhost:3000/users/sign_up em seu navegador para acessar o formulário de inscrição para criar uma conta inserindo um e-mail e senha.

  
  

• Navegue até o arquivo index.html.erb e adicione as seguintes linhas de código:

 <% if user_signed_in? %> <p>Welcome, <%= current_user.email %>!</p> <%= link_to "Sign out", destroy_user_session_path, method: :delete %> <% else %> <%= link_to "Sign in", new_user_session_path %> <% end %>

Essas linhas criam links de inscrição, entrada e saída para seu aplicativo. user_signed_in é um método auxiliar fornecido pelo Devise que retorna true se o usuário atual estiver conectado e false caso contrário.

• Atualize sua página no navegador para revisar as alterações.

• Para revisar as alterações, basta atualizar a página em seu navegador. Se você ainda não fez login, haverá um botão de login visível na tela. Clique nele e conclua o processo de registro. Depois de se inscrever com sucesso, você será direcionado para a página inicial, onde poderá visualizar o endereço de e-mail do usuário conectado no momento, uma mensagem de boas-vindas e um botão de sair.

  
  

Ao seguir essas etapas, você integrou com sucesso a gem Devise e configurou a autenticação do usuário para seu aplicativo.

Conclusão

Neste tutorial, usamos o Devise para adicionar autenticação de usuário ao nosso aplicativo Rails. Desenvolvemos um aplicativo onde os usuários podem criar contas, cadastrar e sair. Também integramos o Bootstrap para melhorar a aparência do projeto. Para expandir seu conhecimento sobre o Devise e explorar outros métodos e auxiliares, consulte o arquivo README no repositório GitHub do Devise.