Dominio de la autenticación de API web con Parse – SDK Javascript y versiones GraphQL

Muchas aplicaciones, especialmente los sitios web, necesitan restringir el acceso a su contenido, y tener cuentas de usuario que muestren sólo la información relevante para ese usuario de una manera segura es la forma más popular de lograrlo.

Hoy aprenderemos como implementar la funcionalidad de Login a una página HTML ya existente, escribiendo muy poco código y teniendo a Parse haciendo todo el trabajo pesado por ti, y para hacerlo, elegí la plantilla Login Form que puedes descargar gratuitamente.

Vamos a utilizar dos tecnologías distintas que usted puede elegir: el SDK Javascript y GraphQL a través de Javascript.

GraphQL es nuestra nueva y brillante tecnología que acaba de ser lanzada y mi objetivo es comparar ambas formas de hacer lo mismo, para que puedas elegir la que más te guste.
¡ALERTA DE SPOILER! Estoy seguro de que te gustará más GraphQL…

Que ya tiene todo lo necesario para mostrar visualmente el archivo pero le falta funcionalidad, que iremos añadiendo.

Si quieres saber más sobre GraphQL echa un vistazo a este post: Qué es GraphQL

Este será un artículo bastante extenso, así que déjame mostrarte lo que aprenderás exactamente, por capítulos:

1. Configurar tu Alojamiento Web en Back4app
2. Habilitar el uso de GraphQL
3. Desplegar tu primer sitio web
4. Crear su primer archivo Javascript
5. Incrustar el SDK de Parse
6. Configure e instale el SDK en su código
7. Añadir usuarios gráficamente
8. Utilizar el SDK Javascript para dar de alta un usuario
9. Pruebe el registro con su sitio web (valores codificados)
10. Escribir código para leer formularios y aplicar a su código Javascript
11. Pruebe el registro con su sitio web (valores dinámicos)
12. Cree el proceso de inicio de sesión con el SDK de Javascript
13. Pruebe el inicio de sesión con su sitio web (valores dinámicos)
14. Conclusión de la parte Javascript SDK
15. Introducción a GraphQL
16. Qué necesitará para usar GraphQL
17. Instalación de las herramientas que necesitará
18. Una explicación rápida de cómo generaremos código para el frontend
19. Uso de módulos NPM en tu código NodeJS
20. Introducción a las consultas y mutaciones en GraphQL
21. Consultas
22. Mutaciones
23. Crea tu propio método GraphQL SingUp
24. Crea tu propio método GraphQL LogIn
25. Utiliza Browserify para convertir tu código NodeJS en código compatible con frontend
26. Incluye ese código en tu archivo HTML
27. Codifica funciones Javascript para llamar al código generado por Browserify
28. Prueba tu GraphQL SignUp y Login
29. Conclusión de la parte GraphQL

1. Primeros Pasos

El primer paso es crear tu App en Back4app si aún no tienes una. Puedes revisar los pasos para crear una usando este doc.

Este paso es común para ambas tecnologías así que independientemente de la que elijas, tendrás que hacer esto.

Después de crear nuestra App, necesitamos configurar la característica de Web Hosting. Sí. Puedes alojar tus sitios web con contenido estático en Back4app de forma gratuita. Genial ¿no?

Después de tener su App creada, vaya a Configuración del Servidor:

Y debajo de Web Hosting y Live Query, haz click en Settings:

Ahora activa Back4app Hosting y elige un buen nombre de dominio para tu aplicación. Puedes acceder directamente a ese dominio dentro de back4app.io, o puedes crear un registro CNAME en tu DNS apuntando a ese dominio si lo deseas:

Ahora estás listo para comenzar a desplegar algo de código.

2. ¿Qué tal GraphQL?

Si desea utilizar GraphQL, hay otro paso a seguir. Si planeas usar sólo el SDK de Javascript, puedes usar cualquier versión de Parse, pero ¿por qué no usar la última y mejor?

Ve a Configuración del Servidor:

Y en Configuración en Administrar Parse Server:

Elige una versión que sea superior a 3.5.0. En Back4app usé 3.6.0:

¡Ahora usted debe tener GraphQL habilitado y estamos listos para ir!
Ah, para que lo sepas, puedes usar GraphQL y SDKs en la misma aplicación. No hay necesidad de elegir.

Si sólo estás interesado en GraphQL, puedes desplazarte hasta el capítulo 15 de este tutorial ahora.

3. Desplegando tu primer sitio web

Ahora que hemos configurado la función de Alojamiento Web, podemos desplegar nuestro sitio web.
Este paso también es común para ambas tecnologías.
Todavía no tendrá ninguna funcionalidad, pero sienta bien verlo funcionando por primera vez, así que vamos a hacerlo.

Ve a Configuración del servidor una vez más:

Y ahora elija Configuración en Código de Nube:

Allí encontrarás dos carpetas: Cloud y Public.

Cloud es para desplegar Cloud Code, que es código NodeJS que corre desde los servidores de Back4app, haciendo toda la carga pesada de procesamiento para tus aplicaciones y trayendo muchas ventajas como ahorro de batería y plan de datos en celulares, ya que el celular mismo no tendrá que procesar mucho ni recuperar una carga completa de datos, confiando sólo en el resultado final del procesamiento, entregado por los servidores de Back4app.

La pública es para desplegar contenido estático como HTML, CSS y archivos Javascript estáticos. Este es el que nos interesa en este momento.
Seleccione esa carpeta y haga clic en el botón +ADD de arriba, y agregue los archivos HTML y CSS para nuestra plantilla que descargó del sitio web en el primer capítulo.

Después de seleccionar esos archivos, pulsa el botón Deploy y deberías ver los archivos en la carpeta Public:

Y ahora es el momento de hacer algunas pruebas.
Si le das a la URL que estableciste en Web Hosting , deberías ver que tu nuevo y reluciente sitio web ya está funcionando totalmente gratis:

4. Un poco de inteligencia

Un nuevo sitio web de lujo brillante está en marcha y que nos tomó lo que? 2 minutos? Vaya si es gratis, Internet.
¿Y te he dicho que es totalmente seguro y tiene HTTPS ya incorporado? Porque no vamos a pagar por certificados cuando Back4app nos los da gratis, ¿verdad?

Ahora es el momento de poner un poco de inteligencia en eso. ¿Y qué tal si hacemos que sólo nos lleve otros 2 minutos? Me gusta inteligente y me gusta rápido.

Pon en marcha tu IDE favorito y pongamos algo de Javascript. Visual Studio Code para mí, por favor. Y un espresso con él.

A partir de ahora me centraré sólo en Javascript SDK, y más adelante, sólo en GraphQL.

Crear un nuevo archivo llamado Parse.js y estamos listos para ir.

5. Añadiendo el Framework Parse

(Sólo Javascript SDK)

Parse hace que sea reeee..(respira)..eeeealmente fácil desplegar sus frameworks. Primero tienes que instanciar el framework Javascript añadiendo la siguiente línea en la sección Head de tu archivo index.html:

<script src="https://npmcdn.com/parse/dist/parse.min.js"></script>

Ahora se puede acceder al framework completo de Parse (minificado) desde tu código Javascript y podemos utilizar todo lo que hay en él.

6. Encendiendo los motores Parse

(Sólo Javascript SDK)

Ahora ya tenemos acceso al framework Parse, pero necesitamos encenderlo antes de darle al acelerador.

Tenemos que identificar nuestra aplicación a Parse y la forma de hacerlo es establecer el AppId y Javascript Key para nuestra aplicación, junto con la URL del servidor que le dice a nuestra aplicación que se está ejecutando en Back4app.

Para ello, vaya a Configuración del servidor

y en Configuración bajo Configuración del Núcleo:

encontrarás toda la información que necesitas:

Copiamos esa información y la pegamos en nuestro archivo Parse.js de la siguiente manera:

Parse.initialize("YourAppIdHere", "YourJavascriptKeyHere");
Parse.serverURL = 'YourParseAPIAddressHere'

Parse.initialize("5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH", "SchM9sm5W6TpPBr8zyHOwOYAGyPTYf66qxSUCsvE");
Parse.serverURL = 'https://parseapi.back4app.com/';

Ahora nuestra aplicación tiene acceso completo a Parse y Parse conoce nuestra configuración para que pueda funcionar.
Greenlight. ¡A toda máquina!

7. Pero sólo tengo unos pocos usuarios…

Si tu aplicación no necesita que los usuarios se registren y prefieres gestionarlos manualmente, puedes obtener la clase Usuario en el Navegador de Base de Datos del Panel de Parse, pulsando el botón Añadir una Fila:

Pero siendo realistas, es probable que tu aplicación crezca con el tiempo y que los usuarios puedan registrarse ellos mismos en el sistema será de gran ayuda.

8. ¿No hay usuarios? ¡No hay problema! ¡SignUp() al rescate!

(Sólo SDK Javascript)

Al principio, tu aplicación no tendrá ningún usuario en ella, así que debemos proporcionar una forma para que los usuarios se registren.

Nuestro sitio web ya tiene un bonito formulario para ello. Vamos a hacerlo funcionar, ¿de acuerdo?
¿Y si te dijera que podemos hacerlo con menos de 12 líneas de código? ¿Te parece mejor?

La clase Parse.User tiene tres propiedades básicas que puedes establecer. Puedes establecer más si quieres o necesitas, pero estas tres ya están creadas por conveniencia y dos de esas tres son obligatorias:

• nombre de usuario (obligatorio)
• contraseña (obligatoria)
• correo electrónico (opcional)

Vamos a añadir un usuario de prueba a nuestra base de datos sólo para comprobar el funcionamiento. Añade esto a tu archivo Parse.js:

function singnUp(){
    var user = nuevo Parse.User();
    user.set("username", "alex"); // establece el valor del formulario Username a la propiedad username
    user.set("password", "abc123"); // establece el valor del formulario Password en la propiedad password
    user.set("email", "[email protected]"); // asigna el valor del formulario Email a la propiedad email
    try {
        user.signUp(); // Todo ha funcionado y el usuario ha iniciado sesión
    } catch (error) {
        alert("Error: " + error.code + " " + error.message); // Oops.. algo malo ha pasado
    }
}

Esto creará un nuevo usuario con valores hardcoded:

nombre de usuario: alexk
contraseña: abc123
correo electrónico: [email protected]

Aprenderemos cómo recuperar esos valores del formulario más adelante en este artículo, pero para este usuario de prueba, esto servirá.

Ahora abre tu archivo index.html y busca esta línea:

<input type="submit" class="button" value="Regístrate">

Y cámbialo por esto:

<input type="submit" class="button" value="Regístrate" onclick="singnUp()">

Básicamente lo que hicimos aquí es establecer un evento onClick para disparar la función signUp que acabamos de codificar.

Despliega ambos archivos en la carpeta pública de Cloud Code (el nuevo archivo Parse.js y también el archivo index.html modificado) como aprendiste anteriormente y vuelve a abrir el sitio web en tu navegador.

9. Probando… Probando… 123…

Es hora de probar. Deja que el código hable por sí solo.

Ve a la sección de Registro y no tienes que rellenar nada ya que no estamos pasando datos reales, sólo una prueba hardcoded, y haz clic en el botón de Registro:

y si todo ha funcionado bien, deberías ver en tu Parse Dashboard que ahora tienes ese usuario junto con una nueva Sesión para el usuario:

10. ¡Hurra! Ahora hagámoslo más inteligente…

(Javascript SDK & GraphQL)

Ahora que podemos dar de alta usuarios, vamos a hacer la función signUp completamente operativa.
Necesitaremos leer los valores del formulario para insertarlos en la base de datos y para ello utilizaremos el método javascript:

document.getElementById("idOfTheInput").value

Mientras escribía este artículo descubrí que la plantilla que utilizamos tiene un pequeño problema. Los IDs deben ser únicos para que podamos recuperar los valores correctos, y nuestra plantilla tiene algunos repetidos, probablemente debido a copiar y pegar código por el creador, así que vamos a cambiar eso.

Ve a tu archivo HTML y encuentra las siguientes líneas en la sección sign-up-htm:

<input id="user" type="text" class="input">
<input id="pass" type="password" class="input" data-type="password">
<input id="pass" type="password" class="input" data-type="password">
<input id="pass" type="text" class="input">

Observa que el atributo id de esas líneas se repite unas cuantas veces a lo largo del código. Cambiémoslo por unas únicas:

