Collections d'utilisateurs externes Adalo avec Xano, partie 1 + partie 2

AVERTISSEMENT : on a laissé ce contenu en ligne pour qu'il serve à apprendre, mais Ops Machine recommande expressément de NE PAS utiliser Adalo. Pendant qu'on s'en servait, il s'est révélé effroyablement peu sécuritaire, incomplet et, en gros, à peu près impossible pour livrer quoi que ce soit.

En fait, un an après avoir été annoncées comme si elles étaient prêtes, ces fonctionnalités n’étaient toujours pas terminées. Voyez ceci comme un tutoriel Xano.

Note : j’ai omis le point de départ, mais quand vous créez un nouveau projet, vous devez sélectionner « advanced options », puis « external user database (beta)

Obtenez 10 % de rabais sur les forfaits Launch et Scale de Xano : https://xano.io/7ubyxp66 ‍ ‍)

La fonctionnalité de collections d’utilisateurs externes d’Adalo n’est pas tout à fait terminée, mais elle peut quand même être très utile. Voici comment l’utiliser avec Xano, et comment stocker les données de l’utilisateur connecté pour s’en servir dans l’application.

Notez que les jetons qu’on voit dans cette vidéo sont expirés. Et en règle générale, on ne publie jamais de jetons.

‍

Transcription de la partie 1

‍

Salut tout le monde. Bienvenue. Il y a quelques tutoriels XO qui montrent comment travailler avec ADAO, mais je les trouve un peu incomplets. Ils couvrent cette première étape-là. Je vais la faire aussi, juste pour vous montrer, puis on va voir comment aller chercher pour vrai les données de l'utilisateur, puisque ces fonctionnalités ne sont pas encore tout à fait terminées.

Et on ne sait pas exactement quand il le sera. Pour commencer, j'ai déjà configuré ma base de données XO, juste les éléments de base. J'ai quelques points de terminaison ici. J'ai créé quelques tables : items, orders et user. Et comme on fait de l'authentification d'utilisateurs, la première chose qu'on va faire.

Si on regarde par ici, c'est la configuration de la connexion. On va avoir besoin de ce point de terminaison de connexion ici. On va juste le copier et le coller. Et la méthode, je suis pas mal sûr que c'est GET. Non, c'est POST. Pour la connexion. On va prendre ça et je ne crois pas qu'on ait besoin d'autre chose. Évidemment, c'est niaiseux.

On a clairement besoin de quelque chose. Il va nous falloir, voyons voir. Quand on clique sur ce point de terminaison, on a email et on a password. Les minuscules, c'est vraiment important, alors on les configure : email. On va utiliser une valeur d'exemple. Ça doit être une vraie valeur. Donc une valeur qui est réellement dans la base de données.

Il y a celle-là, puis on va faire password, et ici je vais mettre comme mot de passe 1, 2, 3. 4 5, 6, 7, 8, parce que XO, même s'il ne le dit pas clairement, exige un mot de passe de huit chiffres, ou plutôt de huit caractères. Et je me rends compte que j'ai créé mon utilisateur ici, mais que je n'ai jamais créé son mot de passe.

Faisons-le maintenant. C'est enregistré. OK. Ça, c'est fait, et maintenant on veut des paramètres de requête. Il y a deux façons de le faire. On peut le faire par paramètre de requête. On peut le faire ici. Je vais essayer de cette façon-ci. Et si jamais vous voulez savoir à quoi ça devrait ressembler, si vous n'êtes pas sûr, on peut aller dans l'API, cliquer sur ce point de terminaison, puis faire « run and debug », parce que ça va vous dire exactement ce dont il a besoin.

Bon. On termine ça, et maintenant je dois insérer mon courriel et mon mot de passe. J'ai dit que la casse était importante. Elle n'est pas importante quand on nomme les champs. Elle est importante quand on les envoie dans le corps de la requête. Ça aurait aussi pu être fait comme paramètre de requête, où j'aurais pu mettre email et ensuite le brancher avec du Magic Text.

