用流星创建自定义登录和注册表格

钥匙要点

• >用流星创建自定义登录和注册表格涉及安装帐户通信软件包，该软件包将自动创建Meteor.users Collection来存储用户数据，消除了为用户相关功能编写自定义逻辑的需要。
>可以使用简单的HTML表单来开发登录和注册系统的用户界面。这些表格的模板包含电子邮件和密码的字段，以及提交按钮。>>
• >事件处理程序可以设置以响应用户与表格的交互。例如，可以创建“提交表单”事件，以防止表格的默认行为并在提交表单时输出确认消息。
>流星的内置方法，例如counders.createuser（）和Meteor.loginwithpassword（），可用于注册新用户并分别登录现有用户。这些方法在注册后自动加密密码并登录用户，减少需要编写的代码数量。
• 开箱即用，您可以使用流星JavaScript框架可以做的最简单的事情之一就是创建一个用户帐户系统。只需安装一对软件包 - 帐户通信和Account-ui-您最终都会获得以下功能功能的界面：
但是，尽管这种简单性很方便，但依靠此样板接口并不能完全具有灵活性。那么，如果我们想创建一个自定义界面供用户注册并登录到我们的网站？ 幸运的是，这根本不太困难。在本文中，我将向您展示如何使用流星创建自定义登录和注册表格。但是，本文假设您知道如何使用自己的框架来设置项目。 要播放本文中开发的代码，请查看我设置的GitHub存储库。
• 基本设置
在一个新的流星项目中，通过执行命令来添加帐户通信包：

通过将此软件包添加到一个项目中，将创建流星集合来存储用户的数据，而我们不必为用户相关功能编写自定义逻辑。 因此，尽管创建自定义界面意味着我们将失去Account-UI软件包的便利性，但这并不意味着我们必须失去流星可以提供的后端“魔术”的便利。 开发接口

对于完整的登录和注册系统，我们必须为其中创建许多功能，包括：

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

注册

登录

• >忘记密码
• “确认您的电子邮件”页面
• “已确认电子邮件”页

但是目前，我们将讨论列出的前两个点（注册和登录）表格。原因是，一旦您获得了基础知识，就很难弄清楚如何创建其他接口。 以下片段显示了注册表格的代码：

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

下一个片段改为显示登录表单的代码：

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

如您所见，模板非常相似。它们包含表单，电子邮件和密码的字段以及提交按钮。唯一的区别是输入字段和模板的名称属性的值。 （我们将尽快参考这些值，因此请确保它们是独一无二的。） 我们只希望这些模板为尚未熟悉的用户显示。因此，我们可以参考开口和关闭主体之间的当前使用者对象 标签：

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

如果当前用户已登录，则此代码显示“您登录”消息，否则“注册”和“登录”模板。

创建事件

目前，我们的形式是静态的。为了使他们做某事，我们需要他们对提交事件做出反应。让我们通过关注“寄存器”模板来证明这一点。 在项目的JavaScript文件中，编写以下内容：

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

在这里，我们编写了代码，以便“寄存器”模板中的形式：

1. 响应提交事件
2. 没有任何默认行为
3. >在控制台上输出确认消息

我们还将此代码放置在Isclient条件中，因为我们不希望该代码在服务器上运行（因为它仅用于接口）。 在活动内部，我们将要获取电子邮件和密码字段的值，并将它们存储在两个变量中。因此，让我们修改以前的代码：

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

对于“登录”模板，代码几乎相同：

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

>将事物钩在一起

将帐户通信软件包添加到项目后，我们可以使用许多方法：

accounts.changepassword（） accounts.ResetPassword（）
• >

我们将重点介绍Createuser方法，但是，基于方法名称，不难找出其他方法的目的。 在“注册”模板的提交事件的底部，写下：

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

这是我们可以用来创建新用户的代码，默认情况下，它需要两个选项：电子邮件和密码。 要通过它们，写信：

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

活动的最终代码应该类似：

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

通过使用此代码而不是通用插入 函数我们的优势是密码会自动加密。此外，注册后登录了用户，我们不必编写太多代码。 还有一个loginwithpassword（）方法，我们可以在“登录”事件中使用：

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

它还接受电子邮件和密码值：

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

在上下文中，这就是代码应该的样子：

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

然后将以下代码包含在我们本文之前写的IF语句中：

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

现在，我们可以创建一个事件，该事件附加到“仪表板”模板中的“注销”链接：

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

要执行登录过程，我们只需要使用注销方法：

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

现在应按预期工作，注册，登录和登录。

结论

