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

Kullanıcıların, e-posta adresi ve şifreyle oturum açma dahil olmak üzere 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ı kullanarak uygulamanızda oturum açmasına izin vermek için Firebase Kimlik Doğrulaması'nı kullanabilirsiniz. Bu eğitim, uygulamanıza nasıl e-posta adresi ve oturum açma parolası 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ı kurun ve Firebase'i başlatın .

2. Firebase Authentication JS SDK'sını ekleyin ve Firebase Authentication'ı başlatın:

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);

import firebase from "firebase/compat/app";
import "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
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ığı hakkında konuşmadan ö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 modelleri deniyorsanız veya oturum açma kullanıcı arabirimi tasarımlarının prototipini oluşturuyorsanı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ünmüş 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, çalıştırılan firebase emulators:start .
3. Etkileşimli prototip oluşturma için Local Emulator Suite Kullanıcı Arabirimini veya etkileşimli olmayan testler için Kimlik Doğrulama öykünücüsü REST API'sini kullanma.

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

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

yeni kullanıcılar kaydet

Yeni kullanıcıların e-posta adreslerini ve parolalarını kullanarak uygulamanıza kaydolmasına olanak tanıyan bir form oluşturun. Bir kullanıcı formu doldurduğunda, kullanıcı tarafından sağlanan e-posta adresini ve parolayı doğrulayın, ardından bunları createUserWithEmailAndPassword yöntemine iletin:

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

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

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

Mevcut kullanıcıların e-posta adreslerini ve şifrelerini kullanarak oturum açmalarına izin veren bir form oluşturun. Bir kullanıcı formu tamamladığında, signInWithEmailAndPassword yöntemini çağırın:

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

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

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

Uygulamanızın oturum açmış kullanıcı hakkında bilgi gerektiren 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ılı bir şekilde oturum açtığında, gözlemcide kullanıcı hakkında bilgi alabilirsiniz.

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

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:

• Google'da Oturum Açma
• Facebook Girişi
• Twitter Girişi
• GitHub Girişi
• Anonim oturum açma