キーテイクアウト

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

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

登録

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

login

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

しかし、現(xiàn)時(shí)點(diǎn)では、最初の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>

ご覧のとおり、テンプレートは非常に似ています。フォーム、電子メールとパスワードのフィールド、および送信ボタンが含まれています。唯一の違いは、入力フィールドとテンプレートの名前屬性の値です。 （これらの値をすぐに參照しますので、それらが一意であることを確認(rèn)してください。） これらのテンプレートは、まだ実行されていないユーザーにのみ表示されます。したがって、開閉ボディと閉じたボディの間の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>

このコードは、現(xiàn)在のユーザーがログインされている場(chǎng)合、「ログインしている」メッセージと、それ以外の場(chǎng)合は「登録」テンプレートと「ログイン」テンプレートを表示します。

イベントの作成

現(xiàn)時(shí)點(diǎn)では、私たちのフォームは靜的です。彼らに何かをさせるには、送信イベントに反応する必要があります。 「レジスタ」テンプレートに焦點(diǎn)を當(dāng)てて、これを示しましょう。 プロジェクトのJavaScriptファイル內(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>

ここでは、「レジスタ」テンプレート內(nèi)のフォームを作成するコードを作成しました。

1. 送信イベントに応答します
2. デフォルトの動(dòng)作はありません
3. コンソールに確認(rèn)メッセージを出力します

また、このコードをサーバーで実行したくないため、このコードをiSclient條件に配置しました（インターフェイスのみを意味しているため）。 イベント內(nèi)では、電子メールとパスワードのフィールドの値をつかみ、それらを一対の変數(shù)に保存します。それでは、以前のコードを変更しましょう。

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

「ログイン」テンプレートの場(chǎ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>

一緒に物事を接続する

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

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

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

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>

一般的な挿入の代わりにこのコードを使用します 関數(shù)パスワードが自動(dòng)的に暗號(hào)化されるという利點(diǎn)があります。さらに、ユーザーはサインアップ後にログインしており、あまりコードを書く必要はありません。 「ログイン」イベント內(nèi)で使用できる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>

これで、「ダッシュボード」テンプレート內(nèi)の「ログアウト」リンクに添付されたイベントを作成できます。

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

ログアウトプロセスを?qū)g行するには、ログアウトメソッドを使用するだけです。

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

登録、ログイン、ログアウトすることは、すべてが予想どおりに機(jī)能するようになりました。

結(jié)論

少數(shù)のコードで十分な進(jìn)歩を遂げましたが、アカウントシステムの完全なインターフェイスを作成したい場(chǎng)合は、まだやるべきことがたくさんあります。 これが私が提案するものです：

1. 新しいユーザーの電子メールの検証を有効にします。
ユーザーの作成（およびログイン）を検証します
2. 「登録」および「ログイン」フォームに視覚的検証を追加します
ログインの試行が失敗したときに何かをします。
ユーザーがパスワードを変更できるようにします
4. これらの機(jī)能を?qū)g裝する方法の詳細(xì)を把握するには午後かかるかもしれませんが、このチュートリアルで説明したものに基づいて、それはあなたの手の屆かないところにありません。 Meteorは私たちのために大変な仕事をしています。 この記事で開発されたコードで再生したい場(chǎng)合は、設(shè)定したGitHubリポジトリをご覧ください。 Meteorを使用してカスタムログイン/登録フォームの作成に関するよくある質(zhì)問（FAQ）
Meteorの登録フォームに追加のフィールドを追加するにはどうすればよいですか？
5. Meteorの登録フォームに追加のフィールドを追加するのは非常に簡(jiǎn)単です。アカウントにフィールドを追加することにより、ユーザープロファイルを拡張できます。CreateUserメソッド。たとえば、ユーザーのフルネームのフィールドを追加する場(chǎng)合は、次のように行うことができます：

accounts.createuser（{

> username： 'testuser'、

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

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

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

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

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

accounts.createuser（{

email： 'test@example.com'、

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

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

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

accounts.createuser（{ username： 'testuser'、

password： 'password'

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

パスワードを?qū)g裝するにはどうすればよいですかMeteorの機(jī)能性をリセットしますか？

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

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

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

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

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

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

以上がMeteorを使用したカスタムログインと登録フォームの作成の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。