Ahora que tenemos la parte de la autenticación hecha, sólo tenemos un último problema que resolver.
Las rutas funcionan haciendo clic en los enlaces, pero ¿qué pasa cuando entramos directamente en la ruta en el navegador?
Esto se debe a que el servidor Horizon no conoce las rutas configuradas en React, sólo sirve los archivos que están en el directorio dist.
La solución es integrar Horizonte con un servidor web que redirija todas las solicitudes a index.html. Para esta aplicación, vamos a utilizar Express, pero la integración de otros marcos como Koa o Happi con Horizon es muy similar.
Sin embargo, necesitamos hacer algunos cambios importantes:
- No vamos a iniciar el servidor con hz serve, lo que significa que un servidor RethinkDB no se iniciará automáticamente.
- Cuando se utiliza Horizonte en el lado del cliente, el archivo .hz/config.toml contiene la configuración del marco. Cuando se usa Horizonte en el lado del servidor, necesitamos pasar todas estas configuraciones al servidor cuando lo creamos.
- Debido a esto, necesitaremos configurar el Express para HTTPS
Empecemos por añadir las dependencias que vamos a necesitar a nuestro archivo package.json:
1npminstall --guardar ruta de expreso @horizon/server
bash
Una vez más, puede forzar la instalación de la versión 2.0.0 con:
1npminstall --save @horizon/[email protected]
bash
A continuación, agreguemos un archivo server.js al directorio raíz, importando las bibliotecas que vamos a necesitar y creando el objeto Express:
1234567const express =require("express");const https =require("https");const path =require("path");const fs =require("fs");const horizon =require("@horizon/server");const app =express();javascript
Ahora configure las rutas de los archivos públicos y redirija todas las peticiones a index.html
1234567/// Servir nuestras cosas estáticas como cssapp.use(express.static(path.join(__dirname, "dist"));// Enviar todas las peticiones a index.htmlapp.get("*",function(req, res){ res.sendFile(path.join(__dirname, "dist", "index.html"));});javascript
A continuación, configura el Express para usar HTTPS. Podemos reutilizar nuestros certificados autofirmados:
12345678910111213const options ={ key: fs.readFileSync(path.resolve(__dirname,"./config/tls/horizon-key.pem")), cert: fs.readFileSync( path.resolve(__dirname,"./config/tls/horizon-cert. pem"))};constPORT= process.env.PORT||8181;const server = https.createServer(options, app);server.listen(PORT,function(){console.log("Express server running at localhost: "+PORT);});javascript
Ahora que tenemos un servidor HTTPS, configuramos Horizonte para usarlo. Necesitaremos copiar el token_secret y el ID de cliente de Github y el secreto de cliente del archivo .hz/config.toml:
123456789101112131415const horizonte_servidor =horizon(servidor,{ nombre_del_proyecto: "reaccionar_horizon", permisos:true, auth:{ token_secreto: "NnvpIpep8g9msem6pQHap6g38/wZ0GYQH9/NtXnUTRWlSHT28UtrbAHxxJhi+7673koIJx2Ay5kFX+zHua3fjQ=="}});// Agregar autenticación Github authenticationhorizon_server. add_auth_provider(horizon.auth.github,{ path: "github", id: "2660ef72dc60e109b088", secret: "a844d51e652d74a6760ab71815050cba58a70d88"});javascript
Como pueden ver, el servidor se pasa a Horizonte junto con opciones similares a las definidas en el archivo .hz/config.toml. En el código anterior, establecemos el nombre del proyecto, activamos los permisos (más de esto en un momento), y utilizamos la autenticación por token. Puedes encontrar más información sobre todas las opciones aquí.
Finalmente, usamos el método add_auth_provider para configurar el proveedor de OAuth Github. Si quieres, puedes extraer todos estos datos de configuración a un archivo externo (como un archivo config.js).
Por defecto, Horizonte se conectará a un servidor RethinkDB en localhost:28015. También estamos habilitando los permisos (que en realidad es la opción por defecto).
En esta configuración, Horizon no permite el acceso a las colecciones por defecto, ni siquiera para los usuarios autentificados, lo que significa que no podremos utilizar nuestra colección de mensajes ni obtener el ID de usuario (de la tabla de usuarios).
Para arreglar esto, necesitamos importar manualmente las reglas de permiso a la base de datos que vamos a usar. Si ejecutas este comando:
1hz esquema guardar -n reaccionar_horizonte --iniciar-pensardb si -o esquema.toml
Horizon iniciará el desarrollo del servidor RethinkDB, y extraerá el esquema, las reglas de validación y las especificaciones de la colección y el índice de la aplicación react_horizon (no extraerá los datos de la colección) como un archivo TOML, schema.toml. Esto es lo que contiene este archivo:
12345678910111213# Este es un documento TOML [collections.messages][[collections.messages.indexes]]fields = [["author"]][collections.users][[collections.users.indexes]]fields = [["id"]][groups.admin][groups.admin.rules.carte_blanche]template = "any()"
Como estábamos usando Horizonte en el modo de desarrollo (en el que no se imponen permisos), no se han establecido reglas de permisos, por lo que tendremos que añadir lo siguiente a schema.toml:
12345678[groups.authenticated.rules.read_own_messages]template = "collection($0027messages$0027).findAll({author: userId()})"[groups.authenticated.rules. write_own_messages]template = "collection($0027messages$0027).store({author: userId(), text: any()})"[groups.default.rules.read_current_user]template = "collection($0027users$0027).find({author: userId()})"Puedes aprender sobre las reglas de permiso en esta página, pero lo que hacen las líneas anteriores es permitir al usuario autentificado leer y escribir sus propios mensajes, y leer la tabla de usuarios para obtener los datos por su ID.
Mueve este archivo a config/rethinkdb/schema.toml, una vez más, para mantener las cosas organizadas.
Para importar estas reglas a nuestra nueva base de datos, primero hay que iniciarla (en otra terminal y, preferiblemente, en otro directorio) con:
1rethinkdb
Y luego, ejecute este comando desde el directorio raíz de la aplicación:
1hz esquema apply -n react_horizon -c localhost:28015 config/rethinkdb/schema.toml
Si va a http://localhost:8080/#tables, debería ver las bases de datos importadas:
Y ahora que no usaremos los archivos del directorio .hz y el directorio rethinkdb-data, puedes borrarlos.
Finalmente, cambia el script de inicio en package.json para iniciar el servidor Express en lugar del servidor de desarrollo Horizon:
1234567{ ... "scripts":{"start": "webpack && nodo servidor.js"}, ...}json
Al ejecutar la aplicación (no olvides iniciar también el servidor de RethinkDB), el problema de introducir la URL directamente en el navegador debería estar resuelto:
También puedes probar el resto de la funcionalidad para asegurarte de que todo funciona correctamente.