Création d'un formulaire de connexion et d'enregistrement personnalisé avec Meteor

Les plats clés

• La création d'un formulaire de connexion et d'enregistrement personnalisé avec Meteor implique l'installation du package de mots de passe comptes, qui crée automatiquement une collection Meteor.Users pour stocker les données des utilisateurs, éliminant la nécessité d'écrire une logique personnalisée pour les fonctions liées à l'utilisateur.
• L'interface utilisateur pour le système de connexion et d'enregistrement peut être développée à l'aide de formulaires HTML simples. Les modèles de ces formulaires contiennent des champs pour l'e-mail et le mot de passe, et un bouton de soumission.
• Les gestionnaires d'événements peuvent être configurés pour répondre aux interactions utilisateur avec les formulaires. Par exemple, un événement «Soumettre le formulaire» peut être créé pour empêcher le comportement par défaut du formulaire et publier un message de confirmation lorsque le formulaire est soumis.
• Les méthodes intégrées de Meteor comme AccountS.CreateUser () et Meteor.LoginWithPassword () peuvent être utilisées pour enregistrer de nouveaux utilisateurs et se connecter respectivement aux utilisateurs existants. Ces méthodes cryptent automatiquement les mots de passe et se connectent aux utilisateurs après s'inscrire, en réduisant la quantité de code qui doit être écrite.

Dès la sortie de la boîte, l'une des choses les plus simples que vous puissiez faire avec le framework JavaScript Meteor est de créer un système de comptes d'utilisateurs. Installez simplement une paire de packages - comptes-password et comptes-ui - et vous vous retrouverez avec l'interface suivante et entièrement fonctionnelle: Mais bien que cette simplicité soit pratique, compter sur cette interface passerelle ne permet pas exactement beaucoup de flexibilité. Et si nous voulons créer une interface personnalisée pour que nos utilisateurs puissent s'inscrire et se connecter à notre site Web? Heureusement, ce n'est pas trop difficile du tout. Dans cet article, je vais vous montrer comment créer un formulaire de connexion et d'enregistrement personnalisé avec Meteor. Cependant, cet article suppose que vous savez comment mettre en place un projet en utilisant ce framework par vous-même. Pour jouer avec le code développé dans cet article, jetez un œil au référentiel GitHub que je configure.

Configuration de base

À l'intérieur d'un nouveau projet Meteor, ajoutez le package de mots de passe comptes en exécutant la commande:

meteor <span>add accounts-password</span>

En ajoutant ce package à un projet, une collection Meteor. Ainsi, bien que la création d'une interface personnalisée signifie que nous perdrons la commodité du package Accounts-UI, cela ne signifie pas que nous devons perdre la commodité de la «magie» arrière que Meteor peut fournir.

Développer l'interface

Pour un système complet de connexion et d'enregistrement, il existe de nombreuses fonctionnalités pour lesquelles nous devons créer des interfaces, notamment:

• Enregistrement
• Connexion
• Mot de passe oublié
• "Confirmer votre e-mail"
• Page "Courriel confirmée"

Mais pour le moment, nous parlerons des deux premiers formulaires répertoriés (enregistrement et connexion). La raison en est qu'il ne sera pas difficile pour vous de comprendre comment créer les autres interfaces une fois que vous avez une poignée sur les fondamentaux. L'extrait suivant montre le code du formulaire d'inscription:

meteor <span>add accounts-password</span>

L'extrait suivant montre plutôt le code du formulaire de connexion:

<span><span><span><template</span> name<span>="register"</span>></span>
</span>    <span><span><span><form</span>></span>
</span>        <span><span><span><input</span> type<span>="email"</span> name<span>="registerEmail"</span>></span>
</span>        <span><span><span><input</span> type<span>="password"</span> name<span>="registerPassword"</span>></span>
</span>        <span><span><span><input</span> type<span>="submit"</span> value<span>="Register"</span>></span>
</span>    <span><span><span></form</span>></span>
</span><span><span><span></template</span>></span></span>

