Привет, ребята,

Я Ахмед Абдельбасет, разработчик внешнего интерфейса, 20 лет, из Египта. Я разработчик-самоучка, я начал изучать веб-разработку в 2019 году и до сих пор учусь. В настоящее время я изучаю React и React Native.

В некоторых блогах я расскажу о простых документах Firebase.

Прежде всего, что такое Firebase?

Firebase — это платформа, разработанная Google для создания мобильных и веб-приложений. Firebase предоставляет услуги аутентификации, базы данных в реальном времени, облачного хранилища Firestore, хранилища, хостинга, функций, комплекта машинного обучения, Crashlytics, тестовой лаборатории, мониторинга производительности, удаленной настройки и динамических ссылок.

Эти документы предназначены для Firebase 9 JavaScript SDK, но вы можете использовать те же концепции с Firebase iOS и Android SDK. Официальную документацию можно найти здесь.

Спасибо Github Copilot за помощь в написании этой документации. Это мне очень помогло. даже благодарит себя прямо сейчас.

Firebase предоставляет некоторые услуги, такие как:

  • Аутентификация.
  • База данных Firestore.
  • База данных реального времени.
  • Хранилище.
  • Хостинг.
  • И более…

В этом блоге я расскажу Firebase Authentication . И другие в следующих блогах.

Создайте новый проект Firebase:

  • Перейдите в Консоль Firebase.
  • Войдите в свою учетную запись Google.
  • Нажмите на Add Project.
  • Введите имя для вашего проекта.
  • Нажмите на Continue.
  • Он попросит вас включить Google Analytics для вашего проекта, вы можете включить или отключить его. затем нажмите продолжить.
  • Нажмите на Create Project.
  • Создание проекта займет несколько секунд.
  • После создания проекта вы будете перенаправлены на панель управления проектом.
  • Теперь вам нужно запустить приложение. На панели инструментов выберите Web в разделе Add Firebase to your web app. Выберите имя для своего приложения, затем нажмите Register App.
  • Скопируйте объект конфигурации. Он понадобится вам позже.

объект конфигурации выглядит так:

const firebaseConfig = {
	apiKey: "###############",
	authDomain: "###############",
	projectId: "###############",
	storageBucket: "###############",
	messagingSenderId: "###############",
	appId: "###############",
};

Установите Firebase, используя npm

npm install firebase

Инициализируйте приложение Firebase:

import { initializeApp } from "firebase/app";
// ...
const app = initializeApp(firebaseConfig);

Как видите, мы импортировали initializeApp из firebase/app и вызвали его с firebaseConfig в качестве аргумента. Это инициализирует наше приложение. В пакете firebase есть также firebase/auth, firebase/firestore, firebase/storage, firebase/functions и другие. Вы можете импортировать из них функции следующим образом:

import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";
// And More...
const auth = getAuth(app);
const db = getFirestore(app);
const storage = getStorage(app);
// ...

Аутентификация:

Аутентификация — это процесс подтверждения личности пользователя. Firebase Authentication предоставляет серверные службы, простые в использовании SDK и готовые библиотеки пользовательского интерфейса для аутентификации пользователей в вашем приложении.

Инициализировать аутентификацию:

ПОМНИТЕ: когда мы начали проект, мы получили объект и сделали его в переменной firebaseConfig.

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
// ...

// Fribase Config Token we got from console.firebase.com
const firebaseConfig = {
 apiKey: "###############",
 authDomain: "###############",
 projectId: "###############",
 storageBucket: "###############",
 messagingSenderId: "###############",
 appId: "###############",
};

// Initialize the firebase
const app = initializeApp(firebaseConfig)

// Initialize Authentication and export to use in others files
export const auth = getAuth(app)

Теперь нам нужно приступить к методам аутентификации, которые мы хотим использовать. Перейдите в Консоль Firebase, затем выберите свой проект, затем перейдите к Authentication на левой боковой панели, затем выберите Sign-in method на верхней панели навигации. включите методы аутентификации, которые вы хотите использовать.

Методы аутентификации:

Существует множество методов авторизации. Например: электронная почта и пароль, номер телефона, анонимный или провайдеры, такие как Google, Facebook, Twitter, Github и другие. Перейдите в Консоль Firebase и начните, что вы хотите.

Зарегистрируйтесь с помощью электронной почты и пароля:

Вы можете использовать обещание createUserWithEmailAndPassword(auth, email, password).

