Maîtriser l’authentification des API Web avec Parse – SDK Javascript et saveurs GraphQL

De nombreuses applications, en particulier les sites web, ont besoin de restreindre l’accès à leur contenu, et avoir des comptes utilisateurs qui ne montrent que les informations pertinentes pour l’utilisateur de manière sécurisée est la manière la plus populaire d’y parvenir.

Aujourd’hui, nous allons apprendre à implémenter la fonctionnalité de connexion à une page HTML déjà existante, en écrivant très peu de code et en laissant Parse faire tout le travail pour vous, et pour ce faire, j’ai choisi le modèle de formulaire de connexion que vous pouvez télécharger gratuitement.

Nous allons utiliser deux technologies distinctes que vous pouvez choisir : le SDK Javascript et GraphQL à travers Javascript.

GraphQL est notre toute nouvelle technologie qui vient d’être lancée et mon but est de comparer les deux façons de faire la même chose, afin que vous puissiez choisir celle que vous préférez.
ALERTE SPOILER ! Je suis sûr que vous préférerez GraphQL…

Il contient déjà tous les fichiers nécessaires pour afficher visuellement le fichier, mais il manque des fonctionnalités, que nous allons ajouter.

Si vous voulez en savoir plus sur GraphQL, jetez un coup d’œil à cet article : Qu’est-ce que GraphQL ?

Il s’agit d’un article assez vaste, alors laissez-moi vous montrer ce que vous apprendrez exactement, par chapitre :

1. Configurer votre hébergement web dans Back4app
2. Activer l’utilisation de GraphQL
3. Déployer votre premier site web
4. Créer votre premier fichier Javascript
5. Intégrer le SDK Parse
6. Configurer et mettre en place le SDK dans votre code
7. Ajouter des utilisateurs graphiquement
8. Utiliser le SDK Javascript pour inscrire un utilisateur
9. Tester l’inscription avec votre site web (valeurs codées en dur)
10. Ecrire du code pour lire les formulaires et l’appliquer à votre code Javascript
11. Tester l’inscription avec votre site web (valeurs dynamiques)
12. Créer le processus de connexion avec le SDK Javascript
13. Tester le login avec votre site web (valeurs dynamiques)
14. Conclusion de la partie SDK Javascript
15. Introduction à GraphQL
16. Ce dont vous aurez besoin pour utiliser GraphQL
17. Installation des outils dont vous aurez besoin
18. Une explication rapide de la façon dont nous allons générer le code pour le frontend
19. Utilisation des modules NPM sur votre code NodeJS
20. Introduction aux requêtes et aux mutations dans GraphQL
21. Les requêtes
22. Mutations
23. Créer votre propre méthode GraphQL SingUp
24. Créer votre propre méthode GraphQL LogIn
25. Utilisez Browserify pour convertir votre code NodeJS en un code compatible avec les applications frontales.
26. Inclure ce code dans votre fichier HTML
27. Codez des fonctions Javascript pour appeler le code généré par Browserify
28. Testez vos méthodes d’inscription et de connexion GraphQL
29. Conclusion de la partie GraphQL

1. Premières étapes

La toute première étape est de créer votre application dans Back4app si vous n’en avez pas déjà une. Vous pouvez consulter les étapes pour en créer une en utilisant cette doc.

Cette étape est commune aux deux technologies, donc indépendamment de celle que vous choisissez, vous devrez la réaliser.

Après avoir créé notre application, nous devons configurer la fonction d’hébergement Web. Oui. Vous pouvez héberger vos sites web avec du contenu statique sur Back4app gratuitement. Génial, non ?

Après avoir créé votre application, allez dans les paramètres du serveur :

Et sous Hébergement Web et Live Query, cliquez sur Paramètres :

Activez maintenant Back4app Hosting et choisissez un bon nom de domaine pour votre application. Vous pouvez accéder directement à ce domaine dans back4app.io, ou vous pouvez créer un enregistrement CNAME sur votre DNS pointant vers ce domaine si vous le souhaitez :

Vous êtes maintenant prêt à déployer du code.

