Ejemplo de cliente de la API utilizando html y javascript. Puede descargar un proyecto funcional con ejemplos de uso de la API de IRadius.
Código de ejemplo html. Para construir un ejemplo de cliente de la API de Iradius, cree un nuevo archivo html y pege el contenido del código html.
El siguiente ejemplo muestra como realizar llamadas a la API de IRadius 2.0 utilizando Jquery y Ajax. Copie el codigo dentro de un archivo llamado Scripts\test.js (el archivo está alojado dentro de una carpeta llamada scripts).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--JQUERY-->
<script src="https://code.jquery.com/jquery-1.12.4.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<!--API IRADIUS CLIENT SAMPLE SCRIPT-->
<script src="Scripts/apiiradiusclient.js" type="text/javascript">
</script>
<meta charset="utf-8" />
<title>
</title>
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
.body-content {
padding-left: 15px;
padding-right: 15px;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<a class="navbar-brand">
IRadius Api sample client</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="#">
Home</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<h2>
Api</h2>
<div class="row">
<div class=" col-xs-10 col-xs-offset-1 form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label">
Token</label>
<div class="col-sm-10 col-xs-12">
<input type="text" id="intoken" class="form-control" value="" placeholder="Input Valid Token" />
</div>
</div>
<hr />
<div class="form-group">
<button class="btn btn-info col-sm-2" type="button" onclick="GetCurrentUser()">
Usuario</button>
<div class="col-sm-10">
<input type="text" class="form-control" id="inUser">
</div>
</div>
<div class="form-group">
<button class="btn btn-info col-sm-2" type="button" onclick="GetCustomers()">
Obtener Clientes</button>
<div class="col-sm-10">
<select name="lstCustomers" id="lstCustomers" onchange="OnChangeLstCustomers()" class="form-control">
</select>
</div>
</div>
<div class="form-group">
<button class="btn btn-info col-sm-2" type="button" onclick="GetAvailableHotspots()">
Obtener Hotspots</button>
<div class="col-sm-10">
<select id="lstHotspots" class="form-control">
</select>
</div>
</div>
<div class="form-group">
<button class="btn btn-info col-sm-2" type="button" onclick="GetAvailableTypes()">
Tipos Disponibles</button>
<div class="col-sm-10">
<select id="lstTypes" class="form-control">
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="row">
<div class=" col-sm-2 col-sm-offset-1">
<div class="form-group">
<button class="btn btn-info" type="button" onclick="GetCredentials('false')">
Obtener credenciales</button>
</div>
<div class="form-group">
<button class="btn btn-info" type="button" onclick="GetCredentials('true')">
Cuentas con email</button>
</div>
</div>
<div class=" col-xs-8 form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2">
Fecha Inicio</label>
<div class="col-sm-3">
<input type="datetime" id="dateini" class="form-control">
</div>
<label class="control-label col-sm-2">
Fecha Fin</label>
<div class="col-sm-3">
<input type="datetime" id="dateend" class="form-control">
</div>
</div>
</div>
</div>
<div class=" col-xs-10 col-xs-offset-1 form-horizontal">
<div class="form-group">
<button class="btn btn-info col-sm-2" type="button" onclick="GenerateCredentials()">
Generar Credenciales</button>
<label class="control-label col-sm-2">
Cantidad</label>
<div class="col-sm-8">
<input type="range" id="inQuantity" min="1" max="100" value="1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-10 col-xs-offset-1 form-horizontal">
<div class="form-group">
<button class="btn btn-info col-sm-2" type="button" onclick="GenerateCredentials()">
Generar Credenciales</button>
<label class="control-label col-sm-2">
Cantidad</label>
<div class="col-sm-8">
<input type="range" id="inQuantity" min="1" max="100" value="1" class="form-control">
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid body-content">
<div class="row">
<div class="col-xs-12">
<div class="table-responsive" id="tableresult">
<table class="table table-striped">
<thead>
<tr>
<th>
Usuario</th>
<th>
Contraseña</th>
</tr>
</thead>
<tbody id="tbbody">
</tbody>
</table>
</div>
</div>
</div>
<hr />
<footer>
<p>
© 2019 - IRadius 2.0 api sample client</p>
</footer>
</div>
</body>
</html>
var ApiUrl = "https://api.iradius.es/api/v101";
var Loading = false;
function token() {
return document.getElementById('intoken').value;
}
function ApiAjaxCall(method, type, data, CallbackFunction) {
$.ajax({
url: ApiUrl + '/' + method,
type: type,
dataType: "json",
data: data,
async: true,
headers: { "token": token() },
success: function (result) {
CallbackFunction(result);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(textStatus);
}
});
}
function AlertResultJson(result) {
alert(JSON.stringify(result));
}
function SetInputValue(controlname, value) {
document.getElementById(controlname).value = value;
}
function SetSelectOptions(controlname, data, ValueProperty, DescriptionProperty) {
var options = '';
for (var i = 0; i < data.length; i++) {
options += '<option value="' + data[i][ValueProperty] + '">' + data[i][DescriptionProperty] + '</option>';
}
document.getElementById(controlname).innerHTML = options;
}
//User
function GetCurrentUser() {
ApiAjaxCall('User', 'GET', null, SetUserName);
}
function SetUserName(result) {
document.getElementById('inUser').value = JSON.stringify(result);
}
//AvailableCustomers
function GetCustomers() {
ApiAjaxCall("AvailableCustomers", "GET", null, SetCustomers);
}
function SetCustomers(result) {
Loading = true;
SetSelectOptions("lstCustomers", result, "Id", "Name");
Loading = false;
}
function OnChangeLstCustomers() {
if (Loading) return;
GetAvailableHotspots();
GetAvailableTypes();
}
//AvailableHotspots
function GetAvailableHotspots() {
var lst = document.getElementById("lstCustomers");
var CustomerId = lst.options[lst.selectedIndex].value;
var data = { CustomerId: CustomerId };
ApiAjaxCall('AvailableHotspots', 'GET', data, SetAvailableHotspots);
}
function SetAvailableHotspots(result) {
SetSelectOptions("lstHotspots", result, "Id", "Description");
}
//AvailableTypes
function GetAvailableTypes() {
var lst = document.getElementById("lstCustomers");
var CustomerId = lst.options[lst.selectedIndex].value;
var data = { CustomerId: CustomerId };
ApiAjaxCall('AvailableTypes', 'GET', data, SetAvailableTypes);
}
function SetAvailableTypes(result) {
SetSelectOptions("lstTypes", result, "TypeId", "Description");
}
//GenerateCredentials
function GenerateCredentials() {
var lst = document.getElementById("lstCustomers");
var CustomerId = lst.options[lst.selectedIndex].value;
lst = document.getElementById("lstHotspots");
var HotspotId = lst.options[lst.selectedIndex].value;
lst = document.getElementById("lstTypes");
var TypeId = lst.options[lst.selectedIndex].value;
var Quantity = document.getElementById("inQuantity").value;
var data = {
"Quantity": Quantity,
TypeId: TypeId,
"CustomerId": CustomerId,
"HotSpotId": HotspotId
};
var d2 = JSON.stringify(data);
ApiAjaxCall('GenerateCredentials', 'POST', data, GetGenerateCredentialsResult);
}
//GetCredentials
function GetCredentials(FilterEmails) {
var lst = document.getElementById("lstCustomers");
var CustomerId = lst.options[lst.selectedIndex].value;
lst = document.getElementById("lstHotspots");
var HotspotId = lst.options[lst.selectedIndex].value;
lst = document.getElementById("lstTypes");
var dateini = document.getElementById("dateini").value;
var dateend = document.getElementById("dateend").value;
var data = {
"CustomerId": CustomerId,
"HotSpotId": HotspotId,
"DateIni": dateini,
"DateEnd": dateend,
"FilterEmails": FilterEmails
};
var d2 = JSON.stringify(data);
ApiAjaxCall('Credentials', 'GET', data, GetCredentialsResult);
}
function GetCredentialsResult(result) {
var r = "<table class='table table-striped'><thead><tr><th>Usuario</th><th>Email</th><th>Nombre</th><th>Tipo</th><th>F.nac</th>";
r +="<th>Cod. Pos</th><th>Field1</th><th>Field2</th><th>Filed3</th><th>Info</th><th>Es hombre?</th><th>id Tipo</th><th>F. Creación</th><th>Origen</th><th></th></tr></thead><tbody id='tbbody'>";
for (var i = 0; i < result.length; i++) {
r += '<tr><td>' + result[i].UserName + '</td>'
+ '<td>' + result[i].Email + '</td>'
+ '<td>' + result[i].NAME + '</td>'
+ '<td>' + result[i].TypeDescription + '</td>'
+ '<td>' + result[i].BIRTHDATE + '</td>'
+ '<td>' + result[i].CODPOS + '</td>'
+ '<td>' + result[i].FIELD1 + '</td>'
+ '<td>' + result[i].FIELD2 + '</td>'
+ '<td>' + result[i].FIELD3 + '</td>'
+ '<td>' + result[i].INFO + '</td>'
+ '<td>' + result[i].IsMale + '</td>'
+ '<td>' + result[i].TypeId + '</td>'
+ '<td>' + result[i].CREATION_DATE + '</td>'
+ '<td>' + result[i].SourceType + '</td>'
+ '</tr > ';
}
r += "</tbody ></table>";
document.getElementById("tableresult").innerHTML = r;
}
function GetGenerateCredentialsResult(result) {
var r = "<table class='table table-striped'><thead><tr><th>Usuario</th><th>Contraseña</th></tr></thead><tbody id='tbbody'>";
for (var i = 0; i < result.CredentialsResults.length; i++) {
r += '<tr><td>' + result.CredentialsResults[i].UserName + '</td><td>' + result.CredentialsResults[i].Password + '</td></tr>';
}
r +="</tbody ></table>";
document.getElementById("tableresult").innerHTML = r;
}