<input id="username" type="text" class="input">
<input id="password" type="password" class="input" data-type="password">
<input id="passwordverify" type="password" class="input" data-type="password">
<input id="email" type="text" class="input">

    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var passwordverify = document.getElementById("passwordverify").value;
    var email = document.getElementById("email").value;

    if (password !== passwordverify){
        alert ('Las contraseñas no coinciden')
        return;
    }

    user.set("username", "alexk"); // establece el valor del formulario Username a la propiedad username
    user.set("password", "abc123"); // asigna el valor del formulario Password a la propiedad password
    user.set("email", "[email protected]"); // asigna el valor del formulario Email a la propiedad email

    user.set("username", alexl); // establece el valor del formulario Username a la propiedad username
    user.set("password", password); // establece el valor del formulario Password a la propiedad password
    user.set("email", email); // asigna el valor del formulario Email a la propiedad email

11. Hora de probar otra vez. Ahora en serio.

12. Es hora de iniciar sesión.

(Sólo Javascript SDK)

function logIn(){
    var user = document.getElementById("user").value;
    var pass = document.getElementById("pass").value;
}

Parse.User.logIn(user, pass).then(() => {
    // ¡Hurra! Usuario conectado
    alert('¡Hurra! Usuario logueado!');
});

Parse.User.logIn(user, pass).then(() => {
    // ¡Hurra! Usuario logueado
    alert('¡Hurra! Usuario conectado!');
}).catch(function(error){
    // Oops.. ha pasado algo malo
    alert("Error: " + error.code + " " + error.message);
});

13. Y noooow….

14. Conclusión de la parte del SDK Javascript

15. Deja que GraphQL entre

Si te emocionaste con el SDK de Javascript, ahora coge palomitas porque el espectáculo está a punto de empezar.

Back4app ahora soporta GraphQL, lo que significa que nos mantenemos al día con la última y más grande tendencia de la tecnología de moda, ¡y ahora Parse es más inteligente que nunca!

Puedes contar con un GraphQL Playground completamente funcional con autocompletado (¡¡¡sí!!!) para generar las consultas que haremos.

Además, podemos especificar exactamente lo que queremos recuperar, lo que se traduce en cargas útiles más pequeñas, haciendo su entrega de datos más rápida a los usuarios finales y APIs taaaan más fáciles de mantener en el tiempo.

De acuerdo. Basta de hablar. GraphQL es tan impresionante que si no me detengo, seguiré escribiendo sobre él y sin mostrar cómo usarlo.

16. Lo que necesitaremos

(Sólo GraphQL)

Si no has cambiado tu versión de Parse al menos a la 3.5.0 (la 3.6.0 de Back4app es la primera que soporta GraphQL), ve hasta la sección 2 de este artículo y hazlo.

Necesitaremos NPM instalado para poder usar sus módulos.
Esos módulos están escritos en NodeJS e inicialmente diseñados para programación backend, así que tendremos que cambiar eso.
No voy a mostrar cómo instalar NPM, ya que el tutorial en el sitio web de arriba cubre eso bastante extensamente.
Sin embargo, te mostraré cómo usarlos para que podamos ahorrar mucho esfuerzo al codificar.

¿Preparado? Pues instala esas herramientas, abróchate los cinturones y ¡adelante!

17. Instalar el cliente GraphQL y Browserify

(Sólo GraphQL)

GraphQL tiene unos cuantos clientes disponibles para que los utilices. Como no podía elegir uno (porque todos son bastante buenos), decidí ir por el más fácil de configurar en este primer tutorial, y usar los otros en los siguientes tutoriales para que podamos compararlos.

Encontré que el más fácil de configurar es graphql-request, que puedes instalar abriendo una terminal, yendo a la carpeta de nuestro Parse.js está en y escribiendo:

npm install graphql-request

Si la instalación tiene éxito, deberías tener algo como esto:

También podemos instalar una herramienta llamada Browserify.
Browserify hace la transición de los módulos NPM para ser utilizados en el front-end (tu navegador). ¿Recuerdas cuando dije que los módulos NPM están inicialmente diseñados para su uso en el backend? Esta herramienta lo hará disponible en el frontend con el mínimo esfuerzo.
Me gusta instalarlo globalmente (la clave -g) para poder usarlo desde cualquier lugar:

npm install -g browserify

Y de nuevo si todo funciona bien, deberías tener algo como esto:

