How to create API Key Generator

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.

Api Key Generator

Demo:

Prerequisites:

  1. Bootstrap 4
  2. 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/[email protected]/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/[email protected]/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>

About Ashis Biswas

A web developer who has a love for creativity and enjoys experimenting with the various techniques in both web designing and web development. If you would like to be kept up to date with his post, you can follow him.

Leave a Comment