Расширенные функции аутентификации

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 . Учетная запись будет успешно создана.

С помощью функций блокировки вы можете создавать любые необходимые ограничения для аутентификации. Дополнительную информацию см. в справочной документации .

Резюме

Отличная работа! Вы добавили многофакторную аутентификацию в веб-приложение, чтобы помочь пользователям обеспечить безопасность своих учетных записей, а затем создали специальные требования для регистрации пользователей с помощью функций блокировки. Вы определенно заслужили гифку!

гифка с людьми из офиса, танцующими танец подъёма крыши