Heim >Web-Frontend >js-Tutorial >Erstellen eines benutzerdefinierten Login- und Registrierungsformulars mit Meteor
meteor <span>add accounts-password</span>Durch Hinzufügen dieses Pakets zu einem Projekt wird eine Meteor.Users-Sammlung erstellt, um die Daten unseres Benutzers zu speichern, und wir müssen keine benutzerdefinierte Logik für benutzerbezogene Funktionen schreiben. Obwohl das Erstellen einer benutzerdefinierten Schnittstelle bedeutet, dass wir die Bequemlichkeit des Accounts-UI-Pakets verlieren, bedeutet dies nicht, dass wir die Bequemlichkeit des Back-End-„Magie“ verlieren müssen, den Meteor bieten kann.
meteor <span>add accounts-password</span>Der nächste Snippet zeigt stattdessen den Code des Anmeldeformulars an:
<span><span><span><template> name<span>="register"</span>></template></span> </span> <span><span><span><form>></form></span> </span> <span><span><span><input> type<span>="email"</span> name<span>="registerEmail"</span>></span> </span> <span><span><span><input> type<span>="password"</span> name<span>="registerPassword"</span>></span> </span> <span><span><span><input> type<span>="submit"</span> value<span>="Register"</span>></span> </span> <span><span><span></span>></span> </span><span><span><span></span>></span></span></span></span></span></span></span>Wie Sie sehen können, sind die Vorlagen sehr ähnlich. Sie enthalten ein Formular, die Felder für die E -Mail und das Passwort und die Schaltfläche Senden. Der einzige Unterschied ist der Wert des Namensattributs für die Eingabefelder und die Vorlage. (Wir verweisen bald auf diese Werte. Stellen Sie also sicher, dass sie einzigartig sind.) Wir möchten nur, dass diese Vorlagen für einen noch nicht gesammelten Benutzer angezeigt werden. Daher können wir uns auf ein Strömungsobjekt zwischen dem Öffnungs- und Schließkörper beziehen Tags:
<span><span><span><template> name<span>="login"</span>></template></span> </span> <span><span><span><form>></form></span> </span> <span><span><span><input> type<span>="email"</span> name<span>="loginEmail"</span>></span> </span> <span><span><span><input> type<span>="password"</span> name<span>="loginPassword"</span>></span> </span> <span><span><span><input> type<span>="submit"</span> value<span>="Login"</span>></span> </span> <span><span><span></span>></span> </span><span><span><span></span>></span></span></span></span></span></span></span>Dieser Code zeigt die Nachricht "Sie sind angemeldet" angezeigt, wenn der aktuelle Benutzer angemeldet ist, und die Vorlagen "Register" und "Anmeldung" ansonsten.
<span><span><span>></span> </span> <span><span><span><title>></title></span>Custom Registration Tutorial<span><span></span>></span> </span><span><span><span></span>></span> </span><span><span><span>></span> </span> {{#if currentUser}} <span><span><span><p>></p></span>You're logged in.<span><span></span>></span> </span> {{else}} {{> register}} {{> login}} {{/if}} <span><span><span></span>></span></span></span></span></span></span>Hier haben wir Code so geschrieben, dass das Formular in der Vorlage "Register":
<span>if (Meteor.isClient) { </span> <span>Template.register.events({ </span> <span>'submit form': function(event) { </span> event<span>.preventDefault(); </span> <span>console.log("Form submitted."); </span> <span>} </span> <span>}); </span><span>}</span>Für die Vorlage "Anmeldung" ist der Code nahezu identisch:
<span>Template.register.events({ </span> <span>'submit form': function(event){ </span> event<span>.preventDefault(); </span> <span>var emailVar = event.target.registerEmail.value; </span> <span>var passwordVar = event.target.registerPassword.value; </span> <span>console.log("Form submitted."); </span> <span>} </span><span>});</span>
meteor <span>add accounts-password</span>Dies ist der Code, mit dem wir einen neuen Benutzer erstellen können. Standardmäßig sind zwei Optionen erforderlich: eine E -Mail und ein Passwort. Um sie durchzugeben, schreiben Sie:
<span><span><span><template> name<span>="register"</span>></template></span> </span> <span><span><span><form>></form></span> </span> <span><span><span><input> type<span>="email"</span> name<span>="registerEmail"</span>></span> </span> <span><span><span><input> type<span>="password"</span> name<span>="registerPassword"</span>></span> </span> <span><span><span><input> type<span>="submit"</span> value<span>="Register"</span>></span> </span> <span><span><span></span>></span> </span><span><span><span></span>></span></span></span></span></span></span></span>Der endgültige Code für das Ereignis sollte ähneln:
<span><span><span><template> name<span>="login"</span>></template></span> </span> <span><span><span><form>></form></span> </span> <span><span><span><input> type<span>="email"</span> name<span>="loginEmail"</span>></span> </span> <span><span><span><input> type<span>="password"</span> name<span>="loginPassword"</span>></span> </span> <span><span><span><input> type<span>="submit"</span> value<span>="Login"</span>></span> </span> <span><span><span></span>></span> </span><span><span><span></span>></span></span></span></span></span></span></span>Verwenden Sie diesen Code anstelle eines generischen Einfügungseinsatzes Funktion Wir haben den Vorteil, dass Kennwörter automatisch verschlüsselt werden. Darüber hinaus sind Benutzer nach der Anmeldung angemeldet und wir müssen nicht viel Code schreiben. Es gibt auch eine LoginWithPassword () -Methode, die wir innerhalb des Ereignisses „Anmeldung“ verwenden können:
<span><span><span>></span> </span> <span><span><span><title>></title></span>Custom Registration Tutorial<span><span></span>></span> </span><span><span><span></span>></span> </span><span><span><span>></span> </span> {{#if currentUser}} <span><span><span><p>></p></span>You're logged in.<span><span></span>></span> </span> {{else}} {{> register}} {{> login}} {{/if}} <span><span><span></span>></span></span></span></span></span></span>Es akzeptiert auch die E -Mail- und Passwortwerte:
<span>if (Meteor.isClient) { </span> <span>Template.register.events({ </span> <span>'submit form': function(event) { </span> event<span>.preventDefault(); </span> <span>console.log("Form submitted."); </span> <span>} </span> <span>}); </span><span>}</span>Und im Kontext sollte der Code aussehen:
<span>Template.register.events({ </span> <span>'submit form': function(event){ </span> event<span>.preventDefault(); </span> <span>var emailVar = event.target.registerEmail.value; </span> <span>var passwordVar = event.target.registerPassword.value; </span> <span>console.log("Form submitted."); </span> <span>} </span><span>});</span>
<span>Template.login.events({ </span> <span>'submit form': function(event) { </span> event<span>.preventDefault(); </span> <span>var emailVar = event.target.loginEmail.value; </span> <span>var passwordVar = event.target.loginPassword.value; </span> <span>console.log("Form submitted."); </span> <span>} </span><span>});</span>Geben Sie dann den folgenden Code in die IF -Erklärung an, die wir früher in diesem Artikel geschrieben haben:
<span>Accounts.createUser({ </span> <span>// options go here </span><span>});</span>Jetzt können wir ein Ereignis erstellen, das an den Link "Abmelden" in der Vorlage "Dashboard" angeschlossen ist:
<span>Accounts.createUser({ </span> <span>email: emailVar, </span> <span>password: passwordVar </span><span>});</span>Um den Protokollierungsprozess auszuführen, müssen wir nur eine Abmeldemethode als solche verwenden:
<span>Template.register.events({ </span> <span>'submit form': function(event) { </span> event<span>.preventDefault(); </span> <span>var emailVar = event.target.registerEmail.value; </span> <span>var passwordVar = event.target.registerPassword.value; </span> <span>Accounts.createUser({ </span> <span>email: emailVar, </span> <span>password: passwordVar </span> <span>}); </span> <span>} </span><span>});</span>Das Registrieren, Anmeldungen und Anmeldungen sollte nun wie erwartet funktionieren.
Benutzername: 'TestUser',
Passwort: 'Passwort ',
Profil: {
Fullname:' Test User '
}
}); Sie können später mit Meteor.user () auf dieses Feld zugreifen. Eingebaute Möglichkeit, das Erscheinungsbild des Anmelde-/Registrierungsformulars anzupassen. Sie können jedoch CSS verwenden, um das Formular entsprechend Ihren Anforderungen zu stylen. Sie können den Formularelementen Klassen zuweisen und diese Klassen dann in Ihrer CSS -Datei verwenden, um Stile anzuwenden. Alternativ können Sie eine UI-Bibliothek wie Bootstrap oder Material-UI verwenden, um Ihr Formular zu stylen. Sie können mit der Methode zur SendvericationEmail -Methode eine Überprüfungs -E -Mail an den Benutzer senden. Diese Methode nimmt die ID des Benutzers als Parameter an und sendet eine E -Mail mit einem Link, den der Benutzer klicken kann, um die E -Mail -Adresse zu überprüfen. Sie können diese Methode aufrufen, nachdem Sie einen neuen Benutzer wie folgt erstellt haben:
}, Funktion (err, userId) {
if (err) { concesS.SendVerificationEmail (userId);
}
});
Wie kann ich bei der Benutzerregistrierung im Meteor Fehler umgehen? mit einem Fehlerobjekt, wenn ein Fehler auftritt. Dieses Fehlerobjekt enthält Informationen darüber, was schief gelaufen ist. Sie können diese Informationen verwenden, um dem Benutzer eine entsprechende Fehlermeldung anzuzeigen. Hier ist ein Beispiel:
contaces.createuser ({
Benutzername: 'testuser',
Passwort: 'Passwort'
}, Funktion (err) {
if (err) {{{{{{
console.log ('Fehler während der Registrierung:', err);
Wie kann ich meiner Meteor -Anwendung eine soziale Anmeldung hinzufügen? und Twitter über seine Account -Pakete. Um Ihrer Anwendung eine soziale Anmeldung hinzuzufügen, müssen Sie das entsprechende Paket hinzufügen (z. B. Account-FaceBook für Facebook-Login) und es mit den Anmeldeinformationen Ihrer App vom Social Provider konfigurieren.
Wie kann ich zusätzliche Benutzerdaten in Meteor speichern
Wie kann ich rollenbasierten Zugriff implementieren Steuerung im Meteor? Mit diesem Paket können Sie Benutzern Rollen zuweisen und diese Rollen dann überprüfen, wenn Sie entscheiden, ob ein Benutzer eine bestimmte Aktion ausführen darf.
Das obige ist der detaillierte Inhalt vonErstellen eines benutzerdefinierten Login- und Registrierungsformulars mit Meteor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!