CONTENTS
Introduction:
We often need the API key Generator for some Softwares, Web Application to make a licensing system. In this tutorial I will show you how to create an API key generator in jQuery.
This script will randomly generate API Keys. You can implement this code in your system.
Demo:
Prerequisites:
- Bootstrap 4
- jQuery
Code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<title>Generate API Key Demo - CodeHasBug</title>
<meta name="description" content="This is a demo of API key generator" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="icon" href="https://codehasbug.com/wp-content/uploads/2021/06/gblogo.png" sizes="32x32" />
<link rel="icon" href="https://codehasbug.com/wp-content/uploads/2021/06/gblogo.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://codehasbug.com/wp-content/uploads/2021/06/gblogo.png" />
<meta name="msapplication-TileImage" content="https://codehasbug.com/wp-content/uploads/2021/06/gblogo.png" />
<style>
.spacer{
position: relative;
height: 80px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 mt-5 text-center">
<h1>Api Key Generator</h1>
</div>
</div>
<div class="row justify-content-center mt-3">
<div class="col-8">
<input type="text" id="api" class="form-control text-center read-only" placeholder="Generate New API key">
</div>
</div>
<div class="row justify-content-center mt-3">
<div class="col-6">
<button id="genApi" class="btn btn-danger btn-block">Generate API Key</button>
</div>
<div class="col-6">
<a href="" class="btn btn-info btn-block">Back To tutorial</a>
</div>
</div>
<div class="spacer"></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
$("#genApi").click( function(){
var d = new Date().getTime();
if( window.performance && typeof window.performance.now === "function" ){
d += performance.now();
}
var api= 'xxxxxxxx-xxxx-6xxx-yxxx-xxxxxx5xxxxx'.replace(/[xy]/g, function(c){
var r = (d + Math.random()*16)%16 | 0;
d = Math.floor(d/16);
return (c=='x' ? r : (r&0x3|0x8)).toString(16);
});
$("#api").val(api);
});
});
</script>
</body>
</html>