Ahora tenemos nuestro cliente GraphQL instalado y podemos convertirlo para usarlo en el frontend. Tardamos 2 minutos en hacerlo, así que avanzamos rápido.

18. ¿Cómo va a funcionar esto exactamente?

(Sólo GraphQL)

Básicamente, vamos a

1. Escribir algo de código NodeJS utilizando los módulos NPM
2. Convertirlo en código compatible con el frontend usando Browserify
3. Exportar ese código para que podamos llamarlo desde otros archivos
4. Llamar a ese código desde nuestro código Javascript

El comando para browserify es:

browserify inputFile.js -o outputFile.js

El outputFile.js contendrá nuestro código compatible con el frontend, así que vamos a hilar fino, crear nuestro inputFile.js, y abrirlo en nuestro IDE favorito.

19. Algo de código NodeJS

(sólo GraphQL)

Empezaremos añadiendo nuestro módulo NPM a nuestro código requiriéndolo.

const { GraphQLClient } = require('graphql-request');

Y crearemos una exportación global con el nombre que usaremos para llamar a nuestra función, en este caso, signUp:

global.singUp = function() {

}

Con eso, podemos empezar a añadir código a nuestra función singUp.
Empecemos añadiendo la URL de nuestro endpoint, que puedes recuperar desde tu GraphQL Playground:

const endpoint = 'https://parseapi.back4app.com/graphql';

Y como necesitamos autenticarnos, instanciamos nuestro cliente GraphQL pasando esa URL como parámetro, junto con las cabeceras de autenticación: X-Parse-Application-ID y X-Parse-Javascript-Key. Estas tendrán el AppId y la Javascript Key que aprendiste a recuperar en el paso 6.

const { GraphQLClient } = require('graphql-request')

global.singUp = function() {
    constendpoint='https://parseapi.back4app.com/graphql';
    
    constgraphQLClient=nuevoGraphQLClient(endpoint, {
        cabeceras: {
            "X-Parse-Application-Id": "5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH",
            "X-Parse-Javascript-Key": "pLuH6zKGl8thmIJfWFjvXll4B2YTAnlhlpAGVuoq"
        },
    });
}

Ahora nos toca escribir algunas consultas y mutaciones GraphQL.

20. Consultas y Mutaciones, Genéricas o Específicas

(Sólo GraphQL)

En el momento de escribir este documento, Back4app y Parse trabajan con Queries y Mutations. Nuevos métodos pueden ser desarrollados con el tiempo, pero vamos a discutir estos dos.

Las consultas se utilizan cuando sólo se recuperan datos del servidor.

Las mutaciones se utilizan cuando usted está cambiando los datos en el servidor, que puede o no también recuperar los resultados.

Entonces, si sólo estás consumiendo información, deberías usar una Consulta, y si estás agregando o cambiando información, deberías usar una Mutación.

Empezaremos con un simple Query y evolucionaremos a mutaciones después.

Mientras hablamos de eso, tenemos métodos Específicos y Genéricos en GraphQL, cada uno con sus propias ventajas y desventajas.

Los métodos Genéricos te permiten operar en cualquier clase. Si estás haciendo una consulta genérica por ejemplo, puedes recuperar datos especificando la clase que quieres. Esto es genial porque puedes usar la misma sintaxis para casi todo, y cuando usas Mutaciones, puedes crear clases y objetos que al principio no existen.

El inconveniente es que como no tienes Esquemas para los métodos Genéricos, no puedes confiar en Autocompletar así que debes saber lo que estás haciendo.
Ejemplos de métodos genéricos get y find.
Las Mutaciones Genéricas son actualizar, borrar o crear.

Los métodos Específicos, por otro lado, tienen Esquemas por lo que sólo pueden ser utilizados por Clases que son preexistentes. Este es el inconveniente.
Pero el uso de métodos Específicos trae otro nivel de maravilla, permitiéndonos contar con Autocompletar y tener recursos mucho más poderosos para recuperar nuestros datos.
Las consultas específicas comenzarán con get y find, y tendrán el nombre de la clase justo al lado: findPerson, getPerson y así sucesivamente.
Las consultas específicas empezarán con create, update y delete y tendrán el nombre de la clase al lado: createPerson, getPerson, deletePerson:

21. Consultas

(Sólo GraphQL)

