Meteorを使用したカスタムログインと登録フォームの作成

キーテイクアウト

• Meteorを使用したカスタムログインと登録フォームの作成には、Accounts-Passwordパッケージをインストールすることが含まれます。これにより、Meteor.usersコレクションが自動的にユーザーデータを保存し、ユーザー関連の機能のカスタムロジックを記述する必要性が排除されます。
ログインおよび登録システムのユーザーインターフェイスは、単純なHTMLフォームを使用して開発できます。これらのフォームのテンプレートには、電子メールとパスワードのフィールド、および送信ボタンが含まれています。
• イベントハンドラーを設定して、フォームとのユーザーインタラクションに応答することができます。たとえば、フォームのデフォルトの動作を防ぎ、フォームが送信されたときに確認メッセージを出力するために「フォームの送信」イベントを作成できます。 Accounts.createUser（）やMeteor.loginWithPassword（）などのMeteorの組み込みメソッド（）を使用して、それぞれ新しいユーザーを登録し、既存のユーザーにログインできます。これらのメソッドは、サインアップ後にパスワードを自動的に暗号化し、ユーザーをログインして、記述する必要があるコードの量を減らします。
すぐに、Meteor JavaScriptフレームワークでできる最も簡単なことの1つは、ユーザーアカウントシステムを作成することです。 Accounts-PasswordとAccounts-UIのペアをインストールするだけで、次の完全な機能インターフェイスになります。
• しかし、このシンプルさは便利ですが、このボイラープレートインターフェイスに依存すると、柔軟性が多くなることはありません。では、ユーザーがWebサイトに登録してログインするためのカスタムインターフェイスを作成したい場合はどうなりますか？ 幸いなことに、それほど難しくありません。この記事では、Meteorでカスタムログインと登録フォームを作成する方法を紹介します。ただし、この記事では、このフレームワークを使用してプロジェクトをセットアップする方法を自分のもので設定する方法を知っていると想定しています。 この記事で開発されたコードで再生するには、設定したGitHubリポジトリをご覧ください。
基本的なセットアップ
• 新しいMeteorプロジェクト内で、コマンドを実行してAccounts-Passwordパッケージを追加します。
このパッケージをプロジェクトに追加することにより、Meteor.usersコレクションが作成されてユーザーのデータを保存し、ユーザー関連の機能のカスタムロジックを記述する必要はありません。 したがって、カスタムインターフェイスを作成するということは、Accounts-UIパッケージの利便性を失うことを意味しますが、Meteorが提供できるバックエンド「マジック」の利便性を失う必要があるという意味ではありません。 インターフェイスの開発

完全なログインと登録システムの場合、以下を含むインターフェイスを作成する必要がある多くの機能があります。

登録

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

login

パスワードを忘れた
「メールの確認」ページ
「電子メールが確認された」ページ

しかし、現時点では、最初の2つのポイント（登録とログイン）フォームについて説明します。その理由は、基本を処理したら、他のインターフェイスを作成する方法を理解するのは難しくないからです。 次のスニペットは、登録フォームのコードを示しています。

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>

ご覧のとおり、テンプレートは非常に似ています。フォーム、電子メールとパスワードのフィールド、および送信ボタンが含まれています。唯一の違いは、入力フィールドとテンプレートの名前属性の値です。 （これらの値をすぐに参照しますので、それらが一意であることを確認してください。） これらのテンプレートは、まだ実行されていないユーザーにのみ表示されます。したがって、開閉ボディと閉じたボディの間のcurrentuserオブジェクトを参照できます タグ：

<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-Passwordパッケージをプロジェクトに追加した後、多くの方法が利用可能になりました。

• accounts.createuser（）
• Accounts.ChangePassWord（）
• accounts.forgotpassword（）
• accounts.resetpassword（）
• accounts.setPassWord（）
• accounts.verifyemail（）

CreateUserメソッドに焦点を当てますが、メソッド名に基づいて、他の方法の目的を把握するのは難しくありません。 「登録」テンプレートの送信イベントの下部で、次のことを書きます。

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

これは、新しいユーザーを作成するために使用できるコードであり、デフォルトでは、電子メールとパスワードの2つのオプションが必要です。 それらを通過するには、次のことを書きます。