Mais je ne l'ai pas fait, parce que je trouve ça un peu moins compartimenté, et ça prend moins de clics. On clique sur Next et on a une erreur. C'est quoi, ça? Invalid credentials. OK. Qu'est-ce qui s'est passé? Est-ce que j'ai mis une majuscule? Est-ce que j'ai fait une erreur? Regardons notre base de données. XO ne vous laisse pas la modifier dans deux fenêtres, mais ça peut être vraiment utile d'avoir deux fenêtres ouvertes pour passer de l'une à l'autre avec votre API.

Ah oui. Voilà le problème. J'ai utilisé une majuscule dans ce courriel. Ça va être. Ça va être un problème  de façon générale. Il y a deux ou trois façons de régler ça. Je crois. Non, pas dans les paramètres, changer le type email. OK. Ce qu'on peut faire à la place, parce qu'on veut faire ça en minuscules, c'est que si on regarde, on a email ici.

On a une précondition. L'utilisateur n'est pas égal à null. Et ce qu'on fait là, c'est qu'on. On va chercher l'enregistrement, donc d'abord on va chercher l'enregistrement. On cherche le courriel. On cherche l'utilisateur dont la valeur du champ email correspond au champ email reçu. Et ce qu'on va faire, c'est prendre cette valeur ici, l'entrée, la valeur email, qui est celle à laquelle ça fait référence.

Et on va juste ajouter un filtre, et on va mettre en minuscules. On va la convertir en minuscules. Avant de faire la comparaison, et ensuite, pour ce point de terminaison du moins, ça devrait régler le problème. Alors on réessaie,

encore une erreur, invalid credentials. Bon. Est-ce que j'ai bien fait ça?

Donc encore une fois, si on, ah oui, voyons voir, on va chercher l'utilisateur, on prend la valeur du champ email et on la met en minuscules. Ah oui, évidemment. Le problème, c'est que, oui, le problème, c'est que j'ai mis ça en minuscules, mais il faut en fait que ce soit en majuscules. Et on ne sait pas lequel des deux ça va devoir être.

Le mieux serait qu'on retourne nos résultats en minuscules. Je ne crois pas qu'on ait vraiment cette option ici. Alors ce que je vais faire pour avancer, c'est que je vais, je vais juste mettre ça en minuscules par ici.

Et ce que je vais faire, c'est que chaque fois que je permets à l'utilisateur de s'inscrire ou de se connecter, je vais m'assurer que c'est une zone de texte en minuscules, et ça va nous permettre d'avancer. OK. Mot de passe faible détecté. Veuillez utiliser au moins une lettre. Bon. XO ne me laissera pas passer avec ce mot de passe faible. Alors 1, 2, 3, 4, 5, 6, 7 Q.

Bon. Ça devrait marcher.

On va juste mettre ça à jour et là, on est partis. OK, parfait. Alors, quelle sortie est le jeton d'authentification? Quelle sortie est l'ID de l'utilisateur? Pourquoi est-ce qu'on n'a pas d'ID d'utilisateur ici? La raison, c'est qu'au fond, le jeton d'authentification va servir d'ID d'utilisateur. Quand même, on s'attendrait à ce que XO le retourne par défaut.

Voyons ce qu'il retourne. Il retourne le jeton d'authentification. Il devrait. Oui. Il ne retourne que cette variable-là. Est-ce qu'on peut l'étendre? Je ne suis pas sûr. Voyons. Check password. On pourrait ajouter quelque chose à cette réponse. On pourrait peut-être aller chercher l'utilisateur. En fait, ça ne sera pas vraiment nécessaire, parce qu'on va toujours pouvoir connaître l'ID de l'utilisateur à partir de.

