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

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

Uygulamanızı Firebase'e bağlayın

Firebase SDK'yı yükleyin . Yapılandırma kodunu açıklandığı gibi web sayfanıza yapıştırdığınızdan emin olun.

(İ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 araçtan bahsedelim: 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 UI tasarımlarını prototiplemek istiyorsanız, canlı hizmetleri dağıtmadan yerel olarak çalışabilmek harika bir fikir olabilir. .

Bir 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ü Paketi'nin 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. Çalışan yerel proje dizininin kökü itibaren firebase emulators:start .
  3. Etkileşimli prototip oluşturma için Yerel Öykünücü Paketi Kullanıcı Arabirimi'ni veya etkileşimli olmayan testler için Kimlik Doğrulama öykünücüsü REST API'sini kullanma.

Ayrıntılı bir kılavuz mevcuttur Connect'e Doğrulama emülatörü için uygulama . Daha fazla bilgi için, bkz Yerel Emülatörü Suite giriş .

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

Yeni kullanıcılar kaydolun

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 tamamladığında, kullanıcı tarafından sağlanan e-posta adresini ve şifreyi doğrulamak ardından onları geçmek createUserWithEmailAndPassword yöntemiyle:

Web sürümü 9

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;
    // ..
  });

Web sürümü 8

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 parolalarını kullanarak oturum açmalarına olanak tanıyan bir form oluşturun. Bir kullanıcı formu tamamladığında, çağrı signInWithEmailAndPassword yöntemi:

Web sürümü 9

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 sürümü 8

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çmış 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 her değiştiğinde çağrılır.

Kullanılarak gözlemci takın onAuthStateChanged yöntem. Bir kullanıcı başarıyla oturum açtığında, gözlemcide kullanıcı hakkında bilgi alabilirsiniz.

Web sürümü 9

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/firebase.User
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

Web sürümü 8

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/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: