JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js"></script>
<script src="https://s3.amazonaws.com/ringcaptcha-test/widget/jwt-20180219/bundle.js"></script>
<div id='widget-point'>
</div>
JavaScript
$(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 = "hy2o7ujafi5ene6o4y7a";
var oauthioKey = 'HwAr2OtSxRgEEnO2-JnYjsuA3tc';
//var userManagementId = 'b4b71f847b2ca58978df96';
var userManagementId = '0bb071d01611abdf8e76c3';
var settings = $(this).data();
// Initialize the SDK
OAuth.initialize(oauthioKey)
settings.app = appKey;
settings.events = {
ready: function(event) {
console.log("Ready: event:", event);
const dataString = localStorage.getItem('ringcaptcha.widget.' + appKey);
const data = dataString ? JSON.parse(dataString) : null;
console.log("Ready: data:", data);
},
verified: function(event) {
console.log("Verified: event:", event);
const dataString = localStorage.getItem('ringcaptcha.widget.' + appKey);
const data = dataString ? JSON.parse(dataString) : null;
console.log("Verified: data:", data);
},
login: function(event, formValues) {
console.log("Login: event:", event);
console.log("Login: formValues:", formValues);
const dataString = localStorage.getItem('ringcaptcha.widget.' + appKey);
const data = dataString ? JSON.parse(dataString) : null;
console.log("Login: data:", data);
console.log("Login success for:", formValues.login);
}
};
settings.form = [
{
id: 'email',
placeholder: 'Email',
type: 'text'
},
{
id: 'pin',
type: 'pin'
}
];
settings.userManagement = true;
settings.phoneLogin = true;
settings.userManagementAppId = userManagementId;
new RingCaptcha.Widget(this, settings.app, settings);
});
});