Rumah > hujung hadapan web > tutorial js > React AWS Cognito: Panduan Persediaan Pengesahan E-mel (Bahagian Pertama)

React AWS Cognito: Panduan Persediaan Pengesahan E-mel (Bahagian Pertama)

Linda Hamilton
Lepaskan: 2024-11-07 16:47:03
asal
233 orang telah melayarinya

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!

sumber:dev.to
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan