Authenticating

Kimlik doğrulama bir kullanıcının kim olduğunu doğrularken, yetkilendirme bir kullanıcının nelere erişebileceğini kontrol eder. Next.js, her biri farklı kullanım durumları için tasarlanmış birden fazla kimlik doğrulama modelini destekler. Bu sayfa, kısıtlamalarınıza göre seçim yapabilmeniz için her bir durumu inceleyecektir.

Authentication Patterns

Hangi kimlik doğrulama modeline ihtiyacınız olduğunu belirlemenin ilk adımı, istediğiniz veri alma stratejisini anlamaktır. Daha sonra hangi kimlik doğrulama sağlayıcılarının bu stratejiyi desteklediğini belirleyebiliriz. İki ana model vardır:

Bir yükleme durumunu sunucuda işlemek için statik oluşturmayı kullanın ve ardından kullanıcı verilerini istemci tarafında alın.
Kimliği doğrulanmamış içeriğin flaşını ortadan kaldırmak için kullanıcı verilerini sunucu tarafında alın.

Authenticating Statically Generated Pages

Next.js, engelleyici veri gereksinimi yoksa bir sayfanın statik olduğunu otomatik olarak belirler. Bu, aşağıdakilerin yokluğu anlamına gelir getServerSideProps ve getInitialProps adreslerini kullanabilirsiniz. Bunun yerine, sayfanız sunucudan bir yükleme durumu oluşturabilir ve ardından kullanıcı istemci tarafına getirilebilir.

Bu modelin bir avantajı, sayfaların global bir CDN'den sunulmasına ve next/link. Pratikte bu, daha hızlı bir TTI(Etkileşim Zamanı) ile sonuçlanır.

Bir profil sayfası için bir örneğe bakalım. Bu başlangıçta bir yükleme iskeleti oluşturacaktır. Bir kullanıcı için istek tamamlandığında, kullanıcının adını gösterecektir:

pages/profile.js

import useUser from '../lib/useUser'
import Layout from '../components/Layout'
 
const Profile = () => {
  // Fetch the user client-side
  const { user } = useUser({ redirectTo: '/login' })
 
  // Server-render loading state
  if (!user || user.isLoggedIn === false) {
    return <Layout>Loading...</Layout>
  }
 
  // Once the user request finishes, show the user
  return (
    <Layout>
      <h1>Your Profile</h1>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  )
}
 
export default Profile

Bu örneği çalışırken görebilirsiniz . Göz atın with-iron-session nasıl çalıştığını görmek için örnek.

Authenticating Server-Rendered Pages

async adlı bir işlevi dışa aktarırsanız getServerSideProps bir sayfadan, Next.js getServerSideProps tarafından döndürülen verileri kullanarak her istekte bu sayfayı önceden oluşturacaktır.

export async function getServerSideProps(context) {
  return {
    props: {}, // Will be passed to the page component as props
  }
}

Profil örneğini sunucu taraflı işleme kullanacak şekilde dönüştürelim. Eğer bir oturum varsa, user adresini sayfadaki Profile bileşenine bir prop olarak döndürün. Bu örnekte bir yükleme iskeleti olmadığına dikkat edin .

pages/profile.js

import withSession from '../lib/session'
import Layout from '../components/Layout'
 
export const getServerSideProps = withSession(async function ({ req, res }) {
  const { user } = req.session
 
  if (!user) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    }
  }
 
  return {
    props: { user },
  }
})
 
const Profile = ({ user }) => {
  // Show the user. No loading state is required
  return (
    <Layout>
      <h1>Your Profile</h1>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  )
}
 
export default Profile

Bu modelin bir avantajı, yönlendirmeden önce kimliği doğrulanmamış içeriğin görüntülenmesini önlemektir. Kullanıcı verilerinin getServerSideProps adresinden getirilmesinin, kimlik doğrulama sağlayıcınıza yapılan istek çözülene kadar görüntülemeyi engelleyeceğini unutmamak önemlidir. Bir darboğaz yaratmamak ve TTFB'nizi(Time to First Byte) artırmamak için kimlik doğrulama aramanızın hızlı olduğundan emin olmalısınız. Aksi takdirde, statik oluşturmayı düşünün.

Authentication Providers

Kimlik doğrulama modellerinden bahsettiğimize göre şimdi belirli sağlayıcılara bakalım ve Next.js ile nasıl kullanıldıklarını inceleyelim.

Bring Your Own Database

Examples

Kullanıcı verilerini içeren mevcut bir veritabanınız varsa, muhtemelen sağlayıcıdan bağımsız açık kaynaklı bir çözüm kullanmak isteyeceksiniz.

Düşük seviyeli, şifrelenmiş ve durum bilgisi olmayan bir oturum yardımcı programı istiyorsanız iron-session.
Yerleşik sağlayıcılar (Google, Facebook, GitHub...), JWT, JWE, e-posta/şifre, sihirli bağlantılar ve daha fazlasına sahip tam özellikli bir kimlik doğrulama sistemi istiyorsanız next-auth.

Bu kütüphanelerin her ikisi de kimlik doğrulama modelini desteklemektedir. Passport ile ilgileniyorsanız, güvenli ve şifrelenmiş çerezler kullanan örneklerimiz de var:

Other Providers

Diğer kimlik doğrulama sağlayıcıları ile örnekleri görmek için adresindeki örnekler klasörüne göz atın.

Examples