鑰匙要點(diǎn)

• >用流星創(chuàng)建自定義登錄和註冊(cè)表格涉及安裝帳戶通信軟件包，該軟件包將自動(dòng)創(chuàng)建Meteor.users Collection來(lái)存儲(chǔ)用戶數(shù)據(jù)，消除了為用戶相關(guān)功能編寫(xiě)自定義邏輯的需要。
>可以使用簡(jiǎn)單的HTML表單來(lái)開(kāi)發(fā)登錄和註冊(cè)系統(tǒng)的用戶界面。這些表格的模板包含電子郵件和密碼的字段，以及提交按鈕。 >>
• >事件處理程序可以設(shè)置以響應(yīng)用戶與表格的交互。例如，可以創(chuàng)建“提交表單”事件，以防止表格的默認(rèn)行為並在提交表單時(shí)輸出確認(rèn)消息。
>流星的內(nèi)置方法，例如counders.createuser（）和Meteor.loginwithpassword（），可用於註冊(cè)新用戶並分別登錄現(xiàn)有用戶。這些方法在註冊(cè)後自動(dòng)加密密碼並登錄用戶，減少需要編寫(xiě)的代碼數(shù)量。
• 開(kāi)箱即用，您可以使用流星JavaScript框架可以做的最簡(jiǎn)單的事情之一就是創(chuàng)建一個(gè)用戶帳戶系統(tǒng)。只需安裝一對(duì)軟件包 - 帳戶通信和Account-ui-您最終都會(huì)獲得以下功能功能的界面：
但是，儘管這種簡(jiǎn)單性很方便，但依靠此樣板接口並不能完全具有靈活性。那麼，如果我們想創(chuàng)建一個(gè)自定義界面供用戶註冊(cè)並登錄到我們的網(wǎng)站？ 幸運(yùn)的是，這根本不太困難。在本文中，我將向您展示如何使用流星創(chuàng)建自定義登錄和註冊(cè)表格。但是，本文假設(shè)您知道如何使用自己的框架來(lái)設(shè)置項(xiàng)目。 要播放本文中開(kāi)發(fā)的代碼，請(qǐng)查看我設(shè)置的GitHub存儲(chǔ)庫(kù)。
• 基本設(shè)置
在一個(gè)新的流星項(xiàng)目中，通過(guò)執(zhí)行命令來(lái)添加帳戶通信包：

通過(guò)將此軟件包添加到一個(gè)項(xiàng)目中，將創(chuàng)建流星集合來(lái)存儲(chǔ)用戶的數(shù)據(jù)，而我們不必為用戶相關(guān)功能編寫(xiě)自定義邏輯。 因此，儘管創(chuàng)建自定義界面意味著我們將失去Account-UI軟件包的便利性，但這並不意味著我們必須失去流星可以提供的後端“魔術(shù)”的便利。 開(kāi)發(fā)接口

對(duì)於完整的登錄和註冊(cè)系統(tǒng)，我們必須為其中創(chuàng)建許多功能，包括：

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

註冊(cè)

登錄

• >忘記密碼
• “確認(rèn)您的電子郵件”頁(yè)面
• “已確認(rèn)電子郵件”頁(yè)

但是目前，我們將討論列出的前兩個(gè)點(diǎn)（註冊(cè)和登錄）表格。原因是，一旦您獲得了基礎(chǔ)知識(shí)，就很難弄清楚如何創(chuàng)建其他接口。 以下片段顯示了註冊(cè)表格的代碼：

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

下一個(gè)片段改為顯示登錄表單的代碼：

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

如您所見(jiàn)，模板非常相似。它們包含表單，電子郵件和密碼的字段以及提交按鈕。唯一的區(qū)別是輸入字段和模板的名稱(chēng)屬性的值。 （我們將盡快參考這些值，因此請(qǐng)確保它們是獨(dú)一無(wú)二的。） 我們只希望這些模板為尚未熟悉的用戶顯示。因此，我們可以參考開(kāi)口和關(guān)閉主體之間的當(dāng)前使用者對(duì)象 標(biāo)籤：

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