Vamos a hacer una simple consulta para jugar con GraphQL.
En su Parse Dashboard, vaya a API Console, luego a GraphQL Console.
Escriba la siguiente consulta utilizando la consulta específica para encontrar un usuario. En cualquier momento, puede pulsar CTRL + Barra espaciadora (Windows) u OPCIÓN + Barra espaciadora (Mac) para tener Autocompletar mientras escribe.

Las consultas pueden variar dependiendo de la versión de Parse que elijas:

Parse 3.7.2:

consulta {
    objetos{
        encontrar_usuario{
            resultados{
                nombre de usuario
                correo electrónico
            }
        }
    }
}

Parse 3.8:

consulta {
  usuarios{
      resultados{
          nombre de usuario
          correo electrónico
      }
  }
}

Parse 3.9:

consulta {
  usuarios{
      resultados{
          nombre de usuario
          correo electrónico
      }
  }
}

Haga clic en el botón Reproducir:

Deberías ver los Usuarios que creamos con el SDK de Javascript. Si te saltaste esa parte, simplemente añade unos cuantos Usuarios como se describe en el capítulo 7 e intenta ejecutar tu Consulta de nuevo. Debería ver resultados como estos:

Acabamos de utilizar la consulta específica find_User para encontrar todos los usuarios, recuperando su nombre de usuario y correo electrónico. Especificamos exactamente lo que queríamos recuperar, generando una carga útil más pequeña, a la vez que contábamos con Autocompletar para ayudarnos a desarrollar, de modo que durante el proceso sabíamos qué operaciones estaban disponibles.

Impresionante, ¿eh?

¡Vamos a mejorarlo!

22. Mutaciones

(Sólo GraphQL)

Vamos a crear nuestra mutación GraphQL con el método específico signUp para que funcione igual que nuestro método signUp en Javascript.

La mutación será así

Parse 3.7.2

mutación{
  usuarios{
    signUp(fields: {
      nombre de usuario: "john"
      contraseña: "123456"
      correo electrónico: "[email protected]"
    }){
      objectId
    }
  }
}

Parse 3.8

mutación SignUp{
  signUp(campos:{
    nombredeusuario: "algunapersona"
    contraseña: "algunacontraseña"
  }){
    objectId
    createdAt
  }
}

Parse 3.9

mutación SignUp{
  signUp(campos:{
    nombredeusuario: "algunapersona"
    contraseña: "algunacontraseña"
  }){
    id
    createdAt
    sessionToken
  }
}

Ejecuta y comprueba que el usuario ha sido añadido a la clase User en el Database Browser.

¡Yupi! Ahora hagámoslo funcionar en nuestro código.

23. Nuestro propio método signUp con GraphQL

(Sólo GraphQL)

Para nuestro método signUp en javascript, usaremos una Mutación que es casi igual a la que usamos en GraphQL Playground, pero mientras allí usábamos valores hardcoded, aquí debemos configurar variables para que asuman los valores que el usuario escriba en los formularios.

Para usar variables en el cliente GraphQL que estamos usando, primero debemos especificar los nombres y tipos de las variables en el método. Vamos a pasar 3 variables para nuestro método signUp: nombre de usuario, contraseña y correo electrónico, que son todas cadenas, por lo que nuestro método singUp será:

const signUpMutation = /* GraphQL */
`
mutación signUp($nombredeusuario: ¡Cadena! $contraseña: ¡Cadena! $email: ¡Cadena!){
    
}
`

Luego tenemos que usar esas variables dentro de nuestro método create_User, así:

Parse 3.7.2

        
        usuarios{
            signUp(fields: {
              nombre de usuario: $nombredeusuario
              contraseña: $contraseña
              correo electrónico: $correo electrónico
            }){
              objectId
            }
        }

Parse 3.8

        
        usuarios{
            signUp(campos: {
              nombre de usuario: $nombredeusuario
              contraseña: $contraseña
              correo electrónico: $correo electrónico
            }){
              objectId
            }
        }

Parse 3.9

        
        usuarios{
            signUp(campos: {
              nombre de usuario: $nombredeusuario
              contraseña: $contraseña
              correo electrónico: $correo electrónico
            }){
              id
            }
        }

Y finalmente establecer valores para ello en un objeto JSON diferente, que será pasado como parámetro junto con la Mutación:

