Com certeza você já se deparou com aquele serviço de autenticação por meio de código enviado através de um SMS para o seu celular.
Sem dúvida essa forma de autenticação é muito prática e eficiente. Mas como fazer para disponibilizá-la no sistema que você está desenvolvendo?
Existe um serviço pronto para ser utilizado, e sua implementação é muito simples e rápida. Seu nome é RingCaptcha, e com ele você poderá adicionar, em minutos, um cadastro sem senha em seu site ou aplicativo.
Antes de vermos o código, vamos a alguns links bem úteis para os desenvolvedores.
Links de teste
Site de teste para formulários de cadastro e login:
- Sign-up com King Authr: https://get.ringcaptcha.com/king-authr-signup-2/
- Login com Authr: https://get.ringcaptcha.com/king-authr-login-2/
Observação: é preciso ser cadastrado no site para poder realizar todos os testes.
A própria ferramenta já disponibiliza alguns códigos que podem ser vistos através de um link do JSFiddle.
- Formulário de cadastro: https://jsfiddle.net/ringcaptcha/Lmyx3e0k/1/
- Formulário de login: https://jsfiddle.net/ringcaptcha/q6khsojk/3/
Passo a passo
Para o funcionamento do RingCaptcha você irá precisar de dois arquivos .js. O já conhecido JQuery e RingCaptcha JS. Eles poderão ser importados através dos links:
- 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. Crie um app na RingCaptcha
Faça seu cadastro na RingCaptcha em https://my.ringcaptcha.com/register
Vá para https://my.ringcaptcha.com/apps e clique em “Create App”
Selecione ‘web’ como tipo de app. Adicione o nome do domínio do site onde os formulários estarão. Clique em ‘Create App’
Clique no ícone de ‘Customize’
Clique na aba ‘Advanced’ e marque “Enable User Management Integration’. Clique em ‘Save Changes’.
Dessa forma você conseguirá a primeira chave do aplicativo, que será utilizada no segundo passo. Para conseguir sua segunda chave de aplicativo, envie uma mensagem para o time da RingCaptcha pelo chat ao vivo no site https://ringcaptcha.com/
Assim que você receber sua segunda chave da RingCaptcha você estará pronto para seguir para o passo 2.
2. Adicione as chaves do app em seus formulários de cadastro e login
Para criar o formulário de cadastro utilizaremos o seguinte código. Será apenas necessário substituir o valor da variável appKey, pela primeira chave do app conseguida no site do RingCaptcha.
$(document).ready(function() { $('#widget-point').append( '' ); $('#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); }); });
Para criação do formulário de login, utilizaremos o seguinte código.
Não se esqueça, de mais uma vez, substituir os valores das variáveis appKey e userManagementAppId, sendo a appKey pela primeira chave conseguida no site e a userManagementAppId pela chave conseguida através do chat.
$(document).ready(function() { $('#widget-point').append( '' ); $('#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. Adicione os formulários em suas páginas de cadastro e login
Adicione os snippets de código do cadastro e login do Passo 2 e o HTML a seguir às páginas de cadastro e login de seu site, respectivamente.