JavaScript
User Registration - login
11 分
parseアプリにjavascriptユーザー登録とログインを追加する はじめに このセクションでは、javascript環境でのメール確認を伴う基本的なユーザー登録の方法を説明します。 https //www back4app com/ このチュートリアルでは、 parse user parse user オブジェクトを使用し、その最も重要な機能を学びます。 parse sdkの詳細については、 https //parseplatform org/parse sdk js/api/4 3 1/ と https //docs parseplatform org/js/guide/ をご覧ください。 前提条件 このチュートリアルを完了するには、次のものが必要です: back4appに接続された基本的なjavascriptアプリまたは、私たちのparse apiに接続されたjsbin。 注: 私たちの https //www back4app com/docs/javascript/parse javascript sdk で作成したアプリを使用するか、同じオンライン環境 https //jsbin com/?html,js,output を使用し、j https //www back4app com/docs/javascript/serverless database で設定を行ったものを使用できます。 1 サインアップ ユーザーサインアップ機能は、 create create 関数に似ていますが、 https //www back4app com/docs/javascript/serverless database , いくつかの追加の利点があります。 ユーザー名とメールアドレスがユニークであることを確認してください。 パスワードをクラウドで安全にハッシュ化します。開発者でさえユーザーのパスワードを見ることはできません。 ユーザー名とパスワードを少なくとも必要とします。希望する場合は、メールアドレスをユーザー名として使用できます。 すでに実装されているコードを見るには、 https //jsbin com/guhikig/edit?html,js,console を開くことができます。 独自のサインアップ関数を作成するには、 https //www back4app com/docs/javascript/serverless database で説明されている作成関数の同じ手順を繰り返す必要がありますが、以下のように保存メソッドの代わりに user signup メソッドを呼び出します。 signup js signup(); function signup() { // create a new instance of the user class var user = new parse user(); user set("username", "my name"); user set("password", "my pass"); user set("email", "email\@example com"); // other fields can be set just like with parse object user set("phone", "415 392 0202"); user signup() then(function(user) { console log('user created successful with name ' + user get("username") + ' and email ' + user get("email")); }) catch(function(error){ console log("error " + error code + " " + error message); }); } ユーザー名またはメールアドレスを変更しないと、 エラー 202 または エラー 203 が発生する可能性があることに注意してください。 エラー 209 無効なシーズン トークンは、ブラウザのクッキーが parse の現在のセッションと競合する場合にも発生する可能性があります。それを回避するには、ブラウザのクッキーをクリアするか、ブラウザのシークレットモードを開いてください。 新しいユーザーがデータベースに追加されたことを確認するには、 parse ダッシュボード parse ダッシュボード にアクセスするか、次に提供される ログイン ログイン 関数をコーディングしてください。 2 メール認証 サインアップ方法の重要な機能はメール認証です。 幸いなことに、back4appを使用して簡単に設定できます。メール認証を有効にするには、アカウントにログインし、アプリを見つけて、次をクリックします。 サーバー設定 サーバー設定 。 「認証メール」ボックスを見つけて、次をクリックします。 設定 設定 。こちらが「認証メール」ボックスの見た目です 次に、下のボックスにチェックを入れて認証を有効にします。 jsbinのクラウド環境を使用している場合、このステップを完了する必要はありません。 これを有効にすると、データベース内のユーザーのクラスに追加のフィールドが1つ追加されます verifiedemail verifiedemail このフィールドは、メールが確認されるとtrueに設定され、メールが確認されていない場合はfalseに設定され、 この設定が確認される前にユーザーが作成された場合はundefinedに設定されます。 そのページでは、メールをカスタマイズしたり、件名、本文、送信者のメールアドレスと名前を変更したりすることもできます。 メールがどのように見えるかを確認するには、次のように signup signup 関数を使用してユーザーを作成します。 アクセスできるメールアドレスを使用してください。確認のためのメールが届くはずです。 3 ログイン ログイン機能は非常にシンプルで、実行するにはパスワードとユーザー名が必要です。 すでに実装されているコードを見るには、 https //jsbin com/delazew/edit?html,js,console を開いてください。 次のように parse user login parse user login メソッドを呼び出す必要があります login js login(); function login() { // create a new instance of the user class var user = parse user login("myname", "mypass") then(function(user) { console log('user created successful with name ' + user get("username") + ' and email ' + user get("email")); }) catch(function(error){ console log("error " + error code + " " + error message); }); } 4 パスワードのリセット それは 非常に重要 です パスワードリセット オプションを追加することは、ユーザーが将来的にパスワードを忘れる可能性が高いためです。 パスワードリセット機能で送信されるメールの設定は、 メール確認ステップ と同じページにあります。そこでは、メールの本文と件名を変更できます。 次のリンクを開くことができます https //jsbin com/guwuben/edit?html,js,console,output で、すでに実装されているコードを見ることができます。 パスワードリセットメールを送信するには、次のコードを実行してください resetpassword js resetpassword(); function resetpassword() { parse user requestpasswordreset("email\@example com") then(function() { console log("password reset request was sent successfully"); }) catch(function(error) { console log("the login failed with error " + error code + " " + error message); }); } 完了しました! この時点で、javascriptアプリを使用したユーザー登録の方法だけでなく、メール確認とパスワードリセットメールを送信する方法も学びました。