Cela signifie-t-il que les sites JAMstack ne peuvent pas gérer les interactions dynamiques? Certainement pas!

Les sites JAMstack sont parfaits pour créer des interactions asynchrones hautement dynamiques. Avec quelques petits ajustements à la façon dont nous pensons à notre code, nous pouvons créer des interactions amusantes et immersives en utilisant uniquement des actifs statiques! construit à partir de JavaScript, du balisage et des API. Les entreprises adorent JAMstack, car elle réduit les coûts d'infrastructure, accélère la livraison et réduit les obstacles aux performances et à la sécurité, car l'expédition d'actifs statiques supprime le besoin de faire évoluer les serveurs ou de maintenir les bases de données hautement disponibles (ce qui signifie également qu'aucun serveur ou base de données être piraté). Des développeurs comme JAMstack car il réduit la complexité de la mise en ligne d'un site Web sur Internet: il n'y a pas de serveurs à gérer ou à déployer; nous pouvons écrire du code frontal et il est mis en ligne comme magic .

(«Magic» dans ce cas est un déploiement statique automatisé, qui est disponible gratuitement à partir d'un nombre d'entreprises, dont Netlify où je travaille.)

Mais si vous passez beaucoup de temps à parler aux développeurs de JAMstack, la question de savoir si JAMstack peut gérer Serious Web Applications ™ va venir. Après tout, les sites JAMstack sont des sites statiques, non? Et les sites statiques ne sont-ils pas très limités dans ce qu'ils peuvent faire?

Il s'agit d'une idée fausse très courante, et dans cet article, nous allons nous pencher sur l'origine de cette idée fausse, examiner les capacités de JAMstack, et parcourez plusieurs exemples d'utilisation de JAMstack pour créer Serious Web Applications ™.

Qu'est-ce qui rend un site JAMstack «statique»?

Les navigateurs Web chargent aujourd'hui des fichiers HTML, CSS et JavaScript, comme ils le faisaient dans les années 90.

Un JAMstack Le site, à sa base, est un dossier plein de fichiers HTML, CSS et JavaScript.

