Comment ajouter l'authentique à votre PWA avec Okta et pochoir

Les applications Web progressives (PWAS) révolutionnent le développement Web, offrant une solution aux défis de maintenir des mises à jour cohérentes à travers diverses équipes de développement et le dilemme du choix entre le développement d'applications Web et mobile. Les PWA fournissent de nombreuses fonctionnalités d'application mobile sans les frais généraux de la gestion de plusieurs équipes et bases de code.

Leurs performances sont exceptionnelles même sur les connexions lentes ou hors ligne, grâce aux travailleurs de mise en cache et de services. Les travailleurs du service interceptent les demandes de serveur, hiérarchisez les données mises en cache et les mettant à jour avec de nouvelles données de serveur lorsqu'elles sont disponibles.

Le projet de pochoir de l'équipe ionique change la donne. Le pochoir est un compilateur générant des composants Web conformes aux normes, en évitant le ballonnement des cadres JavaScript traditionnels. Il compile votre code dans les composants de la vanille et s'intègre de manière transparente à votre cadre préféré. Le projet de démarrage au pochoir est un excellent point de départ, atteignant les scores PWA du phare presque parfait.

Construire un PWA avec pochoir: un guide étape par étape

1. Configurer l'application de démarrage:

   Clone l'application Starter et supprimez la télécommande GitHub:

   git clone https://github.com/ionic-team/stencil-starter.git my-stencil-app
   cd my-stencil-app
   git remote rm origin

   Installez les dépendances:

   npm install

   (ignorer node-pre-gyp avertissements sur fsevents - c'est un problème de NPM connu.)

2. Intégrer le sdk Okta Auth (via CDN):

   Ajoutez le SDK Okta Auth à index.html avant la fermeture </body> TAG:

   <🎜>

   (L'utilisation du CDN est actuellement plus fiable avec le pochoir que le package NPM.)

3. Bâtiment de production pour une évaluation précise de la PWA:

   Run npm run build pour générer une construction de production. Cela crée le dossier www contenant sw.js, votre agent de service. Notez que la construction de développement (npm start) ne reflètera pas avec précision les capacités PWA.

4. Configurez votre application Okta:

   Créez un compte de développeur OKTA gratuit (si vous n'en avez pas). Ajoutez une nouvelle application d'application à une seule page, en le nommant quelque chose de descriptif comme "SPROCH SPA". Réglez les uris de base et connectez les URI vers http://localhost:3333. Remarquez votre ID client et URL de l'organisation OKTA (par exemple, https://dev-XXXXXX.oktapreview.com).

   

5. Créez le composant d'authentification (app-auth):

   Créer app-auth.css et app-auth.tsx dans le dossier components/app-auth. Le fichier app-auth.tsx contiendra le formulaire de connexion et la logique d'authentification à l'aide du SDK OktaAuth. (Voir l'exemple complet du code dans l'article d'origine.)

6. Ajouter la méthode de connexion:

   La méthode login() gère l'authentification des utilisateurs avec OKTA, stocke le jeton ID dans localStorage et redirige vers la page de profil lors de la connexion réussie. La gestion des erreurs est incluse. (Voir l'exemple complet du code dans l'article d'origine.)

7. Améliorer la fonctionnalité de connexion:

   Implémentez componentWillLoad() pour rediriger les utilisateurs directement vers la page de profil si un jeton ID est déjà présent dans LocalStorage. Ajoutez un écouteur keydown.enter pour permettre la connexion via la touche Entrée.

8. Développer la page de profil (app-profile):

   Créez une interface (AppUser.tsx) pour définir la structure des revendications utilisateur. Mettre à jour app-profile.tsx pour afficher les revendications des utilisateurs à partir du jeton ID stocké et inclure un bouton de déconnexion. Gérer les scénarios de potentiel isServer pour le prétention. (Voir l'exemple complet du code dans l'article d'origine.)

9. Configurer le routage:

   Ajouter des routes pour les pages de connexion et de profil dans components/my-app/my-app.tsx en utilisant <stencil-route></stencil-route>. Mettez à jour le lien de la page d'accueil vers /profile.

10. Ajouter des styles (facultatif):

    Améliorez l'attrait visuel du formulaire de connexion et de la page de profil avec CSS. (Voir l'exemple complet du code dans l'article d'origine.)

Ce guide amélioré fournit une procédure pas à pas plus claire et plus concise de la construction d'une PWA avec authentification à l'aide du pochoir et d'Okta. N'oubliez pas de se référer à l'article d'origine pour les extraits de code complets. Les images de l'article original sont incluses pour maintenir le contexte.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!