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

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

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

Аутентификацията е критична част от повечето съвременни уеб приложения, осигурявайки, че само упълномощени потребители имат достъп до защитени ресурси. Използването на JavaScript Fetch API заедно с Google’s Firebase може да предложи солидна и надеждна система за аутентификация. В този контекст, ще разгледаме подробности относно интеграцията на тези две технологии за постигане на оторизирана аутентификация в уеб приложения.

Подготовка на средата

Преди всичко, трябва да настроим проекта в Google Firebase, като следваме стъпките, описани в официалната документация. След успешната настройка, можем да преминем към интеграцията на Firebase SDK в нашето уеб приложение, където също ще използваме JavaScript Fetch API.

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

След като включим Firebase SDK в нашето приложение, трябва да го инициализираме, като посочим конфигурационните детайли, предоставени от Firebase конзолата. Този процес включва добавяне на специален скрипт в HTML файла на приложението:

<script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-auth.js"></script>

След това, инициализираме Firebase приложението в JavaScript файла си:

var 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

След като нашата среда е настроена, можем да преминем към процеса на аутентификация. JavaScript Fetch API представлява модерен и мощен начин за извършване на HTTP заявки. Можем да използваме Fetch API за комуникация с Firebase аутентификационните API-та, както следва:

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

В горепосочените примери, YOUR_API_KEY трябва да бъде заменен с реалния API ключ, получен от вашата Firebase конзола.

Управление на сесии и защита на ресурси

След като потребителят е успешно аутентикиран, Firebase ще върне токен, който може да се използва за идентификация и оторизация на потребителя за достъп до защитени ресурси. Този токен следва да бъде съхранен на сигурно място (например в localStorage) и да се изпраща с всяка заявка към защитени API ендпойнти.

localStorage.setItem('token', data.idToken);

fetch('https://your-protected-api.com/endpoint', {
    headers: {
        'Authorization': 'Bearer ' + localStorage.getItem('token')
    }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

В този пример, data.idToken представлява токена, получен при успешна аутентификация.

Заключение

Чрез комбинацията на JavaScript Fetch API и Google’s Firebase, разработчиците могат да създават надеждни и безопасни системи за аутентификация с относително малко усилия. Използването на тези технологии позволява бързо и ефективно разработване на уеб приложения, които отговарят на съвременните стандарти за сигурност и удобство за потребителя.