const variables = {
        nombre_usuario: formNombre_usuario,
        contraseña: formContraseña,
        email: formEmail
    }

Ahora, observe que tengo 3 valores allí formUsername, form Password y formEmail que recuperaré del formulario y pasaré a nuestra función singUp, así que debo especificarlos en los parámetros de la función:

global.singUp = function(formNombreDeUsuario, formContraseña, formCorreoE)

Y listo.

Aquí está el método completo:

const { GraphQLClient } = require('graphql-request')

global.signUp = function(formNombreUsuario, formContraseña, formEmail) { 
 
    const endpoint = 'https://parseapi.back4app.com/graphql'

    const graphQLClient = nuevo GraphQLClient(endpoint, {
        cabeceras: {
            "X-Parse-Application-Id": "5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH",
            "X-Parse-Master-Key": "pLuH6zKGl8thmIJfWFjvXll4B2YTAnlhlpAGVuoq"
        },
    })

    const signUpMutation = /* GraphQL */
    `
    mutación signUp($username: ¡Cadena! $password: ¡Cadena! $email: ¡Cadena!){
        usuarios{
            signUp(campos: {
                nombre usuario: $nombreusuario
                contraseña: $contraseña
                correo electrónico: $correo electrónico
            }){
                objectId
            }
        }
    }
    `

    const variables = {
        nombredeusuario: formNombredeusuario,
        contraseña: formContraseña,
        email: formEmail
    }

    const data = graphQLClient.request(signUpMutation, variables).then(data => {
        alert('¡Hurra! ¡Usuario creado!')
    }).catch(error => {
        alert('Error: ' + error.code + ' ' + error.message)
    })
    
}

24. Y ya que estamos aquí… LogIn..

(sólo GraphQL)

Como ya he explicado todos los pasos de la mutación singUp, me limitaré a dejar el código del método logIn, que sigue exactamente los mismos principios pero utilizando la mutación específica logIn:

mutation logIn($nombredeusuario: ¡Cadena! $contraseña: ¡Cadena!){
  usuarios{
    logIn(nombredeusuario: $nombredeusuario contraseña: $contraseña){
    	sessionToken  
    }
  }
}

Y el código completo sería

global.logIn = function(formNombreUsuario, formContraseña){
    
    const endpoint = 'https://parseapi.back4app.com/graphql'

    const graphQLClient = new GraphQLClient(endpoint, {
        cabeceras: {
            "X-Parse-Application-Id": "5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH",
            "X-Parse-Master-Key": "pLuH6zKGl8thmIJfWFjvXll4B2YTAnlhlpAGVuoq"
        },
    })

    const logInMutation = /* GraphQL */
    `
    mutación logIn($nombredeusuario: ¡Cadena! $contraseña: ¡Cadena!){
        usuarios{
            logIn(nombreusuario: $nombreusuario contraseña: $contraseña){
                sessionToken  
            }
        }
    }
    `

    const variablesEntrar = {
        nombredeusuario: formNombredeusuario,
        contraseña: formContraseña
    }

    const data = graphQLClient.request(logInMutation, variablesLogIn).then(data => {
        alert('¡Hurra! ¡Usuario conectado!')
    }).catch(error => {
        alert('Error :' + error.code + ' ' + error.message)
    })
}

25. Browserifying (¿qué dices?)

(Sólo GraphQL)

¿Recuerdas que en el capítulo 18 te di el comando para Broserificar (es decir, convertir nuestros módulos NPM para que sean compatibles con el frontend)?
Si no lo recuerdas, aquí lo tienes de nuevo:

browserify inputFile.js -o outputFile.js

Ejecutémoslo en nuestro inputFile.js y pasémoslo a un archivo llamado graphql.js:

browserify inputFile.js -o graphql.js

Si todo ha ido bien, no deberíamos tener ninguna salida:

Qué fácil ha sido, ¿eh?

26. Incluyendo nuestro nuevo y brillante código en HTML

(sólo GraphQL)

Dentro de la etiqueta head de nuestro archivo HTML, incluye el archivo graphql.js generado.
Y ya que estás ahí, crea también un nuevo archivo en blanco llamado Parse.js e inclúyelo también. Lo usaremos para llamar a nuestros métodos GraphQL:

<script src="./graphql.js"></script>
<scriptsrc="./Parse.js"></script>

Atención: Por si te has saltado la parte de Javascript del tutorial, vuelve al capítulo 10 y cambia los IDs de las etiquetas HTML tal y como se describe allí. Necesitaremos que esa parte funcione para poder recuperar valores de los formularios.

27. 27. ¡Muéstrame algo de acción!

(Sólo GraphQL)

Hemos avanzado mucho hasta aquí, ¿eh? ¡Vamos a añadir algo de código para conseguir algo de acción!

De nuevo, si te has saltado la sección de Javascript, vuelve al capítulo 10, y echa un vistazo a cómo usamos Javascript para leer valores de los formularios usando el método getElementById:

document.getElementById("idOfTheInput").value

Así que vamos a abrir nuestro archivo Parse.js y añadir nuestros dos métodos allí, logIn y singUp:

function parseSignUp(){

}

function parseLogIn(){

}

Y añadamos también el código para leer los valores de los formularios, junto con algo de código de validación de igualdad de contraseñas, de nuevo, explicado en el capítulo 10:

function parseSingnUp(){
    var nombre_usuario = document.getElementById("nombre_usuario").value;
    var password = document.getElementById("password").value;
    var passwordverify = document.getElementById("passwordverify").value;
    var email = document.getElementById("email").value;

    if (password !== passwordverify){
        alert ('Las contraseñas no coinciden')
        return;
    }

}

function parseLogIn(){
    var user = document.getElementById("user").value;
    var pass = document.getElementById("pass").value;

}

Pero esta vez, en lugar de utilizar el SDK de Javascript, vamos a llamar a nuestros métodos signUp y logIn desde nuestro archivo graphql.js. El código completo será entonces

function parseSingnUp(){
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var passwordverify = document.getElementById("passwordverify").value;
    var email = document.getElementById("email").value;

    if (password !== passwordverify){
        alert ('Las contraseñas no coinciden')
        return;
    }

    signUp(nombredeusuario, contraseña, email)
}

function parseLogIn(){
    var user = document.getElementById("user").value;
    var pass = document.getElementById("pass").value;

    logIn(user, pass)
}

Ah, y no te olvides de llamar a estos en los eventos onClick en el archivo HTML:

Despliega todo como se explica en el capítulo 3 y ya estamos listos para…

28. Probando

(Sólo GraphQL)

Accede a tu web y ve a la sección Sign Up. Rellena el formulario y pulsa el botón Sign Up:

Si todo ha funcionado, deberías ver tu nuevo usuario en la tabla Usuarios:

Ahora vuelve a la sección Sign In e intenta iniciar sesión con ese usuario:

Si todo ha funcionado como esperabas, ahora deberías haber iniciado sesión:

29. Conclusión de la parte GraphQL

¡Uf! Sé que ha sido un montón de información, ¡pero ahora eres un maestro del inicio de sesión! ¡Enhorabuena!

GraphQL puede parecer un poco más problemático al primer contacto, con algunos procesos más para ser utilizado, pero créeme: cuando le cojas el truco en tu proceso de desarrollo, ¡será pan comido!

Ahora tenemos un código mucho más orgánico y fácil de mantener, que hicimos con la ayuda de Autocomplete y pudimos probar y verificar las respuestas en el GraphQL Playground incluso antes de empezar a codificar. Esto es enorme porque no sólo puedes tener todas tus consultas escritas y probadas antes de producir código, sino porque ahora puedes dividir el desarrollo para un equipo: unos pocos desarrolladores pueden escribir las consultas GraphQL mientras otros escriben el código Javascript, acelerando todo el proceso.

Mejor que eso, si necesitas cambiar algo en tu código a partir de ahora, es sólo cuestión de cambiar las consultas y listo.

¿Puede ser mejor? Por supuesto que sí.

Usando exactamente la misma sintaxis puedes reutilizar las consultas GraphQL para cada plataforma. Es similar a todos los lenguajes. Ya no tienes que preguntarte “¿cómo hago eso en este lenguaje con el que no estoy familiarizado?”. Mismas consultas, diferentes lenguajes.

Espero que le des una oportunidad a GraphQL en tu proceso de desarrollo. Estoy seguro de que te sorprenderá todo lo que puedes llegar a hacer.