Cara mengautentikasi dengan Next.js menggunakan AWS Amplify – Beragampengetahuan

Otentikasi adalah salah satu landasan keamanan informasi dalam aplikasi full-stack. Tujuan utamanya adalah untuk membuktikan identitas pengguna dengan memeriksa apakah kredensial yang diberikan cocok dengan catatan di database. Membuat sistem autentikasi yang aman membutuhkan banyak waktu dan tenaga.

Dalam artikel ini, kita akan melihat lebih dekat bagaimana AWS Amplify dapat digunakan untuk menyederhanakan penerapan autentikasi di Next.js. Ini adalah solusi lengkap untuk membuat aplikasi seluler dan web full-stack kaya fitur yang mudah disiapkan dan diskalakan seiring pertumbuhan bisnis Anda.

Lompat ke depan:

Memulai dengan Metode Otentikasi

Salah satu metode otentikasi yang paling umum adalah menggunakan nama pengguna dan kata sandi. Namun, ada banyak metode lain seperti Magic Links, data biometrik, atau token keamanan, hanya untuk beberapa nama saja. Perlu juga disebutkan bahwa autentikasi sering dikacaukan dengan otorisasi, yang merupakan proses berbeda dalam menentukan tingkat akses pengguna atau layanan dalam aplikasi.

Amplify memiliki CLI sendiri, Visual Interface Studio, Amplify UI Components, dan pustaka klien sumber terbuka untuk menyediakan pengaturan yang mulus untuk mengimplementasikan autentikasi. Kami akan menggunakan semua ini dalam tutorial ini.

Menyiapkan proyek Next.js

Pertama, buka terminal Anda dan jalankan npm create-next-app amplify-authPerintah scaffolding ini akan membuat proyek Next.js yang berfungsi penuh.Selanjutnya, ubah direktori kerja saat ini ke proyek yang baru dibuat dengan menjalankan cd amplify-authKemudian, instal library Amplify dan UI komponen Amplify dengan menjalankan npm install aws-amplify @aws-amplify/ui-react.

Setelah itu, mulai server pengembangan dengan menjalankan npm run devTerakhir, buka browser Anda dan arahkan ke dan Anda akan melihat layar selamat datang Next.js:

Buat akun AWS dan siapkan CLI

Pertama, buat akun AWS gratis jika Anda belum memilikinya.Beralih kembali ke proyek Anda, lalu jalankan npm install -g @aws-amplify/cli di terminal Anda.Selanjutnya, lari amplify configureIni secara otomatis akan membuka konsol AWS untuk memastikan Anda memiliki akun dan masuk.Setelah itu, Anda dapat beralih kembali ke editor kode dengan menekan enterlalu pilih wilayah dan nama pengguna Anda untuk AWS IAM Anda.

Selanjutnya, tekan dan tahan Control kunci pada keyboard Anda dan klik tautan yang diberikan untuk membuka konsol AWS dan gunakan GUI untuk menyelesaikan konfigurasi pengaturan:

Pertama-tama Anda akan melihat nama pengguna yang Anda pilih di wizard terminal.klik Langkah selanjutnya: Izin Lanjutkan. Seharusnya terlihat seperti ini:

Pada langkah selanjutnya, Anda akan melihat tingkat izin.Untuk aplikasi Amplify kami akan kami gunakan AdministratorAccess-Amplify (setingan awal).memilih Selanjutnya: Label Lalu berkata:

AWS menyediakan penggunaan tag tambahan untuk mengatur pengguna dengan lebih mudah saat aplikasi diskalakan. Ini adalah langkah opsional, kami tidak akan menyiapkannya untuk saat ini.klik Langkah selanjutnya: tinjau Lalu berkata:

Selama langkah ini, Anda akan melihat ringkasan opsi konfigurasi yang Anda pilih untuk membuat pengguna baru.klik buat pengguna Lalu berkata:

Terakhir, Anda akan melihat pesan sukses, Access Key ID, dan Secret Access Key. Buka sementara tab ini:

Sekarang, buka terminal Anda dan rekatkan dua nilai dari browser Anda ke wizard terminal. Tetapkan nama pengguna untuk profil AWS lokal Anda, dan Anda akan mendapatkan pesan sukses di terminal, seperti:

Buat backend Amplify baru

Sekarang, untuk membangun backend Amplify baru, pastikan Anda masih masuk ke AWS dan arahkan ke konsol Amplify dan gulir ke bawah dan klik Ayo mulai Di bawah pesan Buat aplikasi:

Selanjutnya, beri nama aplikasi Anda dan pilih Konfirmasi penerapan.Kami akan menggunakan amplify-auth Untuk keperluan tutorial ini:

Tunggu penerapan selesai, klik mulai studio Buka antarmuka visual untuk mengelola proyek Anda:

Selanjutnya, pilih memeriksa di bilah sisi kiri.klik Hapus info masuk email Karena kami akan memilih untuk masuk dengan nama pengguna dan kata sandi:

Sekarang, pilih nama belakang dari tambahkan login Mekanisme drop down dan pilih menyebarkan Siapkan autentikasi untuk proyek Anda seperti ini:

Setelah proses selesai, Anda akan melihat layar dengan perintah terminal untuk menyiapkan profil.Salin perintah dan klik menyelesaikan:

tarik file konfigurasi

Sekarang jalankan perintah yang baru saja Anda salin dari Amplify Studio di Terminal. Ini akan mengambil file konfigurasi klien terbaru untuk proyek Next.js Anda.

Ini akan mengharuskan Anda untuk masuk ke Amplify CLI.klik Ya dan kembali ke terminal untuk melanjutkan konfigurasi aplikasi Amplify. Anda akan diminta untuk memilih editor kode Anda, jenis proyek yang Anda buat, dan kerangka kerja JavaScript yang Anda gunakan.berdasarkan Memasuki Pilih default untuk ini. Tetapkan opsi wisaya lainnya secara manual, sebagai berikut:

Menyiapkan Amplifikasi di Next.js

Untuk membuat pustaka dan UI Amplify dapat diakses di seluruh aplikasi, navigasikan ke pages folder dan ubah _app.js Filenya adalah sebagai berikut:

import { Amplify } from "aws-amplify";
import awsExports from "../aws-exports";

import "@aws-amplify/ui-react/styles.css";
import "../styles/globals.css";

Amplify.configure({ ...awsExports, ssr: true });

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

Kita mulai dengan mengimpor library Amplify, pengaturan, dan stylesheet untuk UI login, dan stylesheet global untuk proyek Next.js itu sendiri.Kami kemudian mengonfigurasi Amplify untuk menggunakan parameter yang diimpor dan menyetel rendering sisi server ke truePada titik ini, kita siap untuk mulai menggunakan Amplify untuk mengontrol status autentikasi pengguna di halaman dan komponen kita.

Buat dan amankan frontend

Membuka index.js di dalam pages folder dan berisi kode berikut:

import { Authenticator } from "@aws-amplify/ui-react";

export default function Home() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          <h1>Hello, {user.username}!</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

kami membuat sebuah Authenticator Komponen halaman muka sehingga pengguna perlu membuat akun atau masuk untuk melihat konten.berlari npm run dev Mulai server dev lagi dan buka

Sekarang, buat akun dan coba masuk. Anda akan melihat salam yang menyatakan bahwa Anda telah berhasil mengautentikasi:

Buat dan amankan halaman SSR

Mengubah index.js di dalam pages folder ke kode di bawah ini:

import { Authenticator } from "@aws-amplify/ui-react";

export function getServerSideProps() {
  const renderedAt = new Date();
  const buildTime = renderedAt.toLocaleTimeString("en-US");
  return {
    props: {
      renderedAt: buildTime,
    },
  };
}

export default function Home({ renderedAt }) {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          <h1>Hello, {user.username}!</h1>
          <button onClick={signOut}>Sign out</button>
          <p>This page was server-side rendered on {renderedAt}</p>
        </main>
      )}
    </Authenticator>
  );
}

Kemudian, periksa apakah server pengembangan Anda masih berfungsi.Jika tidak, lari npm run dev mengulang kembali. Anda akan melihat layar masuk yang sama:

Masuk lagi dan Anda akan mendapatkan data stempel waktu yang diberikan dari server:

Terapkan registrasi dan kustomisasi login

Seringkali, Anda memerlukan metode masuk yang berbeda selain nama pengguna dan kata sandi. Untungnya, Amplify menawarkan kustomisasi penuh dan memungkinkan Anda beralih di antara berbagai mekanisme login.Metode dukungan ini adalah username, emailDan phone_number.

Ini contohnya:

import { Authenticator } from "@aws-amplify/ui-react";

export default function Home() {
  return (
    <Authenticator loginMechanisms={["phone_number"]}>
      ...
    </Authenticator>
  );
}

Layar login sekarang akan terlihat seperti ini:

Anda juga dapat menambahkan penyedia sosial untuk laman landas Anda.Opsi yang didukung adalah amazon, apple, facebookDan google.Ini contohnya:

import { Authenticator } from "@aws-amplify/ui-react";

export default function Home() {
  return (
    <Authenticator socialProviders={['amazon', 'apple', 'facebook', 'google']}>
      ...
    </Authenticator>
  );
}

Kode di atas akan mengubah layar login menjadi seperti ini:

Anda juga dapat meminta lebih banyak detail pengguna di layar pendaftaran.Properti yang didukung adalah address, birthdate, email, family_name, gender, given_name, locale, middle_name, name, nickname, phone_number, picture, preferred_username, profile, updated_at, website, zoneinfo.

Penggunaan terlihat seperti ini:

import { Authenticator } from "@aws-amplify/ui-react";

export default function Home() {
  return (
    <Authenticator signUpAttributes={['email', 'address', 'birthdate', 'phone_number', 'website']}>
      ...
    </Authenticator>
  );
}

Ini akan mengubah tampilan pendaftaran menjadi ini:

Kesimpulannya

Dalam tutorial ini, kami menerapkan sistem autentikasi yang berfungsi penuh di Next.js menggunakan AWS Amplify. Kami mulai dengan menyiapkan proyek itu sendiri, membuat akun AWS, dan mengonfigurasi CLI. Kemudian, kami membuat backend Amplify dan memasangkannya dengan proyek Next.js.

Kami meninjau cara mengamankan rendering sisi klien dan sisi server dalam kedua kasus tersebut. Kami juga meninjau berbagai opsi penyesuaian untuk layar login dan pendaftaran sehingga Anda selalu dapat menyetel autentikasi untuk model data tertentu yang Anda inginkan. Secara keseluruhan, Amplify dapat mempercepat pembuatan autentikasi secara signifikan, dan sekarang Anda akan tahu cara menggunakannya untuk proyek Anda sendiri.

Pos Cara Mengautentikasi dengan Next.js dengan AWS Amplify muncul pertama kali di Blog beragampengetahuan.

Dari Blog beragampengetahuan https://ift.tt/XpT1wRo
Hasilkan $200 seminggu
dengan lebih banyak membaca