React AWS Cognito: Einrichtungshandbuch für die E-Mail-Authentifizierung (erster Teil)-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

React AWS Cognito: Einrichtungshandbuch für die E-Mail-Authentifizierung (erster Teil)

Linda Hamilton

Nov 07, 2024 pm 04:47 PM

Dies ist der erste Teil einer zweiteiligen Serie, in der wir eine React-App mit AWS Cognito für die E-Mail-basierte Benutzerauthentifizierung erstellen. Teil 1 konzentriert sich auf die Einrichtung der notwendigen AWS-Konfigurationen, während Teil 2 sich mit dem React-Code befasst, um alles zusammenzufügen.

Wir arbeiten mit den folgenden AWS-Diensten zusammen:

Amazon Simple Email Service (SES)
AWS Cognito

Beginnen wir mit der Einrichtung unserer AWS-Ressourcen.

Amazon Simple Email Service (SES)

Domänen-SES-Identität

Zu Testzwecken ist die Überprüfung des Domänenbesitzes in SES optional, da AWS eine Problemumgehung bietet. Für die Produktion ist jedoch die Überprüfung des Eigentums unerlässlich, damit SES E-Mails im Namen Ihrer Domain versenden kann.

Hier ist der Einrichtungsprozess:

Gehen Sie zu Amazon Simple Email Service.
Wählen Sie Identitäten.
Klicken Sie auf Identität erstellen.

Im Setup habe ich „Domain“ ausgewählt und das Beispiel domain.com verwendet.

React AWS Cognito: Email Authentication Setup Guide (First Part)

Klicken Sie auf Identität erstellen.

Dann sehen Sie eine Seite ähnlich dieser:

React AWS Cognito: Email Authentication Setup Guide (First Part)

Navigieren Sie zum Abschnitt DNS-Einträge veröffentlichen und verwenden Sie diese Werte, um die Einträge bei Ihrem Domain-Anbieter hinzuzufügen.

Sobald die DNS-Einträge bei Ihrem Domain-Anbieter eingerichtet sind, sollte Ihre Domain verifiziert sein und etwa so aussehen:

React AWS Cognito: Email Authentication Setup Guide (First Part)

Perfekt, Ihre Domain ist jetzt verifiziert, sodass SES E-Mails in Ihrem Namen versenden kann. Diese Überprüfung ist zum Testen nicht erforderlich, da AWS eine alternative Methode bereitstellt, sie ist jedoch für die Produktion unerlässlich.

E-Mail-SES-Identität

Beim Testen ist dieser Schritt wichtig, da die E-Mail-Adresse, die Sie in Ihrem Authentifizierungsablauf verwenden, zur „Zulassungsliste“ von AWS hinzugefügt werden muss. Hier fügen wir eine E-Mail-Adresse hinzu und bestätigen sie.

Gehen Sie zu:

Amazon Simple Email Service
Identitäten
Identität schaffen

Wählen Sie dieses Mal E-Mail-Adresse:

Geben Sie die E-Mail-Adresse ein, die Sie bestätigen möchten.
Klicken Sie auf Identität erstellen.

React AWS Cognito: Email Authentication Setup Guide (First Part)

Sobald die Identität erstellt wurde, erhalten Sie eine E-Mail von AWS mit einem Verifizierungslink. Überprüfen Sie unbedingt Ihren Posteingang und klicken Sie auf den Link, um Ihre E-Mail-Adresse zu bestätigen.

React AWS Cognito: Email Authentication Setup Guide (First Part)

Sobald Sie Ihre E-Mail-Adresse bestätigt haben, sollte ein Etikett angezeigt werden, das darauf hinweist, dass sie bestätigt ist.

React AWS Cognito: Email Authentication Setup Guide (First Part)

Zu diesem Zeitpunkt sollten sowohl Ihre Domain als auch Ihre E-Mail-Adresse bestätigt sein. Während die Domänenüberprüfung beim Testen optional ist, wird sie in der Produktion notwendig. Andererseits ist eine E-Mail-Verifizierung zum Testen erforderlich, nicht jedoch für die Produktion.

