Разбира се, използването на 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:
- Създаване на Акаунт
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);
}
}
- Вход в системата
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 синтаксиса, създаваме надеждна и съвременна система за аутентификация в уеб приложения. Това позволява на разработчиците да създават бързи и сигурни приложения, които осигуряват отлично потребителско преживяване.