Dieser Artikel wurde ursprünglich im Okta Developer Blog ver?ffentlicht. Vielen Dank, dass Sie die Partner unterstützt haben, die SitePoint erm?glichen.

reags ist eine schnelle und leichte Bibliothek, die zu einer schnellen Einführung des Spa-?kosystems (Single-Page-App) geführt hat. Preact ist eine noch leichtere und schnellere Alternative zum Reaktieren und wiegt bei einem massiven 3 KB! Für weniger komplexe Anwendungen kann es eine gute Wahl sein.

In diesem Tutorial erstellen Sie eine grundlegende Preact-Anwendung mit ein paar Seiten und der Benutzerauthentifizierung mit dem Okta-Anmeldet-Widget.

Key Takeaways

• Verwenden Sie Preactcli, um eine neue Vorwirkungsanwendung effizient zu senken und ihre Kompatibilit?t mit einigen React -Plugins zu nutzen und gleichzeitig ein leichteres, schnelleres Framework zu genie?en.
• Integrieren Sie die Benutzerauthentifizierung in Ihre Preact-App mit dem Okta-Anmelde-Widget, um den Prozess der Verwaltung von Benutzersitzungen und Sicherheit zu vereinfachen.
• Implementieren von Komponenten h?herer Ordnung (HOCs) für die Authentifizierung zur Verwaltung von Benutzeranmeldeszust?nden und dem Schutz von Routen in Ihrer Vorwirkungsanwendung effektiv.
• Verwenden Sie den Router und die benutzerdefinierten Umleitungskomponenten von Preact, um Navigation und Routenschutz zu behandeln, und stellen Sie sicher, dass die Benutzer anhand ihres Authentifizierungsstatus angemessen gerichtet sind.
• Aktualisieren Sie verschiedene Komponenten, wie z.

Bootstrap Ihre App mit Preactcli

Um Ihr Projekt zu starten, installieren Sie die Preactcli mit NPM.

npm install -g preact-cli

Sobald Sie die CLI installiert haben, führen Sie den Befehl aus, um eine Basisvorwirkung zu erstellen:

preact create okta-preact-example

Dieser Befehl tuckert ein paar Minuten Gerüst mit einer grundlegenden Preact -App und installiert alle Abh?ngigkeiten. Sobald dies erledigt ist, sollten Sie eine Reihe von Informationen über die Befehlszeile sehen, die Sie darüber informieren, was Sie als n?chstes tun k?nnen.

in das Anwendungsverzeichnis wechseln.

cd okta-preact-example

Dann starten Sie die Anwendung, nur um sicherzustellen, dass alles wie erwartet funktioniert.

npm start

Sie sollten einen schnellen Build -Lauf sehen, und der Bildschirm wird klargestellt und Ihnen zeigen, dass die Anwendung unter http: // localhost: 8080 ausgeführt wird. Wenn Sie diese URL in Ihrem Browser ?ffnen, sollten Sie eine solche Seite sehen:

Einige Dinge, die über Preactcli

beachten müssen,

Obwohl die von Preactcli-generierte App eine React-App aussieht, die durch Create-React-App erzeugt wird und Sie sogar einige der React-Plugins (wie React-Router) in Ihrer Preact-Anwendung verwenden k?nnen, gibt es einige wichtige Unterschiede.

Zum Beispiel gibt es im Gegensatz zum ReactCli keine M?glichkeit, die Webpack -Konfiguration auszuwerfen. Stattdessen ermutigt PREACT Entwickler, WebPack durch das Erstellen einer Datei namens Preact.config.js anzupassen, wobei die Webpack -Konfigurationshelper von PREACT und Exportfunktionen zur ?nderung der Art und Weise, wie sich Webpack verh?lt, ?ndern.

Obwohl die Preactcli sagt, dass die Anwendung unter http://0.0.0.0:8080 ausgeführt wird, verwenden Sie http: // localhost: 8080. Es ist dasselbe und wenn Sie Ihre Anwendung im Okta -Dashboard einrichten, setzen Sie http: // localhost: 8080 als Basis -URL und Callback -URL. >

Erstellen Sie Ihre Okta -Anwendung

Jetzt, da Sie die grundlegende Shell einer Anwendung haben, ist es Zeit, die Benutzerauthentifizierung hinzuzufügen. Wenn Sie noch keinen haben, erstellen Sie bei Okta ein kostenloses (für immer) Konto.

Sobald Sie ein Konto erstellt haben, gehen Sie zum Administrator -Dashboard und klicken Sie im Menü Seiten auf "Anwendungen". Klicken Sie dann auf die Schaltfl?che ?Grüne Anwendung hinzufügen“ und dann die Schaltfl?che ?Neue App erstellen“, damit Sie ein modales Fenster wie:

