Bu kitaplık, Google kimlik doğrulamasını Next.js uygulamanıza sorunsuz bir şekilde entegre etmenizi sağlayarak uygulamayı sıfırdan geliştirme gereksinimini ortadan kaldırır.

Güvenli bir kimlik doğrulama sisteminin entegre edilmesi, yalnızca kullanıcılar için güvenli bir ortam sağlamakla kalmayan, aynı zamanda ürününüze güven aşılayan çok önemli bir geliştirme adımıdır. Bu sistem, verilerinin korunmasını ve uygulamaya yalnızca yetkili kişilerin erişebilmesini sağlar.

Sıfırdan güvenli bir kimlik doğrulaması oluşturmak, kapsamlı bir inceleme gerektiren zaman alıcı bir süreç olabilir. Özellikle farklı kimlik doğrulama işlemleri yapılırken, kimlik doğrulama protokollerini ve süreçlerini anlama sağlayıcılar.

NextAuth'u kullanarak, temel özellikleri oluşturmaya odaklanabilirsiniz. NextAuth kullanarak Google sosyal oturum açma bilgilerini uygulamanıza nasıl entegre edeceğinizi öğrenmek için okumaya devam edin.

NextAuth Nasıl Çalışır?

SonrakiAuth.js ekleme sürecini basitleştiren açık kaynaklı bir kimlik doğrulama kitaplığıdır.

instagram viewer
Kimlik doğrulama ve yetkilendirme Next.js uygulamalarına işlevselliğin yanı sıra kimlik doğrulama iş akışlarını özelleştirme. E-posta, şifresiz kimlik doğrulama gibi bir dizi özellik ve Google, GitHub ve daha fazlası gibi çeşitli kimlik doğrulama sağlayıcıları için destek sağlar.

NextAuth, üst düzeyde, uygulamanız ile sağlayıcı arasındaki kimlik doğrulama sürecini kolaylaştıran bir ara yazılım görevi görür. Gizli olarak, bir kullanıcı oturum açmaya çalıştığında, Google'ın oturum açma sayfasına yönlendirilir. Başarılı kimlik doğrulamanın ardından Google, kullanıcının ad ve e-posta adresi gibi verilerini içeren bir veri yükü döndürür. Bu veriler, uygulamaya ve kaynaklarına erişim yetkisi vermek için kullanılır.

NextAuth, yük verilerini kullanarak, kimliği doğrulanmış her kullanıcı için bir oturum oluşturur ve oturum belirtecini yalnızca güvenli bir HTTP tanımlama bilgisinde depolar. Oturum belirteci, kullanıcının kimliğini doğrulamak ve kimlik doğrulama durumunu sürdürmek için kullanılır. Bu süreç, uygulamada küçük farklılıklar olan diğer sağlayıcılar için de geçerlidir.

Next.js Uygulamanızı Google Developer Console'a Kaydedin

NextAuth, Google kimlik doğrulama hizmeti için destek sağlar. Ancak, uygulamanızın Google API'leri ile etkileşime girmesi ve kullanıcıların kimlik doğrulaması yapmasına izin vermesi için Google kimlik bilgileri, uygulamanızı Google geliştirici konsoluna kaydetmeniz ve Elde etmek Müşteri Kimliği Ve Müşteri Sırrı.

Bunu yapmak için şuraya gidin: Google Geliştirici Konsolu. Ardından, konsola erişmek için Google hesabınızla oturum açın. Giriş yaptıktan sonra yeni bir proje oluşturun.

Projenin genel bakış sayfasında, API'ler ve Hizmetler sol menü bölmesindeki hizmetler listesinden sekme ve son olarak, kimlik bilgileri seçenek.

Tıkla Kimlik Bilgileri Oluştur Müşteri Kimliğinizi ve Müşteri Sırrınızı oluşturmak için düğmesine basın. Ardından, verilen seçeneklerden uygulamanın türünü belirtin ve ardından uygulamanız için bir ad verin.

Ardından, uygulamanızın ana yol URL'sini belirtin ve son olarak uygulamanız için yetkili yönlendirme URI'sini belirtin. Bu durum için olması gereken http://localhost: 3000/api/auth/geri arama/google NextAuth'un Google sağlayıcı ayarları tarafından belirtildiği gibi.

Başarılı bir kayıttan sonra Google, uygulamanızda kullanmanız için size bir Müşteri Kimliği ve Müşteri Sırrı sağlayacaktır.

NextJS Uygulamasını Kurun

Başlamak için yerel olarak bir Next.js projesi oluşturun:

npx oluşturma-sonraki-uygulama sonraki-auth-uygulaması

Kurulum tamamlandıktan sonra, yeni oluşturulan proje dizinine gidin ve geliştirme sunucusunu döndürmek için bu komutu çalıştırın.

npm geliştiriciyi çalıştır

