cari
Rumahhujung hadapan webtutorial jsReact AWS Cognito: Panduan Persediaan Pengesahan E-mel (Bahagian Pertama)

Ini adalah yang pertama dalam siri dua bahagian di mana kami akan membina apl React menggunakan AWS Cognito untuk pengesahan pengguna berasaskan e-mel. Bahagian 1 memfokuskan pada menyediakan konfigurasi AWS yang diperlukan, manakala Bahagian 2 akan menyelami kod React untuk menggabungkan semuanya.

Kami akan bekerjasama dengan perkhidmatan AWS berikut:

  • Perkhidmatan E-mel Ringkas Amazon (SES)
  • AWS Cognito

Mari mulakan dengan menyediakan sumber AWS kami.

Perkhidmatan E-mel Mudah Amazon (SES)

Identiti SES Domain

Untuk tujuan ujian, mengesahkan pemilikan domain dalam SES adalah pilihan, kerana AWS menawarkan penyelesaian. Walau bagaimanapun, untuk pengeluaran, mengesahkan pemilikan adalah penting untuk membolehkan SES menghantar e-mel bagi pihak domain anda.

Berikut ialah proses persediaan:

  1. Pergi ke Perkhidmatan E-mel Mudah Amazon.
  2. Pilih Identiti.
  3. Klik Buat Identiti.

Dalam persediaan, saya memilih "Domain" dan menggunakan contoh domain.com.

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

  • Klik Buat identiti.

Kemudian, anda akan melihat halaman yang serupa dengan halaman ini:

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

Navigasi ke bahagian Terbitkan rekod DNS dan gunakan nilai tersebut untuk menambah rekod dalam pembekal domain anda.

Setelah rekod DNS disediakan dalam pembekal domain anda, anda seharusnya melihat domain anda disahkan, kelihatan seperti ini:

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

Sempurna, domain anda kini disahkan, yang membolehkan SES menghantar e-mel bagi pihak anda. Pengesahan ini tidak diperlukan untuk ujian kerana AWS menyediakan kaedah alternatif, tetapi ia penting untuk pengeluaran.

E-mel Identiti SES

Apabila menguji, langkah ini penting kerana alamat e-mel yang anda gunakan dalam aliran pengesahan anda perlu ditambahkan pada "senarai benarkan" AWS. Di sini, kami akan menambah dan mengesahkan alamat e-mel.

Laju ke:

  • Perkhidmatan E-mel Mudah Amazon
  • Identiti
  • Buat identiti

Kali ini, pilih Alamat e-mel:

  • Masukkan alamat e-mel yang ingin anda sahkan.
  • Klik Buat identiti.

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

Setelah identiti dibuat, anda akan menerima e-mel daripada AWS yang mengandungi pautan pengesahan. Pastikan anda menyemak peti masuk anda dan klik pada pautan itu untuk mengesahkan e-mel anda.

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

Setelah anda mengesahkan e-mel anda, anda akan melihat label yang menunjukkan bahawa ia telah disahkan.

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

Pada ketika ini, anda harus mengesahkan kedua-dua domain dan e-mel anda. Walaupun pengesahan domain adalah pilihan semasa ujian, ia menjadi perlu dalam pengeluaran. Sebaliknya, pengesahan e-mel diperlukan untuk ujian tetapi bukan untuk pengeluaran.

Nota: Sebagai sebahagian daripada aliran pengesahan, kod pengesahan akan dihantar ke akaun e-mel ini. Jika akaun e-mel tidak disahkan, ia tidak akan menerima kod.

Amazon Cognito

Bahagian terakhir untuk dikonfigurasikan ialah Kognito. Perkhidmatan ini mendayakan pengesahan akaun, dan dalam kes ini, kami akan menggunakan e-mel untuk pengesahan. Begini caranya:

  • Pengguna mencipta akaun dengan e-mel dan kata laluan mereka.
  • Mereka mengesahkan e-mel mereka dengan memasukkan kod yang dihantar oleh AWS.
  • Setelah disahkan, pengguna boleh log masuk menggunakan e-mel dan kata laluan mereka.

Daripada mengendalikan pengesahan sendiri, anda boleh memanfaatkan AWS Cognito.

Jom ke:

Nota: Untuk kebanyakan langkah, saya tetap menggunakan pilihan lalai, jadi saya hanya akan menyebut pilihan tersuai yang saya buat. Bergantung pada projek anda, anda mungkin mahu mengkonfigurasi tetapan yang berbeza.

  • Kognito
  • Buat kumpulan pengguna
  • Langkah 1: Semak E-mel

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

  • Langkah 2: Pilih Tiada MFA; ini tidak perlu untuk ujian.

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

  • Langkah 3: Saya mengekalkan pilihan lalai.

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

  • Langkah 4: Pilih "Dari alamat e-mel" anda yang disahkan.

Cognito akan menghantar e-mel dengan kod pengesahan, sebaik-baiknya daripada domain anda, itulah sebabnya domain tersebut perlu disahkan di bahagian sebelumnya. Di sini, anda dapat melihat bahawa AWS menawarkan pilihan untuk "Hantar e-mel dengan Cognito" yang sesuai untuk pembangunan. Walau bagaimanapun, dalam pengeluaran, anda perlu memastikan bahawa domain anda disahkan untuk proses penghantaran e-mel yang lebih profesional dan boleh dipercayai.

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

  • Langkah 5: Selain menambah kumpulan dan nama pelanggan, bahagian penting ialah mengembangkan "Tetapan klien apl lanjutan" dan mendayakan ALLOW_USER_PASSWORD_AUTH. Tetapan ini membolehkan pengguna membuat pengesahan menggunakan e-mel dan kata laluan mereka, yang penting untuk aliran pengesahan anda.

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

  • Langkah 6: Ini ialah langkah semakan, dan tiada apa-apa untuk diedit di sini. Cuma pastikan semuanya kelihatan baik sebelum bergerak ke hadapan.

Setelah dibuat, anda sepatutnya melihatnya di papan pemuka seperti ini:

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

Itu sahaja! Anda kini telah menyediakan segala-galanya pada AWS. Dalam siaran seterusnya, saya akan menunjukkan cara menyambungkan apl React anda dengan Cognito untuk mengesahkan pengguna menggunakan e-mel mereka. Nantikan siaran itu, yang akan diterbitkan Isnin depan.

Atas ialah kandungan terperinci React AWS Cognito: Panduan Persediaan Pengesahan E-mel (Bahagian Pertama). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Enjin JavaScript: Membandingkan PelaksanaanEnjin JavaScript: Membandingkan PelaksanaanApr 13, 2025 am 12:05 AM

Enjin JavaScript yang berbeza mempunyai kesan yang berbeza apabila menguraikan dan melaksanakan kod JavaScript, kerana prinsip pelaksanaan dan strategi pengoptimuman setiap enjin berbeza. 1. Analisis leksikal: Menukar kod sumber ke dalam unit leksikal. 2. Analisis Tatabahasa: Menjana pokok sintaks abstrak. 3. Pengoptimuman dan Penyusunan: Menjana kod mesin melalui pengkompil JIT. 4. Jalankan: Jalankan kod mesin. Enjin V8 mengoptimumkan melalui kompilasi segera dan kelas tersembunyi, Spidermonkey menggunakan sistem kesimpulan jenis, menghasilkan prestasi prestasi yang berbeza pada kod yang sama.

Beyond the Browser: JavaScript di dunia nyataBeyond the Browser: JavaScript di dunia nyataApr 12, 2025 am 12:06 AM

Aplikasi JavaScript di dunia nyata termasuk pengaturcaraan sisi pelayan, pembangunan aplikasi mudah alih dan Internet of Things Control: 1. Pengaturcaraan sisi pelayan direalisasikan melalui node.js, sesuai untuk pemprosesan permintaan serentak yang tinggi. 2. Pembangunan aplikasi mudah alih dijalankan melalui reaktnatif dan menyokong penggunaan silang platform. 3. Digunakan untuk kawalan peranti IoT melalui Perpustakaan Johnny-Five, sesuai untuk interaksi perkakasan.

Membina aplikasi SaaS Multi-penyewa dengan Next.js (Integrasi Backend)Membina aplikasi SaaS Multi-penyewa dengan Next.js (Integrasi Backend)Apr 11, 2025 am 08:23 AM

Saya membina aplikasi SaaS multi-penyewa berfungsi (aplikasi edTech) dengan alat teknologi harian anda dan anda boleh melakukan perkara yang sama. Pertama, apakah aplikasi SaaS multi-penyewa? Aplikasi SaaS Multi-penyewa membolehkan anda melayani beberapa pelanggan dari Sing

Cara Membina Aplikasi SaaS Multi-Tenant dengan Next.js (Integrasi Frontend)Cara Membina Aplikasi SaaS Multi-Tenant dengan Next.js (Integrasi Frontend)Apr 11, 2025 am 08:22 AM

Artikel ini menunjukkan integrasi frontend dengan backend yang dijamin oleh permit, membina aplikasi edtech SaaS yang berfungsi menggunakan Next.Js. Frontend mengambil kebenaran pengguna untuk mengawal penglihatan UI dan memastikan permintaan API mematuhi dasar peranan

JavaScript: meneroka serba boleh bahasa webJavaScript: meneroka serba boleh bahasa webApr 11, 2025 am 12:01 AM

JavaScript adalah bahasa utama pembangunan web moden dan digunakan secara meluas untuk kepelbagaian dan fleksibiliti. 1) Pembangunan front-end: Membina laman web dinamik dan aplikasi satu halaman melalui operasi DOM dan kerangka moden (seperti React, Vue.js, sudut). 2) Pembangunan sisi pelayan: Node.js menggunakan model I/O yang tidak menyekat untuk mengendalikan aplikasi konkurensi tinggi dan masa nyata. 3) Pembangunan aplikasi mudah alih dan desktop: Pembangunan silang platform direalisasikan melalui reaktnatif dan elektron untuk meningkatkan kecekapan pembangunan.

Evolusi JavaScript: Trend Semasa dan Prospek Masa DepanEvolusi JavaScript: Trend Semasa dan Prospek Masa DepanApr 10, 2025 am 09:33 AM

Trend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.

Demystifying JavaScript: Apa yang berlaku dan mengapa pentingDemystifying JavaScript: Apa yang berlaku dan mengapa pentingApr 09, 2025 am 12:07 AM

JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.

Adakah Python atau JavaScript lebih baik?Adakah Python atau JavaScript lebih baik?Apr 06, 2025 am 12:14 AM

Python lebih sesuai untuk sains data dan pembelajaran mesin, manakala JavaScript lebih sesuai untuk pembangunan front-end dan penuh. 1. Python terkenal dengan sintaks ringkas dan ekosistem perpustakaan yang kaya, dan sesuai untuk analisis data dan pembangunan web. 2. JavaScript adalah teras pembangunan front-end. Node.js menyokong pengaturcaraan sisi pelayan dan sesuai untuk pembangunan stack penuh.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

EditPlus versi Cina retak

EditPlus versi Cina retak

Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Versi Mac WebStorm

Versi Mac WebStorm

Alat pembangunan JavaScript yang berguna