Erste Schritte mit AWS

Erstellen einer React-Anwendung

Erstellen Sie eine einfache Web-Anwendung mit AWS Amplify

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

  • 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
  • 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.
  • Nun, da der Authentifizierungs-Service lokal konfiguriert wurde, können wir ihn durch Ausführen des Amplify push-Befehls bereitstellen:

    amplify push --y
  • 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);
    
  • 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 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 an GitHub bereit, um einen neuen Build in der Amplify-Konsole zu starten:

    git add .
    git commit -m “added auth”
    git push origin master
    

Fazit

Mit nur wenigen Zeilen Code haben Sie jetzt die Benutzerauthentifizierung in Ihre Anwendung integriert! Im nächsten Modul werden wir eine API zu Ihrer Anwendung hinzufügen.

War das Modul hilfreich?

GraphQL hinzufügen