0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-04-16

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


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


  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>

ステップ2. 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

  • AppKey1をメモします。このApp Keyはステップ3.で使用します。
  • AppKey2を取得する為に、画面右下の吹き出しマークをクリックして、
  • "I want to get AppKey2 for user management"と入力して下さい。
  • AppKey2をご連絡致します。AppKey2を取得したら、ステップ3.へ進みます。

RingCaptcha_App_Key.png

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


  • サインアップフォーム

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

  • ステップ2.で取得した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";        //ステップ2.で取得したAppKey1と置き換えて下さい。
      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を、あなたのログインページに追加して下さい。

  • ステップ2.で取得した、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';              //ステップ2.で取得したAppKey1と置き換えて下さい。     
      var userManagementAppId = 'App Key 2'; //ステップ2.で取得したAppKey2と置き換えて下さい。
      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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?