如何创建API密钥生成器目录介绍。演示。先决条件。代码。介绍。我们经常需要API密钥生成器来为一些软件、W

介绍

我们经常需要API密钥生成器来为一些软件、Web应用程序建立一个许可系统。在这个教程中，我将告诉你如何在jQuery中创建一个API密钥生成器。

这个脚本将随机地生成API密钥。你可以在你的系统中实现这个代码。

演示

先决条件

Bootstrap 4
jQuery

代码

<!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>