Anmelden/Registrieren mit Firebase Vue JS #STEP

Ich habe kürzlich dieses unglaubliche und einfache Authentifizierungstool entdeckt, das ich in meinen Projekten implementieren kann, und ich möchte alle Funktionen Schritt für Schritt mit Ihnen teilen, damit Sie es auch in Ihrem Projekt verwenden können.

Ich bin ein Front-End-Entwickler und natürlich sind meine Kenntnisse im Backend sehr vage, insbesondere wenn es um die Implementierung eines Anmelde-/Registrierungsbildschirms geht, in dem Benutzer vertrauliche und verschlüsselte Informationen speichern müssen, um eine persönliche Entwicklung zu ermöglichen Anwendung hat sich dieses unglaubliche und sehr einfach zu bedienende Tool als Option herausgestellt, also schauen wir uns ohne weitere Umschweife die Beispiele und Erklärungen an.

In diesem ersten Beitrag erstellen wir ein Projekt in Firebase und konfigurieren alles, was wir brauchen, damit das Projekt funktioniert, also...

---

1. Wenn Sie sich bei Firebase anmelden, gehen Sie zur Option Projekt erstellen.
   

2. Geben Sie anschließend Ihrem Projekt einen Namen (ich empfehle, den Namen Ihrer App einzugeben, in meinem Fall login-app) und klicken Sie auf Weiter.
   

3. Der nächste Schritt ist, ob Google Analytics für das Projekt aktiviert werden soll oder nicht. In meinem Fall werde ich es nicht aktivieren, aber es liegt an Ihnen, danach klicken Sie einfach auf Projekt erstellen.
   

4. Warten Sie, bis der Ladevorgang abgeschlossen ist, und klicken Sie auf Weiter.
   

5. Wenn alles gut gelaufen ist, erscheint dieser Bildschirm für Sie.
   

6. Nächster Schritt jetzt, gehen Sie zu dieser Option Authentifizierung.
   

7. Gehen Sie darin zu Lass uns anfangen.
   

8. Wählen Sie die Option E-Mail/Passwort.
   

9. Aktivieren Sie dann die Anmeldeoption und speichern Sie die Einstellung.
   

10. Sie werden sehen, dass nun die ausgewählte Option auf dem Hauptbildschirm Authentifizierung angezeigt wird, wie im Bild gezeigt.
    

11. Jetzt gehen wir zur Option Neuen Lieferanten hinzufügen und wir konfigurieren auch den Login mit Google.
    

12. Wählen Sie einfach die Option Google.
    

13. Dann müssen Sie Aktivieren, gleich danach öffnet sich eine Registerkarte mit dem Öffentlichen Namen des Projekts, wo ein zufälliger Name erstellt wird, aber in meinem In diesem Fall gebe ich den gleichen Namen wie das Projekt login-app ein und es wird auch eine E-Mail für den Support anfordern, wobei normalerweise nach Ihrer E-Mail von Google gesucht wird und Sie nur noch Speichern .
    

14. Und es wird erneut zum Hauptbildschirm

    Authentifizierung weitergeleitet, auf dem nun die beiden aktiven Anbieter angezeigt werden.
    

Dieser Teil der Projekterstellung und Konfiguration der Umkleidekabinen ist endlich vorbei ✨, ich verspreche, wir werden uns bald die Hände schmutzig machen und alles zum Laufen bringen.

---

Jetzt müssen wir zur Firebase-Startseite zurückkehren, damit wir dort im Code den Code erhalten, den wir zum Integrieren von Firebase in unser Projekt benötigen.

1. Hier in der

   Projektübersicht wählen wir die App Web. aus
   

2. Also geben wir dieser App einen Spitznamen. Ich habe mich erneut für den Namen

   login-app entschieden und dann auf App registrieren geklickt.
   

3. Sobald dies erledigt ist, erhalten wir alles, was wir zum Hinzufügen des SDK zu unserem Projekt benötigen, vom Befehl zum Installieren von Firebase bis hin zu den Web-App-Einstellungen.
   

Beachten Sie, dass Sie in diesem Teil des SDK-Hinzufügens wählen können, ob Sie npm oder das Skript-Tag verwenden möchten, in meinem Fall, da die Idee darin besteht, dies in ein Vue JS-Projekt zu integrieren, sodass ich trotzdem NPM verwenden werde.

Jetzt kommen wir endlich zum Wesentlichen, dem CODE.

Das obige ist der detaillierte Inhalt vonAnmelden/Registrieren mit Firebase Vue JS #STEP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!