Heim >Web-Frontend >js-Tutorial >Anmelden/Registrieren mit Firebase Vue JS #STEP

Anmelden/Registrieren mit Firebase Vue JS #STEP

DDD
DDDOriginal
2024-10-27 07:01:29446Durchsuche

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...

Login/cadastro com firebase   Vue JS #PASSO


  1. Wenn Sie sich bei Firebase anmelden, gehen Sie zur Option Projekt erstellen.
    Login/cadastro com firebase   Vue JS #PASSO

  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.
    Login/cadastro com firebase   Vue JS #PASSO

  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.
    Login/cadastro com firebase   Vue JS #PASSO

  4. Warten Sie, bis der Ladevorgang abgeschlossen ist, und klicken Sie auf Weiter.
    Login/cadastro com firebase   Vue JS #PASSO

  5. Wenn alles gut gelaufen ist, erscheint dieser Bildschirm für Sie.
    Login/cadastro com firebase   Vue JS #PASSO

  6. Nächster Schritt jetzt, gehen Sie zu dieser Option Authentifizierung.
    Login/cadastro com firebase   Vue JS #PASSO

  7. Gehen Sie darin zu Lass uns anfangen.
    Login/cadastro com firebase   Vue JS #PASSO

  8. Wählen Sie die Option E-Mail/Passwort.
    Login/cadastro com firebase   Vue JS #PASSO

  9. Aktivieren Sie dann die Anmeldeoption und speichern Sie die Einstellung.
    Login/cadastro com firebase   Vue JS #PASSO

  10. Sie werden sehen, dass nun die ausgewählte Option auf dem Hauptbildschirm Authentifizierung angezeigt wird, wie im Bild gezeigt.
    Login/cadastro com firebase   Vue JS #PASSO

  11. Jetzt gehen wir zur Option Neuen Lieferanten hinzufügen und wir konfigurieren auch den Login mit Google.
    Login/cadastro com firebase   Vue JS #PASSO

  12. Wählen Sie einfach die Option Google.
    Login/cadastro com firebase   Vue JS #PASSO

  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 .
    Login/cadastro com firebase   Vue JS #PASSO

  14. Und es wird erneut zum Hauptbildschirm

    Authentifizierung weitergeleitet, auf dem nun die beiden aktiven Anbieter angezeigt werden.
    Login/cadastro com firebase   Vue JS #PASSO

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
    Login/cadastro com firebase   Vue JS #PASSO

  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.
    Login/cadastro com firebase   Vue JS #PASSO

  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.
    Login/cadastro com firebase   Vue JS #PASSO

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.
Login/cadastro com firebase   Vue JS #PASSO

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn