Open Kuigan opened 3 weeks ago
Wurmiceman56
commented
3 weeks ago Erstellen eines User Pools in AWS Cognito
Wurmiceman56
commented
2 weeks ago Nützliche skills von Cognito.
User Pools/ Identity Pools
User Pool integrieren
Benutzerregistrierung und -anmeldung
Sprache und Internationalisierung
Um die Benutzeroberfläche auf Deutsch umzustellen, passe die Texte und Meldungen deiner Anwendung entsprechend an.
Stelle sicher, dass alle Rückmeldungen, Bestätigungs-E-Mails und andere Benutzerinteraktionen auf Deutsch verfügbar sind.
Weiterführende Konfigurationen
Du kannst auch AWS Lambda verwenden, um benutzerdefinierte Trigger für Ereignisse wie Benutzerregistrierung, Anmeldeversuche und Token-Verifizierung zu erstellen.
Überwache und verwalte deinen Benutzerpool über die AWS-Managementkonsole oder die AWS CLI
Beginner Guide Amazon Cognito : https://www.youtube.com/watch?v=QEGo6ZoN-ao
Wurmiceman56
commented
2 weeks ago Anleitung zur Erstellung eines Authentifizierungs- und Login-Systems mit AWS Cognito: AWS Cognito Benutzerpool einrichten:
React-Anwendung erstellen:
Erstelle React-Komponenten für die Benutzerregistrierung und Anmeldung. Verwende AWS Amplify-Methoden wie Auth.signUp und Auth.signIn, um Benutzer zu registrieren und anzumelden.
How to use AWS Cognito to build an Authentication / Login System : https://www.youtube.com/watch?v=8a0vtkWJIA4
Wurmiceman56
commented
2 weeks ago Anmeldung und Weiterleitung nach dem Login
Wenn man AWS Cognito für die Authentifizierung nutzt, ist eine automatische Weiterleitung nach der Eingabe der Login-Daten auf der Website nicht standardmäßig integriert. Man muss die Weiterleitung selbst programmieren, üblicherweise durch Verwendung von JavaScript in der React-Anwendung. Nach einer erfolgreichen Anmeldung kann man den Benutzer z.B. mit der history.push()-Methode von react-router-dom zu einer anderen Seite weiterleiten.
import React, { useState } from 'react'; import { Auth } from 'aws-amplify'; import { useHistory } from 'react-router-dom';
const SignIn = () => { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const history = useHistory();
const signIn = async () => {
try {
await Auth.signIn(username, password);
history.push('/dashboard'); // Weiterleiten nach erfolgreicher Anmeldung
} catch (error) {
console.log('Fehler bei der Anmeldung', error);
}
};
return (
<div>
<input
placeholder="Benutzername"
onChange={(e) => setUsername(e.target.value)}
/>
<input
type="password"
placeholder="Passwort"
onChange={(e) => setPassword(e.target.value)}
/>
<button onClick={signIn}>Anmelden</button>
</div>
);};
export default SignIn;
In diesem Beispiel wird der Benutzer nach einer erfolgreichen Anmeldung zur /dashboard-Seite weitergeleitet.
AWS-Cognito Registrierung
https://aws.amazon.com/cognito/ https://catalog.workshops.aws/wyld-pets-cognito/en-US https://docs.aws.amazon.com/cognito/latest/developerguide/getting-started-test-application-react.html https://docs.aws.amazon.com/cognito/latest/developerguide/getting-started-user-pools.html
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(