import { createUserWithEmailAndPassword } from "firebase/auth";
// ...
const email = // ...
const password = // ...
//...
createUserWithEmailAndPassword(auth, email, password)
 .then((userCredential) => {
  // Signed in
  const user = userCredential.user;
  // ...
 })
 .catch((error) => {
  const errorCode = error.code;
  const errorMessage = error.message;
  // ..
 });

Примечание. Это обещание. Таким образом, вы можете использовать async , await и try-catch .

import { createUserWithEmailAndPassword } from "firebase/auth";
// ...
(async () => {
  try {
    const userCredential = await createUserWithEmailAndPassword(auth, email, password)
    
    // Signed in
    const user = userCredential.user;
    // ...
  } catch (error) {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  }
})()

Теперь он создал новую учетную запись и войдите в систему. И переменная auth имеет новое свойство, называемое currentUser, содержит данные текущего пользователя, такие как displayName, email, photoURL, isVerified, uid и больше.

Войти с помощью электронной почты и пароля:

Вы можете использовать обещание signInWithEmailAndPassword(auth, email, password).

import { signInWithEmailAndPassword } from "firebase/auth";
// ...
signInWithEmailAndPassword(auth, email, password)
	.then((userCredential) => {
		// Signed in
		const user = userCredential.user;
		// ...
	})
	.catch((error) => {
		const errorCode = error.code;
		const errorMessage = error.message;
	});

Выход:

чтобы выйти, используйте обещание signOut(auth).

import { signOut } from "firebase/auth";
// ...
signOut(auth)
	.then(() => {
		// Sign-out successful.
	})
	.catch((error) => {
		// An error happened.
	});

Войдите в систему с провайдерами:

Firebase Auth поддерживает множество провайдеров, таких как Google, Facebook, Twitter, Github, Apple, Microsoft, Game Center, Yahoo и Google Play Games.

У этих провайдеров функции регистрации и входа одинаковы.

Сначала импортируйте класс поставщика и назначьте его переменной для удобства чтения. И вызовите метод Signing. Есть методы; signInWithPopup(auth, provider) и signInWithRedirect(auth, provider)

import { signInWithPopup, signInWithRedirect, GoogleAuthProvider } from "firebase/auth";
// ...
const provider = new GoogleAuthProvider();

signInWithPopup(auth, provider)
 .then((result) => {
  // This gives you a Google Access Token. You can use it to access the Google API.
  const credential = GoogleAuthProvider.credentialFromResult(result);
  const token = credential.accessToken;
  // The signed-in user info.
  const user = result.user;
  // ...
 })
 .catch((error) => {
  // Handle Errors here.
  const errorCode = error.code;
  const errorMessage = error.message;
 });

// You can also use: 
signInWithRedirect(auth, provider).then().catch()

В этом примере я использовал класс GoogleAuthProvider(). Но это не единственный способ. Есть также FacebookAuthProvider() , GithubAuthProvider() и другие.

