Autenticação Passport: como implementar o recurso de autenticação de login com contas do Facebook ou Google nas aplicações em Node.js
Neste tutorial, aprenderemos como implementar autenticação com contas do Facebook ou Google com módulo Passport no Node.js.
Todos nós devemos ter construído um sistema de autenticação simples usando nome de usuário e senha convencionais em nosso aplicativo Node.js. Fornecer aos usuários apenas uma opção para fazer login pode tirar a facilidade de uso de seus usuários.Vamos todos concordar que tendemos a usar recursos (se disponíveis) como “Login com Facebook”, “Login com Google” em vez de se inscrever e gerar um novo nome de usuário/senha.
O processo repetitivo e a configuração de seu perfil para vários aplicativos são demorados, irritantes e frustrantes; além disso, lembrar de nomes de usuário e senhas para todos esses aplicativos torna-se difícil.
Para evitar tal caos, deve-se incluir logins sociais em seus aplicativos. Por causa do OAuth, podemos usar facilmente mídias sociais como Facebook, Twitter e Google para autenticação de usuários.
O que é o PassportJS ?
De acordo com a documentação,
“Passport é um middleware de autenticação para Node.js. Extremamente flexível e modular, um Passport pode ser colocado discretamente em qualquer aplicativo da Web baseado em Express. Um conjunto abrangente de estratégias oferece suporte à autenticação usando um nome de usuário e senha, Facebook, Twitter e muito mais.”
Nota do desenvolvedor – tentei explicar esta postagem do blog da maneira mais fácil possível. Acabei de focar na funcionalidade principal, ou seja, implementar “Login com Facebook ou Google”. No nível de produção, deve-se adicionar muitas outras coisas, como gerenciamento de sessão usando JWT, etc. Não incluí essas coisas aqui por uma questão de simplicidade e compreensão.
Vamos começar com o tutorial de autenticação do PassportJS.
Siga o guia passo a passo para implementar a autenticação do Facebook usando NodeJS e PassportJS. Não se preocupe, no final deste tutorial você poderá implementá-lo sozinho.
Criando conta de desenvolvedor do Google
Para implementar “Login com Google” em qualquer aplicativo da web, você precisará de “id do cliente” e “segredo do cliente”. Esses dois parâmetros garantem uma conexão oAuth segura entre nosso aplicativo Node e o Google. Para obtê-los, você precisará criar uma conta de desenvolvedor do Google.
1. Faça login no Google Cloud Platform e acesse:
- Clique em --> CRIAR PROJETO
- Digite um nome pro seu Projeto e clique em CRIAR:
Obs: Configure sua Tela de permissão OAuth se for seu primeira acesso.
- Nome --> <o que você quiser> ex. Web App
.gif)
- URIs de redirecionamento autorizados --> Adicionar URI --> "http://localhost:3000/auth/google/callback" --> CRIAR
.gif)
4. Agora você obterá seu GOOGLE_CLIENT_ID e GOOGLE_CLIENT_SECRET que serão parecidos com isto:
- Segredo do cliente: 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
- ID do cliente: ...nado2cj7ieb5dafb2pljh6qspp0ip.apps.googleusercontent.com
- Segredo do cliente: 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
- ID do cliente: ...nado2cj7ieb5dafb2pljh6qspp0ip.apps.googleusercontent.com
Criando conta de desenvolvedor do Facebook
Vá para https://developers.facebook.com/ e crie uma nova conta.
Depois de criar uma conta de desenvolvedor do Facebook, você precisará criar um aplicativo de “teste” que fornecerá o ID do aplicativo /cliente e o segredo do aplicativo/cliente .
Além disso, você precisa registrar sua URL, que solicitará a autenticação do Facebook. (Vamos ver isso em detalhes mais tarde).
Depois de criar e fazer login na conta de desenvolvedor do Facebook, você verá a opção “Criar aplicativo”. Clique nessa opção e você verá algo como a imagem mostrada abaixo.
Vá para https://developers.facebook.com/ e crie uma nova conta.
Depois de criar uma conta de desenvolvedor do Facebook, você precisará criar um aplicativo de “teste” que fornecerá o ID do aplicativo /cliente e o segredo do aplicativo/cliente .
Além disso, você precisa registrar sua URL, que solicitará a autenticação do Facebook. (Vamos ver isso em detalhes mais tarde).
Depois de criar e fazer login na conta de desenvolvedor do Facebook, você verá a opção “Criar aplicativo”. Clique nessa opção e você verá algo como a imagem mostrada abaixo.
- Selecione "consumidor" como o tipo de aplicativo.
Mais tarde, preencha todos os outros detalhes necessários. Depois de criar um aplicativo com sucesso, você verá algo assim:
No canto superior esquerdo, você verá o nome do seu aplicativo. Clique nesse menu suspenso e escolha “Criar aplicativo de teste”. Precisamos criar um aplicativo de teste para o mesmo aplicativo que você criou agora para fins de desenvolvimento. Se você quiser usar um aplicativo comum para autenticar solicitações de login, precisará hospedar sua página de política de privacidade em algum domínio. Portanto, apenas para fins de desenvolvimento e depuração, criaremos um aplicativo de “teste” a partir de nosso aplicativo recém-criado.
A estrutura do seu projeto deve ficar assim. Crie todos os arquivos e diretórios mencionados aqui.
- config/passport.js
- app.js
- index.html
Inicializando o npm e instalando dependências
Execute o seguinte comando para inicializar nosso Node Package Manager (npm).
0 npm init -y npm install express --save
npm install mongoose --save
npm install passaport --save
npm install cookie-session --save
npm install passaport-facebook --sav
npm install passport-google-oauth2 --save
Agora é hora de codificar.
No início, vamos configurar um servidor Express básico e executar na porta 3000
Como você pode ver, importamos a biblioteca “passport”, nosso arquivo “passport.js”, e inicializamos o passaporte usando: app.use(passport.initialize());//Importamos as Bibliotecas
var express = require('express');
var app = express();
var passport = require('passport');
require('./config/passport.js');
//Inicializa o Passaporte
app.use(passport.initialize());
app.use(express.json());
app.get('/', function(req, res){
res.sendFile('/index.html');
});
var port = 3000;
app.listen(port, function(){
console.log("Server ouvindo na porta: "+port);
});
Configurar rotas
Vamos definir quatro rotas básicas em nosso aplicativo expresso ( app.js ) . Essas quatro rotas farão todo o trabalho, desde a solicitação de credenciais do Facebook/Google aos usuários até o tratamento das respostas de login. Defina as rotas mostradas abaixo no arquivo app.js antes de estabelecer o servidor( app.listen() )
//Google Auth
app.get('/google' , passport.authenticate('google', {
scope:
[ 'email', 'profile' ]
}));
//Google Auth Callback
app.get( '/google/callback',
passport.authenticate( 'google', {
successRedirect: '/auth/callback/success',
failureRedirect: '/auth/callback/failure'
}));
//Facebook Auth
app.get('/facebook', passport.authenticate('facebook' , {
scope : ['email']
}));
//Facebook Auth Callback
app.get("/facebook/callback",passport.authenticate("facebook", {
successRedirect: '/auth/callback/success',
failureRedirect: '/auth/callback/failure',
session : false
}));
//Success
app.get('/auth/callback/success' , (req , res) => {
res.send("Autenticação feita com Sucesso!");
});
//Failure
app.get('/auth/callback/failure' , (req , res) => {
res.send("Error");
})
1ª. /login
- Ele abrirá a página do Facebook/Google e solicitará ao usuário suas credenciais do Facebook/Google. Usamos o método passaporte.authenticate() . Este método é usado para gerar solicitações de autenticação. Neste método, passamos “Facebook/Google” como o primeiro argumento. Ele define qual “estratégia” usar para solicitações de autenticação. A biblioteca do Passport fornece vários mecanismos de autenticação como “Facebook”, “Google”, “Twitter” etc. Eles chamam isso de “estratégias”.
- Passamos o objeto “scope” como nosso segundo argumento. Ele solicitará acesso às informações de e-mail do usuário.
2ª. /login/callback
- É uma rota de retorno de chamada. Após inserir as credenciais, essa rota será chamada pela estratégia de passaporte. Definimos rotas para respostas bem-sucedidas ( /auth/callback/success ) e falhas ( /auth/callback/failure ).
2ª /auth/callback/failure – Será acionado quando houver uma resposta incorreta.
A estratégia de passaporte é sempre definida em outro arquivo para legibilidade do código.
- Vamos defini-lo em nosso arquivo config/passaport.js.
//Importamos as Bibliotecas
var passport = require('passport');
var GoogleStrategy = require('passport-google-oauth2').Strategy;
var FacebookStrategy = require('passport-facebook').Strategy;
//Estrategia para Google
passport.use(new GoogleStrategy({
clientID:"ID DO CLIENTE",
clientSecret:"SEGREDO DO CLIENTE",
callbackURL:"http://localhost:3000/google/callback",
passReqToCallback:true
},
function(request, accessToken, refreshToken, profile, done) {
return done(null, profile);
}
));
//Estrategia para Facebook
passport.use(new FacebookStrategy(
{
clientID : "ID DO CLIENTE",
clientSecret : "SEGREDO DO CLIENTE",
callbackURL : "http://localhost:3000/facebook/callback",
profileFields: ['id', 'emails', 'link', 'locale', 'name',
'timezone', 'updated_time', 'verified', 'displayName']
},
async function (accessToken, refreshToken, profile, done) {
return done(null, profile);
}
));
passport.serializeUser((user , done) => {
done(null , user);
})
passport.deserializeUser(function(user, done) {
done(null, user);
});
Explicação
- Primeiramente importamos todos os módulos necessários, ou seja, passaporte, passaporte-facebook, passaporte-google, e extraímos o FacebookStrategy & GoogleStrategy do passaporte-facebook/passaporte-google.
- Em seguida, definimos a função passaporte.use(). É a implementação real da nossa funcionalidade de login.
- Ele tem dois argumentos, ou seja, a função FacebookStrategy() & Google Strategy() e uma função callback Verify().
verifique a função de retorno de chamada – O segundo argumento é como o passaporte o chama; um retorno de chamada de verificação. Esta função é invocada internamente quando um usuário é autenticado. Ele recebe accessToken, refreshToken e o perfil do usuário. Este método deve chamar uma função, done() em nosso caso, que indica a conclusão da autenticação.
Página Index
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Login</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
body {
background: #dfe7e9;
font-family: 'Roboto', sans-serif;
}
.form-control {
font-size: 16px;
}
.form-control:focus {
border-color: #5cb85c;
}
.form-control, .btn {
border-radius: 50px;
outline: none !important;
}
.login-form {
width: 400px;
margin: 0 auto;
padding: 30px 0;
}
.login-form form {
border-radius: 5px;
margin-bottom: 20px;
background: #fff;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 40px 50px;
}
.login-form .btn {
font-size: 18px;
line-height: 26px;
font-weight: bold;
text-align: center;
}
.social-btn .btn {
color: #fff;
margin: 10px 0;
font-size: 15px;
border-radius: 50px;
text-indent: 10px;
font-weight: normal;
border: none;
text-align: center;
}
.social-btn .btn:hover {
opacity: 0.9;
}
.social-btn .btn-primary {
background: #507cc0;
}
.social-btn .btn-info {
background: #64ccf1;
}
.social-btn .btn-danger {
background: #df4930;
}
.social-btn .btn i {
margin-right: 9px;
font-size: 20px;
min-width: 25px;
position: relative;
top: 2px;
}
.login-form a {
color: #5cb85c;
}
</style>
</head>
<body>
<div class="login-form" style="margin-top: 15%;">
<form action="" method="">
<div class="text-center social-btn">
<a href="/facebook" class="btn btn-primary btn-lg btn-block"><i class="fa fa-facebook"></i> Sign in with <b>Facebook</b></a>
<a href="/google" class="btn btn-danger btn-lg btn-block"><i class="fa fa-google"></i> Sign in with <b>Google</b></a>
</div>
</form>
</div>
</body>
</html>A parte de codificação é concluída aqui. Agora basta iniciar seu servidor de nó.
- Comando:
Caso ocorra algum erro na autenticação, o usuário será redirecionado para /auth/callback/failure, nosso failureRedirect.
Então, isso foi tudo sobre como implementar o Login do Facebook usando o Passport no aplicativo Node.js. Todo o código fonte está disponível aqui: Autenticação-Passport-Facebook/Google github. Sinta-se à vontade para clonar o repositório e brincar com o código.
0 Comentários