Hinweis: Im Rahmen des Authentifizierungsvorgangs wird ein Bestätigungscode an dieses E-Mail-Konto gesendet. Wenn das E-Mail-Konto nicht verifiziert ist, erhält es den Code nicht.

Amazon Cognito

Der letzte zu konfigurierende Teil ist Cognito. Dieser Dienst ermöglicht die Kontoauthentifizierung. In diesem Fall verwenden wir E-Mail zur Authentifizierung. So funktioniert es:

Der Benutzer erstellt ein Konto mit seiner E-Mail-Adresse und seinem Passwort.
Sie bestätigen ihre E-Mail-Adresse, indem sie den von AWS gesendeten Code eingeben.
Nach der Verifizierung kann sich der Benutzer mit seiner E-Mail-Adresse und seinem Passwort anmelden.

Anstatt die Authentifizierung selbst durchzuführen, können Sie AWS Cognito nutzen.

Lass uns gehen zu:

Hinweis: Bei den meisten Schritten bleibe ich bei den Standardoptionen, daher erwähne ich nur die benutzerdefinierten Optionen, die ich treffe. Abhängig von Ihrem Projekt möchten Sie möglicherweise unterschiedliche Einstellungen konfigurieren.

Cognito
Benutzerpool erstellen
Schritt 1: Überprüfen Sie die E-Mail

React AWS Cognito: Email Authentication Setup Guide (First Part)

Schritt 2: Wählen Sie Keine MFA; Dies ist zum Testen nicht erforderlich.

React AWS Cognito: Email Authentication Setup Guide (First Part)

Schritt 3: Ich habe die Standardoptionen beibehalten.

React AWS Cognito: Email Authentication Setup Guide (First Part)

Schritt 4: Wählen Sie Ihre bestätigte „Von-E-Mail-Adresse“ aus.

Cognito sendet eine E-Mail mit einem Bestätigungscode, idealerweise von Ihrer Domain, weshalb die Domain im vorherigen Abschnitt überprüft werden muss. Hier sehen Sie, dass AWS die Option „E-Mail mit Cognito senden“ bietet, die für die Entwicklung geeignet ist. In der Produktion möchten Sie jedoch sicherstellen, dass Ihre Domain verifiziert wird, um einen professionelleren und zuverlässigeren E-Mail-Versandprozess zu ermöglichen.

React AWS Cognito: Email Authentication Setup Guide (First Part)

Schritt 5: Zusätzlich zum Hinzufügen eines Pool- und Clientnamens besteht der wichtigste Teil darin, die „Erweiterten App-Client-Einstellungen“ zu erweitern und ALLOW_USER_PASSWORD_AUTH zu aktivieren. Mit dieser Einstellung können Benutzer sich mit ihrer E-Mail-Adresse und ihrem Passwort authentifizieren, was für Ihren Authentifizierungsablauf unerlässlich ist.

React AWS Cognito: Email Authentication Setup Guide (First Part)

Schritt 6: Dies ist der Überprüfungsschritt und es gibt hier nichts zu bearbeiten. Stellen Sie einfach sicher, dass alles gut aussieht, bevor Sie fortfahren.

Sobald es erstellt ist, sollte es auf dem Dashboard wie folgt angezeigt werden:

React AWS Cognito: Email Authentication Setup Guide (First Part)

Das ist es! Sie haben jetzt alles in AWS eingerichtet. Im nächsten Beitrag werde ich zeigen, wie Sie Ihre React-App mit Cognito verbinden, um einen Benutzer anhand seiner E-Mail-Adresse zu authentifizieren. Achten Sie auf den Beitrag, der nächsten Montag veröffentlicht wird.

Das obige ist der detaillierte Inhalt vonReact AWS Cognito: Einrichtungshandbuch für die E-Mail-Authentifizierung (erster Teil). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

JavaScript -Engines: Implementierungen vergleichenApr 13, 2025 am 12:05 AM

Unterschiedliche JavaScript -Motoren haben unterschiedliche Auswirkungen beim Analysieren und Ausführen von JavaScript -Code, da sich die Implementierungsprinzipien und Optimierungsstrategien jeder Engine unterscheiden. 1. Lexikalanalyse: Quellcode in die lexikalische Einheit umwandeln. 2. Grammatikanalyse: Erzeugen Sie einen abstrakten Syntaxbaum. 3. Optimierung und Kompilierung: Generieren Sie den Maschinencode über den JIT -Compiler. 4. Führen Sie aus: Führen Sie den Maschinencode aus. V8 Engine optimiert durch sofortige Kompilierung und versteckte Klasse.

