1. Настройка
Получить исходный код
В этой лаборатории кода вы начнете с почти готовой версии примера приложения Friendly Chat, поэтому первое, что вам нужно сделать, — это клонировать исходный код:
$ git clone https://github.com/firebase/codelab-friendlychat-web --branch security
Затем перейдите в каталог security-start , где вы будете работать до конца этой лаборатории кода:
$ cd codelab-friendlychat-web/security-start
Теперь установите зависимости, чтобы можно было запустить код. Если у вас медленное подключение к Интернету, это может занять минуту или две:
$ npm install && (cd functions && npm install)
Познакомьтесь с этим репо
Каталог security-solution/ содержит полный код примера приложения. В каталоге security-start вы будете работать с кодовой лабораторией, и в нем отсутствуют несколько важных частей реализации аутентификации. Ключевые файлы и функции в security-start/ и security-solution/ :
-
functions/index.jsсодержит код облачных функций, и здесь вы будете писать функции блокировки аутентификации. -
public/— содержит статические файлы вашего чат-приложения. -
public/scripts/main.js— где JS-код вашего приложения чата (src/index.js) скомпилирован в -
src/firebase-config.js— содержит объект конфигурации Firebase, который используется для инициализации вашего приложения чата. -
src/index.js— JS-код вашего чат-приложения.
Получите интерфейс командной строки Firebase
Пакет Emulator Suite является частью Firebase CLI (интерфейс командной строки), который можно установить на ваш компьютер с помощью следующей команды:
$ npm install -g firebase-tools@latest
Создайте javascript с помощью webpack, который создаст файл main.js внутри каталога public/scripts/.
webpack build
Затем убедитесь, что у вас установлена последняя версия CLI. Эта лаборатория кода работает с версией 11.14 или выше.
$ firebase --version 11.14.2
Подключитесь к своему проекту Firebase
Если у вас нет проекта Firebase, в консоли Firebase создайте новый проект Firebase. Запишите выбранный вами идентификатор проекта, он понадобится вам позже.
Теперь вам нужно подключить этот код к вашему проекту Firebase. Сначала выполните следующую команду, чтобы войти в интерфейс командной строки Firebase:
$ firebase login
Затем выполните следующую команду, чтобы создать псевдоним проекта. Замените $YOUR_PROJECT_ID идентификатором вашего проекта Firebase.
$ firebase use $YOUR_PROJECT_ID
Теперь вы готовы запустить приложение!
2. Запустите эмуляторы
В этом разделе вы запустите приложение локально. Это означает, что пришло время загрузить Emulator Suite.
Запустите эмуляторы
Из исходного каталога codelab выполните следующую команду, чтобы запустить эмуляторы:
$ firebase emulators:start
Это будет обслуживать ваше приложение по адресу http://127.0.0.1:5170 и постоянно перестраивать исходный код по мере внесения изменений. Вам нужно будет только жестко обновить (ctrl-shift-r) локально в браузере, чтобы увидеть изменения.
Вы должны увидеть такой вывод:
i emulators: Starting emulators: auth, functions, firestore, hosting, storage ✔ functions: Using node@16 from host. i firestore: Firestore Emulator logging to firestore-debug.log ✔ firestore: Firestore Emulator UI websocket is running on 9150. i hosting[demo-example]: Serving hosting files from: ./public ✔ hosting[demo-example]: Local server: http://127.0.0.1:5170 i ui: Emulator UI logging to ui-debug.log i functions: Watching "[...]" for Cloud Functions... ✔ functions: Loaded functions definitions from source: beforecreated. ✔ functions[us-central1-beforecreated]: providers/cloud.auth/eventTypes/user.beforeCreate function initialized (http://127.0.0.1:5011/[...]/us-central1/beforecreated). i Running script: npm start > security@1.0.0 start > webpack --watch --progress [...] webpack 5.50.0 compiled with 1 warning in 990 ms
Как только вы увидите сообщение «Все эмуляторы готовы» , приложение готово к использованию.
3. Реализация МФА
MFA частично реализован в этом репозитории. Вы добавите код, чтобы сначала зарегистрировать пользователя в MFA, а затем предложить пользователям, зарегистрированным в MFA, ввести второй фактор.
В редакторе откройте файл src/index.js и найдите метод startEnrollMultiFactor() . Добавьте следующий код, чтобы настроить верификатор reCAPTCHA, который предотвратит злоупотребления телефоном (верификатор reCAPTCHA установлен в невидимый режим и не будет виден пользователям):
async function startEnrollMultiFactor(phoneNumber) {
const recaptchaVerifier = new RecaptchaVerifier(
"recaptcha",
{ size: "invisible" },
getAuth()
);
Затем найдите метод finishEnrollMultiFactor() и добавьте следующее, чтобы зарегистрировать второй фактор:
// Completes MFA enrollment once a verification code is obtained.
async function finishEnrollMultiFactor(verificationCode) {
// Ask user for the verification code. Then:
const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
// Complete enrollment.
await multiFactor(getAuth().currentUser)
.enroll(multiFactorAssertion)
.catch(function (error) {
alert(`Error finishing second factor enrollment. ${error}`);
throw error;
});
verificationId = null;
}
Затем найдите функцию signIn и добавьте следующий поток управления, который предлагает пользователям, зарегистрированным в MFA, ввести свой второй фактор:
async function signIn() {
// Sign in Firebase using popup auth and Google as the identity provider.
var provider = new GoogleAuthProvider();
await signInWithPopup(getAuth(), provider)
.then(function (userCredential) {
// User successfully signed in and is not enrolled with a second factor.
})
.catch(function (error) {
if (error.code == "auth/multi-factor-auth-required") {
multiFactorResolver = getMultiFactorResolver(getAuth(), error);
displaySecondFactor(multiFactorResolver.hints);
} else {
alert(`Error signing in user. ${error}`);
}
});
}
Остальная часть реализации, включая вызываемые здесь функции, уже завершена. Чтобы увидеть, как они работают, просмотрите остальную часть файла.
4. Попробуйте войти в систему с помощью MFA в эмуляторах.
Теперь попробуйте реализацию MFA! Убедитесь, что ваши эмуляторы все еще работают, и посетите локально размещенное приложение по адресу localhost:5170 . Попробуйте войти в систему, и когда вам будет предложено ввести код MFA, вы увидите код MFA в окне терминала.
Поскольку эмуляторы полностью поддерживают многофакторную аутентификацию, ваша среда разработки может быть полностью автономной.
Дополнительные сведения о реализации MFA см. в нашей справочной документации .
5. Создайте функцию блокировки
Некоторые приложения предназначены для использования только определенной группой пользователей. В таких случаях вам нужна возможность создавать собственные требования для пользователя для регистрации или входа в ваше приложение.
Вот что предоставляют функции блокировки: возможность создавать собственные требования к аутентификации. Это облачные функции, но в отличие от большинства функций они запускаются синхронно, когда пользователь пытается зарегистрироваться или войти в систему.
Чтобы создать функцию блокировки, откройте functions/index.js в своем редакторе и найдите закомментированную beforecreated функцию.
Замените его этим кодом, который позволяет создавать учетную запись только пользователям с доменом example.com:
exports.beforecreated = beforeUserCreated((event) => {
const user = event.data;
// Only users of a specific domain can sign up.
if (!user.email || !user.email.endsWith("@example.com")) {
throw new HttpsError("invalid-argument", "Unauthorized email");
}
});
6. Попробуйте функцию блокировки в эмуляторах.
Чтобы опробовать функцию блокировки, убедитесь, что ваши эмуляторы запущены, и в веб-приложении по адресу localhost:5170 выйдите из системы.
Затем попробуйте создать учетную запись с адресом электронной почты, который не заканчивается на example.com . Функция блокировки не позволит операции завершиться успешно.
Теперь повторите попытку, указав адрес электронной почты, который заканчивается на example.com . Учетная запись будет успешно создана.
С помощью функций блокировки вы можете создавать любые необходимые ограничения для аутентификации. Дополнительную информацию см. в справочной документации .
Резюме
Отличная работа! Вы добавили многофакторную аутентификацию в веб-приложение, чтобы помочь пользователям обеспечить безопасность своих учетных записей, а затем создали специальные требования для регистрации пользователей с помощью функций блокировки. Вы определенно заслужили гифку!