如果當(dāng)前用戶已登錄，則此代碼顯示“您登錄”消息，否則“註冊(cè)”和“登錄”模板。

創(chuàng)建事件

目前，我們的形式是靜態(tài)的。為了使他們做某事，我們需要他們對(duì)提交事件做出反應(yīng)。讓我們通過(guò)關(guān)注“寄存器”模板來(lái)證明這一點(diǎn)。 在項(xiàng)目的JavaScript文件中，編寫(xiě)以下內(nèi)容：

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

在這裡，我們編寫(xiě)了代碼，以便“寄存器”模板中的形式：

1. 響應(yīng)提交事件
2. 沒(méi)有任何默認(rèn)行為
3. >在控制臺(tái)上輸出確認(rèn)消息

我們還將此代碼放置在Isclient條件中，因?yàn)槲覀儾幌Ｍ摯a在服務(wù)器上運(yùn)行（因?yàn)樗鼉H用於接口）。 在活動(dòng)內(nèi)部，我們將要獲取電子郵件和密碼字段的值，並將它們存儲(chǔ)在兩個(gè)變量中。因此，讓我們修改以前的代碼：

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

對(duì)於“登錄”模板，代碼幾乎相同：

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

>將事物鉤在一起

將帳戶通信軟件包添加到項(xiàng)目後，我們可以使用許多方法：

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

我們將重點(diǎn)介紹Createuser方法，但是，基於方法名稱(chēng)，不難找出其他方法的目的。 在“註冊(cè)”模板的提交事件的底部，寫(xiě)下：

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

這是我們可以用來(lái)創(chuàng)建新用戶的代碼，默認(rèn)情況下，它需要兩個(gè)選項(xiàng)：電子郵件和密碼。 要通過(guò)它們，寫(xiě)信：

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

活動(dòng)的最終代碼應(yīng)該類(lèi)似：

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

通過(guò)使用此代碼而不是通用插入 函數(shù)我們的優(yōu)勢(shì)是密碼會(huì)自動(dòng)加密。此外，註冊(cè)後登錄了用戶，我們不必編寫(xiě)太多代碼。 還有一個(gè)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>

在上下文中，這就是代碼應(yīng)該的樣子：

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

登錄

現(xiàn)在，用戶可以註冊(cè)並登錄，但是，要允許他們登錄，讓我們首先製作一個(gè)新的“儀表板”模板，該模板將在登錄時(shí)顯示：

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

然後將以下代碼包含在我們本文之前寫(xiě)的IF語(yǔ)句中：

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

現(xiàn)在，我們可以創(chuàng)建一個(gè)事件，該事件附加到“儀表板”模板中的“註銷(xiāo)”鏈接：

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

要執(zhí)行登錄過(guò)程，我們只需要使用註銷(xiāo)方法：

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

現(xiàn)在應(yīng)按預(yù)期工作，註冊(cè)，登錄和登錄。

結(jié)論

我們的代碼很少，我們?nèi)〉昧撕艽蟮倪M(jìn)步，但是如果我們想為帳戶系統(tǒng)創(chuàng)建一個(gè)完整的接口，那麼還有很多事情要做。 這是我建議的：

1. 啟用驗(yàn)證新用戶的電子郵件。
2. 驗(yàn)證用戶的創(chuàng)建（並登錄）。 >
>將視覺(jué)驗(yàn)證添加到“寄存器”和“登錄”表單中。
3. 登錄嘗試失敗時(shí)要做一些事情。
4. 允許用戶更改其密碼。
5. 可能需要一個(gè)下午才能找出有關(guān)如何實(shí)現(xiàn)這些功能的細(xì)節(jié)，但是根據(jù)我們?cè)诒窘坛讨泻w的內(nèi)容，這都不是您無(wú)法觸及的。流星為我們付出了艱苦的工作。 如果您想使用本文開(kāi)發(fā)的代碼，請(qǐng)查看我設(shè)置的GitHub存儲(chǔ)庫(kù)。
經(jīng)常詢(xún)問(wèn)的問(wèn)題（常見(jiàn)問(wèn)題解答）關(guān)於使用流星

