用流星創建自定義登錄和註冊表格

鑰匙要點

• >用流星創建自定義登錄和註冊表格涉及安裝帳戶通信軟件包，該軟件包將自動創建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中文網其他相關文章！