Tarayıcınızı açın ve şuraya gidin: http://localhost: 3000. Beklenen sonuç bu olmalıdır.

Bu projenin kodunu kendi içinde bulabilirsiniz. GitHub deposu.

.env Dosyasını Kurma

Projenizin kök klasöründe yeni bir dosya oluşturun ve adlandırın .env Müşteri Kimliğinizi, Sırrınızı ve temel URL'yi saklamak için.

NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'Müşteri Kimliği'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'gizli'
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

NextAUTH URL'si, kimlik doğrulama tamamlandıktan sonra kullanıcıları yeniden yönlendirmek için kullanılan uygulamanızın temel URL'sini belirtmek için kullanılır.

NextAuth'u Next.js Uygulamanıza Entegre Edin

İlk olarak, NextAuth'un kitaplığını projenize kurun.

npm sonraki kimlik doğrulamasını yükle

Sonraki, içinde /pages dizini, yeni bir klasör oluşturun ve adlandırın API. dizini şu şekilde değiştirin: API adlı başka bir klasör oluşturun. yetki auth klasöründe yeni bir dosya ekleyin ve adlandırın [...sonraki].js ve aşağıdaki kod satırlarını ekleyin.

içe aktarmak Sonraki Kimlik Doğrulama itibaren"sonraki kimlik doğrulama/sonraki";
içe aktarmak GoogleSağlayıcı itibaren"sonraki kimlik doğrulama/sağlayıcılar/google";
ihracatvarsayılan Sonraki Kimlik Doğrulama({
 sağlayıcılar:[
 GoogleSağlayıcı({
 clientId: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 clientSecret: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

Bu kod, Google'ı kimlik doğrulama sağlayıcısı olarak yapılandırır. NextAuth işlevi, iki özelliği alan Google sağlayıcı yapılandırma nesnesini tanımlar: bir Müşteri Kimliği ve sağlayıcıyı başlatan bir Müşteri Sırrı.

Ardından, sayfalar/_app.js dosyasını açın ve kodda aşağıdaki değişiklikleri yapın.

içe aktarmak'../styles/globals.css'
içe aktarmak { Oturum Sağlayıcı } itibaren"sonraki kimlik doğrulama/tepki"
işlevUygulamam({ Bileşen, pageProps: { oturum, ...pageProps } }) {
geri dönmek (


 </SessionProvider>
 )
}
ihracatvarsayılan Uygulamam

SonrakiAuth'lar Oturum Sağlayıcı bileşen, Next.js uygulamasına kimlik doğrulama durumu yönetimi işlevi sağlar. alır oturum kimlik, e-posta ve erişim belirteci gibi kullanıcı ayrıntılarını içeren Google'ın API'sinden döndürülen kimlik doğrulama oturumu verilerini içeren prop.

sarılarak Uygulamam SessionProvider bileşeni ile bileşen, kullanıcı ayrıntılarını içeren kimlik doğrulama oturumu nesnesi kullanıma sunulur uygulama genelinde, uygulamanın sayfaları kimlik doğrulama durumlarına göre işlemesini ve işlemesini sağlar.

index.js Dosyasını Yapılandırma

Aç sayfalar/index.js dosyasını açın, standart kodu silin ve kullanıcıları bir oturum açma sayfasına yönlendiren bir oturum açma düğmesi oluşturmak için aşağıdaki kodu ekleyin.

içe aktarmak KAFA itibaren"sonraki / kafa"
içe aktarmak stiller itibaren'../styles/Home.module.css'
içe aktarmak {Yönlendiriciyi kullan} itibaren"sonraki/yönlendirici";
ihracatvarsayılanişlevEv() {
sabit yönlendirici = useRouter();

geri dönmek (





Bir Sonraki Uygulamayı Oluşturun<<span>/title></span><br> <meta name="<span">"description" content=<span>"Bir sonraki uygulamayı oluştur tarafından oluşturuldu"</span> /> <br> <ba rel="<span">"icon" href=<span>"/favicon.ico"</span> /><br> <<span>/Head></span><p> <main classname="{styles.main}"><br> <h1 classname="{styles.title}">
<br> <a href="<span">'a hoş geldiniz" https://nextjs.org">Next.js!<<span>/a></span><br> <<span>/h1></span></a>
</h1></main></p>
<p> </p>
<p classname="{styles.description}"><br> <span>içinde</span>{<span>'' imzalayarak başlayın </span>}<br> <kod classname="{styles.code}"><span>ile</span> Google Hesabınız<<span>/code></span><br> <button classname="{styles.loginButton}<br/"> onClick={ () => router.push(<span>'/Login'</span>)}> Giriş<<span>/button></span><br> <<span>/p></span><br> < <span>/main></span></button></kod></p>
<p><code> <<span>/div></span><br> )<br>}<br> </code></p> <p>Bu kod, bir yönlendirici nesnesi tanımlayarak uygulama içinde yönlendirmeyi işlemek için Next.js <strong>useRouter</strong> kancasını kullanır. Giriş düğmesine tıklandığında, işleyici işlevi yönlendirmek için <strong>router.push</strong> yöntemini çağırır. kullanıcıyı giriş sayfasına yönlendirin.</p> <h3 id="create-a-login-authentication-page">Bir Giriş Kimlik Doğrulaması Oluşturun Sayfa</h3> <p><strong>pages</strong> dizininde yeni bir <strong>Login.js</strong> dosyası oluşturun, ardından aşağıdaki kod satırlarını ekleyin.</p> <pre> <code><span>içe aktar</span> { useSession, oturum açma, oturum kapatma } <span>from</span> <span>"next-auth/react"</span><br><span>import</span> { useRouter } <span>from</span> <span>'next /router'</span>; <span>dan</span> stilleri<br><span>içe aktar</span> <span>'../styles/Login.module.css'</span><p><span>dışa aktarma</span> <span>varsayılan</span> <span><span>işlev</span> < span>Giriş</span>() {<br> <span>sabit</span> { <span>veri</span>: oturum } = useSession()<br> <span>const</span> yönlendirici = useRouter();<br> <span>if</span> (oturum) {<br> <span>dönüş</span> (<br> </p>
<div classname="{styles.container}">
<br> <h1 classname="<span">"title">Sonraki Uygulamayı Oluştur<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> İmzalandı < yayılma alanı <span>as</span> {session.user.email} <br><<span>/h2> </span><br> <div classname="{styles.btns}">
<br> <button classname="{styles.button}" onclick="{()"> router.push(<span>'/Profile'< /span>)}><br> Kullanıcı Profili<br> <<span>/button></span><br> <button classname="{styles.button}" onclick="{()"> {<br> signOut()<br> }}><br> Oturumu kapat<br> <<span>/button></span> <br> <<span>/div></span><br> <<span>/div></span><br> <<span>/div></span><p><code> )<br> }<br> <span>dönüş</span> (<br> <div classname="{styles.container}">
<br> <h1 classname="<span">"title">Sonraki Uygulamayı Oluştur<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> <span>içinde</span> oturum açmadınız!!<<span>/h2></span><br> <button classname="{styles.button}<br/"> onClick={() => signIn()}>İmzala <span>in</span><<span>/button></span><br> <<span>/div></span><br> <<span>/div></span>< br/> )<br>}  <p><strong>useSession</strong>, <strong>signIn</strong> ve <strong>signOut</strong>, <strong>next-auth</strong> tarafından sağlanan kancalardır. <strong>useSession</strong> kancası, bir kullanıcı oturum açtıktan ve kullanıcı tarafından başarıyla doğrulandıktan sonra geçerli kullanıcı oturumu nesnesine erişmek için kullanılır. Google.</p> <p>Bu, Next.js'nin kimlik doğrulama durumunu sürdürmesine ve kullanıcı ayrıntılarını uygulamanın istemci tarafında, bu durumda email.</p> <p>Ayrıca, oturum nesnesini kullanarak uygulamanız için kolayca özel kullanıcı profilleri oluşturabilir ve verileri aşağıdaki gibi bir veritabanında depolayabilirsiniz: PostgreSQL olarak. <span>Prisma'yı kullanarak Next.js uygulamanıza bir PostgreSQL veritabanı bağlayabilirsiniz</span>.</p> <p>Çıkış kancası, kullanıcının uygulamadan çıkış yapmasına olanak tanır. Bu kanca, oturum açma işlemi sırasında oluşturulan oturum nesnesini siler ve kullanıcının oturumu kapatılır.</p> <p>Devam edin ve geliştirme sunucusunu şu şekilde döndürün: değişiklikleri güncelleyin ve kimlik doğrulama işlevini test etmek için tarayıcıda çalışan Next.js uygulamanıza gidin.</p> <pre> <code>npm run dev</code> </pre> <p>Ayrıca, kimlik doğrulama modellerine stil vermek için <span>Next.js uygulamanızla birlikte Tailwind CSS kullanabilirsiniz</span>.</p> <h2 id="authentication-using-nextauth"> NextAuth Kullanarak Kimlik Doğrulama  h2> </h2>
<p>NextAuth, istemci tarafını işlemek için Next.js uygulamalarınıza kolayca entegre edilebilen birden çok kimlik doğrulama hizmetini destekler kimlik doğrulama.</p> <p>Ayrıca, kullanıcılarınızın verilerini depolamak için bir veritabanını ve sunucu tarafını uygulamak için erişim belirtecini entegre edebilirsiniz. NextAuth farklı veritabanı entegrasyonları için destek sağladığından sonraki kimlik doğrulama istekleri için kimlik doğrulama.</p> </button>
</h2>
</div>
</h1>
</div></code></p></button></span></button>
</div>
</h2>
</div>
</h1>
</div></code></pre></ba>