sehen

W?hlen Sie "Spa" aus den Plattform -Schaltfl?chen. Klicken Sie auf die Schaltfl?che ?Weiter“, um Ihre Anwendung zu erstellen.

Auf diese Weise führt Sie zu einem Bildschirm zur Seite "Anwendungseinstellungen" des Assistenten für Anwendungsassistenten. Geben Sie "oktapreactexample" in das Feld Anwendungsname ein und fügen Sie http: // localhost: 8080 als Basis -URI und als Login -Umleitungs -URI hinzu. Wenn Sie fertig sind, sollte Ihr Formular so aussehen:

Sie müssen einen Benutzer erstellen (wenn Sie noch keine haben) und diese auch Ihrer neuen Anwendung ihm zuweisen. Oder Sie k?nnen sich mit den Anmeldeinformationen anmelden, mit denen Sie sich in Ihrem OKTA -Konto anmelden (dem Administratorbenutzer).

Installieren Sie das Okta -Zeichen in Widget

Der einfachste Weg, um die Authentifizierung von Okta in Ihre neue Preact-Anwendung zu bringen, besteht darin, das Anmeldewidget von Okta zu verwenden. Sie installieren es mit NPM mit:

npm install -g preact-cli

Sie müssen auch Preact-Router mit:

installieren

preact create okta-preact-example

Fügen Sie eine Auth-Komponente h?herer Ordnung

hinzu

Mit diesem erledigt müssen Sie jetzt einige Komponenten h?herer Ordnung hinzufügen, um die Authentifizierung zu unterstützen.

Fügen Sie eine Datei mit dem Namen auth.js im Ordner /src /lib und fügen Sie den folgenden Code hinzu:

cd okta-preact-example

In der ersten Codezeile k?nnen Sie etwas anderes erkennen. Das H -Modul in Preact verwandelt JSX in DOM -Elemente. Normalerweise würde React die React -Bibliothek verwenden, um React.Createelement -Anweisungen zu erzeugen, um DOM -Elemente aus JSX zu erstellen. Preact verwendet die H -Bibliothek, um so etwas wie H ('Div', {Klasse: 'etwas'}, 'Inhalt') zu machen, um dies zu tun.

Als n?chstes haben Sie die Route vom Preact-Router direkt unter dem H-Import importiert. Dies wird von Preact verwendet, um die Weiterleitungen in der Anmeldefunktion durchzuführen. Beachten Sie, dass die Auth -Klasse nur eine regul?re Funktion ist und die Komponente nicht erweitert. Im Konstruktor wurden die internen Funktionen mit diesem Kontext aus der Auth -Klasse gebunden.