Вы можете назначить дополнительные области, если хотите, например:

  • googleProvider.addScope(‘https://www.googleapis.com/auth/contacts.readonly') .
  • facebookProvider.addScope(‘user_birthday’)
  • twitterProvider.addScope(‘https://www.googleapis.com/auth/contacts.readonly')
  • githubProvider.addScope(‘repo’)

Аутентификация номера телефона:

import { signInWithPhoneNumber } from "firebase/auth";
// ...
signInWithPhoneNumber(auth, phoneNumber, appVerifier)
	.then((confirmationResult) => {
		// SMS sent. Prompt user to type the code from the message, then sign the
		// user in with confirmationResult.confirm(code).
		// ...
	})
	.catch((error) => {
		// Error; SMS not sent
		// ...
	});

Состояние авторизации:

Чтобы прослушать состояние авторизации, вы можете использовать onAuthStateChange()

import { onAuthStateChanged } from "firebase/auth";
// ...
onAuthStateChanged(auth, (user) => {
	if (user) {
		// User is signed in.
		const uid = user.uid;
		// ...
	} else {
		// User is signed out
	}
});

Дополнительные функции аутентификации:

Отправить подтверждение по электронной почте:

import { sendEmailVerification } from "firebase/auth";
// ...
sendEmailVerification(user)
	.then(() => {
		// Email verification sent!
	})
	.catch((error) => {
		// ...
	});

Отправить письмо для сброса пароля:

import { sendPasswordResetEmail } from "firebase/auth";
// ...
sendPasswordResetEmail(auth, email)
	.then(() => {
		// Password reset email sent!
	})
	.catch((error) => {
		// ..
	});

Обновить адрес электронной почты:

import { updateEmail } from "firebase/auth";
// ...
updateEmail(user, newEmail)
	.then(() => {
		// Email updated!
	})
	.catch((error) => {
		// ..
	});

Обновить пароль:

import { updatePassword } from "firebase/auth";
// ...
updatePassword(user, newPassword)
	.then(() => {
		// Password updated!
	})
	.catch((error) => {
		// ..
	});

Обновить профиль:

import { updateProfile } from "firebase/auth";
// ...
updateProfile(user, { displayName: "Ahmed Abdelbaset" })
	.then(() => {
		// Profile updated!
	})
	.catch((error) => {
		// ..
	});

Удалить аккаунт:

import { deleteUser } from "firebase/auth";
// ...
deleteUser(user)
	.then(() => {
		// User deleted!
	})
	.catch((error) => {
		// ..
	});

Работа с Typescript, React, Vue, angular и многим другим:

Firebase поддерживает все библиотеки и фреймворки javascript.

Если вы используете Typescript, вам может потребоваться присвоить auth.currentUser переменной. Используйте интерфейс User, например:

const user : (User | null) = auth.currentUser;

// Or with React.js
const [user, setUser] = useState<(User | null)>(null)

useEffect(() => {
  onAuthStateChange(auth, (currentUser) => {
    setUser(currentUser)
  })
} , []);

Обработка ошибок:

  • auth/invalid-emailАдрес электронной почты недействителен.
  • auth/user-disabledУчетная запись пользователя отключена администратором.
  • auth/user-not-foundНет записи пользователя, соответствующей этому идентификатору. Возможно, пользователь был удален.
  • auth/wrong-passwordПароль недействителен или у пользователя нет пароля.
  • auth/email-already-in-useАдрес электронной почты уже используется другим аккаунтом.
  • Вход с использованием auth/operation-not-allowedпароля для этого проекта отключен.
  • auth/weak-passwordПароль должен содержать не менее 6 символов.
  • auth/invalid-verification-codeКод подтверждения SMS, использованный для создания учетных данных для аутентификации телефона, недействителен.
  • auth/invalid-verification-idИдентификатор подтверждения SMS, используемый для создания учетных данных для аутентификации телефона, недействителен.
  • auth/missing-verification-codeУчетные данные для аутентификации телефона были созданы с пустым SMS-кодом подтверждения.
  • auth/missing-verification-idУчетные данные для аутентификации телефона были созданы с пустым идентификатором подтверждения SMS.
  • auth/credential-already-in-useЭти учетные данные уже связаны с другой учетной записью пользователя.
  • auth/invalid-credentialПредоставленные учетные данные для аутентификации имеют неверный формат или срок их действия истек.
  • auth/operation-not-allowedЭта операция не разрешена. Вы должны включить эту службу в консоли.
  • auth/user-disabledУчетная запись пользователя отключена администратором.
  • auth/user-not-foundНет записи пользователя, соответствующей этому идентификатору. Возможно, пользователь был удален.
  • auth/account-exists-with-different-credentialУчетная запись с таким же адресом электронной почты, но другими учетными данными для входа уже существует. Войдите, используя провайдера, связанного с этим адресом электронной почты.
  • auth/auth-domain-config-requiredОбязательный параметр конфигурации authDomain.
  • auth/cancelled-popup-requestЭта операция была отменена из-за открытия другого конфликтующего всплывающего окна.
  • auth/operation-not-supported-in-this-environmentЭта операция не поддерживается в среде, в которой запущено это приложение. «location.protocol» должен быть http или https.
  • auth/popup-blockedНе удалось установить соединение с всплывающим окном. Возможно, он был заблокирован браузером.
  • auth/popup-closed-by-userВсплывающее окно было закрыто пользователем до завершения операции.
  • auth/unauthorized-domainЭтот домен не авторизован для операций OAuth для вашего проекта Firebase. Отредактируйте список авторизованных доменов в консоли Firebase.

Ах да, наконец я закончил.

В этой статье я рассказал об аутентификации Firebase и собираюсь написать аналогичные статьи о базе данных, хранилище и многом другом. Так что убедитесь, что вы следуете за мной. Если это было полезно для вас, оставьте хороший комментарий.