Jenseits des Browsers: JavaScript in der realen WeltApr 12, 2025 am 12:06 AM

Zu den Anwendungen von JavaScript in der realen Welt gehören die serverseitige Programmierung, die Entwicklung mobiler Anwendungen und das Internet der Dinge. Die serverseitige Programmierung wird über node.js realisiert, die für die hohe gleichzeitige Anfrageverarbeitung geeignet sind. 2. Die Entwicklung der mobilen Anwendungen erfolgt durch reaktnative und unterstützt die plattformübergreifende Bereitstellung. 3.. Wird für die Steuerung von IoT-Geräten über die Johnny-Five-Bibliothek verwendet, geeignet für Hardware-Interaktion.

Erstellen einer SaaS-Anwendung mit mehreren Mietern mit Next.js (Backend Integration)Apr 11, 2025 am 08:23 AM

Ich habe eine funktionale SaaS-Anwendung mit mehreren Mandanten (eine EdTech-App) mit Ihrem täglichen Tech-Tool erstellt und Sie können dasselbe tun. Was ist eine SaaS-Anwendung mit mehreren Mietern? Mit Multi-Tenant-SaaS-Anwendungen können Sie mehrere Kunden aus einem Sing bedienen

So erstellen Sie eine SaaS-Anwendung mit mehreren Mietern mit Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AM

Dieser Artikel zeigt die Frontend -Integration mit einem Backend, das durch die Genehmigung gesichert ist und eine funktionale edtech SaaS -Anwendung unter Verwendung von Next.js. erstellt. Die Frontend erfasst Benutzerberechtigungen zur Steuerung der UI-Sichtbarkeit und stellt sicher, dass API-Anfragen die Rollenbasis einhalten

JavaScript: Erforschung der Vielseitigkeit einer WebspracheApr 11, 2025 am 12:01 AM

JavaScript ist die Kernsprache der modernen Webentwicklung und wird für seine Vielfalt und Flexibilität häufig verwendet. 1) Front-End-Entwicklung: Erstellen Sie dynamische Webseiten und einseitige Anwendungen durch DOM-Operationen und moderne Rahmenbedingungen (wie React, Vue.js, Angular). 2) Serverseitige Entwicklung: Node.js verwendet ein nicht blockierendes E/A-Modell, um hohe Parallelitäts- und Echtzeitanwendungen zu verarbeiten. 3) Entwicklung von Mobil- und Desktop-Anwendungen: Die plattformübergreifende Entwicklung wird durch reaktnative und elektronen zur Verbesserung der Entwicklungseffizienz realisiert.

Die Entwicklung von JavaScript: Aktuelle Trends und ZukunftsaussichtenApr 10, 2025 am 09:33 AM

Zu den neuesten Trends im JavaScript gehören der Aufstieg von Typenkripten, die Popularität moderner Frameworks und Bibliotheken und die Anwendung der WebAssembly. Zukunftsaussichten umfassen leistungsfähigere Typsysteme, die Entwicklung des serverseitigen JavaScript, die Erweiterung der künstlichen Intelligenz und des maschinellen Lernens sowie das Potenzial von IoT und Edge Computing.

Entmystifizieren JavaScript: Was es tut und warum es wichtig istApr 09, 2025 am 12:07 AM

JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.

Ist Python oder JavaScript besser?Apr 06, 2025 am 12:14 AM

Python eignet sich besser für Datenwissenschaft und maschinelles Lernen, während JavaScript besser für die Entwicklung von Front-End- und Vollstapel geeignet ist. 1. Python ist bekannt für seine prägnante Syntax- und Rich -Bibliotheks -Ökosystems und ist für die Datenanalyse und die Webentwicklung geeignet. 2. JavaScript ist der Kern der Front-End-Entwicklung. Node.js unterstützt die serverseitige Programmierung und eignet sich für die Entwicklung der Vollstapel.

See all articles