Node.js & React.js Kullanarak Google Authentication Sağlama

Herkese merhaba! Bu yazımda sunucu tarafında Node ve ön tarafta React kullanarak Google ile kayıt etme, giriş yapma durumlarının sağlanması için gereken alt yapıyı nasıl sağlarız onu anlatacağım. Konuyla ilgili hazırladığım örnek bir projenin GitHub linkini yazı sonunda paylaşacağım.

Öncelikle Google Auth servisini kullanacağımız için Google’dan bir client secret id almamız gerekiyor. Kolay bir şekilde edinmek için bu görsel kaynaktan faydalanabilirsiniz. Bu ID’yi aldıktan sonra projemize başlayabiliriz.

Node.js (Backend) İşlemleri

Öncelikle bunun için bir klasör oluşturacağız ve body-parser, cors, express ve google-auth-library kütüphanelerini indireceğiz.

$ npm i body-parser cors express google-auth-library

Frontend tarafından bize gelecek token’ı doğrulayabilmek için google-auth-library’e ihtiyaç duyuyoruz. Ardından projemize aşağıdaki kodları barındıracak olan bir index.js dosyası ekliyorum.

Gayet anlaşılır olsa da en azından Google Auth için yazdığımız kodların bir üzerinden geçmekte fayda var:

Öncelikle 5. satırda Google’dan aldığım ClientID’yi tanımlıyorum. Tabii bu ID’nin size özel ve gizli tutulması gereken bir değer olduğunu unutmayın lütfen. Yani projenizi açık kaynak yükleme niyetiniz varsa bunu bir dosyaya taşıyın ve gitignore ile bunun paylaşılmasını engelleyin.

10 ve 11. satırlarda google auth için eklediğim kütüphanenin tokenı doğrulama ve gelecek bilgileri almak için kullanacağım OAuth2Client sınıfını import ederek ClientID’mi veriyorum. 16. satır ve devamında ise sınıfın verifyIdToken metotunu kullanarak frontend tarafından gelen token’ımı ve ClientID’mi veriyorum. Eğer herhangi bir terslik yoksa then bloklarında, kullanıcın seçtiği gmailin bilgileriyle beraber şu tarz bir response gelecek:

sample-response

Böylelikle backend tarafımızı hazırlamış olduk. Şimdi frontend tarafında yapacaklarımıza başlayalım.

React.js (Frontend) İşlemleri

Önce bir React projesi oluşturalım.

$ npx create-react-app mern-google-auth

Projeyi oluşturduktan sonra yukarda hazırladığımız backende istek atmak için axios paketini ve google auth sağlamak için de react-google-login paketini indirelim.

$ npm i axios react-google-login

Ardından login & register işlemlerimizi hangi componentta yapacaksak oraya kodlarımızı ekliyor olacağız.

Örnek göstermek için yapıya çok dikkat etmeden istek attığım fonksiyonu da componentte kullandım. Siz projenize uygularken düzenlice kullanacaksınızdır.

Yine hafif üzerinden geçelim: react-google-login kütüphanemizi ekledik ve kütüphaneden GoogleLogin componentına props olarak ClientID’mizi verdik. Aynı zamanda yukarda responseGoogle isminde bir fonksiyon oluşturduk. Bu fonksiyon aşağıya eklediğimiz GoogleLogin componentından onSuccess veya onFailure olunca ne geliyorsa response olarak onu alıyor ve tokenı backendimize gönderiyor. Ardından bize backendimizden gmail bilgilerinin olduğu (yukarda sample-response ismiyle örnek verdiğim fotoğraftaki gibi) bir response geliyor. Sonrasında o veriyi nasıl yöneteceğimiz, işleyeceğimiz bize kalmış. Mesela veri tabanına gmail adresi, name, surname verilerini kaydedebiliriz ve bu kaydın Google Auth ile oluşturulduğunu da bir alanda belirtebiliriz. Böylece kullanıcı tekrar geldiğinde Login with Google dediği zaman olayı handle edebilir ve kullanıcıyı tanır, içeri alabiliriz.

Örnek GitHub Projem

Okuduğunuz için teşekkürler. Eğer faydalı olduğuna inanıyorsanız yazıya alkış(lar) bırakarak daha da öne çıkmasını sağlayabilirsiniz :)

Sorunuz olursa veya takip etmek isterseniz bana ulaşabileceğiniz adreslerim: LinkedIn — Twitter — GitHub