В зависимости от вашего проекта вам может потребоваться аутентификация пользователей, предоставление им возможности зарегистрироваться и войти в систему.
Зачем тебе это нужно?
Когда дело доходит до отделения ваших платящих клиентов от «покупателей из окон», получения их адресов электронной почты или вашего веб-сайта просто требует аутентификации пользователя, ваша первая мысль может быть такой: OMG, это болезненно настраивать!
Аутентификация пользователей «старой школой» может быть не лучшим опытом, но вам все равно придется это делать и тратить бесчисленные часы на то, что вы ненавидите.
Хорошие новости, вам больше не нужно этого делать! Разрешите познакомить вас с Firebase.
Минутку. Что это такое? Я никогда не слышал о Firebase!
Понял тебя! Firebase должен быть вашим универсальным магазином, когда вы думаете о любых бэкэнд-вещах, например об аутентификации, базе данных в реальном времени, хостинге, аналитике, машинном обучении и т. Д.
Позвольте мне продемонстрировать с помощью простого приложения React!
(Pssst! Если вы здесь только для аутентификации пользователя и уже знаете Firebase, переходите к шагу 3)
Шаг 1: настройка приложения с помощью Firebase
Зайдите в Firebase и войдите в свою учетную запись Google. Затем давайте создадим новый проект с помощью большой кнопки Добавить проект.
Дадим и проекту название!
Затем включите или выключите аналитику в зависимости от ваших предпочтений.
Нажмите «Продолжить». Подождите, пока Firebase подготовит ваши ресурсы, что может занять пару секунд. Как только это будет сделано, вы должны увидеть панель управления проектом.
Если да, то поздравляю! Вы только что завершили шаг 1!
Шаг 2. Подключение приложения к только что созданному проекту Firebase
Щелкните маленький значок, обозначающий тип вашего приложения. В этом руководстве я собираюсь использовать вариант веб-приложения.
Быстро пройдите шаги по добавлению приложения, затем найдите маленький значок настроек в верхнем левом углу и нажмите «Настройки проекта».
Прокрутите до конца и выберите соответствующий вариант фрагмента SDK. В этом руководстве я собираюсь использовать параметр «Конфигурация». (Если вы создаете файл HTML, просто скопируйте и вставьте весь фрагмент CDN в конец файла index.html)
Скопируйте и вставьте фрагмент в отдельный файл - и не забудьте установить и импортировать зависимости, в этом случае
firebase-tools
Вы можете сделать это, просто запустив
npm i firebase-tools
Наконец, давайте экспортируем сервисы аутентификации! В конце концов, ваш файл firebase.js должен выглядеть примерно так - если вы создаете приложение React, оно должно выглядеть именно так.
import firebase from 'firebase'
const firebaseConfig = {
apiKey: "YOU-API-KEY",
authDomain: "YOUR-AUTH-DOMAIN",
databaseURL: "YOUR-DB-URL",
projectId: "YOUR-PROJECT-ID",
storageBucket: "YOUR-STORAGE-BUCKET-URL",
messagingSenderId: "YOUR-MESSAGING-SENDER-ID",
appId: "YOUR-APP-ID"
};
const firebaseApp = firebase.initializeApp(firebaseConfig)
const auth = firebase.auth()
const provider = new firebase.auth.GoogleAuthProvider()
export { auth, provider }
Поздравляю! Шаг 2 сделан ✅
Шаг 3. Электронная почта / пароль и проверка подлинности Google
В этом уроке я расскажу только о двух из них, как об этих двух самых популярных.
Давайте импортируем сервисы аутентификации в компонент, который будет их использовать.
⚠️ Убедитесь, что вы импортировали только что созданный компонент, а не зависимость
import { auth, provider } from './firebase'
Все сделано? Прохладный! Давайте вернемся в Firebase и включим серверную часть… звучит безумно, но это буквально то, что мы сделаем!
Выберите «Аутентификация» на левой боковой панели и нажмите «Настроить метод входа». Как только это будет сделано, включите нужную вам службу аутентификации, следуйте инструкциям на экране, и все готово! В этом руководстве мы собираемся использовать параметры электронной почты / пароля и Google, как показано ниже.
Теперь давайте настроим Google Authentication в вашем приложении:
const signIn = () => {
auth.signInWithPopup(provider).then((result) => {
// this is, where you can store your logged in user
console.log(result)});
}).catch((error) => {
alert(error.message);
});
};
И последнее, но не менее важное: давайте быстро настроим аутентификацию по электронной почте / паролю в вашем приложении:
const signUp = (event) => {
// preventing React app to reload
event.preventDefault()
auth.createUserWithEmailAndPassword(email, password)
.then((authUser) => {
// this is, where you can store your logged in user
return authUser.user.updateProfile({
displayName: username
})
}).catch((err) => alert(err.message))
}
const signIn = (event) => {
// preventing React app to reload
event.preventDefault()
auth.signInWithEmailAndPassword(email, password)
.catch((err) => alert(err.message))
}
Хорошо, вот и все! Ваша служба аутентификации запущена и работает!
Но не уходи! Если вы нашли эту статью полезной, посетите этот бесплатный веб-семинар, чтобы вывести свои навыки на новый уровень!
