So fügen Sie Ihrer PWA mit Okta und Schablone Auth zu Auth zu

Progressive Web Apps (PWAS) revolutionieren die Webentwicklung und bieten eine Lösung für die Herausforderungen bei der Aufrechterhaltung konsistenter Updates in verschiedenen Entwicklungsteams und dem Dilemma der Auswahl zwischen Web- und Mobile -App -Entwicklung. PWAs bieten viele Funktionen für mobile Apps ohne die Verwaltung mehrerer Teams und Codebasen.

ihre Leistung ist dank Caching- und Servicemitarbeiter selbst in langsamen oder offline -Verbindungen außergewöhnlich. Servicearbeiter Intercept Server -Anfragen, Priorisierung von zwischengespeicherten Daten und Aktualisierung mit frischen Serverdaten, sofern verfügbar.

Das Schablonenprojekt des Ionic Teams ist ein Spielveränderer. STENCIL ist ein Compiler, der Standards-konforme Webkomponenten erzeugt und das Aufblähen herkömmlicher JavaScript-Frameworks vermeidet. Es kompiliert Ihren Code in Vanillekomponenten und integriert nahtlos in Ihr bevorzugter Framework. Das Stencil Starter-Projekt ist ein guter Ausgangspunkt, der nahezu perfekte Leuchtturm-PWA-Werte erzielt.

Erstellen einer PWA mit Schablonen: eine Schritt-für-Schritt-Anleitung

1. Stellen Sie die Starteranwendung ein:

   klonen Sie die Starteranwendung und entfernen Sie die Github -Fernbedienung:

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

   Nach dem Login kopieren

   Abhängigkeiten installieren:

   npm install

   Nach dem Login kopieren

   (ignorieren node-pre-gyp Warnungen über fsevents - Dies ist ein bekanntes NPM -Problem.)

2. integrieren okta auth SDK (über CDN):

   Fügen Sie das OKTA -Auth SDK zu index.html vor dem Schluss </body> -Tag:

   hinzu:

   <🎜>

   Nach dem Login kopieren
   (unter Verwendung des CDN ist derzeit mit Schablonen zuverlässiger als das NPM -Paket.)

3. Produktionsbau für genaue PWA -Bewertung:

   npm run build rennen www, um einen Produktionsbau zu generieren. Dadurch enthält der sw.js Ordner, der npm start, Ihren Servicemitarbeiter, enthält. Beachten Sie, dass der Entwicklungsbau (

   ) die PWA -Funktionen nicht genau widerspiegelt.

4. Konfigurieren Sie Ihre OKTA -Anwendung:

   http://localhost:3333 Erstellen Sie ein kostenloses OKTA -Entwicklerkonto (wenn Sie keine haben). Fügen Sie eine neue einseitige App-Anwendung hinzu und benennen Sie sie etwas beschreibend wie "Schablon Spa". Stellen Sie die Basis -URIs ein und leiten Sie die URIs an. Beachten Sie Ihre Kunden -ID und Ihre OKTA -Organisations -URL (z. B. https://dev-XXXXXX.oktapreview.com).

   

5. Erstellen Sie die Authentifizierungskomponente (app-auth):

   im Ordner app-auth.css erstellen app-auth.tsx und components/app-auth. Die app-auth.tsx Datei enthält das Anmeldeformular und die Authentifizierungslogik mit dem Oktaauth SDK. (Siehe Beispiel für den vollständigen Code -Beispiel im Originalartikel.)

6. Fügen Sie die Anmeldemethode hinzu:

   Die login() -Methode übernimmt die Benutzerauthentifizierung mit OKTA, speichert das ID -Token in LocalStorage und leitet nach erfolgreicher Anmeldung auf die Profilseite weiter. Fehlerbehandlung ist enthalten. (Siehe Beispiel für den vollständigen Code -Beispiel im Originalartikel.)

7. Verbesserung der Anmeldungsfunktionalität:

   implementieren componentWillLoad(), um Benutzer direkt auf die Profilseite umzuleiten, wenn ein ID -Token bereits in LocalStorage vorhanden ist. Fügen Sie einen keydown.enter Listener hinzu, damit sich die Anmeldung über die Eingabetaste ermöglicht.

8. Entwickeln Sie die Profilseite (app-profile):

   Erstellen Sie eine Schnittstelle (AppUser.tsx), um die Struktur von Benutzeransprüchen zu definieren. Aktualisieren Sie app-profile.tsx, um Benutzeransprüche aus dem gespeicherten ID -Token anzuzeigen und eine Abmeldetaste hinzuzufügen. Behandeln Sie potenzielle isServer -Szenarien für die Vorschub. (Siehe Beispiel für den vollständigen Code -Beispiel im Originalartikel.)

9. Routing konfigurieren:

   Routen für die Anmeldungs- und Profilseiten in components/my-app/my-app.tsx mit <stencil-route></stencil-route> hinzufügen. Aktualisieren Sie den Link der Startseite zu /profile.

10. Styles hinzufügen (optional):

    Verbessern Sie die visuelle Anziehungskraft der Anmeldeformular- und Profilseite mit CSS. (Siehe Beispiel für den vollständigen Code -Beispiel im Originalartikel.)

Dieser erweiterte Leitfaden bietet einen klareren, prägnanteren Anstieg des Bauens einer PWA mit Authentifizierung mit Schablonen und Okta. Denken Sie daran, den ursprünglichen Artikel für die vollständigen Code -Snippets zu erhalten. Die Bilder aus dem ursprünglichen Artikel sind enthalten, um den Kontext aufrechtzuerhalten.

Das obige ist der detaillierte Inhalt vonSo fügen Sie Ihrer PWA mit Okta und Schablone Auth zu Auth zu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!