À partir du jeton d'authentification. Maintenant, on veut configurer l'inscription. Faisons-le. On va juste revenir d'un cran ici. OK. Donc pour auth signup, on peut aller chercher ce point de terminaison et voir ce dont on a besoin ici. Il va demander un nom, mais je ne suis pas sûr que ce soit obligatoire, alors j'imagine qu'on va le découvrir. Commençons par ça.

Maintenant, on peut ajouter encore une fois email, et on va utiliser. Com, il va falloir ajouter notre mot de passe ici. Donc du texte encore, et on va l'appeler password. Ce sera un, deux, trois, quatre, six, sept Q. Et j'espère que ce sera assez. Regardons ce qui se passe à la précondition. Ça va s'assurer que l'utilisateur n'existe pas.

Et ensuite, ça va ajouter un enregistrement comme utilisateur, et ça. Non, il exige peut-être ce nom. J'imagine qu'on va le découvrir. Une façon de tester ça très rapidement, comme on l'a vu tantôt, ce serait simplement de faire « run and debug ». Essayons mitch2@test.com avec notre mot de passe assez fort. 1, 2, 3, 4, 5, 6, 7 Q et on lance.

Et OK, donc il n'en a pas besoin. Oui, il n'en a pas besoin. OK. D'habitude, je ne laisserais pas ce jeton d'authentification à l'écran; dans ce cas-ci, c'est juste une configuration de démo avec rien dedans. Mais c'est quand même une bonne habitude de ne pas faire ça. Donc encore une fois, on a un POST, et on peut juste vérifier que oui.

C'est bien POST. Comme on n'a pas besoin de passer un nom, je vais le sauter pour l'instant. Et ce que je peux faire, si vous ne connaissez pas ce truc sur Windows, vous pouvez utiliser la touche Windows avec la lettre V, et ça va ouvrir votre historique de collage, votre historique du presse-papiers. C'est comme ça que j'ai pu coller quelque chose qui n'était pas la dernière chose que j'avais copiée.

Et c'est un truc incroyablement utile. On relance le test encore une fois. Une erreur s'est produite. Ce compte est déjà utilisé. Ah oui. Parce que j'ai essayé de m'inscrire. Inscrivons-nous avec un nouveau courriel. Parce que quand j'ai lancé ce débogage, ça m'a bel et bien inscrit. Parfait. Maintenant, avec le jeton d'authentification encore, pour l'ID d'utilisateur, on n'a pas vraiment besoin de quoi que ce soit là.

OK. Et maintenant, on voudrait passer à Next. Mais on ne peut pas, parce que ce n'est pas encore terminé. Ce qu'on va faire, au fond, c'est tout. On a fait la première configuration de base. Le problème, c'est qu'on n'a pas réellement de base de données d'utilisateurs, comme vous l'avez peut-être remarqué. Et ça va peut-être causer un petit problème si on a besoin d'aller chercher les données de l'utilisateur.

On va vous montrer dans le prochain tutoriel comment gérer ça.

‍

‍

Transcription de la partie 2

‍

Bon. Salut tout le monde. Bon retour. Ce qu'on va faire maintenant, c'est mettre en place une façon de stocker les données de l'utilisateur. On a fait la configuration de la collection externe et la configuration de l'authentification externe, mais il n'existe pas encore de fonctionnalité qui nous permet de configurer un utilisateur externe. On doit donc faire ça un peu à la main, et il n'y a rien non plus qui va stocker nos données d'utilisateur.

Il faut donc faire ça un peu à la main aussi. Regardons. Je vais juste créer un écran. Ici, ce sera un écran vide. On va l'appeler home. Et ce sera le premier écran sur lequel j'arrive. Donc quand je me connecte, si j'utilise la connexion, si j'ai un jeton stocké de la dernière session, ou si je m'inscris, parfait.

Je vais être dans l'application, mais comment l'application va savoir quoi que ce soit sur moi, comme utilisateur? Si on regarde dans XO, la configuration que j'ai, on a ici, actualisons. Je pense qu'on connaît trois utilisateurs depuis le. Depuis la dernière fois que j'ai actualisé l'écran. Oui, les voilà. Alors comment j'irais chercher de l'information? Par exemple, comment j'irais chercher cette propriété role ici?