創(chuàng)建自定義登錄/註冊(cè)表格

>如何將其他字段添加到流星中的註冊(cè)形式？

>在流星中的註冊(cè)表格中添加其他字段非常簡(jiǎn)單。您可以通過(guò)在accounts.createuser方法中添加更多字段來(lái)擴(kuò)展用戶配置文件。例如，如果要為用戶的全名添加一個(gè)字段，則可以這樣做：

accounts.createuser（{

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

>我如何自定義流星中的登錄/註冊(cè)表格的外觀？

Meteor不提供一個(gè)內(nèi)置方式來(lái)自定義登錄/註冊(cè)表格的外觀。但是，您可以根據(jù)需要使用CSS對(duì)錶格進(jìn)行樣式。您可以將類(lèi)分配給表單元素，然後在CSS文件中使用這些類(lèi)以應(yīng)用樣式。另外，您可以使用Bootstrap或Material-ui等UI庫(kù)來(lái)樣式表單。

如何在Meteor中實(shí)現(xiàn)電子郵件驗(yàn)證？

Meteor為電子郵件驗(yàn)證提供內(nèi)置支持。您可以使用帳戶。 sendverificiencemail方法向用戶發(fā)送驗(yàn)證電子郵件。此方法將用戶的ID作為參數(shù)，並發(fā)送帶有鏈接的電子郵件，用戶可以單擊以驗(yàn)證其電子郵件地址。創(chuàng)建這樣的新用戶之後，您可以調(diào)用此方法：

accounts.createuser（{
電子郵件：'test@example.com'，
密碼：'password'
} ， function（err，userId）{
> if（err）{
//處理錯(cuò)誤
} else {
accounts.sendverificitionEmail（userId）;
> }

}） ;

>在流星註冊(cè)時(shí)如何處理錯(cuò)誤？

在使用accounts.createuser創(chuàng)建新用戶時(shí)，您可以提供一個(gè)被調(diào)用的回調(diào)函數(shù)如果發(fā)生錯(cuò)誤，則使用錯(cuò)誤對(duì)象。此錯(cuò)誤對(duì)象包含有關(guān)出了什麼問(wèn)題的信息。您可以使用此信息向用戶顯示適當(dāng)?shù)腻e(cuò)誤消息。以下是一個(gè)示例：

accounts.createuser（{
>用戶名：'tastuser'，
密碼：'password'
}，function（err）{
if（ err）if（err）{
> console.log（'註冊(cè)期間的錯(cuò)誤：'，err）;
}

}）;

>我如何實(shí)現(xiàn)密碼流星中的重置功能？

>流星為密碼重置功能提供內(nèi)置支持。您可以使用accounts.forgotpassword和accounts.ResetPassword方法來(lái)實(shí)現(xiàn)此目標(biāo)。 accounts.forgotpassword方法通過(guò)可以單擊的鏈接將電子郵件發(fā)送給用戶，以重置密碼。 accounts.ResetPassword方法用於實(shí)際更改用戶的密碼。它從重置鏈接中將令牌和新密碼作為參數(shù)。

>

>我如何將社交登錄添加到我的流星應(yīng)用程序中？

Meteor支持與Facebook，Google，Google，Google，Google，Google，Google，Google，Google，Google，Google，Google，Google，並通過(guò)其帳戶軟件包進(jìn)行Twitter。要將社交登錄添加到您的應(yīng)用程序中，您需要添加適當(dāng)?shù)能浖ɡ?，用於Facebook登錄帳戶書(shū)籍），並使用社交提供商的應(yīng)用程序?qū)⑵渑渲脼?h3 id="gt-我如何根據(jù)流星中的用戶身份驗(yàn)證限制對(duì)某些路由的訪問(wèn)">>我如何根據(jù)流星中的用戶身份驗(yàn)證限制對(duì)某些路由的訪問(wèn)？