2. Qu’en est-il de GraphQL ?

Si vous souhaitez utiliser GraphQL, il y a une autre étape à franchir. Si vous prévoyez d’utiliser uniquement le SDK Javascript, vous pouvez utiliser n’importe quelle version de Parse, mais pourquoi ne pas utiliser la dernière et la meilleure ?

Allez dans Paramètres du serveur :

Et sous Paramètres, dans Gérer le serveur Parse :

Choisissez une version supérieure à 3.5.0. Dans Back4app, j’ai utilisé la version 3.6.0 :

Maintenant vous devriez avoir GraphQL activé et nous sommes prêts à partir !
Oh, juste pour que vous le sachiez, vous pouvez utiliser GraphQL et les SDKs sur la même application. Il n’est pas nécessaire de choisir.

Si vous n’êtes intéressé que par GraphQL, vous pouvez passer au chapitre 15 de ce tutoriel.

3. Déployer votre premier site web

Maintenant que nous avons défini la fonctionnalité d’hébergement Web, nous pouvons déployer notre site Web.
Cette étape est commune aux deux technologies.
Il n’aura pas encore de fonctionnalités, mais cela fait du bien de le voir fonctionner pour la première fois, alors faisons-le.

Allez encore une fois dans les Paramètres du serveur :

Et maintenant, choisissez Settings sous Cloud Code :

Vous y trouverez deux dossiers : Cloud et Public.

Cloud sert à déployer le Code Cloud, qui est du code NodeJS qui s’exécute à partir des serveurs de Back4app, faisant toute la charge lourde de traitement pour vos applications et apportant de nombreux avantages tels que l’économie de batterie et de plan de données dans les téléphones portables, puisque le téléphone portable lui-même n’aura pas à traiter beaucoup ni à récupérer une charge complète de données, se fiant seulement au résultat final du traitement, livré par les serveurs de Back4app.

Le public est destiné à déployer des contenus statiques tels que des fichiers HTML, CSS et Javascript statiques. C’est celui qui nous intéresse en ce moment.
Sélectionnez ce dossier et cliquez sur le bouton +ADD ci-dessus, et ajoutez les fichiers HTML et CSS pour notre modèle que vous avez téléchargé sur le site web au premier chapitre.

Après avoir sélectionné ces fichiers, cliquez sur le bouton Déployer et vous devriez voir les fichiers dans le dossier Public :

Il est maintenant temps de procéder à des tests.
Si vous cliquez sur l’URL que vous avez défini dans l’hébergement Web, vous devriez voir que votre tout nouveau site Web fonctionne maintenant gratuitement :

4. Un peu d’intelligence

Un nouveau site web brillant et élégant est opérationnel et cela nous a pris quoi ? 2 minutes ? C’est bien de battre ça gratuitement, Internet !
Et vous ai-je dit qu’il est entièrement sécurisé et que le protocole HTTPS y est déjà intégré ? Parce que nous n’allons pas payer pour des certificats quand Back4app les donne gratuitement, n’est-ce pas ?

Maintenant, il est temps de faire preuve d’un peu d’intelligence. Et si nous faisions en sorte que cela ne prenne que 2 minutes de plus ? J’aime l’intelligence et j’aime la rapidité.

Démarrez votre IDE préféré et mettons en place du Javascript. Visual Studio Code pour moi, s’il vous plaît. Et un expresso avec.

A partir de maintenant, je me concentrerai uniquement sur Javascript SDK, et plus tard, uniquement sur GraphQL.

Créez un nouveau fichier appelé Parse.js et nous sommes prêts à partir.

5. Ajouter le framework Parse

(SDK Javascript uniquement)

Parse rend le déploiement de ses frameworks très facile. Vous devez d’abord instancier le framework Javascript en ajoutant la ligne suivante dans la section Head de votre fichier index.html :

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

Maintenant, le framework Parse complet (minifié) est accessible à partir de votre code Javascript et nous pouvons utiliser tout ce qu’il contient.

6. Mise en route des moteurs Parse

(SDK Javascript uniquement)

