reactjs - register - Autenticación con Passport+Facebook+Express+crear-reaccionar-aplicación+React-Router+proxy

react-google-login

Question

TLDR: ¿Cómo inicio el proceso de autenticación de Facebook desde una página en mi aplicación React?

He encontrado bastantes publicaciones que tocan la mayoría, pero no todas, de los elementos que he enumerado en el título de esta publicación. Y estoy muy cerca de hacer que esto funcione, pero debe haber algo que me esté perdiendo.

Mi aplicación consiste en un front-end de creación-reacción-aplicación que utiliza el enrutador de reacción para el enrutamiento. Tengo esto funcionando en el puerto 51000 en mi entorno de desarrollo. En package.json, estoy usando "proxy" para redirigir otras rutas a mi servidor Express, que se ejecuta en el puerto 51001. Esto funciona en general para realizar solicitudes dentro de mis componentes React que llegan al servidor. Por ejemplo:

axios.get(''/api/some-stuff'')

Al llamar dentro de mi componente React, esto afectará exitosamente a mi servidor Express.

Quiero asegurarme de que mis rutas de back-end estén autenticadas y he elegido usar la autenticación de Facebook a través de pasaporte-facebook. He configurado esto como los muchos tutoriales en línea que he visto. Por ejemplo, tengo una ruta en mi servidor Express llamado ''/ auth / facebook''. Si voy a localhost: 51001 / auth / facebook, me redirecciona a facebook para iniciar sesión, y luego me redirige a la ruta que le di. Así que ese flujo funciona como se espera.

El problema específico que estoy teniendo es hacer que React inicie y complete con éxito la llamada a la API que activa la autenticación. He intentado dos acercamientos.

Enfoque 1: Llamando a la ruta a través de ajax.

Llamé a lo siguiente en mi componentDidMount:

axios.get(''/auth/facebook'')

Esto llega con éxito a mi servidor Express, pero inmediatamente genera el siguiente error en la consola del navegador:

XMLHttpRequest no puede cargar https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http% 2Flocalhost% 3A51000% 2Fauth% 2Ffacebook% 2Fcallback & client_id = XYZ. Redirigir desde '' https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http% 2Flocalhost% 3A51000% 2Fauth% 2Ffacebook% 2Fcallback & client_id = XYZ'' to '' https://www.facebook.com/login.php?skip_api_login=1&api_key=XYZ ... _ & display = page & locale = en_US & logger_id = 7f30b5a1-2ad1-dc31-f08b-70d3cfdd55fa ''ha sido bloqueado por la política de CORS: No'' Access-Control-Allow-Origin ''está en el encabezado de la propiedad. Por lo tanto, el origen '' http: // localhost: 51000 '' no tiene permitido el acceso.

** Enfoque 2: Ir a la ruta en el navegador **

La otra cosa que he intentado, que he visto en todos los tutoriales, es agregar un enlace a una de mis páginas que simplemente navega a la ruta de autenticación. Por ejemplo:

<a href="/auth/facebook">Login with Facebook</a>

Sin embargo, cuando hago clic en esto, acabo en http://localhost:51000/auth/facebook , o simplemente una página en blanco en mi aplicación React. El proxy que tengo no funciona, y no veo ninguna actividad en mi servidor Express cuando voy a esta ruta en el navegador, aunque no sea una Ruta que haya definido en el enrutador de reacción.

Así que estoy un poco atascado aquí. ¿Debería hacer clic en esa etiqueta para que la ruta se dispare contra mi servidor Express? ¿Hay alguna manera de decirle a react-router que ignore ciertas rutas para que sean redirigidas a mi servidor Express? Esto parece funcionar bien cuando se realizan llamadas AJAX, pero si voy a localhost: 51000 / not / a / route, esto no causa que la solicitud sea redirigida a Express. Simplemente carga una página de reacción sin contenido.

Cualquier ayuda es apreciada.

Gracias,

-Dan

EDITAR

Así que ahora tengo este tipo de trabajo funcionando, aunque no estoy seguro de que sea la forma "correcta" de hacer las cosas.

En mi aplicación de reacción (cuya recuperación se está ejecutando en el puerto 51000), tengo el siguiente enlace:

<a href="http://localhost:51001/auth/facebook">Facebook Login</a>

Tenga en cuenta que esto apunta directamente a mi servidor API, no a una ruta de reacción. Navegar a este enlace llega al servidor Express y redirige inmediatamente a Facebook. El inicio de sesión redirecciona de nuevo a mi devolución de llamada de Facebook Express, que a su vez redirige a http://localhost:51000/somePage , que ahora vuelve a mi aplicación de reacción.

