Voraussetzungen
Node.js und npm installiert
Ein AWS-Konto
Schritt 1: AWS Cognito Benutzerpool erstellen
Melde dich bei der AWS Management Console an.
Öffne die Amazon Cognito Konsole.
Klicke auf Benutzerpools verwalten und dann auf Benutzerpool erstellen.
Gib einen Namen für den Benutzerpool ein und konfiguriere die Einstellungen nach Bedarf (z.B. Attribute, Passwort-Richtlinien).
Erstelle den Benutzerpool und notiere dir die Pool-ID und die App-Client-ID (dies wird später benötigt).
Schritt 2: App-Client konfigurieren
Gehe zu deinem Benutzerpool und wähle App-Clients.
Füge einen neuen App-Client hinzu und deaktiviere das Client-Geheimnis.
Richte OAuth 2.0-Einstellungen ein und aktiviere benötigte Identitätsanbieter (z.B. Cognito).
Schritt 3: Neues React-Projekt erstellen
Öffne ein Terminal und erstelle ein neues React-Projekt:
bash
npx create-react-app meine-app
cd meine-app
Schritt 4: AWS Amplify installieren und konfigurieren
Installiere AWS Amplify und die UI-Komponenten:
bash
npm install aws-amplify @aws-amplify/ui-react
Initialisiere Amplify in deinem Projekt:
bash
amplify configure
Folge den Anweisungen im Terminal, um Amplify zu konfigurieren und ein neues IAM-Benutzerkonto zu erstellen.
Initialisiere ein neues Amplify-Projekt in deinem React-Projekt:
bash
amplify init
Wähle die Optionen entsprechend deinem Projekt aus. Die Standardeinstellungen sollten meistens ausreichen.
Füge Authentifizierung hinzu:
bash
amplify add auth
Wähle die Standardkonfiguration aus, die Benutzeranmeldung und -registrierung ermöglicht.
Deploye die Änderungen:
bash
amplify push
Schritt 5: Amplify in deiner React-App konfigurieren
Erstelle oder bearbeite die Datei src/aws-exports.js (diese Datei wird normalerweise automatisch von Amplify erstellt).
Füge die Konfiguration in deiner Haupt-JavaScript-Datei hinzu (src/index.js oder src/App.js):
javascript
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
import { AmplifyProvider, Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
Amplify.configure(awsconfig);
const AppWithAuth = () => (
{({ signOut, user }) => (
Willkommen, {user.username}
Abmelden
)}
);
ReactDOM.render(
,
document.getElementById('root')
);
Schritt 6: Starten der App
Starte deine App:
bash
npm start
Jetzt sollte deine App mit einer Anmeldefunktion laufen, die AWS Cognito verwendet. Benutzer können sich registrieren, anmelden und abmelden.
Zusammenfassung
Diese Schritte zeigen, wie du eine neue Website mit einer Anmeldefunktion mit AWS Cognito und AWS Amplify integrieren kannst. Weitere Anpassungen und Sicherheitsmaßnahmen können je nach deinen spezifischen Anforderungen vorgenommen werden.
Voraussetzungen Node.js und npm installiert Ein AWS-Konto
Schritt 1: AWS Cognito Benutzerpool erstellen Melde dich bei der AWS Management Console an. Öffne die Amazon Cognito Konsole. Klicke auf Benutzerpools verwalten und dann auf Benutzerpool erstellen. Gib einen Namen für den Benutzerpool ein und konfiguriere die Einstellungen nach Bedarf (z.B. Attribute, Passwort-Richtlinien). Erstelle den Benutzerpool und notiere dir die Pool-ID und die App-Client-ID (dies wird später benötigt).
Schritt 2: App-Client konfigurieren Gehe zu deinem Benutzerpool und wähle App-Clients. Füge einen neuen App-Client hinzu und deaktiviere das Client-Geheimnis. Richte OAuth 2.0-Einstellungen ein und aktiviere benötigte Identitätsanbieter (z.B. Cognito).
Schritt 3: Neues React-Projekt erstellen Öffne ein Terminal und erstelle ein neues React-Projekt: bash
npx create-react-app meine-app cd meine-app
Schritt 4: AWS Amplify installieren und konfigurieren Installiere AWS Amplify und die UI-Komponenten: bash
npm install aws-amplify @aws-amplify/ui-react
Initialisiere Amplify in deinem Projekt: bash
amplify configure
Folge den Anweisungen im Terminal, um Amplify zu konfigurieren und ein neues IAM-Benutzerkonto zu erstellen.
Initialisiere ein neues Amplify-Projekt in deinem React-Projekt:
bash
amplify init
Wähle die Optionen entsprechend deinem Projekt aus. Die Standardeinstellungen sollten meistens ausreichen.
Füge Authentifizierung hinzu: bash
amplify add auth
Wähle die Standardkonfiguration aus, die Benutzeranmeldung und -registrierung ermöglicht.
Deploye die Änderungen: bash
amplify push
Schritt 5: Amplify in deiner React-App konfigurieren Erstelle oder bearbeite die Datei src/aws-exports.js (diese Datei wird normalerweise automatisch von Amplify erstellt).
Füge die Konfiguration in deiner Haupt-JavaScript-Datei hinzu (src/index.js oder src/App.js):
javascript
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import Amplify from 'aws-amplify'; import awsconfig from './aws-exports'; import { AmplifyProvider, Authenticator } from '@aws-amplify/ui-react'; import '@aws-amplify/ui-react/styles.css';
Amplify.configure(awsconfig);
const AppWithAuth = () => (
{({ signOut, user }) => (
Willkommen, {user.username}
Abmelden
)}
); ReactDOM.render(