Comme vous pouvez le voir, les modèles sont très similaires. Ils contiennent un formulaire, les champs de l'e-mail et du mot de passe, et le bouton Soumettre. La seule différence est la valeur de l'attribut de nom pour les champs d'entrée et le modèle. (Nous ferons référence à ces valeurs bientôt, alors assurez-vous qu'ils sont uniques.) Nous voulons que ces modèles soient affichés pour un utilisateur non encore emblégé. Par conséquent, nous pouvons nous référer à un objet CurrentUser entre le corps d'ouverture et de fermeture Tags:

<span><span><span><template</span> name<span>="login"</span>></span>
</span>    <span><span><span><form</span>></span>
</span>        <span><span><span><input</span> type<span>="email"</span> name<span>="loginEmail"</span>></span>
</span>        <span><span><span><input</span> type<span>="password"</span> name<span>="loginPassword"</span>></span>
</span>        <span><span><span><input</span> type<span>="submit"</span> value<span>="Login"</span>></span>
</span>    <span><span><span></form</span>></span>
</span><span><span><span></template</span>></span></span>

Ce code montre le message «vous êtes connecté» si l'utilisateur actuel est connecté et les modèles «enregistrer» et «connecter» autrement.

Création des événements

Pour le moment, nos formes sont statiques. Pour leur faire faire quelque chose, nous avons besoin d'eux pour réagir à l'événement de soumission. Démoussons cela en nous concentrant sur le modèle «enregistrer». À l'intérieur du fichier JavaScript du projet, écrivez ce qui suit:

