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