Geben Sie dann Ihre OKTA-Organisations-URL- und Client-ID in die Okta-Anmelde-Widget-Konfiguration ein. Ihre Organisations-URL ist die URL, die Sie verwenden, wenn Sie sich in Ihrem OKTA-Konto anmelden (z. B. http://dev-12345.oktapreview.com). Registerkarte "Registerkarte" für Ihre Anwendung (offensichtlich wird Ihre nicht verschwommen):

Sie m?chten auch die Recirecturi -Eigenschaft in http: // localhost: 8080 ?ndern, da der Preact Port 8080 anstelle von 3000 für normale React -Apps verwendet.

Die Anmeldungsfunktion leitet einfach den Benutzer zur Anmeldeseite, w?hrend die Abmeldefunktion die im Widget -Token -Manager gespeicherten Token l?scht, die Anmeldung auf dem Widget aufruft und den Benutzer zum Stammerwalt der Anwendung umleitet.

Schlie?lich wird ein Singleton der Auth -Klasse erstellt, um von allen Komponenten gemeinsam genutzt zu werden, und wird als Requisite als Auth genannt an eine beliebige Komponente übergeben, die Sie mit auth einwickeln.

Erstellen Sie einen Widget -Wrapper

Erstellen Sie eine Datei in Ihrem /src /lib -Ordner namens oktasigninwidget.js. Geben Sie den Code für diese Komponente ein:

npm install -g preact-cli

Hier macht die KomponentDidmount-Methode das Okta-Anmelde-Widget in der DIV in Ihrer Render-Methode, und die Komponentiermount-Funktion entfernt das Widget.

In der Render-Methode gibt es einen seltsam aussehenden Code. Auf diese Weise k?nnen Sie eine Referenz auf das aktuelle Element in eine Variable namens WidgetContainer einstellen und diese dann im componentDidmount as this.widgetContainer verwenden. Ordentlich, oder? Vielen Dank an Matt Raible, dass Sie mir diesen Trick gezeigt haben!

Erstellen Sie eine Weiterleitungskomponente

Der React-Router enth?lt eine Umleitungskomponente, aber der Preact-Router nicht, sodass Sie eine ben?tigen. Zum Glück ist es einfach, Ihre eigenen zu erstellen. Erstellen Sie in Ihrem /src /lib -Ordner eine Datei namens redirect.js und fügen Sie den folgenden Code hinzu:

preact create okta-preact-example

Dies ist nur eine Komponente, die basierend auf einer URL, die an sie weitergegeben wurde, umleitet. In diesem Fall wird die Verwendung mit dem Mechanismus "Fenster.location" umgeleitet, haupts?chlich, weil Sie die Seite aktualisieren m?chten. Sie k?nnen auch die Route (this.props.to.PathName) verwenden und den Router von Preact den Benutzer umleiten lassen.

Erstellen Sie eine Anmeldekomponente

Erstellen Sie als n?chstes einen Anmeldeordner in SRC/Routen. Erstellen Sie in diesem Ordner eine Index.js -Datei und eine style.css -Datei. Dies folgt nur zusammen mit der Art und Weise, wie die Preact CLI Komponenten erstellt.

Erstellen Sie in der Datei index.js eine Anmeldekomponente, die in die WithAuth -Komponente eingewickelt ist. Erstens durch Importieren der ben?tigten Module:

npm install -g preact-cli

Starten Sie die Komponente, indem Sie in die zuvor erstellte Komponente h?herer Ordnung einwickeln, und legen Sie den Anfangszustand fest. Hier haben Sie den RedirectTorferrer standardm??ig auf False eingestellt.

preact create okta-preact-example

In der Komponentiermount -Lebenszyklusfunktion verdrahten Sie die Onsuccess- und OnError -Funktionen und erstellen Sie sie in Ihrer Komponente.

cd okta-preact-example

Sie werden feststellen, dass Ihre Komponente die Handhabung der Authentifizierung an die Komponente h?herer Ordnung übergibt. Dies ist ein Hauptbeispiel für die Vorteile von Komponenten h?herer Ordnung und Zusammensetzung in JavaScript.

Erstellen Sie schlie?lich die Render -Funktion, mit der die Entscheidung über das Anmeldungs ??-Widget angezeigt wird, oder, wenn der Benutzer bereits angemeldet ist, sie auf die Startseite umleiten. Sie konnten den Benutzer auch auf die Seite umleiten, auf die sie zu der Anmeldeseite umgeleitet wurden, aber lassen Sie uns das vorerst überspringen.

npm start

Sie werden hier feststellen, dass Preact etwas anders ist, da es Ihnen Griffe zu Requisiten und Status als Parameter für die Renderfunktion gibt. Dieser Code verwendet lediglich die Zerst?rung dieser Parameter, um die Verwendung von Ort, Auth und RedirectTorferrer einfach zu erstellen, ohne eine Tonne davon zu haben. {Was auch immer}.

Also deine endgültige /src/routes/login/index.js Datei sieht aus wie:

npm install @okta/okta-signin-widget --save

Aktualisieren Sie die Profilseite

Jetzt, da Sie die Anmeldekomponente haben und das OKTA-Sign-In-Widget verwendet, verwenden Sie die von Ihnen erstellte Auth-Komponente und aktualisieren Sie die Profilseite (in /src/routes/profile/index.js), um Ihnen weitere zu geben Informationen über den Benutzer. So sollte Ihre endgültige Datei Ihre endgültige /src/routes/profile/index.js aussehen:

npm install preact-router --save

Sie haben den Authentifizierungsschutz auf Komponentenebene in der Komponentenfunktion der Komponente hinzugefügt. Wenn der Benutzer authentifiziert ist, ruft er die Funktion GetCurrentuser in der Komponente h?herer Ordnung auf und fügt den Benutzer in den Status der Komponente hinzu. In der Renderfunktion geben Sie einfach den Namen und die E -Mail des Benutzers aus.

Aktualisieren Sie die Header -Komponente

Jetzt müssen Sie nur die Routen in Ihre Anwendung einholen und das Menü zum Verknüpfen mit ihnen erhalten. Beginnen Sie mit der ?nderung der Datei /src/components/header/index.js in:

import {h} from 'preact';
import { route } from 'preact-router';
import OktaSignIn from '@okta/okta-signin-widget/dist/js/okta-sign-in.min.js';
import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';
import '@okta/okta-signin-widget/dist/css/okta-theme.css';

class Auth {
  constructor() {
    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
    this.isAuthenticated = this.isAuthenticated.bind(this);
    this.handleAuthentication = this.handleAuthentication.bind(this);

    this.widget = new OktaSignIn({
      baseUrl: 'https://{yourOktaDomain}.com/',
      clientId: '{clientId}',
      redirectUri: 'http://localhost:8080',
      authParams: {
        responseType: ['id_token', 'token'],
        scopes: ['openid', 'email', 'profile']
      }
    });
  }

  isAuthenticated() {
    // Checks if there is a current accessToken in the TokenManger.
    return !!this.widget.tokenManager.get('accessToken');
  }

  getCurrentUser(){
    return this.widget.tokenManager.get('idToken');
  }

  login() {
    // Redirect to the login page
    route('/login/');
  }

  async logout() {
    this.widget.tokenManager.clear();
    await this.widget.signOut();
    location = '/';
  }

  handleAuthentication(tokens) {
    for (let token of tokens) {
      if (token.idToken) {
        this.widget.tokenManager.add('idToken', token);
      } else if (token.accessToken) {
        this.widget.tokenManager.add('accessToken', token);
      }
    }
  }
}

// create a singleton
const auth = new Auth();
export const withAuth = WrappedComponent => props =>
  <WrappedComponent auth={auth} {...props} />;

Dies wird die Schaltfl?che "Anmeldung" angezeigt, wenn der Benutzer nicht angemeldet ist, und die Schaltfl?che ?Abmelden“, wenn er es ist. Es wird auch nur das Menüelement "Profil" an die Benutzer angezeigt, die angemeldet sind.

?ndern Sie Ihr Routing

?ndern Sie schlie?lich die Routen in Ihrer Datei Ihrer /src/components/app.js so, dass Ihre Bewerbung über Ihre neuen Routen und deren Umgang mit ihnen Bescheid wei?. So sieht Ihre neue App.js -Datei aus wie:

import { h, Component } from 'preact';

export default class OktaSignInWidget extends Component {
  componentDidMount() {
    this.widget = this.props.widget;
    this.widget.renderEl({ el: this.widgetContainer }, this.props.onSuccess, this.props.onError);
  }

  componentWillUnmount() {
    this.widget.remove();
  }

  render() {
    return <div ref={(div) => { this.widgetContainer = div; }} />
  }
};

Alles, was sich wirklich ge?ndert hat, ist, dass Sie die neu erstellte Anmeldekomponente importiert und die Benutzereigenschaft in die Profilkomponente entfernen und eine neue Route für die Anmeldekomponente hinzugefügt haben.

Führen Sie Ihre neue Preact -Anwendung aus!

Sie sollten jetzt in der Lage sein, Ihre Arbeit zu speichern und NPM-Start im Root-Ordner auszuführen und eine voll funktionsf?hige Preact-Anwendung mit Benutzerauthentifizierung über OKTA!

anzusehen

Es gibt viele ?hnlichkeiten zwischen Preact und React, aber es gibt einige wichtige Unterschiede. Preact ist für Anwendungen gedacht, bei denen die Gr??e des Downloads kleiner Download von entscheidender Bedeutung ist. Es gibt einige sch?ne Annehmlichkeiten im Preact -Router, aber es fehlen einige Dinge (wie Witrouter). Es gibt auch einige ordentliche Annehmlichkeiten, wie Requisiten und der Zustand an die Renderfunktion übergeben. Alles in allem denke ich, dass Preact ordentlich ist, aber ich konnte wirklich sehen, wie ein vollwertiger Reakt für komplexe Apps ben?tigt wird.

Erfahren Sie mehr

Sie k?nnen mehr über Preact von ihrer Website und Preact-Router aus dem Github-Repository erfahren.

Sie k?nnen auch den vollst?ndigen Code für diesen Artikel aus dem Okta -Entwickler Github Repository erhalten.

Wie immer, wenn Sie Fragen, Kommentare oder Bedenken hinsichtlich des Artikels, dem Code, der Preact oder OKTA haben, k?nnen Sie mich per E -Mail an mich wenden oder mich in den Kommentaren oder über Twitter @leebrandt treffen.

h?ufig gestellte Fragen zum Erstellen einer Preact -App mit Authentifizierung

Was ist Preact und wie unterscheidet es sich von React? Es ist so ausgelegt, dass es klein und effizient ist, mit einer komprimierten Gr??e von nur 3 KB. PREACT bietet die gleiche moderne UI -Bibliothek und -React -Merkmale wie virtuelle DOM -Differenz und Komponenten, jedoch mit einem kleineren Fu?abdruck. Es ist perfekt für mobile Ger?te, auf denen Bandbreite und Leistung Probleme sein k?nnen. Preact zielt auch darauf ab, in der API so nahe wie m?glich zu reagieren, sodass React -Entwickler mit minimalen Anpassungen anfangen k?nnen. Ein Vorwirkungsprojekt ist unkompliziert. Sie k?nnen Preact-Cli verwenden, ein Befehlszeilen-Tool, mit dem Sie Preact-Projekte erstellen und verwalten k?nnen. Um es zu installieren, müssen Sie Node.js und NPM auf Ihrem Computer installieren lassen. Sobald Sie die Installation installiert haben, k?nnen Sie ein neues Projekt erstellen, indem Sie den Befehl Preact erstellen my-project ausführen, wobei "My-Project" der Name Ihres Projekts ist. Dadurch wird ein neues Verzeichnis mit den Projektdateien und Abh?ngigkeiten erstellt.

Wie füge ich meiner Preact -App Authentifizierung hinzu? Zun?chst müssen Sie die erforderlichen Bibliotheken installieren und importieren, z. Anschlie?end müssen Sie ein Anmeldeformular und einen Authentifizierungsdienst erstellen, der die Anmeldeanforderungen behandelt und die Sitzung des Benutzers verwaltet. Schlie?lich müssen Sie Ihre Routen schützen, indem Sie prüfen, ob der Benutzer vor dem Rendern der geschützten Komponenten authentifiziert ist.

Wie gehe ich mit dem Routing in Preact aus? Es ist ein einfacher und kleiner Router, der die API des Browser -Verlaufs verwendet. Um es zu verwenden, müssen Sie es über NPM installieren und in Ihr Projekt importieren. Anschlie?end k?nnen Sie Ihre Routen mithilfe der Komponenten und definieren. Jede -Komponente repr?sentiert eine Seite und hat eine 'Pfad', die der URL entspricht. Status “, um Daten zu verwalten. Requisiten werden von ihren übergeordneten Komponenten übergeben, w?hrend der Status innerhalb der Komponenten verwaltet wird. Das staatliche Management von Preact ?hnelt der von React. Sie k?nnen die Methode this.setState () verwenden, um den Status zu aktualisieren und die Komponente neu zu rendern. Für das komplexe Zustandsmanagement k?nnen Sie Bibliotheken wie Redux oder MOBX verwenden.

Wie verwende ich Hooks in Preact? ohne eine Klasse zu schreiben. Um Hooks in Preact zu verwenden, müssen Sie sie aus ?Preact/Hooks“ importieren. Die Hooks -API in Preact ist die gleiche wie in React, sodass Sie Haken wie Usestate, UseEffect und Usecontext auf die gleiche Weise verwenden k?nnen.

Wie teste ich meine Preact -App? Kann Ihre Preact -App mit Testbibliotheken und Frameworks wie Scherz und Enzym testen. Jest ist ein JavaScript -Test -Framework, das gut mit Preact funktioniert, w?hrend Enzym ein Testdienstprogramm für React ist, das auch mit Preact verwendet werden kann. Sie k?nnen auch Preact-Test-Utils verwenden, eine Bibliothek, die Helferfunktionen zum Testen von Preact-Komponenten bereitstellt. Plattformen wie Netlify-, Vercel- und Github -Seiten. Um bereitzustellen, müssen Sie Ihre App für die Produktion erstellen, indem Sie den Befehl npm run build ausführen. Dadurch wird mit Ihrer kompilierten App ein "Build" -Verzeichnis erstellt. Dann k?nnen Sie dieses Verzeichnis auf Ihrer ausgew?hlten Hosting -Plattform bereitstellen.

Wie optimiere ich meine Preact -App für die Leistung? Dinge, die Sie tun k?nnen, um Ihre App noch schneller zu machen. Dies beinhaltet Code-Splitting, faule Ladekomponenten und Optimierung von Bildern und anderen Assets. Sie k?nnen auch PREACT-Lebenszyklus-Methode verwenden, um unn?tige Wiederherstellungen zu verhindern. Komponenten in Ihrer Preact-App dank 'Preact-compat', einer dünnen Schicht gegenüber Preact, die versucht, mit React eine 100% ige Kompatibilit?t zu erreichen. Dies bedeutet, dass Sie mit minimalen ?nderungen Ihres Codes von reagieren k?nnen. Aufgrund der geringen Gr??e der Pr?aktionen werden jedoch einige Merkmale von React nicht au?erhalb des Boxs unterstützt.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Preact -App mit Authentifizierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!