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öntemiyle ve Google ile Oturum Açma ve Facebook Login gibi birleştirilmiş kimlik sağlayıcılarla uygulamanızda oturum açmasına izin vermek için Firebase Authentication kullanabilirsiniz. Bu eğitimde, uygulamanıza e-posta adresi ve şifreyle 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'yı yükleyin ve Firebase'i başlatın.

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

Uygulamanızın kullanıcıların kimliğini nasıl doğruladığından bahsetmeden önce, Authentication işlevselliğini prototip oluşturmak ve test etmek için kullanabileceğiniz bir dizi aracıFirebase Local Emulator Suite tanıtalım. 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 deniyorsanız veya oturum açma kullanıcı arayüzü tasarımlarının prototipini oluşturuyorsanız canlı hizmetleri dağıtmadan yerel olarak çalışabilmek harika bir fikir olabilir.

Authentication emülatörü, uygulamanızın emüle edilmiş veritabanı içeriği ve yapılandırmasıyla, isteğe bağlı olarak da emüle edilmiş 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 gerekir:

  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 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 test için Authentication emülatör REST API'sini kullanma.

Ayrıntılı kılavuzu Uygulamanızı Authentication emülatörüne bağlama başlıklı makalede 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 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ı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çmalarına olanak tanıyan bir form oluşturun. Kullanıcı formu tamamladığında 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

Oturum açmış kullanıcı hakkında bilgiye ihtiyaç duyan uygulamanızın her sayfası için genel 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özlemcide 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 destek ekleme hakkında bilgi edinin: