search

twilio / authy-form-helpers

Authy javascripts and css file to help create quick forms for the authy api
83 stars 39 forks source link

readme

Authy Forms Helpers

This javascripts and stylesheets help you build your Registration and Verification forms to use Authy quicker. They include:

  1. An awesome countries dropdown that selects between country name and country code

  2. Some javascripts validations on tokens and cellphones

  3. A tooltip you can use to add a help message when you ask for the token

CDN

You can copy manually the javascripts and stylesheets into your project or you can simply use authy website to serve them:

Compressed CSS: https://www.authy.com/form.authy.min.css"
Compressed JS: https://www.authy.com/form.authy.min.js"

Add this in your HTML \<head>

<link href="https://www.authy.com/form.authy.min.css" media="screen" rel="stylesheet" type="text/css">
<script src="https://www.authy.com/form.authy.min.js" type="text/javascript"></script>

or you can use CloudFlare CDN:

Compressed CSS: //cdnjs.cloudflare.com/ajax/libs/authy-form-helpers/2.3/form.authy.min.css
Compressed JS:  //cdnjs.cloudflare.com/ajax/libs/authy-form-helpers/2.3/form.authy.min.js

<link href="https://github.com/twilio/authy-form-helpers/blob/master//cdnjs.cloudflare.com/ajax/libs/authy-form-helpers/2.3/form.authy.min.css" media="screen" rel="stylesheet" type="text/css">
<script src="https://github.com/twilio/authy-form-helpers/raw/master//cdnjs.cloudflare.com/ajax/libs/authy-form-helpers/2.3/form.authy.min.js" type="text/javascript"></script>

Registration form (user enabling two factor)

In this form you need the country code and the user cellphone

Get the Countries Dropdown:

Add authy-countries id to the Country input.

<select id="authy-countries"></select>

To see a demo open sample/register.html and look at the Country input.

Display the country code as number

Add data-show-as="number" to the Country input.

<select id="authy-countries" data-show-as="number"></select>
Set the default country code

Add data-value="+{country_code}" to the Country input.

<select id="authy-countries" data-value="+57"></select>
Cellphone validations:

Add authy-cellphone id to the cellphone input.

<input id="authy-cellphone"  type="text" value=""/>

To see a demo open sample/register.html and look at the cellphone input.

Two-factor verification form

On this form the user enters his token which he gets from his cellphone

Token validation

To see a demo open sample/login.html and look at the cellphone input.

Add authy-token id to the input.

<input id="authy-token"  type="text" value=""/>

To see a demo open sample/login.html and look at the cellphone input.

Authy input logo

To see a demo open sample/login.html and look at the cellphone input.

Add authy-token id to the input.

<input id="authy-token"  type="text" value=""/>

To see a demo open sample/login.html and look at the cellphone input.

Help tooltip

First set the help message you want:

var authyUI = Authy.UI.instance();
authyUI.setTooltip("Two-Factor", "Get this token from your cellphone");

Add authy-help id to the link.

<a href="#" id="authy-help">help</a>

To see a demo open sample/login.html and look at the cellphone input.

Need help?

Contact us via https://support.authy.com

Copyright

Copyright (c) 2013-2020 Authy Inc. See LICENSE.txt for further details.