Yazılım

Javascript Firebase ile Authentication İşlemleri

tarafından yazıldı Mehmet Ali Ayvaz

Javascript ile Firebase authentication hizmetini kullanarak giriş çıkış işlemleri nasıl yapılır, bu soruyu detaylıca sizlere açıklayalım.

Üyelik oluşturma, giriş ve giriş yapıldıktan sonra görünecek sayfa için basit bir şablon oluşturduk. Kodlara makalenin altındaki github linkinden ulaşabilirsiniz. Oluşturduğumuz şablon böyle görüncektir.

Öncelikle gmail kullanarak Firebase’de oturum açalım. Bu adrese giderek oturum açın. Daha sonra “proje ekle” butonuna basalım.

Firebase Proje Oluşturma

 

Daha sonra açılan ekranda projemiz için bir ad belirleyelim. Belirlediğimiz ada göre firebase bize bir kullanıcı adı oluşturacaktır.


Firebase Auth Proje oluşturma

Projemiz için isim belirledikten sonra Analytics bağlantısı yapılsın mı kısmını şuan için kapatabiliriz. Çünkü şuan test bir proje üzerinde uğraştığımız için Analytics bağlantısını yapmayacağız.

Daha sonra devam deyince bizi Firebase ana sayfasına yönlendirecektir. Aşağıdaki resimde işaretlenen butona tıklayıp bir web projesi oluşturacağız.

Javascript Firebase Web Projesi Oluşturma

İşaretli butona tıkladıktan sonra açılan kısımda web projemiz için bir ad oluşturalım. Belirlediğimiz adı onaylayınca sistem bize bir kod parçası verecektir.  Aşağıdaki resimde “script” tagları arasındaki kod parçacığını javascript dosyamızın en üstüne ekleyeceğiz. Bu kod Firebase projemizin key bilgilerini içermektedir.

Firebase Auth Kod

Kodu ekledikten sonra aşağıdaki kodu da html dosyamızda “body”nin en altına ekliyoruz. Bu kod sayesinde Firebase’i projemize dahil etmiş oluyoruz.

Böylece Firebase’i projemize dahil etmiş olduk. Şimdi Firebase’de soldaki menüde “Authentication” kısmına tıklıyoruz. Sonra resimdeki adımları takip edip mail ile giriş kısmını aktif hale getiriyoruz.

Javascript Authentication

Şimdi sıra üye olma, giriş yapma ve çıkış işlemlerine geldi.

Javascript Firebase Üyelik Oluşturma

Öncelikle form içindeki mail ve şifre bilgisini değişkenlere atayıp bu değişkenleri aşağıdaki fonksiyon ile firebase projemize kayıt ediyoruz.

Mail ve şifre bilgisini “mail” ve “password” değişkenlerine aktardığımızı düşünürsek, fonksiyon böyle olacaktır.

Bu fonksiyonu çalıştırdıktan sonra kullanıcıya aynı zamanda giriş işlemini de yaptırabiliriz. Bunun için aşağıdaki fonskiyonu yukarıdaki kayıt fonksiyonu içerisinde çalıştıracağız.

Daha iyi anlayabilmeniz için aşağıdaki resmi de inceleyebilirsiniz.

Javascript Firebase Kayıt İşlemi

Javascript Firebase Giriş İşlemi

Giriş işlemi için gerekli fonksiyonu kayıt olurken kullanmıştık. Aynı fonksiyonu giriş yapma kısmında da kullanacağız.

Giriş işlemini daha iyi anlayabilmeiz için aşağıdaki görseli inceleyebilirsiniz.

Javascript Firebase Giriş İşlemi

Kayıt ve Giriş fonksiyonlarımızı yazdıktan sonra bunları aşağıdaki fonksiyonun içerisinde çalıştıracağız. Bu fonskiyon bir giriş çıkış işlemi olup olmadığını anlamaya yarıyor. Biz bu şablonda basit bir router sistemi yaptık.

Çıkış işlemi içinde alttaki fonksiyonu kullanabilirsiniz. Çıkış işlemini üstteki fonksiyonun içerisinde çalıştıracağız.

Firebase Authentication

Javascript Firebase ile giriş çıkış işlemini kısaca anlatmaya çalıştık. Dilerseniz projeyi github üzerinden inceleyip daha iyi anlayabilirsiniz.

Yazar Hakkında

Mehmet Ali Ayvaz

Kurgu ve tasarımla uzun süre ilgilendikten sonra yazılımla bu serüveni devam ettiriyorum. İnsanlara faydalı olabilecek içerikler hazırlama uğraşındayım.

Yorum Yap