Maintenant nous avons déjà accès au framework Parse, mais nous devons l’activer avant d’appuyer sur l’accélérateur.

Nous devons identifier notre application à Parse et la façon de le faire est de définir l’AppId et la clé Javascript pour notre application, ainsi que l’URL du serveur qui indique à notre application qu’elle tourne dans Back4app.

Pour ce faire, allez dans Paramètres du serveur :

et dans Paramètres, sous Paramètres de base :

vous trouverez toutes les informations dont vous avez besoin :

Copiez ces informations et collez-les dans notre fichier Parse.js comme suit :

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

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

Maintenant, notre application a un accès complet à Parse et Parse connaît nos paramètres afin de pouvoir fonctionner.
Greenlight. Plein gaz !

7. Mais je n’ai que quelques utilisateurs…

Si votre application n’a pas besoin que les utilisateurs s’enregistrent et que vous préférez les gérer manuellement, vous pouvez obtenir la classe User dans le Database Browser du Parse Dashboard, en cliquant sur le bouton Add a Row (Ajouter une ligne) :

Mais en réalité, votre application va probablement croître avec le temps et le fait que les utilisateurs puissent s’enregistrer eux-mêmes dans le système sera utile.

8. Pas d’utilisateurs ? Pas de problème ! signUp() à la rescousse !

(SDK Javascript uniquement)

Au début, votre application n’aura pas d’utilisateurs, nous devons donc fournir un moyen pour les utilisateurs de s’inscrire.

Notre site web dispose déjà d’un beau formulaire pour cela. Faisons-le fonctionner, voulez-vous ?
Et si je vous disais que nous pouvons le faire avec moins de 12 lignes de code ? C’est mieux ?

La classe Parse.User possède trois propriétés de base que vous pouvez définir. Vous pouvez en définir d’autres si vous le souhaitez ou si vous en avez besoin, mais ces trois propriétés sont déjà créées pour des raisons de commodité et deux d’entre elles sont obligatoires :

• nom d’utilisateur (obligatoire)
• mot de passe (obligatoire)
• email (optionnel)

Ajoutons un utilisateur test à notre base de données pour vérifier le fonctionnement. Ajoutez ceci à votre fichier Parse.js :

function singnUp(){
    var user = new Parse.User() ;
    user.set("username", "alex") ; // définit la valeur du formulaire Username dans la propriété username
    user.set("password", "abc123") ; // attribue la valeur du formulaire Password à la propriété password
    user.set("email", "[email protected]") ; // définit la valeur du formulaire Email dans la propriété email
    try {
        user.signUp() ; // Tout a fonctionné et l'utilisateur s'est connecté
    } catch (error) {
        alert("Error : " + error.code + " " + error.message) ; // Oups... quelque chose d'anormal s'est produit
    }
}

Ceci va créer un nouvel utilisateur avec des valeurs codées en dur :

nom d'utilisateur : alexk
mot de passe : abc123
email : [email protected]

Nous verrons plus loin dans cet article comment récupérer ces valeurs dans le formulaire, mais pour cet utilisateur test, cela suffira.

Ouvrez maintenant votre fichier index.html et cherchez cette ligne :

<input type="submit" class="button" value="Sign Up">

Remplacez-la par ceci :

<input type="submit" class="button" value="Sign Up" onclick="singnUp()">

En fait, nous avons défini un événement onClick pour déclencher la fonction signUp que nous venons de coder.

Déployez les deux fichiers dans le dossier Cloud Code Public (le nouveau fichier Parse.js et le fichier index.html modifié) comme vous l’avez appris ci-dessus et rouvrez le site web dans votre navigateur.

9. Test… Test… 123…

C’est l’heure des tests, bébé ! Laissons le code parler de lui-même !

Allez dans la section Sign Up et ne remplissez rien puisque nous ne transmettons pas de données réelles, seulement un test codé en dur, et cliquez sur le bouton Sign Up :

et si tout a bien fonctionné, vous devriez voir dans votre tableau de bord Parse que vous avez maintenant cet utilisateur ainsi qu’une nouvelle session pour l’utilisateur :