<span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Custom Registration Tutorial<span><span></title</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>    {{#if currentUser}}
        <span><span><span><p</span>></span>You're logged in.<span><span></p</span>></span>
</span>    {{else}}
        {{> register}}
        {{> login}}
    {{/if}}
<span><span><span></body</span>></span></span>

Ici, nous avons écrit du code afin que le formulaire dans le modèle «enregistrer»:

1. répond à l'événement de soumission
2. n'a pas de comportement par défaut
3. publie un message de confirmation sur la console

Nous avons également placé ce code à l'intérieur de l'ISClient conditionnel car nous ne voulons pas que ce code s'exécute sur le serveur (car il est uniquement destiné à l'interface). À l'intérieur de l'événement, nous voulons saisir les valeurs des champs de messagerie et de mot de passe et les stocker dans une paire de variables. Modifions donc le code précédent:

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

Pour le modèle «Connexion», le code est presque identique:

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

accrocher les choses ensemble

Après avoir ajouté le package de mots-passe comptes au projet, un certain nombre de méthodes sont devenues à notre disposition:

• comptes.CreateUser ()
• comptes.changePassword ()
• comptes.forgotpassword ()
• comptes.resetpassword ()
• comptes.setpassword ()
• comptes.verifyEmail ()

Nous nous concentrerons sur la méthode CreateUser mais, sur la base des noms de méthode, il n'est pas difficile de comprendre l'objectif des autres. Au bas de l'événement Soumettre pour le modèle «enregistrer», écrivez:

meteor <span>add accounts-password</span>

Il s'agit du code que nous pouvons utiliser pour créer un nouvel utilisateur et, par défaut, il nécessite deux options: un e-mail et un mot de passe. Pour les passer, écrivez:

<span><span><span><template</span> name<span>="register"</span>></span>
</span>    <span><span><span><form</span>></span>
</span>        <span><span><span><input</span> type<span>="email"</span> name<span>="registerEmail"</span>></span>
</span>        <span><span><span><input</span> type<span>="password"</span> name<span>="registerPassword"</span>></span>
</span>        <span><span><span><input</span> type<span>="submit"</span> value<span>="Register"</span>></span>
</span>    <span><span><span></form</span>></span>
</span><span><span><span></template</span>></span></span>

Le code final de l'événement doit ressembler:

<span><span><span><template</span> name<span>="login"</span>></span>
</span>    <span><span><span><form</span>></span>
</span>        <span><span><span><input</span> type<span>="email"</span> name<span>="loginEmail"</span>></span>
</span>        <span><span><span><input</span> type<span>="password"</span> name<span>="loginPassword"</span>></span>
</span>        <span><span><span><input</span> type<span>="submit"</span> value<span>="Login"</span>></span>
</span>    <span><span><span></form</span>></span>
</span><span><span><span></template</span>></span></span>

En utilisant ce code au lieu d'un insert générique Fonction Nous avons l'avantage que les mots de passe sont automatiquement chiffrés. De plus, les utilisateurs sont connectés après l'inscription et nous n'avons pas à écrire beaucoup de code. Il existe également une méthode LoginWithPassword () que nous pouvons utiliser dans l'événement «Connexion»:

<span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Custom Registration Tutorial<span><span></title</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>    {{#if currentUser}}
        <span><span><span><p</span>></span>You're logged in.<span><span></p</span>></span>
</span>    {{else}}
        {{> register}}
        {{> login}}
    {{/if}}
<span><span><span></body</span>></span></span>

Il accepte également les valeurs de messagerie et de mot de passe:

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

Et dans son contexte, c'est à quoi ressemble le code:

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

Connexion

Les utilisateurs peuvent désormais s'inscrire et se connecter, mais, pour leur permettre de se déconnecter, faisons d'abord un nouveau modèle de «tableau de bord» qui sera affiché lors de la connexion:

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

Incluez ensuite le code suivant dans la déclaration IF que nous avons écrite plus tôt dans cet article:

<span>Accounts.createUser({
</span>    <span>// options go here
</span><span>});</span>

Maintenant, nous pouvons créer un événement qui est attaché au lien "déconnexion" dans le modèle "Dashboard":

<span>Accounts.createUser({
</span>    <span>email: emailVar,
</span>    <span>password: passwordVar
</span><span>});</span>

Pour exécuter le processus de connexion, nous n'avons qu'à utiliser une méthode de déconnexion en tant que telle:

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

L'enregistrement, la connexion et la déconnexion devraient désormais fonctionner tout comme prévu.

Conclusions

Nous avons fait une bonne quantité de progrès avec une petite quantité de code, mais si nous voulons créer une interface complète pour le système de comptes, il reste encore beaucoup à faire. Voici ce que je suggère:

1. Activer la vérification des e-mails du nouvel utilisateur.
2. Valider la création (et la connexion) des utilisateurs.
3. Ajouter une validation visuelle aux formulaires «registre» et «connexion».
4. faire quelque chose lorsqu'une tentative de connexion échoue.
5. Permettez aux utilisateurs de modifier leur mot de passe.

Cela pourrait prendre un après-midi pour comprendre les détails sur la façon de mettre en œuvre ces fonctionnalités mais, en fonction de ce que nous avons couvert dans ce tutoriel, rien n'est hors de votre portée. Meteor fait le dur travail pour nous. Dans le cas où vous souhaitez jouer avec le code développé dans cet article, jetez un œil au référentiel GitHub que je configure.

Questions fréquemment posées (FAQ) sur la création de formulaire de connexion / d'enregistrement personnalisé avec Meteor

Comment puis-je ajouter des champs supplémentaires au formulaire d'enregistrement dans Meteor?

L'ajout de champs supplémentaires au formulaire d'enregistrement dans Meteor est assez simple. Vous pouvez étendre le profil utilisateur en ajoutant plus de champs dans la méthode CompteS.CreateUser. Par exemple, si vous souhaitez ajouter un champ pour le nom complet de l'utilisateur, vous pouvez le faire comme ceci:

comptes.CreateUser ({
Nom d'utilisateur: 'TestUser',
Mot de passe: 'Mot de passe ',
Profil: {
FullName:' Test User '
}
});
Dans cet exemple, «FullName» est un champ supplémentaire ajouté au profil utilisateur. Vous pouvez accéder à ce champ plus tard à l'aide de Meteor.User (). Profil.FullName.

Comment puis-je personnaliser l'apparence du formulaire de connexion / d'enregistrement dans Meteor?

Meteor ne fournit pas un moyen intégré pour personnaliser l'apparence du formulaire de connexion / enregistrement. Cependant, vous pouvez utiliser CSS pour styliser le formulaire en fonction de vos besoins. Vous pouvez attribuer des classes aux éléments de formulaire, puis utiliser ces classes dans votre fichier CSS pour appliquer des styles. Alternativement, vous pouvez utiliser une bibliothèque d'interface utilisateur comme Bootstrap ou Material-UI pour style. Vous pouvez utiliser la méthode Compte.SendVerificationMail pour envoyer un e-mail de vérification à l'utilisateur. Cette méthode prend l'ID de l'utilisateur en tant que paramètre et envoie un e-mail avec un lien que l'utilisateur peut cliquer pour vérifier son adresse e-mail. Vous pouvez appeler cette méthode après avoir créé un nouvel utilisateur comme ceci:

comptes.CreateUser ({

e-mail: 'test@example.com',

Mot de passe: 'Mot de passe'
}, function (err, userId) {
if (err) {
// gère l'erreur
} else {
comptes.SendVerificationEmail (userId);
}
});

comment puis-je gérer les erreurs pendant l'enregistrement de l'utilisateur dans Meteor?

Lors de la création d'un nouvel utilisateur avec des comptes.CreateUser, vous pouvez fournir une fonction de rappel qui sera appelée avec un objet d'erreur si une erreur se produit. Cet objet d'erreur contient des informations sur ce qui n'a pas fonctionné. Vous pouvez utiliser ces informations pour afficher un message d'erreur approprié à l'utilisateur. Voici un exemple:

comptes.CreateUser ({

nom d'utilisateur: 'Tesserser',

Mot de passe: 'Mot de passe'
}, fonction (err) {
if (err) {{
console.log ('Erreur pendant l'enregistrement:', err);
}
});

comment puis-je implémenter le mot de passe Réinitialiser la fonctionnalité dans Meteor?

Meteor fournit une prise en charge intégrée pour la fonctionnalité de réinitialisation du mot de passe. Vous pouvez utiliser les méthodes comptes.forgotpassword et comptes.ResetPassword pour implémenter cela. La méthode des comptes.ForGotPassword envoie un e-mail à l'utilisateur avec un lien qu'ils peuvent cliquer pour réinitialiser leur mot de passe. La méthode des comptes.ResetPassword est utilisée pour modifier réellement le mot de passe de l'utilisateur. Il prend le jeton du lien de réinitialisation et du nouveau mot de passe en tant que paramètres.

Comment puis-je ajouter la connexion sociale à mon application Meteor?

Meteor prend en charge la connexion sociale avec divers fournisseurs comme Facebook, Google, et Twitter via ses packages de comptes. Pour ajouter la connexion sociale à votre application, vous devez ajouter le package approprié (par exemple, Accounts-FaceBook pour la connexion Facebook) et le configurer avec les informations d'identification de votre application auprès du fournisseur social.

Comment puis-je restreindre l'accès à certaines itinéraires en fonction de l'authentification des utilisateurs dans Meteor?

Vous pouvez utiliser les packages de comptes intégrés de Meteor ainsi qu'un package de routage comme FlowRouter ou Iron Router pour restreindre l'accès à certaines routes basées sur les routes sur l'authentification de l'utilisateur. Vous pouvez vérifier si un utilisateur est connecté à l'aide de Meteor.Userrid () ou Meteor.User (), puis de les rediriger vers la page de connexion si ce n'est pas.

Comment puis-je stocker des données utilisateur supplémentaires dans Meteor ?

Dans Meteor, vous pouvez stocker des données utilisateur supplémentaires dans le document utilisateur dans la collection Meteor.users. Vous pouvez ajouter des champs supplémentaires à ce document lors de la création d'un nouvel utilisateur avec des comptes.CreateUser, ou vous pouvez mettre à jour un document utilisateur existant avec des données supplémentaires à l'aide de Meteor.Users.update.

Comment puis-je implémenter un accès basé sur les rôles Contrôle dans Meteor?

Meteor ne fournit pas de prise en charge intégrée pour le contrôle d'accès basé sur les rôles, mais vous pouvez utiliser un package comme Alanning: Rôles pour ajouter cette fonctionnalité à votre application. Ce package vous permet d'attribuer des rôles aux utilisateurs, puis de vérifier ces rôles lorsque vous décidez si un utilisateur est autorisé à effectuer une certaine action.

Comment puis-je déconnecter un utilisateur dans Meteor?

Vous peut déconnecter un utilisateur en Meteor à l'aide de la méthode Meteor.logout. Cette méthode connecte l'utilisateur actuel sur le client et invalide le jeton de connexion sur le serveur. Il prend également une fonction de rappel qui sera appelée sans arguments lorsque le processus de déconnexion est terminé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!