Idealmente, esa etiqueta iría a / api / auth / facebook, en lugar de codificada para ir a una URL / puerto diferente. Actualizaré este problema cuando descubra cómo hacer que el enrutador de reacción lo transmita en lugar de tratarlo como una página que necesita cargar.

Editar 2

Estoy abierto a que alguien me diga lo contrario, pero creo que mi enfoque actual es bastante bueno. Consideré cómo se comportarán las cosas en la producción. Tendré mi sitio de reacción en www.example.com, con mi servidor Express accesible a través de api.example.com. Mi enlace al inicio de sesión de Facebook será "api.example.com/auth/facebook". La devolución de llamada, suponiendo que la autenticación sea exitosa, se redireccionará a "www.example.com/some/route". Creo que es razonable desplazarse a la URL "api" para realizar el inicio de sesión. En última instancia, no tiene sentido intentar que el enrutador de reacción ignore ciertas rutas, ya que todas las llamadas de mi API serán a una ruta explícita.

Me doy cuenta de que no estoy proporcionando una solución completa y útil para otros. Una vez que lo tenga todo junto, incluiré un enlace a mi repositorio que contiene este flujo de inicio de sesión, en caso de que alguien más lo encuentre útil.

** EDITAR 3 **

Aquí hay enlaces a mi proyecto. No será trivial hacer que todo el proyecto se ejecute, pero solo hay un puñado de archivos asociados con el flujo de autenticación.

Puede ver el repositorio aquí: https://github.com/dan-goyette/Portfolio

El enrutador del servidor Express para esto está aquí:

https://github.com/dan-goyette/Portfolio/blob/master/portfolio-server/src/Routing/auth.js

En la interfaz de usuario, estoy activando llamadas al servidor Express utilizando este componente:

https://github.com/dan-goyette/Portfolio/blob/75ca9326e6227d0601cdfa4c0cece672bd347302/portfolio-ui/src/Components/SocialMenuButton/SocialMenuButton.js

Puede verlo funcionando en https://www.dan-goyette.com/home , el botón en la parte superior derecha.

Answer 1

Hoy me encontré con el mismo problema y lo resolví al no usar el proxy de create-react-app , sino al configurar un proxy en mi back create-react-app end para la create-react-app .

Al final de mi aplicación express, tengo

 // all routes above

 if (env.isDevelopment()) {
   const proxy = require(''express-http-proxy'')
   app.use(''/*'', proxy(''http://localhost:3000''))
 } else {
   // probably serve up build version in production
 }

Solo recuerda desactivar el proxy en el paquete json de tu cliente, o de lo contrario podrías terminar con un bucle de proxy infinito o algo así.

Answer 2

Puede agregar el servidor localhost de la aplicación create react a la api de la web. Vaya a console.developers.google.com y agregue el localhost create-react-app a los "Orígenes de JavaScript autorizados" y "URI de redireccionamiento autorizados".

Answer 3

Solucioné este problema utilizando el campo "URI de redireccionamiento de OAuth válido" en la configuración de Desarrollador de Facebook para las secciones de productos de inicio de sesión de Facebook, por ejemplo, http://your-domain.loc:5000/auth/facebook .

Y el botón de autenticación de Facebook debe ser:

<a href="http://your-domain.loc:5000/auth/facebook">Login with Facebook</a>

Debes poner ahí tu URL de redireccionamiento de facebook. Una cosa más de mi ejemplo: uso 3000 puertos para el servidor de nodo local y 5000 para la solicitud de API en mi aplicación.

Yo uso /etc/hosts para usar mi dominio, no localhost .

127.0.0.1   your-domain.loc

Funciona para mi.

Además, se está llevando a cabo una discusión adicional sobre el recurso GitHub con el problema: https://github.com/facebook/create-react-app/issues/3502

Answer 4

También me encontré con este problema: cambiar la configuración del proxy CRA parecía hacer el truco:

"proxy": {
   "/api": {
      "target": "http://localhost:3001/"
   }
}

Donde el enlace OAuth se encuentra en /api/auth/foo , la aplicación CRA está en localhost:3000 , y la aplicación rápida está en localhost:3001

Answer 5

EDIT: Mi respuesta anterior no tuvo nada que ver con el problema y no lo resolví. Todo en mi caso fue causado por el registerServiceWorker en index.js generado CLI. Solo quítalo y todo funciona como debería.

//Remove this lines from index.js
import registerServiceWorker from ''./registerServiceWorker''

registerServiceWorker();