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

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

* 動画でサインアップからログインまでのフローを確認出来ます。
https://cl.ly/21380X410U0h

* サンプルサインアップページ
https://get.ringcaptcha.com/king-authr-signup-2/

* サンプルログインページ
https://get.ringcaptcha.com/king-authr-login-2/ 
＊ログインページで動作確認する場合は、先にサインアップページで登録をお願いします。<br>

* こちらからコードの動作確認が出来ます。
サインアップコード: https://jsfiddle.net/ringcaptcha/Lmyx3e0k/1/
ログインコード: https://jsfiddle.net/ringcaptcha/q6khsojk/3/

* 本文中のサンプルを動作させるには以下の外部jsファイルをインクルードして下さい。
JQuery: https://code.jquery.com/jquery-3.1.1.min.js
RingCaptcha JS: https://s3.amazonaws.com/ringcaptcha-test/widget/jwt-20180226-b/bundle.js

###ステップは３つあります。
---
1. HTML divクラスをサインアップ、ログインページの表示させたい箇所に追加
1. RingCaptchaのアカウント作成
1. Javascriptのスクリプトをサインアップ、ログインページに追加


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

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

```html
<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](https://ringcaptcha.com/ja?utm_source=qiita&utm_campaign=passwrodless&utm_content=article)
こちらからRingCaptchaのアカウントを作成して下さい。 [https://my.ringcaptcha.com/register](https://my.ringcaptcha.com/register?utm_source=qiita&utm_campaign=passwordless&utm_content=article)
メール認証完了後、RingCaptchaへログインし、アプリを作成します。


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

![Ringcaptcha_createnew_app1.png](https://qiita-image-store.s3.amazonaws.com/0/192668/c54efbac-ba09-7096-a410-8220237c9607.png)


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

![RingCaptcha_create_new2.png](https://qiita-image-store.s3.amazonaws.com/0/192668/9e7e5640-4b69-550a-5f3c-2f91e406e514.png)


* Step 1の‘App Type’ で ‘Web’を選択します。
* Step 2で、あなたのサービスのドメインネームを入力します。
* 最後に、オレンジ色の ‘Create App’をクリックします。

![RingCaptcha_create_app.png](https://qiita-image-store.s3.amazonaws.com/0/192668/fb352c37-2d2f-8dc1-77a0-33468165a29e.png)

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

![RingCaptcha_customize.png](https://qiita-image-store.s3.amazonaws.com/0/192668/55aeb12e-c040-d7c1-89b4-7eafc8bfb018.png)


* ポップアップの「ADVANCED」をクリックします。
* 表示されるリストの中から'Enable User Management integration'を探し、チェックして下さい。

![RingCaptcha_customize_App.png](https://qiita-image-store.s3.amazonaws.com/0/192668/c2da7ea8-1031-1ed5-f392-da3ec693842d.png)

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

![RingCaptcha_App_Key.png](https://qiita-image-store.s3.amazonaws.com/0/192668/959384fe-be13-b6a0-4e5a-33dc8d9b7bfe.png)

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

* サインアップフォーム

* 下記のJavascriptを、あなたのサインアップページに追加して下さい。
* ステップ２.で取得したAppKey1を下記コードのAppKey1と置き換えて下さい。


```html: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と置き換えて下さい。

```html: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](https://ringcaptcha.com/ja?utm_source=qiita&utm_campaign=passwrodless&utm_content=article)