Web Sitelerinde Firebase Authentication Kullanmaya Başlama

Kullanıcıların e-posta adresi ve şifreyle oturum açma, Google ile Oturum Açma ve Facebook Girişi gibi birleşik kimlik sağlayıcılar dahil olmak üzere bir veya daha fazla oturum açma yöntemini kullanarak uygulamanızda oturum açmasına izin vermek için Firebase Authentication hizmetini kullanabilirsiniz. Bu eğitimde, uygulamanıza e-posta adresi ve şifreyle oturum açma özelliği ekleme adımları gösterilerek Firebase Authentication hizmetini kullanmaya başlamanız sağlanır.

Authentication SDK'sını ekleme ve başlatma

  1. Henüz yapmadıysanız Firebase JS SDK'sını yükleyin ve Firebase'i ilk kullanıma hazırlayın.

  2. Firebase Authentication JS SDK'sını ekleyin ve Firebase Authentication'i 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şturma ve test etme

Uygulamanızın kullanıcıların kimliğini nasıl doğruladığından bahsetmeden önce Authentication 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 vermeye çalışıyorsanız, Authentication ve Firebase Security Rules kullanarak herkese açık ve gizli verilerle farklı veri modellerini deniyorsanız veya oturum açma kullanıcı arayüzü tasarımlarının prototiplerini oluşturuyorsanız canlı hizmetleri dağıtmadan yerel olarak çalışabilmek harika bir fikir olabilir.

Authentication emülatörü, uygulamanızın emülasyonu yapılmış veritabanı içeriği ve yapılandırmasının yanı sıra isteğe bağlı olarak emülasyonu yapılmış proje kaynaklarınızla (işlevler, diğer veritabanları ve güvenlik kuralları) etkileşim kurmasını sağlayan Local Emulator Suite'nin bir parçasıdır.

Authentication emülatörünü kullanmak için yalnızca birkaç adım yeterlidir:

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

Ayrıntılı kılavuzu Uygulamanızı Authentication emülatörüne bağlama sayfasında bulabilirsiniz. Daha fazla bilgi için Local Emulator Suite giriş bölümüne bakın.

Şimdi kullanıcıların kimliğini nasıl doğrulayacağımıza bakalım.

Yeni kullanıcıların kaydolmasını sağlama

Yeni kullanıcıların e-posta adreslerini ve şifrelerini kullanarak uygulamanıza kaydolmalarına olanak tanıyan bir form oluşturun. Kullanıcı formu doldurduğunda, kullanıcının girdiği 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;
    // ..
  });

Web

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

Mevcut kullanıcıların oturum açması

Mevcut kullanıcıların e-posta adreslerini ve şifrelerini kullanarak oturum açmalarına olanak tanıyan 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;
  });

Web

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

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

Uygulamanızın oturum açmış kullanıcı hakkında bilgiye ihtiyaç duyan her sayfası için global kimlik doğrulama nesnesine bir gözlemci ekleyin. Bu gözlemci, kullanıcının oturum açma durumu her değiştiğinde çağrılır.

onAuthStateChanged yöntemini kullanarak gözlemciyi ekleyin. 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
    // ...
  }
});

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
    // ...
  }
});

Sonraki adımlar

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