Erste Schritte mit AWS
Erstellen einer React-Anwendung
Erstellen Sie eine einfache Web-Anwendung mit AWS Amplify

Authentifizierung hinzufügen
Modul 3: Authentifizierung hinzufügen
In diesem Modul verwenden Sie die Amplify-CLI und -Bibliotheken zur Konfiguration und zum Hinzufügen von Authentifizierung zu Ihrer Anwendung.
Einführung
Die nächste Funktion, die Sie hinzufügen werden, ist die Authentifizierung. In diesem Modul lernen Sie, wie Sie einen Benutzer mit der Amplify-CLI und -Bibliotheken authentifizieren und dabei Amazon Cognito, einen verwalteten Service zur Benutzeridentität, nutzen können.
Sie werden auch lernen, wie Sie die Amplify UI-Komponentenbibliothek verwenden, um einen kompletten Benutzerauthentifizierungsfluss zu skizzieren, so dass Benutzer sich mit nur wenigen Codezeilen anmelden, einloggen und ihr Kennwort zurücksetzen können.
Lerninhalte
- Amplify-Bibliotheken installieren
- Erstellen und Bereitstellen eines Authentifizierungsdienstes
- Konfigurieren Sie Ihre React-Anwendung so, dass sie Authentifizierung einschließt
Wichtige Konzepte
Amplify-Bibliotheken – Die Amplify-Bibliotheken ermöglichen Ihnen die Interaktion mit AWS-Services über eine Web- oder mobile Anwendung.
Authentifizierung – In der Software ist Authentifizierung der Prozess der Verifizierung und Verwaltung der Identität eines Benutzers unter Verwendung eines Authentifizierungsdienstes oder einer API.
Veranschlagte Zeit
10 Minuten
Verwendete Services
Implementierung
-
Amplify-Bibliotheken installieren
Wir werden für unser Projekt 2 Amplify-Bibliotheken benötigen. Die Hauptbibliothek von aws-amplify enthält alle clientseitigen APIs für die Interaktion mit den verschiedenen AWS-Services, mit denen wir arbeiten werden, und die @aws-amplify/ui-react-Bibliothek enthält Framework-abhängige UI-Komponenten. Bitte installieren Sie diese Bibliotheken im Stammverzeichnis des Projekts.
npm install aws-amplify @aws-amplify/ui-react
-
Erstellen Sie den Authentifizierungs-Service
Um den Authentifizierungs-Service zu erstellen, verwenden Sie die Amplify CLI:
amplify add auth ? Do you want to use the default authentication and security configuration? Default configuration ? How do you want users to be able to sign in? Username ? Do you want to configure advanced settings? No, I am done.
-
Stellen Sie den Authentifizierungs-Service bereit
Nun, da der Authentifizierungs-Service lokal konfiguriert wurde, können wir ihn durch Ausführen des Amplify push-Befehls bereitstellen:
amplify push --y
-
Konfigurieren Sie das React-Projekt mit Amplify-Ressourcen
Die CLI hat eine Datei namens aws-exports.js im src-Verzeichnis unseres Projekts erstellt und wird diese weiterhin aktualisieren. Wir werden diese Datei verwenden, um das React-Projekt über die verschiedenen AWS-Ressourcen zu informieren, die in unserem Amplify-Projekt zur Verfügung stehen.
Um unsere Anwendung mit diesen Ressourcen zu konfigurieren, öffnen Sie src/index.js und fügen Sie den folgenden Code unterhalb des letzten Imports hinzu:
import Amplify from 'aws-amplify'; import config from './aws-exports'; Amplify.configure(config);
-
Hinzufügen des Authentifizierungsflusses in App.js
Als Nächstes öffnen Sie src/App.js und aktualisieren Sie mit dem folgenden Code:
import React from 'react'; import logo from './logo.svg'; import './App.css'; import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react' function App() { return ( <div className="App"> <header> <img src={logo} className="App-logo" alt="logo" /> <h1>We now have Auth!</h1> </header> <AmplifySignOut /> </div> ); } export default withAuthenticator(App);
In dieser Komponente haben wir die withAuthenticator-Komponente verwendet. Diese Komponente wird einen gesamten Benutzer-Authentifizierungsfluss skizzieren, der es den Benutzern ermöglicht, sich anzumelden, sich einzuloggen, ihr Passwort zurückzusetzen und die Anmeldung für die Multi-Faktor-Authentifizierung (MFA) zu bestätigen. Wir haben auch die AmplifySignOut-Komponente verwendet, die einen Abmelde-Button rendern wird.
-
Führen Sie die Anwendung lokal aus
Führen Sie als Nächstes die Anwendung aus, um den neuen Authentifizierungsfluss zu sehen, der die Anwendung schützt:
npm start
Hier können Sie versuchen, sich anzumelden, wodurch Sie dann automatisch eingeloggt werden. Wenn Sie sich angemeldet haben, sollten Sie einen Abmelde-Button sehen, der den Benutzer abmeldet und den Authentifizierungsfluss neu startet.
-
Stellen Sie die Änderungen in der Live-Umgebung bereit
Stellen Sie die Änderungen an GitHub bereit, um einen neuen Build in der Amplify-Konsole zu starten:
git add . git commit -m “added auth” git push origin master