Ce sont des «actifs statiques», ce qui signifie que nous n'avons pas besoin d'une étape intermédiaire pour les générer (par exemple, des projets PHP comme WordPress a besoin d'un serveur pour générer le HTML à chaque demande).

C'est la vraie puissance du JAMstack: il ne nécessite aucune infrastructure spécialisée pour fonctionner. Vous pouvez exécuter un site JAMstack sur votre ordinateur local, en le plaçant sur votre réseau de diffusion de contenu préféré (CDN), en l'hébergeant avec des services comme GitHub Pages – vous pouvez même faire glisser et déposer le dossier dans votre client FTP préféré pour le télécharger à l'hébergement partagé.

Les actifs statiques ne signifient pas nécessairement des expériences statiques

Comme les sites JAMstack sont constitués de fichiers statiques, il est facile de supposer que l'expérience sur ces sites est, vous savez, statique ]. Mais ce n'est pas le cas!

JavaScript est capable de faire beaucoup de choses dynamiques. Après tout, les frameworks JavaScript modernes sont des fichiers statiques après que nous ayons franchi l'étape de construction – et il existe des centaines d'exemples d'expériences de sites Web incroyablement dynamiques.

Il y a une idée fausse commune selon laquelle «statique» signifie inflexible ou fixe. Mais tout ce que «statique» signifie vraiment dans le contexte des «sites statiques», c'est que les navigateurs n'ont pas besoin d'aide pour fournir leur contenu – ils peuvent les utiliser en mode natif sans qu'un serveur ne gère d'abord une étape de traitement.

Ou , autrement dit:

«Éléments statiques» ne signifie pas des applications statiques; cela signifie qu'aucun serveur n'est requis.

Le JAMstack peut-il faire cela?

Si quelqu'un pose des questions sur la création d'une nouvelle application, il est courant de voir des suggestions d'approches JAMstack telles que Gatsby, Eleventy, Nuxt et d'autres outils similaires. Il est tout aussi courant de voir des objections surgir: «les générateurs de sites statiques ne peuvent pas faire _______», où _______ est quelque chose de dynamique.

Mais – comme nous l'avons évoqué dans la section précédente – les sites JAMstack peuvent gérer [dynamique]

Voici une liste incomplète de choses que j'ai entendu à maintes reprises dire que JAMstack ne peut pas gérer ce qu'il peut définitivement:

• Charger les données de manière asynchrone
• Gérer les fichiers de traitement, tels que la manipulation d'images [19659025] Lire et écrire dans une base de données
• Gérer l'authentification des utilisateurs et protéger le contenu derrière une connexion

Dans les sections suivantes, nous verrons comment implémenter chacun de ces workflows sur un site JAMstack.

Si vous avez hâte de voir la JAMstack dynamique en action, vous pouvez voir les démos d'abord, puis revenir et apprendre comment elles fonctionnent.

Une note sur les démos :

Ces démos sont écrites sans aucun framework . Ils ne sont que HTML, CSS et JavaScript standard. Ils ont été construits avec des navigateurs modernes (par exemple Chrome, Firefox, Safari, Edge) et tirent parti de fonctionnalités plus récentes comme modules JavaScript modèles HTML et Fetch API . Aucun polyfill n'a été ajouté, donc si vous utilisez un navigateur non pris en charge, les démos échoueront probablement.

Charger les données à partir d'une API tierce de manière asynchrone

"Que faire si j'ai besoin d'obtenir de nouvelles données une fois mes fichiers statiques »

Dans JAMstack, nous pouvons tirer parti de nombreuses bibliothèques de requêtes asynchrones, y compris Fetch API pour charger des données à l'aide de JavaScript à tout moment.

Démo: Rechercher A API tierce d'un site JAMstack

Un scénario courant qui nécessite un chargement asynchrone est lorsque le contenu dont nous avons besoin dépend de l'entrée de l'utilisateur. Par exemple, si nous créons une page de recherche pour l'API Rick & Morty nous ne savons pas quel contenu afficher jusqu'à ce que quelqu'un ait entré un terme de recherche.

Pour gérer cela, nous devons:

1. Créez un formulaire dans lequel les utilisateurs peuvent saisir leur terme de recherche,
2. Écoutez une soumission de formulaire,
3. Obtenez le terme de recherche dans la soumission de formulaire,
4. Envoyez une demande asynchrone à l'API Rick & Morty à l'aide de le terme de recherche,
5. Afficher les résultats de la demande sur la page.

Tout d'abord, nous devons créer un formulaire et un élément vide qui contiendront nos résultats de recherche, qui ressemble à ceci:

   Rechercher des caractères par leur nom [19659046] Recherche 

Ensuite, nous devons écrire une fonction qui gère les soumissions de formulaires. Cette fonction:

• Empêche le comportement de soumission de formulaire par défaut
• Récupère le terme de recherche à partir du formulaire
• Utilisez l'API Fetch pour envoyer une demande à l'API Rick & Morty en utilisant le terme de recherche
• Appelez un fonction d'assistance qui affiche les résultats de la recherche sur la page

Nous devons également ajouter un écouteur d'événements sur le formulaire pour l'événement submit qui appelle notre fonction de gestionnaire.

Voici à quoi ressemble ce code:

Remarque: pour rester concentré sur les comportements dynamiques JAMstack, nous ne discuterons pas de la façon dont les fonctions utilitaires comme showResults sont écrites. Le code est bien commenté, cependant, donc consultez la source pour savoir comment cela fonctionne!

Avec ce code en place, nous pouvons charger notre site dans un navigateur et nous verrons le formulaire vide avec aucun résultat montrant:

Si nous saisissons un nom de personnage (par exemple "rick") et cliquez sur "rechercher", nous voir une liste de caractères dont le nom contient «rick» affiché:

Hé! Ce site statique a-t-il simplement chargé dynamiquement les données? Holy buckets!

Vous pouvez l'essayer par vous-même sur la démo en direct ou consultez le code source complet pour plus de détails.

Gérez des tâches de calcul coûteuses hors du Appareil de l'utilisateur

Dans de nombreuses applications, nous devons faire des choses qui nécessitent beaucoup de ressources, comme le traitement d'une image. Bien que certains de ces types d'opérations soient possibles en utilisant uniquement du JavaScript côté client, ce n'est pas nécessairement une bonne idée de faire en sorte que les appareils de vos utilisateurs fassent tout ce travail. S'ils sont sur un appareil de faible puissance ou essaient de prolonger leur 5% d'autonomie de batterie, faire faire à leur appareil un tas de travail va probablement être une expérience frustrante pour eux.

Cela signifie donc que Les applications JAMstack n'ont pas de chance? Pas du tout!

Le "A" dans JAMstack signifie API. Cela signifie que nous pouvons envoyer ce travail à une API et éviter de faire tourner les ventilateurs de l'ordinateur de nos utilisateurs jusqu'au paramètre «survoler».

«Mais attendez», pourriez-vous dire. "Si notre application doit faire un travail personnalisé et que ce travail nécessite une API, cela ne signifie-t-il pas simplement que nous construisons un serveur?"

Grâce à la puissance des fonctions sans serveur, nous n'avons pas à le faire! [19659002] Les fonctions sans serveur (également appelées «fonctions lambda») sont une sorte d'API sans aucun passe-partout de serveur requis. Nous arrivons à écrire une ancienne fonction JavaScript, et tout le travail de déploiement, de mise à l'échelle, de routage, etc. est déchargé sur notre fournisseur sans serveur de choix.

L'utilisation de fonctions sans serveur ne signifie pas qu'il n'y a pas de serveur; cela signifie simplement que nous n'avons pas besoin de penser à un serveur.

Les fonctions sans serveur sont le beurre d'arachide de notre JAMstack: elles débloquent tout un monde de fonctionnalités dynamiques de grande puissance sans jamais nous demander de traiter avec le code du serveur ou

Démo: convertir une image en niveaux de gris

Supposons que nous avons une application qui doit:

• Télécharger une image à partir d'une URL
• Convertir cette image en niveaux de gris
• Télécharger l'image convertie en un dépôt GitHub

Pour autant que je sache, il n'y a aucun moyen de faire des conversions d'images comme ça entièrement dans le navigateur – et même s'il y en avait, c'est une chose assez gourmande en ressources, donc nous ne voulons probablement pas mettre cette charge sur les appareils de nos utilisateurs.

Au lieu de cela, nous pouvons soumettre l'URL à convertir en une fonction sans serveur, qui fera le gros du travail pour nous et renverra une URL vers une image convertie.

Pour notre fonction sans serveur, nous utiliserons Fonctions Netlify . Dans le code de notre site, nous ajoutons un dossier au niveau racine appelé «fonctions» et créons un nouveau fichier appelé «convert-image.js» à l'intérieur. Ensuite, nous écrivons ce qu'on appelle un gestionnaire, qui reçoit et – comme vous l'avez peut-être deviné – gère les demandes vers notre fonction sans serveur.

Pour convertir une image, cela ressemble à ceci:

 exporte .handler = async event => {
 // essaie uniquement de gérer les requêtes POST
 if (event.httpMethod! == 'POST') {
   return {statusCode: 404, body: '404 Not Found'};
 }

 essayez {
   // récupère l'URL de l'image de la soumission POST
   const {imageURL} = JSON.parse (event.body);

   // utilise un répertoire temporaire pour éviter la corruption de fichiers intermédiaires
   // voir https://www.npmjs.com/package/tmp
   const tmpDir = tmp.dirSync ();

   const convertPath = attendre convertToGrayscale (imageURL, tmpDir);

   // télécharger l'image traitée sur GitHub
   réponse const = attendre uploadToGitHub (convertiPath, tmpDir.name);

   revenir {
     statusCode: 200,
     corps: JSON.stringify ({
       url: response.data.content.download_url,
     }),
   };
 } catch (erreur) {
   revenir {
     statusCode: 500,
     corps: JSON.stringify (error.message),
   };
 }
};

Cette fonction effectue les opérations suivantes:

1. Vérifie que la demande a été envoyée à l'aide de la méthode HTTP POST
2. Récupère l'URL de l'image à partir du corps POST
3. Crée un répertoire temporaire pour stocker les fichiers qui seront nettoyés vers le haut une fois la fonction exécutée
4. Appelle une fonction d'assistance qui convertit l'image en niveaux de gris
5. Appelle une fonction d'assistance qui télécharge l'image convertie vers GitHub
6. Renvoie un objet de réponse avec un code d'état HTTP 200 et le nouveau URL de l'image téléchargée

Remarque : Nous ne reviendrons pas sur le fonctionnement de l'assistant pour la conversion d'image ou le téléchargement sur GitHub, mais le code source est bien commenté, donc vous pouvez voir comment cela fonctionne.

Ensuite, nous devons ajouter un formulaire qui sera utilisé pour soumettre des URL pour le traitement et un endroit pour afficher l'avant et après:

  URL d'une image à convertir [19659093] Convertir 


 

Enfin, nous devons ajouter un écouteur d'événements au formulaire afin que nous puissions envoyer les URL à notre fonction sans serveur pour traitement:

Après avoir déployé le site (avec son nouveau dossier «fonctions») sur Netlify et / ou démarré Netlify Dev dans notre CLI, nous pouvons voir le formulaire dans notre navigateur:

Si nous ajoutons une URL d'image au formulaire et cliquez sur «convertir», nous verrons «traitement…» pour un moment pendant la conversion, nous verrons l'image d'origine et son homologue en niveaux de gris nouvellement créé:

Grand aperçu )

