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содержит код Cloud Functions, и именно здесь вы будете писать функции блокировки аутентификации. -
public/— содержит статические файлы для вашего чат-приложения -
public/scripts/main.js— здесь компилируется JS-код вашего приложения чата (src/index.js) -
src/firebase-config.js— содержит объект конфигурации Firebase, который используется для инициализации вашего чат-приложения. -
src/index.js— JS-код вашего чат-приложения
Получить Firebase CLI
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, используя свою учетную запись Google.
- Нажмите кнопку, чтобы создать новый проект, а затем введите имя проекта (например,
Authentication MFA Codelab). - Нажмите «Продолжить» .
- При появлении соответствующего запроса ознакомьтесь с условиями Firebase и примите их, а затем нажмите кнопку «Продолжить» .
- (Необязательно) Включите помощь ИИ в консоли Firebase (так называемая «Gemini в Firebase»).
- Для этой лабораторной работы вам не понадобится Google Analytics, поэтому отключите опцию Google Analytics.
- Нажмите «Создать проект» , дождитесь завершения подготовки проекта, а затем нажмите «Продолжить» .
Подключите свой код к проекту Firebase
Теперь вам нужно подключить этот код к вашему проекту Firebase. Сначала выполните следующую команду для входа в Firebase CLI:
$ 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, а затем для запроса второго фактора аутентификации у зарегистрированных пользователей.
В редакторе откройте файл 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 можно найти в наших справочных документах .
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 . Учётная запись будет успешно создана.
С помощью блокирующих функций вы можете создать любые необходимые ограничения для аутентификации. Подробнее см. в справочной документации .
Резюме
Отличная работа! Вы добавили многофакторную аутентификацию в веб-приложение, чтобы защитить учётные записи пользователей, а затем создали специальные требования для регистрации пользователей с помощью функций блокировки. Вы определённо заслужили гифку!