10. Hourra ! Maintenant, rendons-le plus intelligent…

(SDK Javascript & GraphQL)

Maintenant que nous pouvons inscrire des utilisateurs, créons une fonction d’inscription pleinement opérationnelle.
Nous aurons besoin de lire les valeurs du formulaire afin de les insérer dans la base de données et pour cela, nous utiliserons la méthode javascript :

document.getElementById("idOfTheInput").value

J’ai découvert en écrivant cet article que le modèle que nous avons utilisé a un petit problème. Les ID doivent être uniques pour que nous puissions récupérer les valeurs correctes, et notre modèle a quelques répétitions, probablement dues à un copier-coller du code par le créateur, alors changeons cela.

Allez dans votre fichier HTML et trouvez les lignes suivantes dans la section 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">

Vous remarquerez que l’attribut id de ces lignes se répète plusieurs fois dans le code. Modifions-le pour qu’il soit unique :

<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 ('Les mots de passe ne correspondent pas')
        return ;
    }

    user.set("username", "alexk") ; // définit la valeur du formulaire Username dans la propriété username
    user.set("password", "abc123") ; // définit la valeur du formulaire Password dans la propriété password
    user.set("email", "[email protected]") ; // définit la valeur du formulaire Email dans la propriété email

    user.set("username", alexl) ; // définit la valeur du formulaire Username dans la propriété username
    user.set("password", password) ; // fixe la valeur du formulaire Password à la propriété password
    user.set("email", email) ; // définit la valeur du formulaire Email dans la propriété email

11. C’est à nouveau l’heure des tests. Maintenant pour de vrai.

12. C’est l’heure de la connexion !

(SDK Javascript uniquement)

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

Parse.User.logIn(user, pass).then(() => {
    // Hourra ! L'utilisateur s'est connecté
    alert('Hourra ! Utilisateur connecté!') ;
}) ;

Parse.User.logIn(user, pass).then(() => {
    // Hourra ! L'utilisateur s'est connecté
    alert('Hourra ! Utilisateur connecté!') ;
}).catch(function(error){
    // Oups... quelque chose d'anormal s'est produit
    alert("Erreur : " + error.code + " " + error.message) ;
}) ;

13. Et noooow….

14. Conclusion de la partie SDK Javascript

15. Laissez entrer GraphQL

Si vous avez été enthousiasmé par le SDK Javascript, prenez maintenant du popcorn car le spectacle est sur le point de commencer.

Back4app supporte maintenant GraphQL, ce qui veut dire que nous restons à la pointe de la technologie, et maintenant Parse est plus intelligent que jamais !

Vous pouvez compter sur une aire de jeu GraphQL entièrement fonctionnelle avec autocomplétion (oui !!!) pour générer les requêtes que nous ferons.

De plus, nous pouvons spécifier exactement ce que nous voulons récupérer, ce qui se traduit par des charges utiles plus petites, rendant votre livraison de données plus rapide pour les utilisateurs finaux et les API tellement plus faciles à maintenir au fil du temps.

Bon, d’accord. Assez parlé. GraphQL est tellement génial que si je ne m’arrête pas, je vais continuer à écrire dessus sans montrer comment l’utiliser.

16. Ce dont nous aurons besoin

(GraphQL uniquement)

Si vous n’avez pas changé votre version de Parse pour au moins 3.5.0 (3.6.0 sur Back4app est la plus ancienne à supporter GraphQL), allez jusqu’à la section 2 de cet article et faites-le.

Nous aurons besoin d’installer NPM pour pouvoir utiliser ses modules.
Ces modules sont écrits en NodeJS et initialement conçus pour la programmation backend, nous devrons donc changer cela.
Je ne vous montrerai pas comment installer NPM, car le tutoriel sur le site web ci-dessus couvre cela assez largement.
Je vous montrerai cependant comment les utiliser afin d’économiser beaucoup d’efforts lors du codage.

Vous êtes prêts ? Alors installez ces outils, attachez vos ceintures et c’est parti !

17. Installation du client GraphQL et de Browserify

(GraphQL uniquement)

GraphQL dispose de plusieurs clients que vous pouvez utiliser. Comme je ne pouvais pas en choisir un (parce qu’ils sont tous très bons), j’ai décidé de choisir le plus facile à configurer pour ce premier tutoriel, et d’utiliser les autres dans les tutoriels suivants afin de pouvoir les comparer.

J’ai trouvé que le plus facile à configurer était graphql-request, que vous pouvez installer en ouvrant un terminal, en allant dans le dossier de notre Parse.js et en tapant :

npm install graphql-request

Si l’installation réussit, vous devriez obtenir quelque chose comme ceci :

Nous pouvons également installer un outil appelé Browserify.
Browserify fait la transition entre les modules NPM et le front-end (votre navigateur). Vous vous souvenez quand j’ai dit que les modules NPM sont initialement conçus pour une utilisation backend ? Cet outil les rendra disponibles sur le front-end avec un minimum d’effort.
J’aime l’installer globalement (avec la clé -g) pour pouvoir l’utiliser de n’importe où :

npm install -g browserify

Et encore une fois, si tout fonctionne bien, vous devriez avoir quelque chose comme ça :

Maintenant nous avons notre client GraphQL installé et nous pouvons le convertir pour une utilisation frontale. Cela m’a pris 2 minutes pour le faire, donc nous progressons rapidement.

18. Comment cela va-t-il fonctionner exactement ?

(GraphQL uniquement)

En gros, nous allons :

1. Ecrire du code NodeJS en utilisant les modules NPM
2. Le convertir en code compatible avec le frontend en utilisant Browserify
3. Exporter ce code afin de pouvoir l’appeler depuis d’autres fichiers
4. Appeler ce code depuis notre code Javascript

La commande pour Browserify est la suivante

browserify inputFile.js -o outputFile.js

Le fichier outputFile.js contiendra notre code compatible avec le frontend, alors lançons les choses, créons notre fichier inputFile.js, et ouvrons-le dans notre IDE favori.

19. Un peu de code NodeJS

(GraphQL uniquement)

Nous allons commencer par ajouter notre module NPM à notre code en le requérant.

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

Et créons une exportation globale avec le nom que nous utiliserons pour appeler notre fonction, dans ce cas, signUp :

global.singUp = function() {

}

Avec cela, nous pouvons commencer à ajouter du code à notre fonction singUp.
Commençons par ajouter l’URL de notre point de terminaison, que vous pouvez récupérer à partir de votre terrain de jeu GraphQL :

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

Et comme nous avons besoin de nous authentifier, instançons notre client GraphQL en passant cette URL en paramètre, ainsi que les en-têtes d’authentification : X-Parse-Application-ID et X-Parse-Javascript-Key. Ceux-ci contiendront l’AppId et la Javascript Key que vous avez appris à récupérer à l’étape 6.

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

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

Il est maintenant temps d’écrire quelques requêtes et mutations GraphQL.

20. Requêtes et mutations, génériques ou spécifiques

(GraphQL uniquement)

Au moment de la rédaction de ce document, Back4app et Parse travaillent avec des requêtes et des mutations. De nouvelles méthodes peuvent être développées au fil du temps, mais discutons de ces deux méthodes.

Les requêtes sont utilisées pour récupérer des données sur le serveur.

Les mutations sont utilisées lorsque vous modifiez des données sur le serveur, qui peut ou non récupérer des résultats.

Ainsi, si vous consommez simplement des informations, vous devez utiliser une requête, et si vous ajoutez ou modifiez des informations, vous devez utiliser une mutation.

Nous commencerons par une simple requête et évoluerons ensuite vers des mutations.

A ce propos, nous disposons de méthodes spécifiques et génériques dans GraphQL, chacune ayant ses propres avantages et inconvénients.

Les méthodes génériques vous permettent d’opérer dans n’importe quelle classe. Si vous faites une requête générique par exemple, vous pouvez récupérer des données en spécifiant la classe que vous voulez. C’est génial parce que vous pouvez utiliser la même syntaxe pour presque tout, et lorsque vous utilisez les mutations, vous pouvez créer des classes et des objets qui n’existent pas au départ.