Oh dang! Notre site JAMstack vient de gérer des affaires assez sérieuses et nous n'avons pas eu à penser à des serveurs une seule fois ou à épuiser les batteries de nos utilisateurs!

Utiliser une base de données pour stocker et récupérer des entrées

Dans de nombreuses applications, nous allons inévitablement avoir besoin de pouvoir enregistrer les entrées de l'utilisateur. Et cela signifie que nous avons besoin d'une base de données.

Vous pensez peut-être, "Alors c'est tout, non? Le gabarit est en place? Un site JAMstack – dont vous nous avez dit qu'il ne s'agit que d'une collection de fichiers dans un dossier – ne peut certainement pas être connecté à une base de données! "

Au contraire.

Comme nous l'avons vu dans la section précédente, les fonctions sans serveur nous permettent de faire toutes sortes de choses puissantes sans avoir à créer nos propres serveurs.

De même, nous pouvons utiliser des outils de base de données en tant que service (DBaaS), comme Fauna et Amplify DataStore pour lire et écrire dans une base de données sans avoir à en créer une ou à l'héberger nous-mêmes.

Les outils DBaaS simplifient massivement le processus de configuration des bases de données pour les sites Web: création d'un une nouvelle base de données est aussi simple que de définir les types de données que nous voulons stocker. Les outils génèrent automatiquement tout le code pour gérer les opérations de création, de lecture, de mise à jour et de suppression (CRUD) et le rendent disponible pour nous à utiliser via l'API, de sorte que nous n'avons pas réellement à gérer une base de données ; nous pouvons simplement l'utiliser .

