—
Примечание! Эта статья также доступна на:
- Вьетнамский: https://viblo.asia/p/cai-dat-firebase-authenticantion-bang-react-trong-5-phut-naQZRpe05vx
- Корейский: https://aspdotnet.tistory.com/2268
- Арабский: https://raw3h.net/page/how-to-setup-firebase-authentication-with-react-in-5-minutes-maybe-10-d76763/
Огромное спасибо переводчикам ❤
—
Эй, ты! Рад вас видеть!
Я хотел написать простое руководство по быстрой аутентификации с помощью Firebase и React.
Я буду очень прямолинеен и прямо к делу. Я не буду рассматривать такие крайние случаи, как аутентифицированные маршруты или правильное отображение сообщений об ошибках.
В этом руководстве мы внесем только минимальные изменения, необходимые для использования базовой аутентификации Google.
Мы будем использовать несколько проектов с открытым исходным кодом:
- Https://github.com/nodejs/node
- Https://github.com/facebook/react
- Https://github.com/facebook/create-react-app
- Https://github.com/armand1m/react-with-firebase-auth
Настройка разработки
Убедитесь, что вы установили:
Вот и все.
Загрузите образец проекта
Мы собираемся использовать create-react-app
для начальной загрузки проекта.
Выполните следующие команды в своем терминале:
# bootstrap a new react application npx create-react-app react-firebase-authentication # access the project cd ./react-firebase-authentication # start project in development mode npm start
Настройка Firebase
Начните создавать проект Firebase, если у вас его еще нет.
Перейдите на страницу аутентификации.
Перейдите на вкладку «Метод входа» и убедитесь, что у вас включен Google в качестве поставщика услуг входа.
Прокрутите немного вниз и убедитесь, что у вас localhost
в качестве авторизованного домена:
Вверху страницы аутентификации нажмите кнопку «Веб-настройка».
Он будет отображаться в таком модальном окне:
Скопируйте переменную config
и вставьте ее в файл с именем firebaseConfig.js
. Экспортируйте его позже. Это должно выглядеть примерно так:
const config = { apiKey: "***", authDomain: "***", databaseURL: "***", projectId: "***", storageBucket: "***", messagingSenderId: "***", }; export default config;
Храните этот файл в src/firebaseConfig.js
.
Теперь мы собираемся установить библиотеки Firebase и компонент высшего порядка через NPM.
Выполните следующую команду:
npm install --save firebase
react-with-firebase-auth
Код
Теперь мы, наконец, можем приступить к самой крутой части.
В настоящее время ваше приложение является приложением CRA по умолчанию, в котором нет ничего интересного. Мы изменим компонент src/App.js
.
Вставьте эти четыре импорта в начало файла:
import withFirebaseAuth from 'react-with-firebase-auth' import * as firebase from 'firebase/app'; import 'firebase/auth'; import firebaseConfig from './firebaseConfig';
Инициализируйте приложение Firebase, используя конфигурацию:
const firebaseApp = firebase.initializeApp(firebaseConfig);
Настройте поставщиков, которых мы хотим поддерживать, и получите доступ к библиотеке аутентификации:
const firebaseAppAuth = firebaseApp.auth(); const providers = { googleProvider: new firebase.auth.GoogleAuthProvider(), };
Оберните экспорт компонента App
, используя withFirebaseAuth
HOC:
export default withFirebaseAuth({ providers, firebaseAppAuth, })(App);
Теперь мы можем получить доступ к свойствам, предоставляемым withFirebaseAuth
HOC в компоненте App.
Он предоставляет нам user
, error
и некоторые методы signIn
и signOut
в качестве свойств.
Итак, мы можем добавить это к нашему методу рендеринга:
const { user, signOut, signInWithGoogle, } = this.props;
И измените разметку, чтобы попросить пользователя войти или выйти:
return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> { user ? <p>Hello, {user.displayName}</p> : <p>Please sign in.</p> } { user ? <button onClick={signOut}>Sign out</button> : <button onClick={signInWithGoogle}>Sign in with Google</button> } </header> </div> );
Вот и все!
Если вы отметите https: // localhost: 3000, вы, вероятно, увидите следующее:
Затем вы можете нажать кнопку «Войти с помощью Google», чтобы открыть модальное окно входа в Google.
После предоставления доступа вы увидите что-то вроде этого:
Если вы обновите страницу, ваш пользователь будет оставаться в системе до тех пор, пока Firebase считает, что учетные данные все еще действительны.
Вот и все!
Надеюсь, вам понравился этот небольшой урок. Я сделал это за ночь, когда мне было совершенно нечего делать, и я просто хотел поделиться чем-то крутым.
Моя цель заключалась не в том, чтобы сделать красивый код, иметь лучшую реализацию с лучшими практиками или показать вам, как вы должны его реализовать, а просто показать, насколько простым и быстрым это может быть.
Вы можете найти полученный исходный код здесь: https://github.com/armand1m/react-firebase-authentication-medium
Спасибо за чтение, cya! ❤