概要2段階認証は、アプリへログインする際に本人であることを確認するための方法のひとつです。2段階認証を取り入れることで、第三者による不正アクセスやなりすましを防げます。今回はBubbleでメールを使った2段階認証を実装する方法を解説します。完成イメージ今回は1Bubbleの確認メール機能を使う方法と、2認証番号を生成し認証する方法の2通りを実装します。メールアドレスとパスワードを入力し、それぞれのButtonを押すことでサインアップします。エレメントを配置するInputを2つ、Buttonを1つ配置します。format項目を設定します。メールアドレスは「Email」、パスワードは「Password」を選択します。確認メールを送信したことを伝えるためのAlertを配置します。top」にチェックを入れます。認証完了画面を作成する続いて認証完了時にユーザーが訪れるページを作成します。page...」で新規ページを作成します。今回は「two-step-confirmation」というページ名にしました。Textを配置し、「2段階認証が完了しました」という文字とサインインしたメールアドレスを表示します。ワークフローを設定する最初の画面に戻り、Button押下時のワークフローを設定します。value」を設定します。email」にチェックを入れます。pageの項目が表示されるので、先ほど作成した「two-step-confirmation」ページを設定します。message」にチェックを入れます。Messageの項目が表示されるので、メールを送信したことが分かるようなメッセージを入力しておきます。確認メールは、初期設定では英語の文章となっています。body」の内容を変更してください。プレビューにて、メールアドレスとパスワードを入力しサインアップすると、メールが送信されます。メール内のリンクをクリックすると、認証完了画面へ移動し、メールアドレスが表示されました。typeに新しいFieldを追加します。認証が完了するとyesとなり、ログインできるようになるisConfirmedのdefaultを「no」に設定します。これで認証前はisConfirmがnoとなり、認証するまでログインできません。Generatorプラグインをインストールします。指定した範囲内でランダムな数値を生成してくれます。エレメントを配置するButtonを2つ、Inputを1つ配置します。format項目は「Integer」を選択します。認証完了後にのみユーザーのメールアドレスを表示します。email」と入力します。loadのチェックを外し、非表示にします。最後にConditionalタブへ行き、認証完了後(IsConfirmedがyesになっている)にTextが表示されるよう設定します。visible」を選択しチェックを入れます。ワークフローを設定する各ボタン押下時のワークフローを設定します。サインアップおよび認証番号を記載したメールの送信です。Number生成する数値の最小値と最大値を設定します。今回は6ケタとするので、Minimumに「100000」Maximumに「999999」を入力します。value」を設定します。userStep1で生成した数値を保存します。あとで認証時に入力された数値が正しいかどうか比較するために使用します。0」によって整数にしています。email認証番号を記載したメールを送信します。email」を設定します。name(送信者)やSubject(件名)やBody(本文)などを任意で入力します。ConfirmNumber」を文中に入れてください。message」にチェックを入れます。Messageの項目が表示されるので、メールを送信したことが分かるようなメッセージを入力しておきます。続いて認証時のワークフローを設定します。認証成功時と、認証失敗時の2パターンを想定します。message」にチェックを入れ、認証に失敗したことが分かるようなメッセージを入力します。ConfirmNumber」と設定します。入力された数値とデータベースのConfirmNumberが一致しない場合に、このStepを実行します。workflow認証に失敗した場合、このワークフローをStep2で中断します。whenにStep1と同じ条件を設定します。user認証に成功した場合、ユーザーのIsConfirmedをyesにします。ConfirmNumber」と設定します。message」にチェックを入れ、認証に失敗したことが分かるようなメッセージを入力します。whenにStep3と同じ条件を設定します。プレビューにて、メールアドレスとパスワードを入力し、2のボタンでサインアップするとメールが送信されます。メール内の暗証番号をプレビューにて入力し「認証する」ボタンを押すと、認証が完了しメールアドレスが表示されました。