Web Sitelerinde Firebase Authentication Kullanmaya Başlama

Kullanıcıların e-posta adresi ve şifreyle oturum açma gibi bir veya daha fazla oturum açma yöntemi ve Google ile Oturum Açma ve Facebook'a Giriş gibi birleşik kimlik sağlayıcıları kullanarak uygulamanızda oturum açmasına izin vermek için Firebase Authentication'ı kullanabilirsiniz. Bu eğitim, uygulamanıza e-posta adresi ve şifreyle oturum açma bilgilerini nasıl ekleyeceğinizi göstererek Firebase Authentication'ı kullanmaya başlamanızı sağlar.

Authentication SDK'yı ekleme ve başlatma

  1. Henüz yapmadıysanız Firebase JS SDK'yı yükleyin ve Firebase'i başlatın.

  2. Firebase Authentication JS SDK'yı ekleyin ve Firebase Authentication'ı başlatın:

Web 

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const auth = firebase.auth();

(İsteğe bağlı) Firebase Local Emulator Suite ile prototip oluşturun ve test edin

Uygulamanızın, kullanıcıların kimliğini nasıl doğruladığından bahsetmeden önce Kimlik Doğrulama işlevinin prototipini oluşturmak ve test etmek için kullanabileceğiniz bir dizi araçtan bahsedelim: Firebase Local Emulator Suite. Kimlik doğrulama teknikleri ve sağlayıcılar arasında karar veriyorsanız Authentication ve Firebase Güvenlik Kurallarını kullanarak herkese açık ve gizli verilerle farklı veri modelleri deniyorsanız ya da oturum açma kullanıcı arayüzü tasarımlarının prototipleri oluşturuyorsanız canlı hizmetleri dağıtmadan yerel olarak çalışabilmek harika bir fikir olabilir.

Local Emulator Suite'in bir parçasıdır. Bu emülatör, uygulamanızın emüle edilmiş veritabanı içeriği ve yapılandırmasının yanı sıra isteğe bağlı olarak emüle edilen proje kaynaklarınızla (işlevler, diğer veritabanları ve güvenlik kuralları) etkileşimde bulunmasını sağlar.

Kimlik Doğrulama emülatörünün kullanımı yalnızca birkaç adımdan oluşur:

  1. Emülatöre bağlanmak için uygulamanızın test yapılandırmasına bir kod satırı ekleme.
  2. Yerel proje dizininizin kök dizininden firebase emulators:start komutunu çalıştırın.
  3. Etkileşimli prototip oluşturmak için Local Emulator Suite kullanıcı arayüzünü veya etkileşimli olmayan test için Kimlik Doğrulama emülatörü REST API'yi kullanma.

Uygulamanızı Kimlik Doğrulama emülatörüne bağlama başlıklı makalede ayrıntılı bir kılavuz bulabilirsiniz. Daha fazla bilgi için Local Emulator Suite tanıtımı konusuna bakın.

Şimdi kullanıcı kimliğinin nasıl doğrulanacağına geçelim.

Yeni kullanıcılar için kaydolma

Yeni kullanıcıların e-posta adreslerini ve şifrelerini kullanarak uygulamanıza kaydolmalarını sağlayan bir form oluşturun. Bir kullanıcı formu doldurduğunda kullanıcının sağladığı e-posta adresini ve şifreyi doğrulayın, ardından bunları createUserWithEmailAndPassword yöntemine iletin:

Web

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed up 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });
auth_signup_password.js

Web

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });
email.js

Mevcut kullanıcıların oturumunu açma

Mevcut kullanıcıların e-posta adreslerini ve şifrelerini kullanarak oturum açmasına izin veren bir form oluşturun. Kullanıcı formu doldurduğunda signInWithEmailAndPassword yöntemini çağırın:

Web

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });
auth_signin_password.js

Web

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });
email.js

Kimlik doğrulama durumu gözlemleyicisi ayarlama ve kullanıcı verilerini alma

Uygulamanızın, oturum açmış kullanıcı hakkında bilgi alması gereken her bir sayfa için global kimlik doğrulama nesnesine bir gözlemci ekleyin. Kullanıcının oturum açma durumu her değiştiğinde bu gözlemci çağrılır.

onAuthStateChanged yöntemini kullanarak gözlemciyi ekleyin. Bir kullanıcı başarıyla oturum açtığında gözlemcide kullanıcı hakkında bilgi alabilirsiniz.

Web

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/auth.user
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
auth_state_listener.js

Web

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/v8/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
index.js

Sonraki adımlar

Diğer kimlik sağlayıcılar ve anonim misafir hesapları için nasıl destek ekleyeceğinizi öğrenin: