如何使用json开发web

by Sudheesh Shetty

由Sudheesh Shetty

如何通过使用JSON Web令牌简化应用程序的身份验证 (How to simplify your app’s authentication by using JSON Web Token)

Every application we come across today implements security measures so that the user data is not misused. Security is always something that is changing and evolving. Authentication is one of the essential part of every application.

我们今天遇到的每个应用程序都实施安全措施，以便不会滥用用户数据。 安全始终是不断变化和发展的事物。 身份验证是每个应用程序必不可少的部分之一。

There are various ways to authenticate the user. Let us discuss token based authentication using node.js application. For this, we will be using JSON Web tokens.

有多种验证用户身份的方法。 让我们讨论使用node.js应用程序进行的基于令牌的身份验证。 为此，我们将使用JSON Web令牌。

什么是JSON Web令牌(JWT)？ (What are JSON Web Tokens (JWT)?)

JSON Web Tokens (JWT) is a standard that defines a compact and self-contained way for securely transmitting information between parties as a JSON object.

JSON Web令牌(JWT)是一种标准，它定义了一种紧凑且自包含的方式，用于在各方之间作为JSON对象安全地传输信息。

• Compact: Smaller size so that easily transferred.

  紧凑 ：体积更小，易于转移。

• Self-Contained: It contains all information about the user.

  自包含：它包含有关用户的所有信息。

它们如何工作？ (How Do they work?)

When a user sends a request with required parameters like username and password. The application checks if username and password are valid. On validation, the application will create a token using a payload and a secret key. It will then send the token back to the user to store and send it with each request. When user sends request with this token, application verifies validity with same secret key. If the token is valid, the request is served, else the application will send an appropriate error message.

用户发送带有必需参数(如用户名和密码)的请求时。 该应用程序检查用户名和密码是否有效。 验证后，应用程序将使用有效负载和密钥创建令牌。 然后，它将令牌发送回用户以进行存储并随每个请求发送。 当用户使用此令牌发送请求时，应用程序将使用相同的密钥验证有效性。 如果令牌有效，则请求得到响应，否则应用程序将发送适当的错误消息。

结构体 (Structure)

Basic structure of JWT is something like

JWT的基本结构类似于

header payload signature

• header: It contains token type and algorithm used to make signature. Gets encoded to base64.

  标头：包含令牌类型和用于签名的算法。 获取编码为base64。

• payload: Any custom user data like username and email.

  有效负载：任何自定义用户数据，例如用户名和电子邮件。

• signature: Hash of encoded header, payload and a secret key.

  签名：编码的标头，有效负载和密钥的哈希。

智威汤逊的优势 (Advantages of JWT)

• Single Key: There is no need for database calls every time to verify the user. A single secret key will decode tokens provided by any user.

  单键：无需每次都进行数据库调用来验证用户。 单个密钥将解码任何用户提供的令牌。

• Portable: Same token can be used among different domains or different platforms. All it needs is the key.

  可移植：相同的令牌可以在不同的域或平台之间使用。 它所需要的只是关键。

• Easy Expire: One can set expiration time using JWT. After that time JWT expires.

  简易到期时间：可以使用JWT设置到期时间。 在此之后，JWT到期。

我们该怎么做？ (How can we do it?)

We are going to build a node.js application with few routes and authenticate them using tokens. Basic knowledge of node.js and javascript is required.

我们将用很少的路由构建一个node.js应用程序，并使用令牌对其进行身份验证。 需要具备node.js和javascript的基础知识。

Step 1 — Open terminal. Start a new project in a directory

步骤1 —打开终端。 在目录中启动新项目

cd auth

npm init

This will start a new project. Process will ask for certain information. Provide all the details required. Process will create package.json and it will look something like this.

这将启动一个新项目。 过程将要求某些信息。 提供所需的所有详细信息。 流程将创建package.json ，看起来像这样。