Not admin. Je n'ai jamais vu une application où on écrit not admin, mais je vais juste le faire pour le fun. Disons que je veux aller chercher le nom du rôle de cet utilisateur. Comment je ferais ça? Et comment je stockerais ça pour peut-être m'en servir dans une condition de visibilité? D'abord, allons. Oui. D'abord, allons chercher ces données d'utilisateur.

Ce qu'on va faire, c'est utiliser le point de terminaison auth/me ici, et on va configurer une action personnalisée avec. Normalement, on la configurerait comme action de page. Le problème, c'est que quand on exécute une action personnalisée comme action de page, elle ne stocke les données nulle part. C'est une limite en ce moment.

Il n'y a pas grand-chose à faire directement, mais il y a une solution de contournement : on peut utiliser un, est-ce que ça s'appelle le countdown timer? Le minuteur. Est-ce qu'il a été retiré? J'en doute.

Le voilà, le countdown timer. OK. Je ne sais pas pourquoi il n'est pas installé chez moi,

mais le voilà. Maintenant, on peut ajouter le countdown timer. D'habitude, je le rends invisible. Ici, on peut mettre, je ne sais pas si on peut vraiment utiliser zéro seconde, quelque chose me dit que, je ne sais pas, je doute que ça fonctionne correctement et de façon fiable, mais ça pourrait très bien marcher.

On a seulement besoin des secondes. Et en fait, on n'a besoin de rien de visible, alors on peut juste enlever toutes les couleurs. Voilà. On va mettre ça transparent. On va mettre la bordure. Oui, on a cette épaisseur de bordure. Pas besoin. La couleur de police aussi. Pas besoin. On a maintenant un petit minuteur complètement invisible ici, et qu'est-ce qu'on va en faire?

Quand il se déclenche après 0,1 seconde, ce qu'on va faire, c'est ajouter une action sous Countdown Finished Actions. C'est là qu'on va créer cette action personnalisée. On va faire une nouvelle action personnalisée, ce sera auth/me. Et le type sera create. OK. Je peux enfin coller mon point de terminaison d'API ici.

On va utiliser un GET, j'en suis presque certain. Bon. Voilà. Et ensuite, aucune entrée n'est requise parce que, comme vous voyez ici, c'est une requête authentifiée. Juste à partir du jeton qu'on utilise, ça va. Détecter qui on est. Ce qu'on va faire ici, c'est authorization. Et par ici, ce qu'on va faire, c'est, on va, ici, je vais appeler ça token, et on va devoir mettre un exemple de ce jeton, alors on va le mettre à jour.

Sous peu, de l'extérieur. Ce que je peux faire dès maintenant, c'est aller chercher un jeton ici en me connectant. En fait, ce qui est astucieux. Ce qui est astucieux dans XO, c'est que si vous allez dans n'importe quel appel authentifié et que vous cliquez ici, vous pouvez vous faire passer pour l'utilisateur de votre choix, copier le jeton, puis le coller.

Le voilà, et ensuite on va mettre ici bearer, espace, puis on va brancher la valeur de notre jeton. Et ce sera. On peut maintenant avancer et lancer la requête de test. Et j'espère que ça marche. Ça a marché. Et on peut voir l'ID, created at, name, email. On veut ajouter l'élément, parce que je veux voir cette propriété admin, et je suis surpris qu'elle ne soit pas retournée, alors on va devoir regarder ça.

OK. Qu'est-ce qui se passe? On retourne cet utilisateur, la sortie. Oui, la sortie n'inclut pas, pour une raison quelconque.  Cette nouvelle propriété. Est-ce possible que je n'aie simplement pas actualisé l'écran assez récemment? Je ne vois pas pourquoi ça affecterait les appels au back-end. Voyons voir. Non. Ce n'est pas ça, le problème.

