On web development mode and identity authentication

cjh_ code 2021-11-25 15:22:41

Catalog

1、web Development mode

1.1 classification :

1.2 How to choose development mode : 

2、 Identity Authentication

2.1 Why identity authentication is needed

2.2  Identity authentication under different development modes

3、session

3.1 What is? HTTP No state

3.2  What is? Cookie

3.2.3 Session How it works

 4、JWT

4.1 Session Limitations of certification

4.2 What is? JWT

4.3 JWT working principle

4.4 JWT Component part

4.5 JWT Advantages and precautions


1、web Development mode

1.1 classification :

         Traditional rendering based on server Web Development mode :

advantage :

  1. The front end takes less time : Because the server side is responsible for dynamic generation HTML Content , The browser only needs to render the page directly . Especially the mobile end , More power saving
  2. advantageous to SEO: Because the server-side response is complete HTML The page content , So it's easier for reptiles to get information , Better for SEO

shortcoming :

  1. Occupy server-side resources : That is, server-side completion HTML Splicing of page content , If there are more requests , Will cause certain access pressure to the server
  2. It's not conducive to the separation of front and rear ends , Low development efficiency : Use server-side rendering , There is no division of labor , Especially for projects with high front-end complexity , It is not conducive to the efficient development of the project

          A new model based on front and rear end separation Web Development mode :

         Concept : The development mode of separation of front end and back end , Depend on Ajax The wide application of Technology . In short , Separated front and rear end Web Development mode , The back end is only responsible for providing API Interface , Front end use Ajax Call the development mode of the interface


advantage :

  1. Good development experience : The front end focuses on UI Page development , The back end focuses on api Development of , And the front end has more selectivity
  2. Good user experience :Ajax The wide application of Technology , Greatly improve the user experience , Can easily achieve local page refresh
  3. Reduces the rendering pressure on the server side : Because the page is ultimately generated in each user's browser

shortcoming :

  • It's not good for SEO: Because the whole HTML The page needs to be dynamically spliced at the client , So the crawler can't crawl the effective information of the page .( Solution : utilize Vue、React Wait for the front-end frame  SSR  Technology can solve SEO problem !)

1.2 How to choose development mode : 

  1. For example, enterprise websites , The main function is presentation without complex interaction , And need good SEO, Then we need to use server-side rendering
  2. And similar background management projects , The interaction is relatively strong , There is no need to consider SEO, Then you can use the development mode of separating the front and back ends
  3. in addition , What kind of development model to use is not absolute , In order to take into account the rendering speed of the home page and the development efficiency of front and rear end separation at the same time , Some websites use the first screen server-side rendering + The development mode of separating the front and back of other pages  

2、 Identity Authentication

Identity Authentication , also called ” Authentication “,” authentication “, By means of certain means , Complete the confirmation of the user's identity , for example :

  1. Mobile phone verification code login of major websites
  2. Email password login
  3. QR code login

 2.1 Why identity authentication is needed

         The purpose of identity authentication , Is to confirm the user who currently claims to be a certain identity , It's really the claimed user

2.2  Identity authentication under different development modes

  1. Server side rendering is recommended Session Authentication mechanism
  2. Front and rear end separation is recommended JWT Authentication mechanism

3、session

3.1 What is? HTTP No state

        HTTP Statelessness of protocol , It refers to every time the client HTTP Requests are all independent , There is no direct relationship between consecutive requests , The server does not actively retain each HTTP Status of request

3.2  What is? Cookie

  1. Cookie Is a segment stored in the user's browser that does not exceed 4 KB String . It has a name (Name)、 A value (Value) And several others for controlling Cookie The period of validity 、 Security 、 Use the optional properties of the range to make up
  2. Under different domain names Cookie They are independent , Whenever a client initiates a request , All unexpired under the current domain name will be automatically Cookie Send it to the server

3.2.1 Cookie characteristic :

  1. Send automatically
  2. Domain name independence
  3. Expiration time limit
  4. 4KB Limit

3.2.2  Cookie No security :

         because Cookie It's stored in a browser , And the browser also provides reading and writing Cookie Of API, therefore Cookie It's easy to fake , No security . Therefore, it is not recommended that the server pass important privacy data through Cookie To the browser in the form of

Be careful : Never use Cookie Store important and private data ! For example, the user's identity information 、 Password etc.

 3.2.3 Session How it works

 4、JWT

4.1 Session Limitations of certification

        Session The authentication mechanism needs to cooperate Cookie Can achieve . because Cookie Cross domain access is not supported by default , All when it comes to front-end cross domain requests for back-end interfaces , A lot of extra configuration is required , To achieve cross domain Session authentication

Be careful :

  • The front end requests the back-end interface There is no cross domain problem When , Recommended Session  Authentication mechanism
  • front end Need to cross domain request back-end interface When , It is not recommended to use Session Authentication mechanism , Recommended JWT Authentication mechanism

4.2 What is? JWT

        JWT( English full name :JSON Web Token) Is the most popular cross domain authentication solution

4.3 JWT working principle

  1. The user's information passes through  Token  String form , Save in the client browser
  2. The server is restored by  Token  In the form of string to authenticate the user's identity

 4.4 JWT Component part

  1. Header( Head )、Payload( Payload )、Signature( Signature )
  2. Between the three in English “.” Separate

        Payload( Payload ) Is the real user information , It is a string generated after user information is encrypted Header and Signature It's a security related part , Just to make sure Token The security of

 4.5 JWT Advantages and precautions

  • because json The generality of , therefore JWT Cross language support is available , image JAVA,JavaScript,NodeJS,PHP And many other languages can be used .
  • Because of the payload part , therefore JWT It can store some non sensitive information necessary for other business logic in itself .
  • Easy to transmit ,jwt It's very simple , Bytes are very small , So it's very easy to transmit .
  • It doesn't need to save session information on the server , So it's easy to apply extensions

Be careful :

  • Should not be in jwt Of payload Some store sensitive information , Because this part is the decryptable part of the client .
  • Well protected secret Private key , The private key is very important .
  • If possible , Please use https agreement

PS: From Jane book Dearmadman What is? JWT -- JSON WEB TOKEN - Simple books

Please bring the original link to reprint ,thank
Similar articles

2021-11-25

2021-11-25

2021-11-25

2021-11-25

2021-11-25

2021-11-25

2021-11-25