Web Sitelerinde Firebase Kimlik Doğrulamasını Kullanmaya Başlayın

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

Kimlik Doğrulama SDK'sını ekleyin ve başlatın

  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 modüler API'si

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 ad alanlı API

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 yapın 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 aracı tanıtalım: Firebase Local Emulator Suite. Kimlik doğrulama teknikleri ve sağlayıcılar arasında karar veriyorsanız, Kimlik Doğrulama ve Firebase Güvenlik Kurallarını kullanarak genel ve özel verilerle farklı veri modellerini denemek veya oturum açma kullanıcı arayüzü tasarımlarının prototipini oluşturmak istiyorsanız, canlı hizmetleri dağıtmadan yerel olarak çalışabilmek harika bir fikir olabilir .

Kimlik Doğrulama öykünücüsü, uygulamanızın öykünülmüş veritabanı içeriği ve yapılandırmasının yanı sıra isteğe bağlı olarak öykünülmüş proje kaynaklarınızla (işlevler, diğer veritabanları ve güvenlik kuralları) etkileşim kurmasını sağlayan Yerel Öykünücü Paketinin bir parçasıdır.

Kimlik Doğrulama öykünücüsünü kullanmak yalnızca birkaç adımı içerir:

  1. Öykünücüye bağlanmak için uygulamanızın test yapılandırmasına bir kod satırı ekleme.
  2. Yerel proje dizininizin kökünden, firebase emulators:start çalıştırılıyor.
  3. Etkileşimli prototip oluşturma için Local Emulator Suite kullanıcı arayüzünü veya etkileşimli olmayan testler için Kimlik Doğrulama öykünücüsü REST API'yi kullanma.

Uygulamanızı Kimlik Doğrulama öykünücüsüne bağlama bölümünde ayrıntılı bir kılavuz mevcuttur. Daha fazla bilgi için Local Emulator Suite'in tanıtımına bakın.

Şimdi kullanıcıların kimliğinin nasıl doğrulanacağına devam edelim.

Yeni kullanıcılar kaydedin

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ı tarafından sağlanan e-posta adresini ve şifreyi doğrulayın ve ardından bunları createUserWithEmailAndPassword yöntemine iletin:

Web modular API

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 namespaced API

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ılarda oturum açın

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 signInWithEmailAndPassword yöntemini çağırın:

Web modular API

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 namespaced API

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

Bir kimlik doğrulama durumu gözlemcisi ayarlayın ve kullanıcı verilerini alın

Uygulamanızın oturum açan kullanıcı hakkında bilgiye ihtiyaç duyan sayfalarının her biri için genel kimlik doğrulama nesnesine bir gözlemci ekleyin. Bu gözlemci, kullanıcının oturum açma durumu değiştiğinde ç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 modular API

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 namespaced API

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: