Kimlik doğrulama, uygulama geliştirmenin önemli bir bileşenidir. Kullanıcı verilerinin korunmasına ve kötü amaçlı etkinliklerin önlenmesine yardımcı olur. Basitçe söylemek gerekirse, bir kullanıcının kimliğinin güvenilirliğini belirleyerek, yalnızca yetkili kullanıcıların bir uygulamaya ve onun kaynaklarına erişebilmesini sağlar.
Özel bir kimlik doğrulama sistemi oluşturmak, zaman alıcı bir görev olabilir ve NextAuth.js'nin kullanışlı olduğu yer burasıdır. Next.js çerçevesiyle oluşturulan uygulamalar için güvenli kimlik doğrulama desteği sağlar.
NextAuth.js Nedir?
SonrakiAuth.js sağlayan açık kaynaklı hafif bir kitaplıktır. Kimlik doğrulama ve yetkilendirme Next.js uygulamaları için destek. Geliştiricilerin, Next.js uygulamaları için hızlı ve kolay bir şekilde kimlik doğrulama ve yetkilendirme ayarlamalarına olanak tanır. Birden çok sağlayıcıyla kimlik doğrulama, e-posta ve parolasız kimlik doğrulama gibi özellikler sağlar.
NextAuth.js, Kimlik Doğrulamada Nasıl Çalışır?
NextAuth.js'nin kimlik doğrulama çözümü, yapabileceğiniz bir istemci tarafı API sağlar. Next.js uygulamanıza entegre edin. Hesap oluşturdukları farklı oturum açma sağlayıcılarına sahip kullanıcıların kimliğini doğrulamak için bunu kullanabilirsiniz.
Görünüşte, kullanıcılar bir sağlayıcının oturum açma sayfasına yönlendirilir. Başarılı kimlik doğrulamanın ardından sağlayıcı, kullanıcının yükünü içeren oturum verilerini döndürür. Bu yük daha sonra uygulamaya ve kaynaklarına erişim yetkisi verebilir.
NextAuth.js'deki (v4) Yeni Özellik Güncellemeleri
Aralık 2022'de NextAuth.js dördüncü sürümünü yayınladı. Bu sürüm, önceki sürüm olan v3'ten yeni güncellemeler ve değişikliklerle geliştirilmiştir. Değişiklikler temel olarak kimlik doğrulama sürecinde kitaplığın kullanımını iyileştirmeye odaklanmaktadır.
1. useSession Hook'taki güncellemeler
Bir kullanıcının oturum açıp açmadığını kontrol etmek için useSession kancasını kullanabilirsiniz. Bu yeni sürümde, useSession kancası, durum seçeneğinin eklenmesi sayesinde durumları test etmek için daha basit bir yol sağlayan bir nesne döndürür. Aşağıdaki koda bakın:
içe aktarmak { oturumu kullan } itibaren"sonraki kimlik doğrulama/tepki"ihracatvarsayılanişlevBileşen() {
sabit { veri: oturum, durum } = useSession()eğer (durum "doğrulanmış") {
geri dönmek<P>{session.user.email} olarak oturum açıldıP>
}
geri dönmek<P> Oturum açılmamış P>
}
2. SessionProvider Bağlamı Zorunlu Hale Geliyor
Yeni sürüm dört, SessionProvider bağlamının kullanımını zorunlu kılar. Bu, uygulamanızı useSession Sağlayıcı ile sarmanız gerekeceği anlamına gelir. NextAuth.js, uygulamanızı _app.jsx dosya.
Ek olarak, clientMaxAge yöntemi refetchInterval ile değiştirilmiştir. Bu, oturumu periyodik olarak arka planda getirmeyi kolaylaştıracaktır.
içe aktarmak { Oturum Sağlayıcı } itibaren"sonraki kimlik doğrulama/tepki"
ihracatvarsayılanişlevUygulama({
Bileşen, pageProps: { oturum, ...pageProps },
}) {
geri dönmek (
<Oturum Sağlayıcıoturum={oturum}yeniden getirme aralığı={5 * 60}>
<Bileşen {...sayfaDestekler} />Oturum Sağlayıcı>
)
}
3. Sağlayıcıları Tek Tek İçe Aktarma
NextAuth.js, bir kullanıcıda oturum açmak için kullanabileceğiniz çeşitli sağlayıcı hizmetleri sağlar. Onlar içerir:
- Yerleşik OAuth Sağlayıcıları kullanma (ör. GitHub, Google).
- E-posta Sağlayıcıyı Kullanma.
Bu yeni sürümde, her sağlayıcıyı ayrı ayrı içe aktarmanız gerekir.
içe aktarmak GoogleSağlayıcı itibaren"sonraki kimlik doğrulama/sağlayıcılar/google"
içe aktarmak Auth0Sağlayıcı itibaren"sonraki kimlik doğrulama/sağlayıcılar/auth0";4. Diğer Küçük Değişiklikler
- İstemci tarafı içe aktarma, next-auth/client'ten next-auth/react olarak yeniden adlandırıldı.
- Geri arama yöntemlerinin bağımsız değişkenlerinde yapılan değişiklikler:
oturum aç({ kullanıcı, hesap, profil, e-posta, kimlik bilgileri })
session({ session, token, user })
jwt({ belirteç, kullanıcı, hesap, profil, isNewUser })
Kimlik Doğrulamada NextAuth.js İle Başlarken
NextAuth.js'yi Next.js uygulamalarınıza entegre etmek için aşağıdaki adımları izleyin:
- Bu komutu çalıştırarak bir Next.js Uygulaması oluşturun: npx sonraki uygulama oluştur
- Koşmak npm sonraki kimlik doğrulamasını yükle NextAuth.js'yi Next.js Uygulamanıza yüklemek için terminalinizde.
- ziyaret edin SonrakiAuth.js resmi belgeler ve desteklenenler listesinden tercih ettiğiniz sağlayıcıyı/sağlayıcıları seçin. Ardından, seçtiğiniz sağlayıcının/sağlayıcıların geliştirici konsolunda bir hesap oluşturun ve Next.js uygulamanızı kaydedin.
- Seçtiğiniz sağlayıcının/sağlayıcıların geliştirici konsolunda, ana yol URL'si ve geri arama yönlendirme URL'si, değişiklikleri kaydedin ve kopyalayın Müşteri Kimliği Ve Müşteri Sırrı.
- Next.js uygulama kök dizininizde, bir .env dosyası oluşturun. Müşteri Kimliği Ve Müşteri Sırrı.
- Son olarak, /pages/api dizininde adında yeni bir klasör oluşturun. yetki. auth klasöründe yeni bir dosya oluşturun ve [...nextauth].js olarak adlandırın. Oluşturulan dosyaya aşağıdaki kodu ekleyin. Kod, bir Google Sağlayıcı kullanan NextAuth.js istemci tarafı API'sini gösterir:
içe aktarmak GoogleSağlayıcı itibaren"sonraki kimlik doğrulama/sağlayıcılar/google";
sağlayıcılar: [
GoogleSağlayıcı({
Müşteri Kimliği: işlem.env.GOOGLE_CLIENT_ID,
istemciGizli: işlem.env.GOOGLE_CLIENT_SECRET
})
]
Artık devam edip bir oturum açma kimlik doğrulama sayfası oluşturabilirsiniz. İşte bir oturum açma bileşeni için bir DOM oluşturma:
içe aktarmak Tepki itibaren'tepki';
içe aktarmak { useSession, oturum aç, oturumu kapat } itibaren"sonraki kimlik doğrulama/tepki"ihracatvarsayılanişlevBileşen() {
sabit { veri: oturum } = useSession()eğer (oturum) {
geri dönmek (
<>
<P> {session.user.email} olarak oturum açıldı P>
<düğmetıklamada={() => signOut()}>Çıkış yapdüğme>
)
}
geri dönmek (
<>
<P> Oturum açılmamış P>
<düğmetıklamada={() => SignIn()}>Giriş yapdüğme>
)
}
bu oturumu kullan Hook, geçerli kullanıcı oturumu nesnesine erişir. Bir kullanıcı oturum açtıktan ve Google tarafından kimliği doğrulandıktan sonra, kullanıcı yükünü içeren bir oturum nesnesi döndürülür. Bu, Next.js'nin uygulamanın istemci tarafında, bu durumda e-postada kullanıcı ayrıntılarını oluşturmasına olanak tanır.
Özel Kimlik Doğrulama Sistemleri vs. NextAuth.js Gibi Kullanıma Hazır Çözümler
Özel bir kimlik doğrulama sistemi oluşturma ile kullanıma hazır bir kimlik doğrulama entegre etme arasında seçim yapma NextAuth.js gibi bir çözüm için, her birinin maliyetini, karmaşıklığını ve güvenliğini dikkate almak önemlidir. çözüm.
Özel bir kimlik doğrulama sistemi geliştirmek için gereken kaynaklara ve uzmanlığa sahipseniz, bu sizin için en iyi yaklaşım olabilir. Ancak, uygulaması kolay, güvenli ve uygun maliyetli, kullanıma hazır bir çözüm arıyorsanız, NextAuth.js iyi bir seçim olabilir. Sonuçta, seçim ihtiyaçlarınıza ve tercihlerinize bağlı olacaktır.
