Ta strona została przetłumaczona przez Cloud Translation API.

Zaawansowane funkcje uwierzytelniania

1. Skonfiguruj

Zdobądź kod źródłowy

W tych ćwiczeniach z programowania zaczynasz od wersji przykładowej aplikacji Friendly Chat, która jest prawie ukończona, więc pierwszą rzeczą, którą musisz zrobić, jest sklonowanie kodu źródłowego:

$ git clone https://github.com/firebase/codelab-friendlychat-web --branch security

Następnie przejdź do katalogu security-start , gdzie będziesz pracować przez resztę zajęć z programowania:

$ cd codelab-friendlychat-web/security-start

Teraz zainstaluj zależności, aby móc uruchomić kod. Jeśli masz wolniejsze połączenie internetowe, może to zająć minutę lub dwie:

$ npm install && (cd functions && npm install)

Poznaj to repozytorium

Katalog security-solution/ zawiera pełny kod przykładowej aplikacji. Katalog security-start to miejsce, w którym będziesz pracować nad programowaniem i brakuje w nim kilku ważnych części implementacji uwierzytelniania. Kluczowe pliki i funkcje w security-start/ i security-solution/ to:

functions/index.js zawiera kod Cloud Functions i to w nim będziesz pisać funkcje blokowania autoryzacji.
public/ - zawiera statyczne pliki aplikacji do czatowania
public/scripts/main.js — gdzie jest kompilowany kod JS aplikacji do czatowania ( src/index.js )
src/firebase-config.js — zawiera obiekt konfiguracyjny Firebase, który służy do inicjowania aplikacji do czatowania
src/index.js — kod JS aplikacji do czatowania

Pobierz interfejs wiersza polecenia Firebase

Pakiet emulatorów jest częścią Firebase CLI (interfejs wiersza poleceń), który można zainstalować na komputerze za pomocą następującego polecenia:

$ npm install -g firebase-tools@latest

Zbuduj javascript za pomocą pakietu webpack, który utworzy plik main.js w katalogu public/scripts/.

webpack build

Następnie potwierdź, że masz najnowszą wersję interfejsu CLI. To ćwiczenie z programowania działa w wersji 11.14 lub nowszej.

$ firebase --version
11.14.2

Połącz się ze swoim projektem Firebase

Jeśli nie masz projektu Firebase, w konsoli Firebase utwórz nowy projekt Firebase. Zanotuj wybrany identyfikator projektu, ponieważ będzie on potrzebny później.

Teraz musisz połączyć ten kod z projektem Firebase. Najpierw uruchom następujące polecenie, aby zalogować się do interfejsu wiersza polecenia Firebase:

$ firebase login

Następnie uruchom następujące polecenie, aby utworzyć alias projektu. Zamień $YOUR_PROJECT_ID na identyfikator swojego projektu Firebase.

$ firebase use $YOUR_PROJECT_ID

Teraz możesz uruchomić aplikację!

2. Uruchom emulatory

W tej sekcji uruchomisz aplikację lokalnie. Oznacza to, że nadszedł czas, aby uruchomić pakiet emulatorów.

Uruchom emulatory

Z poziomu katalogu źródłowego codelab uruchom następujące polecenie, aby uruchomić emulatory:

$ firebase emulators:start

Dzięki temu Twoja aplikacja będzie dostępna pod adresem http://127.0.0.1:5170 i będzie stale odbudowywać kod źródłowy w miarę wprowadzania zmian. Aby zobaczyć zmiany, wystarczy mocno odświeżyć (ctrl-shift-r) lokalnie w przeglądarce.

Powinieneś zobaczyć takie dane wyjściowe:

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

Gdy zobaczysz komunikat Wszystkie emulatory gotowe , aplikacja jest gotowa do użycia.

3. Wdrażanie MSZ

W tym repo częściowo wdrożono usługę MFA. Dodasz kod, aby najpierw zarejestrować użytkownika w usłudze MFA, a następnie monitować użytkowników zarejestrowanych w usłudze MFA o drugi czynnik.

Otwórz w swoim edytorze plik src/index.js i znajdź metodę startEnrollMultiFactor() . Dodaj następujący kod, aby skonfigurować weryfikator reCAPTCHA, który zapobiegnie nadużyciom w telefonie (weryfikator reCAPTCHA jest ustawiony na niewidoczny i nie będzie widoczny dla użytkowników):

async function startEnrollMultiFactor(phoneNumber) {
  const recaptchaVerifier = new RecaptchaVerifier(
    "recaptcha",
    { size: "invisible" },
    getAuth()
  );

Następnie znajdź metodę finishEnrollMultiFactor() i dodaj następujące elementy, aby zarejestrować drugi czynnik:

// 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;
}

Następnie znajdź funkcję signIn i dodaj następujący przepływ kontroli, który monituje użytkowników zarejestrowanych w usłudze MFA o wprowadzenie drugiego czynnika:

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}`);
      }
    });
}

Pozostała część implementacji, łącznie z wywoływanymi tutaj funkcjami, jest już ukończona. Aby zobaczyć, jak działają, przejrzyj resztę pliku.

4. Spróbuj zalogować się przy użyciu usługi MFA w emulatorach

Teraz wypróbuj wdrożenie MFA! Upewnij się, że emulatory nadal działają i odwiedź aplikację hostowaną lokalnie pod localhost:5170 . Spróbuj się zalogować, a gdy zostanie wyświetlony monit o podanie kodu MFA, zobaczysz kod MFA w oknie terminala.

Ponieważ emulatory w pełni obsługują Multi-Factor Auth, Twoje środowisko programistyczne może być całkowicie niezależne.

Aby dowiedzieć się więcej na temat wdrażania usługi MFA, zobacz nasze dokumenty referencyjne .

5. Utwórz funkcję blokującą

Niektóre aplikacje są przeznaczone do użytku tylko przez określoną grupę użytkowników. W takich przypadkach chcesz mieć możliwość tworzenia niestandardowych wymagań dotyczących rejestrowania się lub logowania się użytkownika w aplikacji.

Właśnie to zapewniają funkcje blokowania: sposób tworzenia niestandardowych wymagań dotyczących uwierzytelniania. Są to funkcje chmury, ale w przeciwieństwie do większości funkcji działają synchronicznie, gdy użytkownik próbuje się zarejestrować lub zalogować.

Aby utworzyć funkcję blokującą, otwórz functions/index.js w swoim edytorze i znajdź skomentowaną beforecreated funkcję.

Zastąp go tym kodem, który umożliwia utworzenie konta tylko użytkownikom z domeną 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. Wypróbuj funkcję blokowania w emulatorach

Aby wypróbować funkcję blokowania, upewnij się, że emulatory są uruchomione, a w aplikacji internetowej pod localhost:5170 wyloguj się.

Następnie spróbuj utworzyć konto z adresem e-mail, który nie kończy się na example.com . Funkcja blokady uniemożliwia powodzenie operacji.

Teraz spróbuj ponownie, używając adresu e-mail kończącego się na example.com . Konto zostanie utworzone pomyślnie.

Dzięki funkcjom blokowania możesz utworzyć dowolne ograniczenia dotyczące uwierzytelniania. Aby dowiedzieć się więcej, zapoznaj się z dokumentacją referencyjną .

Podsumowanie

Dobra robota! Do aplikacji internetowej dodano uwierzytelnianie wieloskładnikowe, aby pomóc użytkownikom chronić ich konta, a następnie utworzono niestandardowe wymagania, aby użytkownicy mogli rejestrować się przy użyciu funkcji blokowania. Zdecydowanie zasłużyłeś na gifa!

gif przedstawiający ludzi z biura wykonujących taniec „Podnieś dach”.