{  "name": "auth",  "version": "1.0.0",  "description": "application to explain authentication",  "main": "server.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "Your name",  "license": "ISC"}

Step 2 — Install the dependencies. Again go back to terminal and paste the following line.

第2步 -安装依赖项。 再次回到终端并粘贴以下行。

npm install express body-parser jsonwebtoken --save

• express: Node.js web application framework.

  表达： Node.js Web应用程序框架。

• body-parser: To get parameters from our POST request.

  body-parser：从POST请求中获取参数。

• jsonwebtoken: To create and verify tokens.

  jsonwebtoken：创建和验证令牌。

After installing the dependencies. Our package.json will look something like this:

安装依赖项后。 我们的package.json将如下所示：

{  "name": "auth",  "version": "1.0.0",  "description": "application to explain authentication",  "main": "server.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "Your name",  "license": "ISC",  "dependencies": {    "body-parser": "^1.17.2",    "express": "^4.15.3",    "jsonwebtoken": "^7.4.1"  }}

Step 3 — Create server

第3步-创建服务器

Let us create a server, serving at port 3000 which sends the index.html when / route is called. We will also create /login API which authenticates the user and a /getusers API which gives list of users. Let’s create dummy data for now and store it in the ‘users’ array. You may also replace them with database calls.

让我们创建一个服务器，该服务器的端口为3000，当调用/ route时，该服务器发送index.html。 我们还将创建用于验证用户身份的/login API和提供用户列表的/getusers API。 现在，让我们创建虚拟数据并将其存储在“用户”数组中。 您也可以将它们替换为数据库调用。

Step 4 — Build the Client

步骤4 —建立客户

Let us create a client using HTML, Bootstrap and JavaScript. Our client has two parts: login screen and a place to retrieve users. Login screen will contain text boxes for email and password and a button to send request. We will also add a text box and button to pass the token and get list of users.

让我们使用HTML，Bootstrap和JavaScript创建客户端。 我们的客户有两个部分：登录屏幕和一个检索用户的地方。 登录屏幕将包含用于输入电子邮件和密码的文本框，以及用于发送请求的按钮。 我们还将添加一个文本框和一个按钮来传递令牌并获取用户列表。

Step 5 — Start the application

步骤5 —启动应用程序

node server.js

我们的应用程序安全吗？ (Is our app secure?)

No, you might see that even if you don’t pass the token you can get the list of all users. We have not implemented authentication yet. Let’s add authentication to /getusers API so that users with valid token can retrieve users list.

不，您可能会看到，即使不传递令牌，也可以获得所有用户的列表。 我们尚未实现身份验证。 让我们向/getusers API添加身份验证，以便具有有效令牌的用户可以检索用户列表。

如何添加身份验证？ (How to Add Authentication?)

1. Include JWT to the server.js file.
   将JWT包含在server.js文件中。

var jwt=require('jsonwebtoken');

2. Pass the payload(any object, here pass the user object itself) and a secret string to sign function and create a token.

2.传递有效负载(任何对象，这里传递用户对象本身)和一个秘密字符串来签名函数并创建令牌。

var token=jwt.sign(<user>,<secret>);

3. When the token is created successfully pass the same to client.

3.成功创建令牌后，将其传递给客户端。

res.json({token:token});

You can then store token on client side and pass it every time during the session to authenticate. Let’s change the “getlist” function so that we can pass token to the server when we want to access users list.

然后，您可以在客户端存储令牌，并在会话期间每次传递令牌以进行身份​​验证。 让我们更改“ getlist”功能，以便在我们要访问用户列表时可以将令牌传递给服务器。

Let’s add a middleware to authenticate /getusers or any secure route that is added in future. Make sure that all routes that needs authentication is below the middleware.

让我们添加一个中间件来认证/getusers或将来添加的任何安全路由。 确保所有需要身份验证的路由都在中间件下方。

In server.js, first we have login route which creates token. After that we have middleware which we will use to verify the token. All the routes which needs authentication are after middleware. The order is very important.

在server.js中，首先我们有创建令牌的登录路由。 之后，我们将使用中间件来验证令牌。 所有需要认证的路由都在中间件之后。 顺序很重要。

4. To decode, you pass the token and secret key to verify function. Function will return error if the token is invalid or success if token is valid.

4.要进行解码，请传递令牌和密钥以验证功能。 如果令牌无效，函数将返回错误；如果令牌有效，则函数将返回成功。

jwt.verify(token,"samplesecret",(err,decod)=>{  //your logic})

Call next() so that respective routes are called.

调用next()，以便调用相应的路由。

Final server.js will look like this:

最终的server.js将如下所示：

Final index.html will look like this:

最终的index.html将如下所示：

That’s it. This is a simple example of how to use token to authenticate your app. I have put the complete code on GitHub. You may check it there.

而已。 这是一个简单的示例，说明如何使用令牌来验证您的应用程序。 我已经将完整的代码放在GitHub上。 您可以在那里检查。

sudheeshshetty/JWT_AuthContribute to JWT_Auth development by creating an account on GitHub.github.com

sudheeshshetty / JWT_Auth 通过在GitHub上创建一个帐户来贡献JWT_Auth开发。 github.com

Thanks for reading and do follow me and recommend the same to others by clicking on ♡ . My twitter handle is sudheeshshetty.

感谢您的阅读，请关注我并通过单击♡向其他人推荐。 我的推特句柄是sudheeshshetty 。

翻译自: https://www.freecodecamp.org/news/how-to-make-authentication-easier-with-json-web-token-cc15df3f2228/

如何使用json开发web