¿Cuál es la mejor práctica para usar Oauth2, React, Node.js y Passport.js para autenticar al usuario con el botón de inicio de sesión de Google?

Encontramos el arreglo a esta dificultad, al menos eso pensamos. Si continuas con preguntas coméntalo y sin pensarlo

Solución:

Su autenticación debe realizarse del lado del servidor. Así es como funciona.

1. haces un fetch o axios llame a su ruta de autenticación.
2. Su ruta de autenticación envía una solicitud a los servidores de autenticación de Google. Es importante tener esto en el backend porque deberá proporcionar su clientSecret. Si almacenara esto en la interfaz, sería muy fácil para alguien encontrar ese valor y comprometer su sitio web.
3. Google autentica al usuario y luego le envía un conjunto de tokens a su URL de devolución de llamada para usar con ese usuario (actualizar, autenticar, etc.). Luego, usaría el token de autenticación para cualquier autorización adicional hasta que caduque.
4. Una vez que expire, usaría el token de actualización para obtener un nuevo token de autorización para ese cliente. Sin embargo, ese es otro proceso.

Aquí hay un ejemplo de cómo se ve eso con Passport.js: https://github.com/jaredhanson/passport-google-oauth2

EDITAR #1:

Aquí hay un ejemplo con comentarios del proceso en uso con Facebook, que es el mismo código base de OAuth: https://github.com/passport/express-4.x-facebook-example/blob/master/server.js

Me enfrenté al mismo problema. Este artículo es enlace de oro

1.En el archivo de ruta de autenticación, tenía el siguiente código

 const CLIENT_HOME_PAGE_URL = "http://localhost:3000";

  // GET  /auth/google
  // called to authenticate using Google-oauth2.0
  router.get('/google', passport.authenticate('google',scope : ['email','profile']));


  // GET  /auth/google/callback
  // Callback route (same as from google console)
   router.get(
    '/google/callback',  
    passport.authenticate("google", 
    successRedirect: CLIENT_HOME_PAGE_URL,
    failureRedirect: "/auth/login/failed"
   )); 

   // GET  /auth/google/callback
  // Rest Point for React to call for user object From google APi
   router.get('/login/success', (req,res)=>
     if (req.user) 
         res.json(
          message : "User Authenticated",
         user : req.user
        )
     
     else res.status(400).json(
       message : "User Not Authenticated",
      user : null
    )
  );

2. En el lado de reacción después de que el usuario haga clic en el botón que llama a /auth/google api anterior

  loginWithGoogle = (ev) => 
    ev.preventDefault();
    window.open("http://localhost:5000/auth/google", "_self");
  

3. Esto redirigirá a la pantalla de autenticación de Google y a /auth/google/callback, que nuevamente redirigirá a la página de inicio de la aplicación de reacción CLIENT_HOME_PAGE_URL

4. En la página de inicio, llame al punto final de descanso para el objeto de usuario

(async () => 
  const request = await fetch("http://localhost:5000/auth/login/success", 
   method: "GET",
   credentials: "include",
   headers: 
    Accept: "application/json",
     "Content-Type": "application/json",
    "Access-Control-Allow-Credentials": true,
  ,
);

const res = await request.json();
   //In my case I stored user object in redux store
   if(request.status == 200)
     //Set User in Store
    store.dispatch(
      type: LOGIN_USER,
      payload : 
        user : res.user
     
    );
  

)();

5. Lo último, agregue el paquete cors y el siguiente código en server.js/index.js en el módulo de nodo

// Cors
app.use(
  cors(
    origin: "http://localhost:3000", // allow to server to accept request from different origin
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
    credentials: true // allow session cookie from browser to pass through
   )
);

Aquí tienes las reseñas y valoraciones

---

---

Utiliza Nuestro Buscador