Démo: Créer une page de pétition

Si nous voulons créer une petite application pour collecter les signatures numériques d'une pétition, nous devons mettre en place une base de données à stocker

Pour cette démo, nous utiliserons Fauna comme fournisseur DBaaS. Nous n'entrerons pas dans les détails du fonctionnement de Fauna, mais dans l'intérêt de démontrer le peu d'efforts requis pour mettre en place une base de données, listons chaque étape et cliquez pour obtenir une base de données prête à l'emploi:

1. Créez un Compte Faune sur https://fauna.com
2. Cliquez sur "créer une nouvelle base de données"
3. Donnez un nom à la base de données (par exemple "dynamic-jamstack-demos")
4. Cliquez sur "créer »
5. Cliquez sur« sécurité »dans le menu de gauche à la page suivante
6. Cliquez sur« nouvelle clé »
7. Changez la liste déroulante des rôles en« Serveur »
8. Ajoutez un nom pour la clé (par exemple,« Dynamique » JAMstack Demos ”)
9. Stockez la clé dans un endroit sûr pour une utilisation avec l'application
10. Cliquez sur“ enregistrer ”
11. Cliquez sur“ GraphQL ”dans le menu de gauche
12. Cliquez sur“ importer le schéma ”
13. Téléchargez un fichier appelé db-schema.gql qui contient le code suivant:

 type Signature {
 nom: String!
}

