_anlnq
Last Updated: May 19, 2018
·
1.651K
· donaltobin

Passwordless Signup and Login Forms Using Phone Number Verification

Purpose

This post shows how you can add passwordless login to your site or app in minutes.

Outcome

View outcome here

Fully Functional Code

Test site for both signup and login forms:

https://get.ringcaptcha.com/king-authr-signup-2/

https://get.ringcaptcha.com/king-authr-login-2/
(Note you must signup on on signup page before being able to test log in page)

JSFiddle for signup form: https://jsfiddle.net/ringcaptcha/Lmyx3e0k/1/

JSFiddle for login form: https://jsfiddle.net/ringcaptcha/q6khsojk/3/

External Resources

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

General Steps

  1. Create app on RingCaptcha
  2. Add app keys to your signup and login forms
  3. Add signup and login forms to your signup and login pages

1. Create app on RingCaptcha

Sign up for RingCaptcha at https://my.ringcaptcha.com/register

Screen Shot 2018-03-12 at 12.01.17 PM.png

Go to https://my.ringcaptcha.com/apps and click ‘Create App’

Screen Shot 2018-03-12 at 12.08.08 PM.png

Select ‘Web’ as app type. Add the domain name for the website the forms will be on. Click ‘Create App’

Screen Shot 2018-03-12 at 12.12.47 PM.png

Click on the ‘Customize’ icon

Screen Shot 2018-03-12 at 2.39.57 PM.png

Click on the ‘Advanced’ tab and then check the ‘Enable User Management integration’. Then click ‘Save changes’.

Screen Shot 2018-03-12 at 2.41.59 PM.png

You now have your first app key which you will need for Step 2. In order to get your second app key, message the RingCaptcha team through the live chat on their site: https://ringcaptcha.com
Screen Shot 2018-03-12 at 12.22.46 PM.png

Once you get your second app key from RingCaptcha, you are ready to proceed to Step 2.

2. Add app keys to your signup and login forms

Signup Form:

Replace App Key 1 with app key from the RingCaptcha dashboard.

$(document).ready(function() {
    $('#widget-point').append(
      '<div id="xyz" data-widget data-locale="en" data-mode="signup" data-type="dual"></div>'
    );
    $('#xyz').each(function() {
      var appKey = "App Key 1";
      var settings = $(this).data();
      settings.app = appKey;
      settings.events = {
        signup: function(event, formValues) {
          console.log("Signup: formValues:", formValues);
          window.location.replace('https://get.ringcaptcha.com/king-authr-login-2');
        }
      };
      settings.form = [
        {
          id: 'email',
          type: 'email',
          placeholder: 'Email',
          validations: {
            presence: 'Email should be present',
            format: { message: 'Invalid email' }
          }
        },
        {
          id: 'phone',
          type: 'phone',
          validations: {
            length: { min: 5, max: 15, message: 'Invalid phone' }
          }
        }
      ];
      settings.userManagement = true;
      new RingCaptcha.Widget(this, settings.app, settings);
    });
  });

Login form:

Replace App Key 1 with app key from the RingCaptcha dashboard.
Replace App Key 2 with the app key you received from RingCaptcha team on their live chat

$(document).ready(function() {
    $('#widget-point').append(
      '<div id="xyz" data-widget data-locale="en" data-mode="login" data-type="dual"></div>'
    );

    $('#xyz').each(function() {
      var appKey = 'App Key 1';
      var userManagementAppId = 'App Key 2';
      var settings = $(this).data();
      settings.app = appKey;
      settings.events = {
        login: function(event, formValues) {
        console.log("Login: formValues:", formValues);
        }
      };
      settings.form = [
        {
          id: 'email',
          type: 'text'
        },
        {
          id: 'pin', 
          type: 'pin'
        }
      ];
      settings.userManagement = true;
      settings.phoneLogin = true;
      settings.userManagementAppId = userManagementAppId;

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

3. Add signup and login forms to your signup and login pages

Add the signup and login code snippets from Step 2 and the following HTML snippets to respective signup and login pages on your website.
<div id='widget-point'> </div>

Say Thanks
Respond