{"id":502,"date":"2021-09-28T08:05:16","date_gmt":"2021-09-28T08:05:16","guid":{"rendered":"https:\/\/erdbeerbeet.com\/?p=502"},"modified":"2021-10-26T21:03:37","modified_gmt":"2021-10-26T21:03:37","slug":"angular-user-accounts-with-firebase","status":"publish","type":"post","link":"https:\/\/erdbeerbeet.com\/de\/angular-user-accounts-with-firebase","title":{"rendered":"Angular – Benutzerkonten mit Firebase Rest API"},"content":{"rendered":"\n

<\/a>Ich bin ein Fan von kleinen und sicheren Anwendungen, die ihre Daten ausschlie\u00dflich lokal haben. Ohne Cloud, Online-Speicher oder Anmeldedaten.
Dann kommt allerdings die Anforderung, von mehreren Ger\u00e4ten aus auf den gleichen Datensatz zuzugreifen. Das ist ebenso sinnvoll, also besch\u00e4ftige ich mich endlich mal damit, das ordentlich umzusetzen.<\/p>\n\n\n\n

Das Problem<\/h2>\n\n\n\n

Es ist meine erste (eigene) Umsetzung von Benutzerkonten. \ud83d\ude00
F\u00fcr meine WordProgressor <\/a>Anwendung sollen sich Benutzer anmelden k\u00f6nnen, um Zugriff auf ihre eigenen Projekte zu erhalten.
Ich m\u00f6chte aber auch, dass die App ohne Konto genutzt werden kann, einfach weil ich selbst es so lieber mag. So kann man als Benutzer erst einmal ausprobieren und bei Gefallen immer noch ein Konto anlegen.<\/p>\n\n\n\n

Die vom Benutzer angelegten Projekte sollen nur ihm selbst zug\u00e4nglich sein. Sp\u00e4ter m\u00f6chte ich aber auch \u00f6ffentliche Daten anbieten.<\/p>\n\n\n\n

Das wichtigste – auch in diesem Beitrag – ist aber die Unterscheidung zwischen anonymem und autorisiertem Benutzer, sowie die Umwandlung.<\/p>\n\n\n\n

Die Firebase-L\u00f6sung<\/h2>\n\n\n\n

Mein Udemy-Angular-Kurs: Angular – The Complete Guide (von Maximilian Schwarzm\u00fcller)<\/a> setzt die Authentifizierung mit Firebase um. Da ich f\u00fcr meine andere App ohnehin schon Firebase nutze, kommt mir dieser L\u00f6sungsansatz entgegen.<\/p>\n\n\n\n

Verwendet werden die Authentication-Funktion<\/a> von Firebase, die komfortabel \u00fcber die API angesprochen werden kann, sowie eine Realtime Databas<\/a>e f\u00fcr die Nutzerdaten.
Auf das genaue Einrichten gehe ich hier nicht ein, sondern konzentriere mich auf die Schritte und Code-Stellen, die von der im Udemy-Kurs pr\u00e4sentierten L\u00f6sung abweichen.<\/p>\n\n\n\n

Firebase-Einstellungen<\/h3>\n\n\n\n

Das Projekt<\/strong> muss bei Firebase eingerichtet sein. In den Projekteinstellungen gibt es einen Web-API-Schl\u00fcssel<\/strong>, der f\u00fcr Anfragen notwendig ist.
Au\u00dferdem wird eine Realtime Database<\/strong> mit den folgenden Regeln angelegt:<\/p>\n\n\n\n

{\n  \"rules\": {\n    \"$uid\": {\n      \".write\": \"$uid === auth.uid\",\n      \".read\": \"$uid === auth.uid\"\n    }\n  }\n}<\/code><\/pre>\n\n\n\n
Die URL der Datenbank<\/strong> ist ebenfalls wichtig und im “Daten”-Tab abzulesen.<\/p>\n\n\n\n
Das Programmieren<\/h2>\n\n\n\n
F\u00fcr die Standard-Anmeldung gibt es einen AuthService, der http-Requests an die Firebase-API schickt.
Neben den M\u00f6glichkeiten f\u00fcr Login und Registrierung biete ich noch die M\u00f6glichkeit an, die Anwendung anonym zu nutzen.<\/p>\n\n\n\n