JWT项目-Firebase/Php-JWT-简介
时间：2020-02-23 14:46:19 来源:igfitidea点击:
在本项目教程中，我们将创建一个新的Php项目，并将使用Firebase/Php-JWT包生成JSON Web令牌。
在简介教程中，我们了解了JWT。
随时检查一下。
需求
对于该项目，我们将需要以下内容。
本地PHP开发环境。
尝试MAMP/XAMPP/WAMP。编写程序包管理器。
firebase/php-jwt软件包以生成JWT并对其进行验证。
您可以在我的GitHub存储库jwt-php-project中找到该项目的代码。
让我们开始吧。
创建一个新项目
打开您喜欢的文本编辑器或者IDE，然后创建一个新的PHP项目文件夹。
对于本教程，我要命名我的项目jwt-php-project。
$mkdir jwt-php-project && cd jwt-php-project
获取firebase/php-jwt软件包
使用composer获取firebase/php-jwt软件包，并输入以下命令composer require firebase/php-jwt。
$composer require firebase/php-jwt Using version ^5.0 for firebase/php-jwt ./composer.json has been created Loading composer repositories with package information Updating dependencies (including require-dev) Package operations: 1 install, 0 updates, 0 removals - Installing firebase/php-jwt (v5.0.0) Downloading: 100% Writing lock file Generating autoload files
在撰写本教程时，我正在使用firebase/php-jwt版本5.0.0。
上面的命令将创建vendor目录，并其中下载firebase/php-jwt软件包。
创建index.php文件
在项目文件夹中创建一个index.php文件。
在此文件中，我们将创建一个登录表单。
创建一个登录表单
在index.php文件中，创建一个登录表单。
<form id="login">
<div class="form-group">
<label for="email">Email</label>
<input type="email"
maxlength="255"
class="form-control"
id="login-email"
required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password"
maxlength="32"
class="form-control"
id="login-password"
required>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Log in">
</div>
</form>
该表单包含一个电子邮件字段，一个密码字段和一个登录按钮。
成功登录后，它将为用户生成一个JWT，稍后我们将使用它来获取用户详细信息。
创建一个script.js文件
在项目文件夹中，在js文件夹中创建一个script.js文件。
这将保存JavaScript代码以从服务器发送和接收数据。
将此文件包含在index.php文件中。
index.php文件
我们的索引页面将如下所示。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>JWT PHP Project by </title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 offset-sm-4 col-sm-4">
<h3 class="text-center">jwt-php-project</h3>
<br>
<h4 class="text-center">Login</h4>
<form id="login">
<div class="form-group">
<label for="email">Email</label>
<input type="email"
maxlength="255"
class="form-control"
id="login-email"
required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password"
maxlength="32"
class="form-control"
id="login-password"
required>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Log in">
</div>
</form>
</div>
<div class="col-xs-12 offset-sm-4 col-sm-4">
<hr>
<div id="result-container"></div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
现在，我们的项目index.php页面将如下所示。