Si je vais à l'écran ici. Là où je suis, dans ma base de données d'utilisateurs, je pense que c'est assez clair que la propriété est là. Alors qu'est-ce qui empêcherait XO de la voir? Ah! Disons Customize. On n'ajoute pas password. On peut ajouter role. On pourrait ajouter, en fait, je n'aurai pas besoin de cette propriété. Voilà.

En personnalisant ici, vous pouvez enrichir ce qui sort. Une autre chose qu'on pourrait faire, que je vais juste vous montrer, c'est qu'on a deux ou trois objets liés : il y a une relation avec orders et il y a une relation avec items. En fait, je crois qu'il y a seulement une relation avec orders. Voyons ici, je voulais retourner l'élément supplémentaire.

Et je m'éloigne peut-être un peu du sujet, mais au fond, je pourrais aller chercher les commandes et, oui, je pourrais aller chercher certaines de leurs propriétés. En faisant ça, ça me permettrait de retourner plus que l'information de l'utilisateur : de l'information sur les objets liés aussi. OK. Revenons à notre sujet, retournons en arrière et relançons ça, et on le relance juste pour qu'en théorie, ce soit à jour, mais est-ce que j'ai enregistré?

Non. Et si vous n'enregistrez pas dans Zana, ben, il ne se passe rien. OK, voilà. Maintenant, lançons notre requête de test

et maintenant, on peut ajouter role. Voilà, vous pouvez voir que c'est maintenant dans la réponse complète. On va enregistrer cette action personnalisée. Le jeton ici, ce sera toujours le jeton d'authentification de l'utilisateur connecté. Et ce sera ça. Ce qui va se passer, c'est que chaque fois que l'utilisateur arrive sur cette page, on va aller chercher cette information, mais où est-ce qu'elle s'en va, au juste?

C'est ce qu'on va devoir gérer ensuite. Au fond, ce qu'on va faire, c'est juste créer une nouvelle page ici, et je vais l'appeler local storage. Vous avez peut-être remarqué que dans Adel, quand. Quand vous tapez du texte dans un champ, il a tendance à persister. Et même si vous vous déconnectez et vous reconnectez, souvent il le conserve.

On va juste profiter de ça ici. Il existe un composant qui fait du stockage local. Si vous ne voulez pas vous embarquer dans les composants, ça peut être une excellente, ça peut être une excellente façon de les éviter, alors on peut potentiellement, non, on ne peut pas faire ça. Ce qu'on va faire, c'est revenir à notre petit minuteur invisible ici et juste configurer une série d'actions.

Ce qu'on peut faire, c'est mettre à jour, de façon un peu pénible, peut-être un à la fois, on va changer la valeur du champ. Et ici, le champ de local storage, et on va lui faire afficher le courriel de l'utilisateur. Auth.me, et ce sera email. Oui, c'était un champ. On va vouloir lui donner un nom significatif rendu là. Donc email, je vais juste ici, je ne sais pas, on enlève le texte indicatif

ce qui est utile, en fait, c'est de mettre comme texte indicatif quelque chose comme le nom, pour que vous puissiez voir ce que c'est quand vous le regardez. Depuis l'éditeur, donc ici, email. On va appeler celui-ci name, puis le suivant role. Et je pense que vous avez compris l'idée. Ensuite, quand on revient à cette page, on peut juste créer deux ou trois autres actions de mise à jour.

Des actions. Désolé encore, c'est leur change input, tous les écrans, local storage input 2. Je ne les ai pas encore renommés. C'est vrai. Ensuite, depuis auth.me, on va prendre name s'il existe, et pour le dernier, on va faire change input. On va faire, vous voyez, ça devient un peu fastidieux, mais tout compte fait, ça ne prend pas si longtemps.

