メニュー

Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Authy、Ruby、およびRailsを使用したアカウント検証

アプリケーションにユーザーアカウント検証を実装する準備はできましたか? どのような仕組みになっているのか概要を以下に示します。

  1. ユーザーはサインアップフォームに電話番号を含むデータを入力することで登録プロセスを開始します。
  2. 認証システムはワンタイムパスワードをユーザーの携帯電話に送信して、その電話番号の所有を検証します。
  3. 登録完了前に、ユーザーはワンタイムパスワードをフォームに入力します。
  4. ユーザーに成功ページが表示され、アカウントが作成されたことを示すSMSを受診します。

ビルディングブロック

これを行うには、以下の Twilio 駆動型 API を操作します。

Authy REST API

  • Users Resource: Authy ユーザーを作成し、そのユーザーでワンタイムパスワードの送信と確認を行う必要があります。
  • SMSリソース: AuthyにワンタイムパスワードをSMS経由でユーザーに送信するよう指示します。
  • Verifyリソース: 登録時にWebフォームでユーザーによって入力されたトークンの検証に使用されます。

Twilio REST API

  • メッセージリソース:ユーザーがアカウントを作成した後に、Twilio を直接使用して確認メッセージをユーザーに送信します。

はじめましょう!

ここをクリックして次のステップに進みます

このチュートリアルについて

このチュートリアルでは、アカウント認証をウェブアプリケーションに完全に実装する方法を示した一連のユーザーストーリーに取り組みます。当社のチームは、このアプリケーション例を約 12 ストーリーポイント(おおよそ 12 時間の勤務時間に相当)で実装しました。

では、新しいユーザーアカウントの作成に関する最初のユーザーストーリーから始めましょう。

ユーザーストーリー: 新規ユーザーに対するアカウント検証

ユーザーストーリー

ユーザーとして、E メール、氏名、携帯電話番号、およびパスワードを使って新しいユーザーアカウントに登録します。

アカウント検証を行うには、アカウントから始める必要があります。 これにはUIおよびモデルオブジェクトを少しばかり作成して、システム内で新規Userを作成、保存することが必要です。 高次においては、追加が必要になるのは以下のものになります:

  • 新規ユーザーに関する詳細を入力するためのフォーム
  • フォームをレンダリングするためのサーバー上のルートおよびコントローラー関数
  • フォーム POST リクエストを処理するためのサーバー上のルートおよびコントローラー関数
  • ユーザーに関する情報を保存するための永続的な User モデルオブジェクト

まず始めに、モデルを見てみましょう。モデルでは、ユーザーに関して保存する必要がある情報を決定します。

ユーザーモデルを作成する

ユーザーモデル

この事例のユーザーモデルは非常に明快であり、Rails はそれをさらに簡単化するためのツールをいくつか提供します。2FA チュートリアルをすでに読んでいる場合、おそらくこれは非常によく似ています。モデルの定義と検証から始めましょう。

最初に、ActiveRecord オブジェクトを作成する必要があります。このオブジェクトは、関連する Postgres テーブルでモデルを作成し、モデルのデータの検証方法をアプリに伝えます。

データ検証

正確なデータだけがデータベースに確実に保存されるようにしたいため、検証は重要です。今回は、すべての必須フィールドが存在することを検証するだけにとどめます。これを行うには、presence: true を使用して validates 文を作成します。

パスワード

Rails では、セキュアパスワードハッシュの作成は has_secure_password の呼び出しと同じぐらい簡単です。これにより、データベース上でユーザーのパスワードを保護するハッシュが作成されています。

One note: in order to run this demo you would need to run rake db:migrate which would run the migrations in our db/migrate folder. For this tutorial we're going to focus on the verification steps, but if you want to learn more about migrations you can read the Rails guide on the subject.

        
        
        
        
        app/models/user.rb

        これで、アプリケーションのコントローラーレベルに移動して必要な HTTP リクエストルートから始める準備ができました。

        必要なルートを追加し、ユーザーを検証する

        新しいルートの追加

        Railsアプリケーションでは、リソースのCRUD機能をそのコントローラーに対応づけるリソースルーティングと呼ばれるものが存在します。 UserはActiveRecordリソースであるため、コードを数行短縮できるこれらのルートのいくつかを使用したいということをRailsに指示できます。

        これは、このコード1行で自動的に「user/new.html.erb」ファイルをレンダリングする「user/new」ルートが作成されるということです。

              
              
              
              
              config/routes.rb

              新しいユーザーフォームについてもう詳しく見てみましょう。

              新規ユーザーフォームを作成する

              新規ユーザーフォーム

              新規ユーザーを作成するときは、名前、メールアドレス、およびパスワードを尋ねます。 Authyでアカウントを検証するには、ユーザーの国番号を伴った、SMS経由でワンタイムパスワードを送信できる携帯電話番号も尋ねる必要があります。

              rails form_for タグを使って、 モデルオブジェクトにフォームをバインドできます。これにより、必要な html マークアップが生成され、送信時に新しいユーザーが作成されます。

                    
                    
                    
                    
                    app/views/users/new.html.erb

                    新規ユーザーフォーム

                    app/views/users/new.html.erb

                    コントローラーに戻って、ユーザーの作成時に何が起こるのかを見てみましょう。

                    フォームによってPOSTされた新規ユーザーを作成する

                    フォーム POST の処理

                    One of the other handy controllers created by our User resource route is 'user/create' which handles the POST from our form.

                    コントローラーでは、フォームから入力を取得し、新しい User モデルを作成します。ユーザーがデータベースに正常に保存された場合は、Authy gem を使用して対応する Authy ユーザーを作成し、そのユーザーの ID をデータベースに保存します。

                          
                          
                          
                          
                          app/controllers/users_controller.rb

                          新規ユーザーを作成し、Authyに登録する

                          app/controllers/users_controller.rb

                          Now we have a user that has registered, but is not yet verified. In order to view anything else on the site they need to verify that they own the phone number they submitted by entering a token we send to that phone. Time to take a look at how we would send this token.

                          ユーザーストーリー: SMS経由でワンタイムトークンを送信する

                          ユーザーストーリー:ワンタイムパスワードの送信

                          認証システムとして、電話番号の所持を確認するためにワンタイムパスワードをユーザーの携帯電話に送信します。

                          このストーリーは、エンドユーザーには見えないが、アカウント認証機能を強化するために必要となるプロセスをカバーします。新しいユーザーの作成後、アプリケーションはワンタイムパスワードをそのユーザーの電話に送信して電話番号(およびアカウント)を検証する必要があります。行うべきことは以下のとおりです。

                          • Authy APIクライアントを作成および構成します。
                          • ユーザーの作成後にワンタイムパスワードを送信するようにコントローラーを変更します。

                          まず、Authy API キーを含めるようにアプリの設定を変更しましょう。

                          Authyと協調動作するようアプリケーションを構成する

                          Authy の設定

                          secrets.yml には、アプリケーションの設定パラメーターがリストされています。ほとんどの設定パラメーターは、システム環境変数から取得されます。これは、機密に属する値(API キーなど)にアクセスするのに便利な方法です。これにより、それらの値を誤ってソースコントロールにチェックインすることが防止されます。

                          ここで、Authy プロダクションキーが必要となります(こちらで Authy にサインアップしてください)。Authy アプリケーションを作成する場合、プロダクションキーはダッシュボード上にあります。

                          Authy ダッシュボード

                                
                                
                                
                                
                                config/secrets.yml

                                次に、UserController まで飛び越えて Authy クライアントを設定し、インスタンスメソッドを作成してワンタイムパスワードを送信する必要があります。

                                アカウントの作成時にトークンを送信する

                                アカウント作成時のトークンの送信

                                ユーザーが authyId を取得したら、確認コードをそのユーザーの携帯電話に実際に送信できます。

                                最後のストーリーで実装したフォームでユーザーが正常に作成されたら、そのユーザーの携帯電話にトークンを送信してコントローラー内のアカウントを検証します。

                                      
                                      
                                      
                                      
                                      app/controllers/users_controller.rb

                                      コードの送信時には、送信されたトークンをユーザーが入力できる別のページにリダイレクトし、検証プロセスを完了します。

                                      ワンタイムパスワードの確認の処理方法をチェックしましょう!

                                      ユーザーストーリー:ワンタイムパスワードの検証

                                      ユーザーとして、サインアッププロセスを完了する前に、認証システムから携帯電話に送られたワンタイムパスワードを入力します。

                                      このストーリーは、次にユーザーが直面する検証プロセスのステップをカバーします。そのステップでは、ユーザーは送信されたコードを入力して、提供した電話番号の所持を確認します。このストーリーを完了するために行うべきことは以下のとおりです。

                                      • フォームを作成して、送信されたワンタイムパスワードをユーザーが入力できるようにします。
                                      • ルートとコントローラーを作成して、フォームの表示とワンタイムパスワードの送信処理を行います。
                                            
                                            
                                            
                                            
                                            app/views/users/show_verify.html.erb

                                            ワンタイムパスワードの確認用フォーム

                                            app/views/users/show_verify.html.erb

                                            The route definition in config/routes.rb is pretty straight-forward, so we'll skip that bit here. Let's begin instead with the verification form, which is created with the Embedded Ruby Template code you see here.

                                            検証フォーム

                                            このページには実際には2つのフォームがありますが、まずは最初のフォームに焦点を当てます。 最初のページには、検証用にサーバーに送信する確認コードの単一フィールドのみ存在します。

                                                  
                                                  
                                                  
                                                  
                                                  app/views/users/show_verify.html.erb

                                                  ワンタイムパスワードの確認用フォーム

                                                  app/views/users/show_verify.html.erb

                                                  ここで、このフォームを処理するコントローラーのコードを見てみましょう。

                                                  Set up your controller to verify the user's code

                                                  コードの検証:コントローラー

                                                  このコントローラー関数は、フォームの送信を処理します。この関数は以下の操作を行う必要があります。

                                                  • 現在のユーザーを取得します。
                                                  • ユーザーによって入力されたコードを検証します。
                                                  • 入力されたコードが有効な場合は、ユーザーモデルの boolean フラグを反転して、アカウントが検証されたことを示します。

                                                  コードの検証

                                                  Authyはuser idtoken、およびcallback functionを渡すことができるverifyメソッドを提供しています。 今回必要なのはAPIリクエストが成功したかどうかを確認し、成功の場合はuser.verifiedをtrueに設定することだけです。

                                                        
                                                        
                                                        
                                                        
                                                        app/controllers/users_controller.rb

                                                        Authy検証と確認を処理する

                                                        app/controllers/users_controller.rb

                                                        このストーリーについては、これで終わりです。ただし、何らかの理由でメッセージがエンドユーザーの電話機に届かない場合に確認コードを再送信する方法がなければ、検証フォームはあまり役立ちません。次に、それを見てみましょう。

                                                        見つからないコードを再送する

                                                        コードの再送信

                                                        コードを再送信するためのフォームは 1 行(show_verify.html.erb を参照)であるため、このチュートリアルではそのフォームをスキップすることにします。コントローラー関数だけを見てみましょう。

                                                        このコントローラーは、リクエストに関連付けられている User モデルをロードし、先に使用したものと同じ Authy API メソッドを使用してコードを再送信します。非常に単純明快です。

                                                              
                                                              
                                                              
                                                              
                                                              app/controllers/users_controller.rb

                                                              Authyコードを現在のユーザーに再送する

                                                              app/controllers/users_controller.rb

                                                              締めくくりに、ユーザーのアカウント作成と検証を確認するという最後のユーザーストーリーを実装しましょう。

                                                              ユーザーストーリー: アカウント作成の確認

                                                              ユーザーストーリー:アカウント作成の確認

                                                              ユーザーとして、成功ページを表示し、アカウントが正常に作成されたことを示すテキストメッセージを受信します。

                                                              このストーリーは、アカウントが正常に作成されて検証されたことをユーザーに示すことによってアカウント認証事例を完了します。このストーリーを実装するには、以下の操作を行う必要があります。

                                                              • ユーザーアカウントの作成と確認が成功した旨を知らせるページを表示します。
                                                              • アカウントが確認されたことを示すテキストメッセージをユーザーの電話に対して送信します。
                                                                    
                                                                    
                                                                    
                                                                    
                                                                    app/views/users/show.html.erb
                                                                    Set up a view to show a user's account details

                                                                    ユーザー詳細ページの表示

                                                                    この単純な .erb テンプレートは、ユーザー名を表示し、検証されたことをユーザーに知らせます。

                                                                    users/show/:id ルートを自動的に作成する Resource Routing を使用するようにルーターに伝えたため、ルーターはレンダリングする 'show.html.erb' テンプレートを自動的に検索します。

                                                                          
                                                                          
                                                                          
                                                                          
                                                                          app/views/users/show.html.erb

                                                                          ユーザーが検証されたことをブラウザーで確認するには、これで十分です。 次に、そのテキストメッセージを送信する方法を見てみましょう。

                                                                          Twilioを使用するようアプリケーションを構成する

                                                                          Twilio の設定

                                                                          Authy は SMS の抽象化と 2FA およびアカウント認証の処理に優れていますが、Authy を使用して任意のテキストメッセージを送信することはできません。Twilio API を直接使用して、その操作を行ってみましょう。

                                                                          「twilio-ruby」ヘルパーライブラリーを使用するのに必要なのは、Gemfileにそれをインクルードすることだけです。

                                                                          But first, we need to configure our Twilio account. We'll need three things, all of which can be found or set up through the Twilio console:

                                                                          • Twilio アカウント SID
                                                                          • Twilio Auth Token
                                                                          • テキストメッセージを送信できるアカウント内の Twilio 番号
                                                                                
                                                                                
                                                                                
                                                                                
                                                                                Gemfile

                                                                                これらの config 変数を見つけ出したら、インスタンス関数を作成して、メッセージをユーザーの電話に送信できます。

                                                                                Twilioを使用して確認SMSを送信する

                                                                                メッセージの送信: Twilio クライアントの使用

                                                                                Authy クライアントの場合と同様に、この例では @client という Twilio REST API ヘルパーの単一インスタンスを作成します。

                                                                                sms を送信するために次に行うべきことは、組み込みの messages.create() を使用して SMS をユーザーの電話に送信することです。国際番号を確実にサポートするために country_codephone_number を組み合わせていることに注意してください。

                                                                                      
                                                                                      
                                                                                      
                                                                                      
                                                                                      app/controllers/users_controller.rb

                                                                                      Twilioでユーザーにメッセージを送信する

                                                                                      app/controllers/users_controller.rb
                                                                                      コントローラーを更新し、このメッセージを送信します。

                                                                                      メッセージの送信:コントローラーの更新

                                                                                      コントローラーでは、新規ユーザーが正常に検証された後に、send_message を使用して、よい知らせを新規ユーザーに伝えます。

                                                                                            
                                                                                            
                                                                                            
                                                                                            
                                                                                            app/controllers/users_controller.rb

                                                                                            成功SMSを送信する

                                                                                            app/controllers/users_controller.rb

                                                                                            おめでとうございます! これでAuthyおよびTwilio SMSを使用したユーザーの登録、確認方法を身につけました。

                                                                                            関連トピック

                                                                                            次はどこでしょうか?

                                                                                            If you're a Ruby developer working with Twilio, you might want to check out these other tutorials:

                                                                                            ワンクリック通話

                                                                                            ウェブページのボタンを押して、電話を介して訪問者をライブサポートまたはセールス担当者に接続します。

                                                                                            自動アンケート

                                                                                            音声通話または SMS テキストメッセージを介して調査を実施し、ユーザーから構造化データを迅速に収集します。

                                                                                            これは役に立ちましたか?

                                                                                            このチュートリアルをお読みいただき、ありがとうございます。 ご意見やご感想などございましたら、ぜひお聞かせください。 Twitterからご連絡いただき、どんなものを構築されているかお聞かせください!

                                                                                            Jarod Reyes Jose Oliveros Agustin Camino Kat King Samuel Mendes Hector Ortega
                                                                                            Rate this page:

                                                                                            ヘルプが必要ですか?

                                                                                            We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.