Firebase — это платформа для разработки приложений, поддерживаемая Google и используемая миллионами компаний по всему миру. Одной из его основных функций является предоставление системы аутентификации, которая позволяет веб-разработчикам создавать веб-сайты с безопасной аутентификацией пользователей всего за несколько строк кода. Это позволяет вам сэкономить много времени при создании веб-сайтов, позволяя избежать разработки систем проверки токенов на стороне сервера.
В этом руководстве мы собираемся внедрить систему аутентификации, которая позволит пользователям входить на наш сайт, используя свою учетную запись Google. Мы заканчиваем реализацией компонента Button, который позволяет пользователю войти в систему и возвращает массив JSON, содержащий его личную информацию и токен доступа.
Создание нового проекта в Firebase
Для начала вам нужно создать пользователя на Firebase. На самом деле вы можете использовать ту же систему, которую мы будем внедрять, для входа в свою учетную запись Google. Вас встретит эта страница:
Хотя этот пользовательский интерфейс может измениться в будущем, основная функциональность, скорее всего, останется прежней. Выполните следующие простые шаги, чтобы создать экземпляр нового проекта:
Начать → Добавить проект → Вставить название проекта → снять флажок «Включить Google Analytics» → Создать проект
Для целей этого руководства мы отключили аналитику Google. Но не беспокойтесь, если вам понадобится эта функциональность в будущем, вы можете легко добавить ее позже. Теперь на целевой странице вашего проекта вы можете нажать кнопку ‹/›, чтобы подключить его к веб-приложению:
Вам будет предложено установить псевдоним для вашего веб-приложения. Вы можете назвать его как хотите и нажать «Регистрация»:
затем вам будут предоставлены учетные данные, которые необходимо вставить в приложение React, чтобы подключить его к проекту Firebase. Обязательно установите переключатель «использовать npm». Скопируйте фрагмент кода конфигурации или оставьте окно браузера открытым, так как нам скоро понадобятся эти учетные данные:
Подключение вашего приложения React к Firebase
На данный момент в этом руководстве предполагается, что у вас установлен NPM и вы уже создали проект React. Если у вас его нет, следуйте этому руководству, чтобы установить NPM, и этому руководству, чтобы настроить приложение React.
Установите Firebase в свой проект с помощью следующей команды терминала:
npm install firebase
Внутри папки src создайте новую папку с именем «utils». обычно эта папка используется для хранения любых функций, которые взаимодействуют с серверной частью. Внутри этой папки создайте новый файл .js. Мы назовем его firebase.utils.js.
В этот файл .js добавьте фрагмент кода, предоставленный Firebase. Вы можете удалить комментарии, чтобы сохранить код в чистоте:
import { initializeApp } from "firebase/app";
const firebaseConfig = {
apiKey: "AIzaSyBLOs-FdaINFWpbYeeZ41qB6XIbBaUFkD0",
authDomain: "test-bc518.firebaseapp.com",
projectId: "test-bc518",
storageBucket: "test-bc518.appspot.com",
messagingSenderId: "539002163235",
appId: "1:539002163235:web:65b6f7a763c11bc85ea196"
};
const app = initializeApp(firebaseConfig);
На данный момент вы уже подключили свое приложение React к Firebase и можете воспользоваться всем набором продуктов и функций, которые предоставляет Firebase.
Внедрение аутентификации Firebase
Чтобы включить аутентификацию, вам нужно выполнить несколько простых шагов в консоли Firebase в вашем браузере. Чтобы начать, нажмите на ссылку «Аутентификация» на боковой панели:
На новой странице нажмите «Начать». Затем вы должны увидеть следующую страницу:
Теперь у нас есть набор методов входа, которые мы можем добавить в наше приложение. Нажмите на кнопку «Google», чтобы настроить его. Это действие приведет вас на следующую страницу:
На этой странице вам необходимо ввести название вашего проекта и адрес электронной почты службы поддержки проекта. Здесь вы можете просто использовать адрес электронной почты, который вы использовали для входа. После того, как вы нажмете «Сохранить», вы увидите, что вход через Google включен на вашей странице аутентификации:
Чтобы реализовать функцию аутентификации внутри вашего проекта React, вам нужно всего лишь добавить еще несколько строк в файл firebase.utils.js. Сначала добавьте следующий импорт:
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
Добавьте следующий код в конец файла, чтобы создать экземпляр аутентификации и экспортировать его функциональность в остальную часть вашего приложения:
// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);
// Initialize Firebase Auth provider
const provider = new GoogleAuthProvider();
// whenever a user interacts with the provider, we force them to select an account
provider.setCustomParameters({
prompt : "select_account "
});
export const auth = getAuth();
export const signInWithGooglePopup = () => signInWithPopup(auth, provider);
Импортируя этот модуль в любую часть вашего проекта React, вы можете использовать функцию SignInWithGooglePopup(), чтобы отправить пользователя на страницу входа, где он вводит свой адрес электронной почты и пароль Google для аутентификации.
Firebase предоставляет множество подобных функций для работы с пользователями. Мы не будем подробно рассматривать каждую из этих функций, так как они могут быть реализованы аналогично методу, который мы только что реализовали. Полный список этих функций можно найти в Справочнике Firebase.
Добавление компонента кнопки входа в ваш проект
Чтобы протестировать эту функциональность, мы создадим простую кнопку, реализующую функцию SignInWithGooglePopup(). Для начала создайте новый файл jsx в каталоге Components. Мы назовем его sign-in.component.jsx.
Начните с импорта модуля, который мы только что создали, в sign-in.component.jsx:
import { signInWithGooglePopup } from "../../utils/firebase.utils"
Нам нужно сделать асинхронный вызов функции SignInWithGooglePopup(). Обратите внимание, что всякий раз, когда вы делаете вызов к базе данных, он будет асинхронным. Следуйте этой реализации функционального компонента, чтобы настроить кнопку входа:
import { signInWithGooglePopup } from "../../utils/firebase.utils"
const SignIn = () => {
const logGoogleUser = async () => {
const response = await signInWithGooglePopup();
console.log(response);
}
return (
<div>
<button onClick={logGoogleUser}>Sign In With Google</button>
</div>
)
}
export default SignIn;
Теперь у вас есть нажимаемая кнопка, которая ведет пользователя на страницу входа в Google. Когда они аутентифицируют себя, функция возвращает файл JSON, содержащий массив информации о пользователе, который только что вошел в систему. В приведенной выше реализации эта информация сохраняется в переменной «response» и сохраняется в консоли браузера после завершения аутентификации. .
Ключевая часть информации, представленная в этом файле JSON, заключается в том, что он предоставляет accessToken для этого конкретного пользователя. Firebase также предоставляет функцию под названием FireStore, которая представляет собой интуитивно понятную систему баз данных, размещенную в Google Cloud. FireStore использует этот токен для обработки действий CRUD, выполняемых пользователем для создания, чтения, обновления и удаления записей данных. Вот введение в FireStore.
