Olá, colegas desenvolvedores! ? Você está pronto para aumentar o nível do seu jogo de autenticação? Hoje, estamos mergulhando no mundo do Google OAuth 2.0 e em como implementá-lo usando Passport.js. Acredite em mim, seus usuários vão agradecer por esta experiência de login tranquila e segura!

Por que o Google OAuth 2.0? ?

Antes de começarmos, vamos falar sobre por que o Google OAuth 2.0 é tão importante:

1. Fácil de usar: Chega de dores de cabeça com "esqueci a senha"!
2. Fort Knox Security: aproveite os protocolos de segurança de alto nível do Google.
3. Trust Booster: os usuários se sentem mais seguros usando suas contas do Google.

Parece bom, certo? Vamos começar!

Etapa 1: Prepare-se! ?️

Primeiro, vamos instalar nossas ferramentas. Abra seu terminal e execute:

npm install passport passport-google-oauth2 express-session

Esses pacotes são seus novos melhores amigos para implementar o Google OAuth 2.0.

Etapa 2: Aventura no Google Developer Console ?️

É hora de configurar seu projeto no Google Developer Console. Aqui está o seu mapa do tesouro:

1. Acesse o Google Developer Console.
2. Crie um novo projeto (dê um nome legal!).
3. Navegue até "APIs e serviços > Credenciais".
4. Clique em "Criar credenciais" e escolha "IDs de cliente OAuth 2.0".
5. Configure sua tela de consentimento (não se esqueça de sorrir para o ícone!).
6. Configure seu ID de cliente OAuth 2.0 (tipo de aplicativo Web).
7. Adicione seu URI de redirecionamento (por exemplo, http://localhost:3000/auth/google/callback).

Dica profissional: mantenha seu ID e segredo do cliente seguros. Eles são como as chaves do seu reino OAuth!

Etapa 3: Magia de configuração do passaporte ✨

Agora, vamos espalhar um pouco da magia do Passport.js em nosso aplicativo:

const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;

passport.use(new GoogleStrategy({
    clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: "http://localhost:3000/auth/google/callback"
  },
  function(accessToken, refreshToken, profile, done) {
    // Your user-saving logic goes here!
    User.findOrCreate({ googleId: profile.id }, function (err, user) {
      return done(err, user);
    });
  }
));

// Don't forget to serialize and deserialize your users!
passport.serializeUser((user, done) => {
  done(null, user.id);
});

passport.deserializeUser((id, done) => {
  User.findById(id, (err, user) => {
    done(err, user);
  });
});

Etapa 4: Caminho para o sucesso ?️

Vamos configurar nossas rodovias de autenticação:

const express = require('express');
const passport = require('passport');
const app = express();

app.use(passport.initialize());
app.use(passport.session());

// The gateway to Google OAuth
app.get('/auth/google',
  passport.authenticate('google', { scope: ['profile', 'email'] })
);

// Welcome back! Handle the callback
app.get('/auth/google/callback',
  passport.authenticate('google', { 
    successRedirect: '/auth/google/success', 
    failureRedirect: '/auth/google/failure' 
  })
);

// Success and failure destinations
app.get('/auth/google/success', (req, res) => { 
  res.send('Welcome aboard! ?'); 
});

app.get('/auth/google/failure', (req, res) => { 
  res.send('Oops! Something went wrong. ?'); 
});

app.listen(3000, () => {
  console.log('Server is up and running! ?');
});

Etapa 5: hora de lançamento! ?

Configure suas variáveis ​​de ambiente (GOOGLE_CLIENT_ID e GOOGLE_CLIENT_SECRET) e você estará pronto para a decolagem!

node app.js

Navegue até http://localhost:3000/auth/google e veja a mágica acontecer!

Concluindo?

E aí está, pessoal! Você acabou de implementar o Google OAuth 2.0 com Passport.js. Seus usuários agora podem fazer login com suas contas do Google, desfrutando de uma experiência segura e contínua.

Lembre-se, isso é apenas o começo. Em um aplicativo de produção, você gostaria de adicionar mais recursos como:

• Tratamento adequado de erros
• Armazenamento de dados do usuário em um banco de dados
• Opções adicionais de autenticação

Você já tentou implementar o OAuth em seus projetos? Que desafios você enfrentou? Deixe sua opinião nos comentários abaixo – adoraria ouvir sobre suas aventuras na terra da autenticação!

Boa codificação e que seus logins sejam sempre tranquilos! ??‍??‍?