Categories
Без категория

Оторизирана аутентификация с Javascript Fetch API и Google’s Firebase – част 2

Оторизирана аутентификация с Javascript Fetch API и Google's Firebase

Разбира се, използването на async/await синтаксис може да направи кода по-четим и лесен за управление, особено когато работите с асинхронни операции, като тези при комуникация с Firebase. Ето как може да изглежда една интеграция, използвайки async/await:

Инициализация на Firebase

Първоначално, включете Firebase SDK във вашия проект, след което инициализирайте Firebase с вашите конфигурационни данни:

import firebase from "firebase/app";
import "firebase/auth";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

firebase.initializeApp(firebaseConfig);

Оторизирана Аутентификация с Fetch API

Следващата стъпка е да създадете функции, които използват Fetch API за аутентификация на потребителите чрез Firebase. Тук ще ви покажем как да направите това с async/await:

  1. Създаване на Акаунт
async function signUp(email, password) {
  try {
    const response = await fetch('https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=YOUR_API_KEY', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ email, password, returnSecureToken: true })
    });
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}
  1. Вход в системата
async function signIn(email, password) {
  try {
    const response = await fetch('https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=YOUR_API_KEY', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ email, password, returnSecureToken: true })
    });
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

Управление на Сесии и Защита на Ресурси

След като потребителят е аутентикиран, можем да използваме токена, върнат от Firebase, за управление на сесии и защита на ресурси:

async function fetchProtectedResource() {
  try {
    const token = localStorage.getItem('token');
    const response = await fetch('https://your-protected-api.com/endpoint', {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

Изпълнение на Функциите

Накрая, използвайте функциите, които създадохте, за да регистрирате и влезете като потребител, и да извлечете защитени ресурси:

signUp('user@example.com', 'user_password').then(() => {
  signIn('user@example.com', 'user_password').then(() => {
    fetchProtectedResource();
  });
});

Заключение

Като комбинираме мощта на Firebase с гъвкавостта на Fetch API и чистотата на async/await синтаксиса, създаваме надеждна и съвременна система за аутентификация в уеб приложения. Това позволява на разработчиците да създават бързи и сигурни приложения, които осигуряват отлично потребителско преживяване.