L’inconvénient est que, comme vous n’avez pas de schémas pour les méthodes génériques, vous ne pouvez pas compter sur l’autocomplétion et vous devez donc savoir ce que vous faites.
Exemples de méthodes génériques : get et find.
Les mutations génériques sont la mise à jour, la suppression ou la création.

Les méthodes spécifiques, quant à elles, ont des schémas et ne peuvent donc être utilisées que par des classes préexistantes. C’est l’inconvénient.
Mais l’utilisation de méthodes spécifiques apporte un autre niveau de génialité, nous permettant de compter sur l’autocomplétion et d’avoir des ressources bien plus puissantes pour récupérer nos données.
Les requêtes spécifiques commencent par get et find, et portent le nom de la classe juste à côté : findPerson, getPerson, etc.
Les mutations spécifiques commencent par create, update et delete et ont le nom de la classe juste à côté : createPerson, getPerson, deletePerson :

21. Les requêtes

(GraphQL uniquement)

Créons une simple requête pour jouer avec GraphQL.
Sur votre tableau de bord Parse, allez dans API Console, puis GraphQL Console.
Tapez la requête suivante en utilisant la requête spécifique pour trouver un utilisateur. À tout moment, vous pouvez appuyer sur CTRL + barre d’espacement (Windows) ou OPTION + barre d’espacement (Mac) pour activer l’autocomplétion au fur et à mesure que vous tapez.

Les requêtes peuvent varier en fonction de la version de Parse que vous choisissez :

Parse 3.7.2 :

requête {
    objets{
        find_User{
            résultats{
                nom d'utilisateur
                email
            }
        }
    }
}

Parse 3.8 :

requête {
  utilisateurs{
      résultats{
          nom d'utilisateur
          email
      }
  }
}

Parse 3.9 :

requête {
  utilisateurs{
      résultats{
          nom d'utilisateur
          email
      }
  }
}

Cliquez sur le bouton Play :

Vous devriez voir les utilisateurs que nous avons créés avec le SDK Javascript. Si vous avez sauté cette partie, ajoutez quelques utilisateurs comme décrit au chapitre 7 et essayez d’exécuter à nouveau votre requête. Vous devriez voir des résultats comme celui-ci :

Nous venons d’utiliser la requête spécifique find_User pour trouver tous les utilisateurs, en récupérant leur nom d’utilisateur et leur adresse électronique. Nous avons spécifié exactement ce que nous voulions récupérer, générant une charge utile plus petite, tout en comptant sur l’autocomplétion pour nous aider à développer, de sorte que pendant le processus, nous savions quelles opérations étaient disponibles.

Génial, non ?

Améliorons les choses !

22. Mutations

(GraphQL uniquement)

Créons notre mutation GraphQL avec la méthode spécifique signUp pour qu’elle fonctionne comme notre méthode signUp en Javascript.

La mutation sera comme ceci :

Parse 3.7.2

mutation{
  utilisateurs{
    signUp(fields : {
      username : "john"
      password : "123456"
      email : "[email protected]"
    }){
      objectId
    }
  }
}

Parse 3.8

mutation SignUp{
  signUp(fields:{
    nom d'utilisateur : "somefolk"
    password : "somepassword"
  }){
    objectId
    createdAt
  }
}

Parse 3.9

mutation SignUp{
  signUp(fields:{
    nom d'utilisateur : "somefolk"
    password : "somepassword"
  }){
    id
    createdAt
    sessionToken
  }
}

Exécutez et vérifiez que l’utilisateur a été ajouté à la classe User dans le navigateur de base de données.

C’est très bien ! Maintenant, faisons en sorte que cela fonctionne dans notre code.

23. Notre propre méthode signUp avec GraphQL

(GraphQL uniquement)

Pour notre méthode javascript de signUp, nous allons utiliser une Mutation qui est presque la même que celle que nous avons utilisée sur le GraphQL Playground, mais alors que là nous avons utilisé des valeurs codées en dur, ici nous devons définir des variables pour assumer les valeurs que l’utilisateur tape sur les formulaires.

Pour utiliser les variables sur le client GraphQL que nous utilisons, nous devons d’abord spécifier les noms et les types de variables sur la méthode. Nous allons passer 3 variables pour notre méthode signUp : username, password, et email, qui sont toutes des chaînes, donc notre méthode singUp sera :

const signUpMutation = /* GraphQL */
`
mutation signUp($username : String ! $password : String ! $email : String !){
    
}
`

Ensuite, nous devons utiliser ces variables dans notre méthode create_User, comme ceci :

Parse 3.7.2

        
        users{
            signUp(fields : {
              username : $username
              password : $password
              email : $email
            }){
              objectId
            }
        }

Parse 3.8

        
        utilisateurs{
            signUp(fields : {
              username : $username
              password : $password
              email : $email
            }){
              objectId
            }
        }

Parse 3.9

        
        utilisateurs{
            signUp(fields : {
              username : $username
              password : $password
              email : $email
            }){
              id
            }
        }

Enfin, nous définissons des valeurs dans un autre objet JSON, qui sera transmis en tant que paramètre avec la mutation :

const variables = {
        username : formUsername,
        password : formPassword,
        email : formEmail
    }

Maintenant, remarquez que j’ai 3 valeurs formUsername, form Password et formEmail que je vais récupérer du formulaire et passer à notre fonction singUp, donc je dois les spécifier dans les paramètres de la fonction :

global.singUp = function(formUsername, formPassword, formEmail)

Et nous voilà prêts !

Voici la méthode complète :

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

global.signUp = function(formUsername, formPassword, formEmail) { 
 
    const endpoint = 'https://parseapi.back4app.com/graphql'

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

    const signUpMutation = /* GraphQL */
    `
    mutation signUp($username : String ! $password : String ! $email : String !){
        users{
            signUp(fields : {
                username : $username
                password : $password
                email : $email
            }){
                objectId
            }
        }
    }
    `

    const variables = {
        username : formUsername,
        password : formPassword,
        email : formEmail
    }

    const data = graphQLClient.request(signUpMutation, variables).then(data => {
        alert('Hourra ! Utilisateur créé!')
    }).catch(error => {
        alert('Erreur : ' + error.code + ' ' + error.message)
    })
    
}

24. Et puisque nous sommes ici… Connexion…

(GraphQL uniquement)

Comme j’ai déjà expliqué toutes les étapes de la mutation singUp, je vais me contenter de laisser le code de la méthode logIn, qui suit exactement les mêmes principes mais en utilisant la mutation spécifique logIn :

mutation logIn($username : String ! $password : String !){
  utilisateurs{
    logIn(username : $username password : $password){
    	sessionToken  
    }
  }
}

Et le code complet serait :

global.logIn = function(formUsername, formPassword){
    
    const endpoint = 'https://parseapi.back4app.com/graphql'

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

    const logInMutation = /* GraphQL */
    `
    mutation logIn($username : String ! $password : String !){
        utilisateurs{
            logIn(username : $username password : $password){
                sessionToken  
            }
        }
    }
    `

    const variablesLogIn = {
        username : formUsername,
        password : formPassword
    }

    const data = graphQLClient.request(logInMutation, variablesLogIn).then(data => {
        alert('Hourra ! L'utilisateur s'est connecté!')
    }).catch(error => {
        alert('Erreur :' + error.code + ' ' + error.message)
    })
}

25. Browserifying (say whaaat ?)

(GraphQL uniquement)

Vous vous souvenez qu’au chapitre 18 je vous ai donné la commande pour Broserifier (a.k.a. transformer nos modules NPM pour qu’ils soient compatibles avec le frontend) ?
Si vous ne vous en souvenez pas, la voici à nouveau :

browserify inputFile.js -o outputFile.js

Exécutons-le sur notre fichier inputFile.js et sortons-le dans un fichier nommé graphql.js :

browserify inputFile.js -o graphql.js

Si tout s’est bien passé, nous ne devrions pas avoir de sortie :

Comme c’était facile, hein ?

26. Inclure notre nouveau code sur HTML

(GraphQL seulement)

Dans la balise head de notre fichier HTML, incluez le fichier graphql.js généré.
Et puisque vous y êtes, créez également un nouveau fichier vierge appelé Parse.js et incluez-le également. Nous l’utiliserons pour appeler nos méthodes GraphQL :

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

Attention : Au cas où vous auriez sauté la partie Javascript du tutoriel, revenez au chapitre 10 et changez les ID des balises HTML comme décrit dans ce chapitre. Nous aurons besoin de cette partie pour récupérer les valeurs des formulaires.

27. Montrez-moi de l’action !

(GraphQL uniquement)

Nous avons fait beaucoup de progrès jusqu’ici, hein ? Ajoutons un peu de code pour obtenir de l’action !

Encore une fois, si vous avez sauté la section Javascript, retournez au chapitre 10, et regardez comment nous utilisons Javascript pour lire les valeurs des formulaires en utilisant la méthode getElementById :

document.getElementById("idOfTheInput").value

Ouvrons donc notre fichier Parse.js et ajoutons-y nos deux méthodes, logIn et singUp :

function parseSignUp(){

}

function parseLogIn(){

}

Ajoutons également le code de lecture des valeurs des formulaires, ainsi que le code de validation de l’égalité des mots de passe, comme expliqué au chapitre 10 :

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 ('Les mots de passe ne correspondent pas')
        return ;
    }

}

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

}

Mais cette fois, au lieu d’utiliser le SDK Javascript, appelons simplement nos méthodes signUp et logIn depuis notre fichier graphql.js. Le code complet sera alors :

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 ('Les mots de passe ne correspondent pas')
        return ;
    }

    signUp(nom d'utilisateur, mot de passe, email)
}

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

    logIn(user, pass)
}

Oh, et n’oubliez pas d’appeler ces événements onClick dans le fichier HTML :

Déployez tout comme expliqué au chapitre 3 et nous sommes prêts pour quelques…

28. Test

(GraphQL uniquement)

Accédez à votre site web et allez à la section Sign Up. Remplissez le formulaire et cliquez sur le bouton Sign Up :

Si tout a fonctionné, vous devriez voir votre nouvel utilisateur dans le tableau Utilisateurs :

Retournez maintenant à la section Inscription et essayez de vous connecter avec cet utilisateur :

Si tout a fonctionné comme prévu, vous devriez maintenant être connecté :

29. Conclusion de la partie GraphQL

Je sais que cela fait beaucoup d’informations. Je sais que c’était beaucoup d’informations, mais maintenant vous êtes un maître de l’inscription et de la connexion ! Félicitations !

GraphQL peut sembler un peu plus difficile au premier abord, avec quelques processus supplémentaires à utiliser, mais croyez-moi : lorsque vous aurez pris le coup de main dans votre processus de développement, ce sera un jeu d’enfant !

Nous avons maintenant un code beaucoup plus organique, plus facile à maintenir, que nous avons créé avec l’aide de l’Autocomplete et nous avons pu tester et vérifier les réponses sur le GraphQL Playground avant même de commencer à coder. C’est énorme parce que vous pouvez non seulement avoir toutes vos requêtes écrites et testées avant de produire du code, mais aussi parce que vous pouvez maintenant diviser le développement pour une équipe : quelques développeurs peuvent écrire les requêtes GraphQL tandis que d’autres écrivent le code Javascript, ce qui accélère le processus entier.

Mieux encore, si vous devez modifier quoi que ce soit dans votre code, il vous suffit de changer les requêtes et le tour est joué.

Peut-on faire mieux ? Bien sûr que oui !

En utilisant exactement la même syntaxe, vous pouvez réutiliser les requêtes GraphQL pour chaque plateforme. Elles sont similaires à celles de tous les langages. Vous n’avez plus à vous demander “comment faire dans ce langage que je ne connais pas”. Les mêmes requêtes, dans des langages différents.

J’espère que vous donnerez une chance à GraphQL dans votre processus de développement. Je suis certain que vous serez étonné par les possibilités qui s’offrent à vous !