Web Sitelerinde Firebase Authentication Kullanmaya Başlama

Kullanıcıların uygulamanızda oturum açmalarına izin vermek için Firebase Authentication veya e-posta adresi ve şifreyle oturum açma gibi diğer oturum açma yöntemlerini ve Google ile Oturum Açma ve Facebook Girişi gibi birleşik kimlik sağlayıcılar. Bu nasıl ekleyeceğinizi göstererek Firebase Authentication kullanmaya başlamanızı sağlar e-posta adresi ve şifreyle oturum açmanız gerekir.

Authentication SDK'sını ekleyip 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 uygulamasını 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, Authentication işlevinin prototipini oluşturmak ve test etmek için kullanabileceğiniz araçlar: Firebase Local Emulator Suite. Kimlik doğrulama teknikleri arasında karar vermeye test ederek herkese açık ve gizli verilerle farklı veri modellerini deniyor, Authentication ve Firebase Security Rules kullanarak ya da oturum açma kullanıcı arayüzü tasarımlarının prototipini oluşturabilir, yerel olarak çalışmak sizin için harika bir fikir olabilir.

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

Authentication emülatörünü birkaç adımda kullanabilirsiniz:

  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 Authentication emülatörü REST API.

Uygulamanızı Authentication emülatörüne bağlama başlıklı makaleden ayrıntılı bir kılavuza ulaşabilirsiniz. Daha fazla bilgi için Local Emulator Suite ile ilgili girişe 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-postalarını kullanarak uygulamanıza kaydolmasına olanak tanıyan bir form oluşturun bir şifre girin. Kullanıcı formu doldurduğunda e-postayı doğrulayın tarafından sağlanan adresi ve şifreyi kullanıp createUserWithEmailAndPassword yöntem:

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 kullanarak oturum açmasına olanak tanıyan bir form oluşturun ve şifre. Bir kullanıcı formu doldurduğunda signInWithEmailAndPassword yöntem:

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ıyla ilgili bilgi gerektiren her bir sayfasında global kimlik doğrulama nesnesine bir gözlemci ekler. 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. Kullanıcı Başarılı bir şekilde oturum açtığında, gözlemcideki kullanıcıyla ilgili 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 konuklar için nasıl destek ekleyeceğinizi öğrenin hesaplar: