@RingCaptcha
Edited at

Webサイトへ２要素認証を導入、パスワード無しでサインアップ、ログイン機能を実装！！！

JavaScriptOTPパスワードなしログイン機能SMS認証


この記事では、RingCaptchaの電話番号認証を使って、パスワード無しでのサインアップ、ログイン機能の実装方法を紹介します。


ステップは３つあります。


  1. HTML divクラスをサインアップ、ログインページの表示させたい箇所に追加

  2. RingCaptchaのアカウント作成

  3. Javascriptのスクリプトをサインアップ、ログインページに追加


ステップ 1. 下記divタグをサインアップ、ログインページの表示させたい箇所に追加して下さい。


  • HTML divクラスをサインアップ、ログインページの表示させたい箇所に追加します。(既存のサインアップ、ログインフォームより前に追加することをお勧めします。)

<html>

 …

 <body>

   …

   <div id=”widget-point”></div>

   …

   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

   <script src="https://s3.amazonaws.com/ringcaptcha-test/widget/jwt-20180226-b/bundle.js"></script>

 </body>

</html>


ステップ２. RingCaptchaのアカウント作成


  • RingCaptchaアカウント開設から導入まで。

    Ringcaptchaについてはこちらをご確認下さい。https://ringcaptcha.com/ja

    こちらからRingCaptchaのアカウントを作成して下さい。 https://my.ringcaptcha.com/register

    メール認証完了後、RingCaptchaへログインし、アプリを作成します。


  • ‘Create New App’をクリックします。


Ringcaptcha_createnew_app1.png


  • 次の画面で、オレンジ色の‘Create new’をクリックします。

RingCaptcha_create_new2.png


  • Step 1の‘App Type’ で ‘Web’を選択します。

  • Step 2で、あなたのサービスのドメインネームを入力します。

  • 最後に、オレンジ色の ‘Create App’をクリックします。

RingCaptcha_create_app.png


  • 次に作成したアプリの右側にある、歯車のマークをクリックします。

RingCaptcha_customize.png


  • ポップアップの「ADVANCED」をクリックします。

  • 表示されるリストの中から'Enable User Management integration'を探し、チェックして下さい。

RingCaptcha_customize_App.png


  • AppKey１をメモします。このApp Keyはステップ3.で使用します。

  • AppKey2を取得する為に、画面右下の吹き出しマークをクリックして、

  • "I want to get AppKey2 for user management"と入力して下さい。

  • AppKey2をご連絡致します。AppKey2を取得したら、ステップ3.へ進みます。

RingCaptcha_App_Key.png


ステップ３. スクリプトをサインアップ、ログインページに追加します。


  • サインアップフォーム


  • 下記のJavascriptを、あなたのサインアップページに追加して下さい。


  • ステップ２.で取得したAppKey1を下記コードのAppKey1と置き換えて下さい。



Signup

<script>

$(document).ready(function() {

    $('#widget-point').append(

      '<div id="xyz" data-widget data-locale="ja" data-mode="signup" data-type="dual"></div>'

    );

    $('#xyz').each(function() {

      var appKey = "App Key 1";        //ステップ２.で取得したAppKey１と置き換えて下さい。

      var settings = $(this).data();

      settings.app = appKey;

      settings.events = {

        signup: function(event, formValues) {

          console.log("Signup: formValues:", formValues);

        }

      };

      settings.form = [

        {

          id: 'email',

          type: 'email',

          placeholder: 'メールアドレス',

          validations: {

            presence: 'メールアドレスを入力して下さい。',

            format: { message: '無効なメールアドレスです。' }

          }

        },

        {

          id: 'phone',

          type: 'phone',

          validations: {

            length: { min: 5, max: 15, message: '無効な電話番号です。' }

          }

        }

      ];

      settings.userManagement = true;

      new RingCaptcha.Widget(this, settings.app, settings);

    });

  });

</script>


  • ログインフォーム


  • 下記のJavascriptを、あなたのログインページに追加して下さい。


  • ステップ２.で取得した、AppKey1,AppKey2を下記コードのAppKey1,AppKey2と置き換えて下さい。



Login

<script>

$(document).ready(function() {

    $('#widget-point').append(

      '<div id="xyz" data-widget data-locale="ja" data-mode="login" data-type="dual"></div>'

    );



    $('#xyz').each(function() {

      var appKey = 'App Key 1';              //ステップ２.で取得したAppKey１と置き換えて下さい。　　　　　

      var userManagementAppId = 'App Key 2'; //ステップ２.で取得したAppKey２と置き換えて下さい。

      var settings = $(this).data();

      settings.app = appKey;

      settings.events = {

        login: function(event, formValues) {

        console.log("Login: formValues:", formValues);

        }

      };

      settings.form = [

        {

          id: 'email',

          type: 'text',

          placeholder: 'メールアドレス'

        },

        {

          id: 'pin', 

          type: 'pin'

        }

      ];

      settings.userManagement = true;

      settings.phoneLogin = true;

      settings.userManagementAppId = userManagementAppId;



      new RingCaptcha.Widget(this, settings.app, settings);

    });

  });

</script>


まとめ

たったこれだけでのコーディングで、パスワード無しでサインアップ、ログイン機能を実装出来ました。

RingCaptchaの詳細はこちらから、ご確認出来ます。https://ringcaptcha.com/ja

Edit request
0