Skip to main content

メール検証

クラウド機能は、さまざまなログインおよびサインアップフローを作成する際に重要な役割を果たします。Sign UpLog InLog Outのノードを使用して、ユーザーがユーザー名、オプションでメール、パスワードでサインアップし、ユーザー名とパスワードでログインする最も基本的なフローを作成できます。

note

サインアップ時にユーザー名メールの両方にメールを使用することが一般的です。つまり、ユーザーにメールとパスワードのみを求めるため、覚えるべきことが1つ少なくなります。

ログインしたら、クラウドデータベースのAccess Control機能を使用して、ユーザーがアクセスできるものとできないものを制御できます。組み込みのロールシステムを使用して、ユーザーのチーム/グループのような機能を作成できます。

これは、アプリケーションの構築に集中し始める素晴らしい方法です。しかし、より多くのユーザーに公開し始めるところに達すると、より堅牢なサインアップおよびログインフローが必要になることがよくあります。最初の追加は、おそらくユーザーのメールを検証し、パスワードをリセットできるようにする必要があることです。このガイドではそれについて説明します。

サインアップ時にユーザーにメールを送信し、プロファイルの編集などをカバーする、より完全なサインアップおよびログインフローを含むプロジェクトテンプレートがあります。これは、フロントエンドからセキュリティ上の理由で実行できないいくつかのことを行うためにクラウド機能を使用します(クラウド機能は常にデータベースへの完全なアクセス権を持っています)。

テンプレートから新しいプロジェクトを開始するか、クラウド機能を既存のプロジェクトにインポートできます。ここでは、このガイドでケースバイケースでそれらをレビューします。

設定

メール検証プロセスを機能させるためには、いくつかの設定パラメーターを提供する必要があります。これは、クラウドサービスのダッシュボードを開き、サイドバーを使用してConfigタブに移動することで行われます。設定パラメーターについての詳細は、Configノードを見ることで学ぶことができます。必要な設定パラメーターは以下のとおりです:

  • EmailVerificationDomain ここには、アプリケーションがデプロイされているドメインをhttps://から始めて入力する必要があります。これは、検証メールのリンクに使用されます。ローカルで実行している場合、これは自動的にhttp://localhost:8574になります。これは、ローカルのNoodl Webサーバーが実行されている場所です。
  • EmailVerificationFrom これは、ユーザーに検証メールを送信する際に「from」メールとして使用されるメールアドレスを入れる場所です。これがSend Grid(アプリケーションで使用しているメール送信サービス)で有効なメールであることが重要です。
  • SendGridAPIKey プロジェクトテンプレートとメール検証プリファブは、メールサービスとしてSendGridを使用しています。これを使用するには、アカウントにサインアップして取得する必要があります(テストには無料です)。APIキーを作成し、設定に入れます。NoodlでSend Gridを使用する方法についての詳細はこちらで見つけることができます。

サインアップ

サインアップは、Sign Upアクションノードで行われます。ユーザーが正常にサインアップした後、クラウド機能Send Verification Emailが呼び出されます。この機能は、ユーザーに提供されたアドレスにメールを送信します。

![](/docs/guides/cloud-logic/email-verification/sign-up

-1.png)

クラウド機能をもう少し詳しく見てみましょう。詳細に深入る必要はありませんが、主要なフローとブロックをレビューするのは良いことです。クラウド機能は、クラウド機能タブのSign Upフォルダにあり、Send Verification Emailと呼ばれています。機能が開始される最初のこの時、Request Email Verificationアクションコンポーネントが使用されます。

このアクションは、秘密トークン(一時的なパスワードのような、文字のランダムな文字列)を作成し、現在のユーザーと共に保存します。このトークンは後でメールの一部としてユーザーに送信されます。メールがすでに検証されている場合、Email Is Verifiedにシグナルが発行され、クラウド機能のエラー結果として返されます。

次の部分は、実際にユーザーにメールを送信することです。これは、Format EmailおよびSend Emailアクションコンポーネントを使用して機能内で行われます。

Format Emailアクションは、検証トークンとユーザーのメールを入力として受け取り、リンクを含むメールを作成します。Format Emailノードのプロパティを見ることで、メールの内容を確認できます。

見ての通り、HTMLリンクを含むメールが作成されます。このリンクはいくつかの洗練されたテンプレート構文を使用します。

  • $Domain これは、フォーマットメールノードによってアプリケーションがデプロイされたドメインに置き換えられます。これにより、リンクがアプリに戻ります。後ほど詳細を説明します。
  • {Token} これは前に生成されたトークンです。
  • {Email} これはユーザーのメールであり、次のステップでユーザーを取得してメールを検証済みとしてマークするために使用されます。

Format Emailノードは、上記のプレースホルダーに正しい値が挿入された最終メールを出力します。このメール内容は、実際にユーザーにメールを送信するSend Emailノードに送られます。

それでおしまいです。これで、ユーザーは受信トレイにEmail Verification!という件名の新しいメールを持っているはずです。Send EmailアクションのSubjectプロパティを編集できます。

メールの検証

メール検証フローを機能させるためには、もう1つのことが必要です。検証メールのリンクが指すページが必要です。Format Emailアクションがメールテンプレートをフォーマットし、TokenEmailDomainを挿入した結果、リンクは次のようになります。

<a href="https://your-app.sandbox.noodl.app/verify-email?token=abc&email=user@email.com">verify</a>

この小さなリンクは、ユーザーをアプリに戻します(テストのためにhttp://localhost:8574をドメインとして使用できることを覚えておいてください。アプリがデプロイされる前に)そして、/verify-emailのページに具体的に戻ります。したがって、プロジェクトテンプレートのページを見てみましょう。

ここには多くのものがありますが、重要なのはPage Inputsです。ここで、リンクのクエリパラメータ(リンクの?の後ろのもの)の一部としてTokenEmailを取得し、これらはSign Up / Verify Emailクラウド機能に渡され、ページがロードされるとすぐにDid Mountシグナルで呼び出されます。

成功した場合、メールが検証され、ユーザーはアプリのログインページにNavigateノードとトーストメッセージが表示されて送られます。失敗した場合、画面にメッセージが表示され、Show Toastコンポーネントを使用してトーストが表示されます(これはプリファブの中にあり、プロジェクトにインストールできます。Loading Spinnerも同様です)。

アプリにログインしたら、任意のUserノードにマウスを合わせることでユーザーオブジェク

トを検査できます。ここでは、メール検証クラウド機能によって設定されたいくつかのプロパティを確認できます。

最も重要なのはユーザーのemailVerifiedプロパティです。これは、ユーザーがメールを検証したかどうかを示します。サインアッププロジェクトテンプレートでは、メールアドレスが検証されていなくても、ユーザーは実際にアプリのホーム画面に送られ、バナーが表示されます。たとえば、ユーザーがメールを検証した場合にのみ、アプリケーションの特定の部分を有効にすることができます。

メールが適切に受信されなかった場合、またはユーザーが別の検証メールを送信したい場合は、単にSign Up / Send Verification Emailクラウド機能を再度呼び出すことができます。

note

Set User Propertiesアクションノードでメールを更新すると、ユーザーのemailVerifiedプロパティが自動的にfalseに切り替わります。

パスワードのリセット

失われたユーザーパスワードをリセットすることは、検証のためのメールを送信するのと同じパターンに従います。まず、ユーザーがパスワードを回復するためにメールアドレスを入力できる何らかのUIを提示する必要があります。

Sign Up / Request Password Resetと呼ばれる関数があり、これは単にEmailを受け入れ、ユーザーがログインしていなくても呼び出すことができます。

クラウド機能は、メール検証を送信するときとほぼ同じパターンに従います。これは、秘密トークンを含むリンクを使用して、メールアドレスを検証するときと同じように、ユーザーにメールを送信します。

Request Password Resetアクションは、秘密トークンを生成し、これをユーザーのメールと共にFormat Emailに渡します。今回は、/reset-passwordというページへのリンクを生成します。Format Emailノードのメールの内容を編集できます。

結果として得られるリンクは次のようになります:

<a href="https://your-app.sandbox.noodl.app/reset-password?token=abc&email=user@email.com">link</a>

このリンクは、ユーザーを/reset-passwordページに送り、ここにはユーザーが新しいパスワードを提供できるText Inputを含めることができます。

ユーザーがリセットボタンを押したとき、リンクのクエリパラメータとPage Inputsノードを介して受け取った秘密トークンとユーザーメールを供給して、Sign Up / Reset Passwordクラウド機能を呼び出します。

秘密トークンが正しく、有効期限が切れていない場合(トークンは24時間有効です)、パスワードが更新されます。その後、ユーザーをLog Inページに送ることができます。

それでおしまいです。これが、メール検証とパスワードリセットフローを作成するためにクラウド機能を使用する方法です。バックエンドで完全なデータベースアクセスを必要とするユーザー管理タスクを実行するために、多くの場合、クラウド機能を使用します。