我们的代码很少，我们取得了很大的进步，但是如果我们想为帐户系统创建一个完整的接口，那么还有很多事情要做。 这是我建议的：

1. 启用验证新用户的电子邮件。
2. 验证用户的创建（并登录）。>
>将视觉验证添加到“寄存器”和“登录”表单中。
3. 登录尝试失败时要做一些事情。
4. 允许用户更改其密码。
5. 可能需要一个下午才能找出有关如何实现这些功能的细节，但是根据我们在本教程中涵盖的内容，这都不是您无法触及的。流星为我们付出了艰苦的工作。 如果您想使用本文开发的代码，请查看我设置的GitHub存储库。
经常询问的问题（常见问题解答）关于使用流星

创建自定义登录/注册表格

>如何将其他字段添加到流星中的注册形式？

>在流星中的注册表格中添加其他字段非常简单。您可以通过在accounts.createuser方法中添加更多字段来扩展用户配置文件。例如，如果要为用户的全名添加一个字段，则可以这样做：

accounts.createuser（{

用户名：'tastuser'，
密码：'密码：' '，
profile：{
fullname：'test用户'
}
}）;
在此示例中，“ FullName”是添加到用户配置文件中的附加字段。您可以稍后使用Meteor.user（）。profile.fullname。

>我如何自定义流星中的登录/注册表格的外观？

Meteor不提供一个内置方式来自定义登录/注册表格的外观。但是，您可以根据需要使用CSS对表格进行样式。您可以将类分配给表单元素，然后在CSS文件中使用这些类以应用样式。另外，您可以使用Bootstrap或Material-ui等UI库来样式表单。

如何在Meteor中实现电子邮件验证？

Meteor为电子邮件验证提供内置支持。您可以使用帐户。sendverificiencemail方法向用户发送验证电子邮件。此方法将用户的ID作为参数，并发送带有链接的电子邮件，用户可以单击以验证其电子邮件地址。创建这样的新用户之后，您可以调用此方法：

accounts.createuser（{
电子邮件：'test@example.com'，
密码：'password'
}， function（err，userId）{
> if（err）{
//处理错误
} else {
accounts.sendverificitionEmail（userId）;
> }

}）;

>在流星注册时如何处理错误？

在使用accounts.createuser创建新用户时，您可以提供一个被调用的回调函数如果发生错误，则使用错误对象。此错误对象包含有关出了什么问题的信息。您可以使用此信息向用户显示适当的错误消息。以下是一个示例：

accounts.createuser（{
>用户名：'tastuser'，
密码：'password'
}，function（err）{
if（err）if（err）{
> console.log（'注册期间的错误：'，err）;
}

}）;

>我如何实现密码流星中的重置功能？

>流星为密码重置功能提供内置支持。您可以使用accounts.forgotpassword和accounts.ResetPassword方法来实现此目标。 accounts.forgotpassword方法通过可以单击的链接将电子邮件发送给用户，以重置密码。 accounts.ResetPassword方法用于实际更改用户的密码。它从重置链接中将令牌和新密码作为参数。

>

>我如何将社交登录添加到我的流星应用程序中？

Meteor支持与Facebook，Google，Google，Google，Google，Google，Google，Google，Google，Google，Google，Google，Google，并通过其帐户软件包进行Twitter。要将社交登录添加到您的应用程序中，您需要添加适当的软件包（例如，用于Facebook登录帐户书籍），并使用社交提供商的应用程序将其配置为

>我如何根据流星中的用户身份验证限制对某些路由的访问？

>您可以使用Meteor的内置帐户包以及诸如FlowRouter或Iron Router之类的路由套件来限制基于某些路由的路由器关于用户身份验证。您可以在使用Meteor.userid（）或Meteor.user（）中检查用户是否已登录。 ？

在流星中，您可以将其他用户数据存储在Meteor.users Collection中的用户文档中。您可以在使用accounts.createuser创建新用户时将其他字段添加到本文档中，也可以使用Meteor.users.update。流星中的控制？

流星无法为基于角色的访问控制提供内置支持，但是您可以使用诸如Alanning：角色之类的软件包将此功能添加到您的应用程序中。此软件包允许您将角色分配给用户，然后在确定是否允许用户执行某个操作时检查这些角色。

>

>如何在Meteor中注销用户？可以使用Meteor.logout方法在流星中注销用户。此方法将在客户端上注销当前用户，并使服务器上的登录令牌无效。它还采用一个回调函数，当注销过程完成时，它将在没有参数的情况下被调用。

>

以上是用流星创建自定义登录和注册表格的详细内容。更多信息请关注PHP中文网其他相关文章！