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 Kimlik Doğrulaması'nı 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 version 9

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 version 8

import firebase from "firebase/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 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ı 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. Yerel proje dizininizin kökünden, 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.

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

Şimdi kullanıcıların kimliklerinin 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 parolayı doğrulayın ve ardından bunları createUserWithEmailAndPassword yöntemine iletin:

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

Web version 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 version 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.

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