Web Sitelerinde Firebase Authentication Kullanmaya Başlama

Kullanıcıların e-posta adresi ve şifre ile oturum açma ve Google Sign-In ile Facebook Login gibi birleşik kimlik sağlayıcılar da 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 öğesini kullanabilirsiniz. Bu eğitimde, uygulamanıza e-posta adresi ve şifre ile oturum açma özelliğini nasıl ekleyeceğiniz gösterilerek Firebase Authentication ile çalışmaya 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 başlatın.

  2. Firebase Authentication JS SDK'sını ekleyin ve Firebase Authentication'yi 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şlevini prototip haline getirmek ve test etmek için kullanabileceğiniz bir araç grubunu tanıtalım: Firebase Local Emulator Suite. Kimlik doğrulama teknikleri ve sağlayıcılar arasında karar veriyorsanız, Authentication ve Firebase Security Rules'ü kullanarak herkese açık ve özel verilerle farklı veri modellerini denemek ya da oturum açma kullanıcı arayüzü tasarımlarının prototipini oluşturmak istiyorsanız canlı hizmetler dağıtmadan yerel olarak çalışabilmek mükemmel bir fikir olabilir.

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

Authentication emülatörünü kullanmanın birkaç adımı vardır:

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

Ayrıntılı bir kılavuz için Uygulamanızı Authentication emülatörüne bağlama başlıklı makaleyi inceleyin. Daha fazla bilgi için Local Emulator Suite girişine bakın.

Şimdi kullanıcıların kimliğini doğrulama konusuna geçelim.

Yeni kullanıcılar kaydetme

Yeni kullanıcıların e-posta adreslerini ve şifrelerini kullanarak uygulamanıza kaydolmasına olanak tanıyan bir form oluşturun. Kullanıcı formu doldurduğunda, kullanıcı tarafından sağlanan 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 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;
  });
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özlemcisi ayarlama ve kullanıcı verilerini alma

Uygulamanızın oturum açmış kullanıcıyla ilgili bilgi gerektiren 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.

Gözlemciyi onAuthStateChanged yöntemini kullanarak ekleyin. Bir kullanıcı başarılı bir şekilde oturum açtığında gözlemciden kullanıcı hakkında bilgi edinebilirsiniz.

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 konuk hesapları için nasıl destek ekleyeceğinizi öğrenin: