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!