type Query {
 signatures: [Signature!]!
}

Une fois le schéma téléchargé, notre base de données est prête à l'emploi. (Sérieusement.)

Treize étapes, c'est beaucoup, mais avec ces treize étapes, nous venons d'obtenir une base de données, une API GraphQL, une gestion automatique de la capacité, une mise à l'échelle, un déploiement, une sécurité, etc. – le tout géré par des experts en bases de données. Gratuitement. Quel moment pour vivre!

Pour l'essayer, l'option "GraphQL" dans le menu de gauche nous donne un explorateur GraphQL avec une documentation sur les requêtes et mutations disponibles qui nous permettent d'effectuer des opérations CRUD.

Note : Nous n'entrerons pas dans les détails sur les requêtes et mutations GraphQL dans ce post, mais Eve Porcello a écrit une excellente introduction pour envoyer des requêtes et mutations GraphQL si vous voulez un

Avec la base de données prête à l'emploi, nous pouvons créer une fonction sans serveur qui stocke de nouvelles signatures dans la base de données:

 const qs = require ('querystring');
const graphql = require ('./ util / graphql');

exports.handler = événement asynchrone => {
 essayez {
   // récupère la signature des données POST
   const {signature} = qs.parse (event.body);

   const ADD_SIGNATURE = `
     mutation ($ signature: String!) {
       createSignature (données: {nom: $ signature}) {
         _id
       }
     }
   "

   // stocke la signature dans la base de données
   attendre graphql (ADD_SIGNATURE, {signature});

   // renvoyer les gens sur la page de pétition
   revenir {
     statusCode: 302,
     en-têtes: {
       Emplacement: '/ 03-store-data /',
     },
     // le corps n'est pas utilisé dans les codes 3xx, mais requis dans toutes les réponses de fonction
     corps: 'rediriger ...',
   };
 } catch (erreur) {
   revenir {
     statusCode: 500,
     corps: JSON.stringify (error.message),
   };
 }
};

Cette fonction effectue les opérations suivantes:

1. Récupère la valeur de signature du formulaire POST data
2. Appelle une fonction d'assistance qui stocke la signature dans la base de données
3. Définit une mutation GraphQL à écrire vers la base de données
4. Envoie la mutation à l'aide d'une fonction d'assistance GraphQL
5. Redirige vers la page qui a soumis les données

Ensuite, nous avons besoin d'une fonction sans serveur pour lire toutes les signatures de la base de données afin que nous puissions montrer combien de personnes soutiennent notre pétition:

 const graphql = require ('./ util / graphql');

exports.handler = async () => {
 const {signatures} = attendre graphql (`
   requête {
     signatures {
       Les données {
         prénom
       }
     }
   }
 ');

 revenir {
   statusCode: 200,
   corps: JSON.stringify (signatures.data),
 };
};

Cette fonction envoie une requête et la renvoie.

Une note importante sur les touches sensibles et les applications JAMstack :

Une chose à noter à propos de cette application est que nous utilisons des fonctions sans serveur pour les rendre appelle parce que nous devons transmettre une clé de serveur privée à Fauna qui prouve que nous avons un accès en lecture et en écriture à cette base de données. Nous ne pouvons pas mettre cette clé dans le code côté client, car cela signifierait que n'importe qui pourrait le trouver dans le code source et l'utiliser pour effectuer des opérations CRUD sur notre base de données. Les fonctions sans serveur sont essentielles pour garder les clés privées privées dans les applications JAMstack.

Une fois nos fonctions sans serveur configurées, nous pouvons ajouter un formulaire qui se soumet à la fonction pour ajouter une signature, un élément pour afficher les signatures existantes, et un peu peu de JS pour appeler la fonction pour obtenir des signatures et les mettre dans notre élément d'affichage:

  Votre nom 
 
  Signe 


  

Si nous chargeons ceci dans le navigateur, nous verrons notre formulaire de pétition avec les signatures en dessous:

Ensuite, si nous ajoutons notre signature…

… et soumettez-le, nous verrons notre nom annexé au bas de la liste:

Hot diggity dog! Nous venons d'écrire une application JAMstack basée sur une base de données complète avec environ 75 lignes de code et 7 lignes de schéma de base de données!

Protéger le contenu avec l'authentification des utilisateurs

«D'accord, vous êtes sûr coincé cette fois », vous pensez peut-être. «Il n'y a aucun moyen qu'un site JAMstack puisse gérer l'authentification des utilisateurs. Comment cela pourrait-il fonctionner, même?! "

Je vais vous dire comment cela fonctionne, mon ami: avec nos fonctions sans serveur fiables et OAuth.

OAuth est une norme largement adoptée pour permettre aux utilisateurs de donner aux applications un accès limité à leurs informations de compte plutôt que de partager leurs mots de passe. Si vous vous êtes déjà connecté à un service à l'aide d'un autre service (par exemple, «connectez-vous avec votre compte Google»), vous avez déjà utilisé OAuth.

Remarque: Nous n'irons pas plus loin sur le fonctionnement d'OAuth, mais Aaron Parecki a écrit un aperçu complet d'OAuth qui couvre les détails et le flux de travail.

Dans les applications JAMstack, nous pouvons tirer parti d'OAuth et des jetons Web JSON ( JWTs) qu'il nous fournit pour identifier les utilisateurs, pour protéger le contenu et autoriser uniquement les utilisateurs connectés à le visualiser.

Démo: Exiger une connexion pour afficher le contenu protégé

Si nous devons créer un site qui n'affiche que du contenu aux utilisateurs connectés, nous avons besoin de quelques éléments:

1. Un fournisseur d'identité qui gère les utilisateurs et le flux de connexion
2. Éléments d'interface utilisateur pour gérer la connexion et la déconnexion
3. Une fonction sans serveur qui vérifie une connexion -en utilisateur utilisant des JWT et retourne le contenu protégé s'il est fourni

Pour cet exemple, nous utiliserons Netli fy Identity qui nous offre une expérience de développeur très agréable pour ajouter une authentification et fournit un widget intégré pour gérer les actions de connexion et de déconnexion.

Pour l'activer:

• Visitez votre tableau de bord Netlify
• Choisissez le site qui nécessite une authentification dans votre liste de sites
• Cliquez sur "identité" dans la navigation supérieure
• Cliquez sur le bouton "Activer l'identité"

Nous pouvons ajouter Netlify Identity à notre site en ajoutant un balisage qui affiche le contenu déconnecté et ajoute un élément pour afficher le contenu protégé après la connexion:

  
 Super Secret Stuff! 
  
 ? seuls mes meilleurs amis peuvent voir ce contenu 
   connectez-vous / inscrivez-vous pour être mon meilleur ami [19659179] se déconnecter 

Ce balisage s'appuie sur CSS pour afficher le contenu selon que l'utilisateur est connecté ou non. Cependant, nous ne pouvons pas compter sur cela pour protéger réellement le contenu – n'importe qui pourrait afficher le code source et voler nos secrets!

Au lieu de cela, nous avons créé un div vide qui contiendra notre contenu protégé, mais nous devrons faire une demande à une fonction sans serveur pour obtenir réellement ce contenu. Nous allons voir comment cela fonctionne sous peu.

Ensuite, nous devons ajouter du code pour faire fonctionner notre bouton de connexion, charger le contenu protégé et l'afficher à l'écran:

Voici ce que fait ce code:

1. Charge le widget Netlify Identity qui est une bibliothèque d'aide qui crée un modal de connexion, gère le flux de travail OAuth avec Netlify Identity et donne à notre application l'accès à la informations de l'utilisateur connecté
2. Ajoute un écouteur d'événements au bouton de connexion qui déclenche l'ouverture du modal de connexion Netlify Identity
3. Ajoute un écouteur d'événements au bouton de déconnexion qui appelle la méthode de déconnexion Netlify Identity
4. Ajoute un gestionnaire d'événements pour la déconnexion afin de supprimer la classe authentifiée à la déconnexion, qui masque le contenu connecté et affiche le contenu déconnecté
5. Ajoute un gestionnaire d'événements pour la connexion:
   1. Ajoute la classe authentifiée pour afficher la connexion contenu et masquer le contenu déconnecté
   2. Récupère le JWT de l'utilisateur connecté
   3. Appelle une fonction sans serveur pour charger le contenu protégé, en envoyant le JWT dans l'en-tête Autorisation
   4. Place le contenu secret dans le div secret-stuff si connecté les utilisateurs peuvent le voir

À l'heure actuelle, la fonction sans serveur que nous appelons dans ce code n'existe pas. Créons-le avec le code suivant:

 exports.handler = async (_event, context) => {
 essayez {
   const {user} = context.clientContext;

   si (! utilisateur) lance une nouvelle erreur ('Non autorisé');

   revenir {
     statusCode: 200,
     en-têtes: {
       'Content-Type': 'text / html',
     },
     corps: `
       
       
 Si vous pouvez lire ceci, cela signifie que nous sommes les meilleurs amis. 
       

          Voici les détails secrets de ma fête d'anniversaire: 
 jason.af/party 
       
      `,
   };
 } catch (erreur) {
   revenir {
     statusCode: 401,
     corps: «Non autorisé»,
   };
 }
};

Cette fonction effectue les opérations suivantes:

1. Recherche un utilisateur dans l'argument de contexte de la fonction sans serveur
2. Lance une erreur si aucun utilisateur n'est trouvé
3. Renvoie un contenu secret après s'être assuré qu'un utilisateur connecté l'a demandé [19659044] Les fonctions Netlify détectent les JWT Netlify Identity dans les en-têtes d'autorisation et mettent automatiquement ces informations en contexte – cela signifie que nous pouvons rechercher des JWT valides sans avoir à écrire de code pour valider les JWT!

   Lorsque nous chargeons cette page dans notre navigateur, nous verrons d'abord la page de déconnexion:

   

   Si nous cliquons sur le bouton pour vous connecter, nous verrons le widget Netlify Identity:

   

   Après la connexion (ou l'inscription), nous pouvons voir le contenu protégé:

   

   Wowee! Nous venons d'ajouter la connexion utilisateur et le contenu protégé à une application JAMstack!

   Que faire ensuite

   Le JAMstack est bien plus que «des sites statiques» – nous pouvons répondre aux interactions des utilisateurs, stocker des données, gérer l'authentification des utilisateurs et à peu près tout ce que nous voulons faire sur un site Web moderne. Et tout cela sans avoir besoin de provisionner, configurer ou déployer un serveur!

   Que voulez-vous construire avec JAMstack? Y a-t-il quelque chose que vous n'êtes toujours pas convaincu que la JAMstack puisse gérer? J'aimerais beaucoup en entendre parler – contactez-moi sur Twitter ou dans les commentaires!

   (dm, il)