<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. 「登録」および「ログイン」フォームに視覚的検証を追加します
ログインの試行が失敗したときに何かをします。
ユーザーがパスワードを変更できるようにします
4. これらの機能を実装する方法の詳細を把握するには午後かかるかもしれませんが、このチュートリアルで説明したものに基づいて、それはあなたの手の届かないところにありません。 Meteorは私たちのために大変な仕事をしています。 この記事で開発されたコードで再生したい場合は、設定したGitHubリポジトリをご覧ください。 Meteorを使用してカスタムログイン/登録フォームの作成に関するよくある質問（FAQ）
Meteorの登録フォームに追加のフィールドを追加するにはどうすればよいですか？
5. Meteorの登録フォームに追加のフィールドを追加するのは非常に簡単です。アカウントにフィールドを追加することにより、ユーザープロファイルを拡張できます。CreateUserメソッド。たとえば、ユーザーのフルネームのフィールドを追加する場合は、次のように行うことができます：

accounts.createuser（{

> username： 'testuser'、

パスワード： 'パスワード'、

プロフィール：{ fullName：' test user '

}
}）;
この例では、「FullName」はユーザープロファイルに追加された追加フィールドです。 meteor.user（）。profile.fullname。

Meteor/登録フォームの外観をMeteor？

Meteorにカスタマイズするにはどうすればよいですか？ログイン/登録フォームの外観をカスタマイズするための組み込みの方法。ただし、CSSを使用して、ニーズに応じてフォームをスタイリングできます。フォーム要素にクラスを割り当ててから、CSSファイルのこれらのクラスを使用してスタイルを適用できます。または、BootstrapやMaterial-UIなどのUIライブラリを使用してフォームをスタイリングすることもできます。

accounts.createuser（{

email： 'test@example.com'、

パスワード： 'password'
}、 function（err、userid）{
if（err）{
// handle error
} }
}）;

meteorでのユーザー登録中にエラーを処理するにはどうすればよいですか？

accounts.createuserを使用して新しいユーザーを作成すると、呼び出されるコールバック関数を提供できます。エラーが発生した場合、エラーオブジェクトを使用します。このエラーオブジェクトには、何がうまくいかなかったかに関する情報が含まれています。この情報を使用して、適切なエラーメッセージをユーザーに表示できます。例は次のとおりです。

accounts.createuser（{ username： 'testuser'、

password： 'password'

}、function（err）{if（err）{
console.log（ '登録中のエラー：'、err）;
}
}）;

パスワードを実装するにはどうすればよいですかMeteorの機能性をリセットしますか？

Meteorは、パスワードリセット機能の組み込みサポートを提供します。 accounts.forgotpasswordとaccounts.resetpasswordメソッドを使用して、これを実装できます。 accounts.forgotpasswordメソッドは、クリックしてパスワードをリセットできるリンクを使用してユーザーにメールを送信します。 accounts.resetpasswordメソッドは、実際にユーザーのパスワードを変更するために使用されます。リセットリンクからのトークンと新しいパスワードをパラメーターとして使用します。

MetEorアプリケーションにソーシャルログインを追加するにはどうすればよいですか？アカウントパッケージを介したTwitter。ソーシャルログインをアプリケーションに追加するには、適切なパッケージ（たとえば、Facebookログイン用のAccounts-FaceBook）を追加し、ソーシャルプロバイダーからのアプリの資格情報で構成する必要があります。

Meteorでのユーザー認証に基づいて特定のルートへのアクセスを制限するにはどうすればよいですか？

Meteorの組み込みアカウントパッケージとFlowrouterやIron Routerなどのルーティングパッケージを使用して、特定のルートベースのルートへのアクセスを制限できます。ユーザー認証について。ユーザーがmeteor.userid（）またはmeteor.user（）を使用してログインしているかどうかを確認し、それらがそうでない場合はログインページにリダイレクトできます。 ？

Meteorでは、Meteor.usersコレクションのユーザードキュメントに追加のユーザーデータを保存できます。アカウントを使用して新しいユーザーを作成するときにこのドキュメントに追加のフィールドを追加できます。Createuserを使用するか、Meteor.users.updateを使用して追加データを使用して既存のユーザードキュメントを更新することができます。 Meteorでの制御？

​​ Meteorは、ロールベースのアクセス制御の組み込みサポートを提供しませんが、Alanning：Rolesなどのパッケージを使用して、この機能をアプリケーションに追加できます。このパッケージを使用すると、ユーザーに役割を割り当ててから、ユーザーが特定のアクションを実行できるかどうかを決定するときにこれらの役割を確認できます。 meteor.logoutメソッドを使用して、meteorでユーザーをログアウトできます。このメソッドは、クライアントの現在のユーザーをログアウトし、サーバー上のログイントークンを無効にします。また、ログアウトプロセスが完了したときに引数なしで呼び出されるコールバック関数も必要です。

以上がMeteorを使用したカスタムログインと登録フォームの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。