On va appeler celui-ci role. OK. La dernière chose qu'on veut faire ici, c'est, ici, je vais mettre ce bouton à l'écran et on va l'appeler admin stuff.  C'est le bouton. Comme ça, vous pouvez accéder à toutes les affaires d'admin. Et si on veut faire une condition de visibilité, il sera parfois visible, et ce sera si le local storage input 3, et c'est pour ça que vous voulez leur donner des noms significatifs.

Mais je peux encore le voir à l'écran. Alors c'est correct. Donc si celui-là, disons, contient admin. Contains, c'est pratique parce que c'est insensible à la casse. Voilà. Bon. Si on lance un aperçu de cette application, le plus drôle, c'est que je n'ai créé aucune façon de se connecter à l'application. Pour la tester, il faudrait donc créer rapidement cet écran de connexion.

Est-ce qu'on a, oui, on a un écran de connexion de base. Évidemment. On va l'appeler login. On va juste le mettre ici et on va en faire le. L'écran d'accueil. Non, on va en faire l'écran de bienvenue. Pas l'écran d'accueil. Si on est déjà connecté, évidemment, on voudrait aller ici. Voilà. On va faire de celui-ci l'écran d'accueil.

Maintenant, on a notre écran de connexion. Maintenant, j'ai une façon de me connecter. En fait non, parce qu'il faut que ça m'amène quelque part. Et on pourrait penser qu'il y aurait un bouton de connexion. Il est juste ici. OK. Notre problème, maintenant, c'est qu'on veut afficher les données de l'utilisateur dans ce formulaire, mais ça ne marche pas. On doit donc le construire à la main.

Ce qu'on va faire, c'est juste utiliser quelques champs, et ici, rien de trop compliqué, hein? On va faire. C'est là qu'on va faire les minuscules. Je l'ai mentionné dans une vidéo précédente. Email. Et ensuite, on va faire un, quatre, password. Et la façon dont je fais ça, c'est Alt-clic, juste pour créer la copie, au cas où vous ne connaîtriez pas celui-là, donc password, et ensuite, bon, finalement, on a besoin d'un bouton.

C'est apparemment devenu un tutoriel sur comment construire un écran de connexion. On va mettre la couleur en noir et OK, parfait. Ensuite, on va se débarrasser de ça et on va juste l'appeler. OK. On y est presque. Je vais peut-être accélérer toute cette partie dans le tutoriel, parce qu'on n'en a pas vraiment besoin. Alors on va.

À partir d'ici, on va, d'abord, faire une action, qui est user login, et ce sera external login. Ensuite, voilà, email va être input 4, puis password va être input 5, et voyons si on l'a maintenant.

OK. Donc Mitch. Test.com 2, 3, 5. Oui. Ce 1Password-là ne pourrait pas être plus dans les jambes. C'est une application extraordinaire, la plupart du temps. OK. Je pense que ça a marché, on a oublié de faire, on a oublié de créer un lien. Maintenant, je peux recharger le cadre ici et, si j'étais connecté, ça devrait probablement m'amener à la page suivante.

Évidemment, il faut un lien vers home. Et ensuite une transition. On n'en a pas besoin, mais on va seulement faire ça si le jeton d'authentification

de l'utilisateur connecté n'est pas vide. Parce que ça veut dire qu'on a reçu une réponse. Essayons de nouveau.

Bon. Je suis arrivé à l'écran d'accueil. Voilà. Quand je me suis reconnecté, et maintenant j'ai ce bouton admin stuff. Bon. Ça me montre que la condition de visibilité fonctionne et qu'elle détecte mon statut d'admin. Et si je voulais juste voir cette page local storage ici, on va simplement faire un lien vers local storage pour que je puisse la voir.

Et voilà, on peut voir toutes mes affaires là. C'est donc une façon de stocker les données de l'utilisateur. Même s'il n'y a pas de façon prévue pour ça. Bon. Si vous avez aimé ce tutoriel, n'oubliez pas d'aimer la vidéo et de vous abonner, on va continuer d'en publier d'autres, et dans la prochaine vidéo, je vais vous montrer comment créer une collection externe d'utilisateurs.