JT-day 16

16536 ワード

1、ドメインをまたぐ
1.1クロスドメインテスト
1.1.1 JT-MANAGEバックエンドテスト
1、ページ構造




  JSON    


   $(function(){
      $.get("http://manage.jt.com/test.json",function(data){
         alert(data.name);
      })
   })



   

JSON

2、データ構造
{"id":"1","name":"tom"}
3、分析
   URL  :   http://manage.jt.com/test.html
  AjaxURL  : http://manage.jt.com/test.json
発見、プロトコル、ドメイン名、ポートはすべて同じで、要求は正常に実行できます。
1.2同源ポリシー
規定:ブラウザのアドレスとAjaxの要求アドレスプロトコル名:/ドメイン名アドレス:ポート番号が同じであれば、ソースポリシーを満たし、ブラウザは正常な解析リターン値ができます。3つの間に異なるものがあれば、ソースポリシーに違反します。ブラウザは解析できません。
1.3何がクロスドメインですか
業務の需要のため、通常Aサーバの中のデータはBサーバから生まれるかもしれません。ブラウザがウェブサイトを通じてページを解析する時、もしページの内部でAjax要求を開始したら、ブラウザのアクセスアドレスとAjaxアクセスアドレスが同じソースポリシーを満たしていない場合、ドメインを越えて要求してください。
クロスドメイン:1、ブラウザ2、解析ajax 3、同ソースポリシーに違反しています。
1.4 JSONPクロスドメインアクセス
1.4.1 JSONP紹介
JSONP(JSON With Padding)はJSONの「使用モード」であり、主流ブラウザのクロスドメインデータアクセスの問題を解決するために使用できる。ソースポリシーのため、一般的にserver 1.example.comに位置するウェブページはserver 1.example.comではないサーバと通信できません。HTMLの要素は例外です。利用<スクリプト>元素のこのオープンポリシーは、他のソースから動的に生成されたJSON資料を得ることができます。このような利用パターンはいわゆるJSONPです。JSONPで捕まえた資料はJSONではなく、任意のJavaScriptで、JSON解析ではなくJavaScript直訳器で実行します。ボルトp>
<h 4 gt;1.4.2 JSONP原理説明</h 4 gt;
<p>1、javaScriptのsrc属性を利用してドメインを跨ぐアクセスができます。p>
<pregt;lt;codet>lt;script type="text/javascript"src="http://manage.jt.com/test.json">
2、事前にコールバックを準備しておきます。
/*        */
        function hello(data){
            alert(data.name);
        }
3、戻り値の結果を特殊なフォーマットでcalback(JSONデータ)をカプセル化します。
hello({"id":"1","name":"tom"})
1.5 JSONPハイレベルAPI
1.5.1先端WEBページを編集する




JSONP  


   $(function(){            //             
 alert("      !!!!!")
      $.ajax({
         url:"http:         //manage.jt.com/web/testJSONP",
         type:"get",        //jsonp    get  
 dataType:"jsonp",          //dataType       
 jsonp: "callback",         //      
 jsonpCallback: "hello",    //        
 success:function (data){   //data  jQuery      json 
            alert(data.id);
            alert(data.name);
                            //        
                            //var obj = eval("("+data+")");
                            //alert(obj.name); }  
      });    
   })



   

JSON

1.5.2 JSONPページ要求の分析
JT-day16_第1张图片
ミリ秒数の役割:ブラウザがサービス要求を行う場合はキャッシュ操作がありますので、ミリ秒数を追加して、ブラウザが結果をキャッシュしないようにします。業務が異常になります。
1.5.3バックエンドサーバを編集する
package com.jt.web;

import com.fasterxml.jackson.databind.util.JSONPObject;
import com.jt.pojo.ItemDesc;
import com.jt.util.ObjectMapperUtil;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class WebJSONPController {

    /**
     *   JSONP    
     * url  : http://manage.jt.com/web/testJSONP?callback=hello&_=1605584709377
     *   :    callback        
     *    :  callback(json)
     */
    @RequestMapping("/web/testJSONP")
    public JSONPObject testJSONP(String callback){
        ItemDesc itemDesc = new ItemDesc();
        itemDesc.setItemId(1000L).setItemDesc("JSONP    !!!");
        JSONPObject jsonpObject = new JSONPObject(callback, itemDesc);
        return jsonpObject;
    }
}
1.6 CORSクロスドメイン実現
1.6.1 CORSの紹介
セキュリティ上、ブラウザは、Ajaxが現在のソース以外のリソースを呼び出すことを許可しないからです。つまり、ブラウザのソースポリシーCORSは、ブラウザとサーバが同時にサポートする必要があります。現在、すべての主流ブラウザはこの機能をサポートしています。IEブラウザはIE 10を下回ってはいけません。ブラウザ側では、CORS通信プロセス全体がブラウザで自動的に完了し、要求に応答ヘッダ情報を追加し、サーバがドメインをまたぐアクセスを実行することを許可するなら、ブラウザのソースポリシーを実行するJT-day16_第2张图片を実行する。
1.6.2クロスドメイン検査
説明:www.jt.com/tests.からページにアクセスし、内部にAjaxからの要求があり、図のような情報が得られ、情報では、ほとんどのブラウザがCORSに対応する方式であるが、サーバーがドメインをまたぐことが許されないため、要求は拒否されたJT-day16_第3张图片
1.6.3バックエンドサーバの設定
ドメインをまたぐために他のサーバーもドメインをまたぐ必要がありますので、jt-comonにドメインをまたぐ構成を追加します。
package com.jt.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/*
   CORS    :                  
 */@Configuration
public class CORSConfig implements WebMvcConfigurer {   //web         
 /*
     :
 1、addMapping()             
 addMapping("/**")              /**                  
 addMapping("addUser/**")                 
 /*                                     
 /**                                    
 .allowedOrigins("*");                  
 .allowCredentials(true);                  Cookie/Session  
 */ @Override
 public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("*").allowCredentials(true);
                //.maxAge()             //  30            30          
                //.allowedMethods()     //  get  
 }
}
1.6.4応答情報
image.png
1.7クロスドメインについての説明
1、ドメインをまたぐブラウザでAjaxを解析すると、URL要求が同源ポリシーに違反した場合、ドメインをまたぐ2、ドメインをまたぐ一般AサーバでBサーバからデータを取得する必要がある時、ドメインをまたぐ方式で3、JSONPJSONPとはJSONの一種の使用モードであり、javaScriptの中のsrc属性を利用してドメイン横断要求を行うことができます。(カスタム・コールバック関数は、リターン値を特殊なフォーマットでカプセル化する)4、何がCORSCORSですか?現在のドメイン横断を実現する主流方式です。現在はすべての主流ブラウザがサポートしています。サーバー端にドメイン横断を許可する構成を設定する必要があります。(応答ヘッダにドメイン横断を許可する識別を追加する)を設定すれば、同じソースポリシーは有効ではなく、ドメイン横断を実現することができます。
2、ユーザデータチェック
2.1 JT-SSOの作成
2.1.1作成項目
JT-day16_第4张图片
2.1.2相続依存とプラグインを追加


    4.0.0
    jt-sso
    
 
        jt2007
        com.jt
        1.0-SNAPSHOT
    
    
 
        
            com.jt
            jt-common
            1.0-SNAPSHOT
        
    
    
 
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
    
2.1.3 UserPOJOオブジェクトを編集する
package com.jt.pojo;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.experimental.Accessors;
@Data
@TableName("tb_user")
@Accessors(chain = true)
public class User extends BasePojo{
    @TableId(type = IdType.AUTO)
    private Long id;                //    
 private String username;
    private String password;        //  
 private String phone;           //    
 private String email;           //                
}
UserServiceを編集
package com.jt.service;
import com.jt.pojo.User;
import java.util.List;
public interface UserService {
    List findObject();
}
UserServiceImplを編集します。
package com.jt.service;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service
public class UserServiceImpl implements UserService {
    @Autowired
 private UserMapper userMapper;
    @Override
 public List findObject() {
        return userMapper.selectList(null);
    }
}
UserControllerを編集します。
package com.jt.controller;
import com.jt.pojo.User;
import com.jt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
public class UserController {
    @Autowired
 private UserService userService;
    @RequestMapping("/findAll")
    public List findAll(){
        return userService.findObject();
    }
}
2.1.4 ssoサーバを編集する
JT-day16_第5张图片
2.1.5 nginx.com nfを編集する
    #       
    server{
        listen 80;
        server_name sso.jt.com;
        location / {
            #         
            proxy_pass http://localhost:8093;
            
        }

    }
修正後、nginxを再起動すればいいです。
2.2ユーザデータの検証を完了しました。
2.2.1ページURL分析
JT-day16_第6张图片
2.2.2照会ページJS
JT-day16_第7张图片
2.2.3分析ページJS
JT-day16_第8张图片
2.2.4業務インターフェース文書の説明
JT-day16_第9张图片
2.2.5 JT-SSO UserControllerを編集する
package com.jt.controller;
import com.fasterxml.jackson.databind.util.JSONPObject;
import com.jt.pojo.User;
import com.jt.service.UserService;
import com.jt.vo.SysResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
public class UserController {
    @Autowired
 private UserService userService;
    @RequestMapping("/findAll")
    public List findAll(){
        return userService.findObject();
    }
    /*
   :        
     :            ,    RestFul    
        ,  JSONP       
 URL  : http://sso.jt.com/user/check/liuchaochao/1?r=0.6289843902945791&callback=jsonp1605601229393&_=1605601240504   : restful    
    : JSONPObject */ @RequestMapping("user/check/{param}/{type}")
    public JSONPObject checkUser(@PathVariable String param, @PathVariable Integer type,String callback){
        //              
 boolean flag=userService.checkUser(param,type);
        SysResult sysResult=SysResult.success(flag);
        //int a=1/0;
 return new JSONPObject(callback,sysResult);
    }
}
2.2.6 JT-SSO UserServiceを編集する
package com.jt.service;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Service
public class UserServiceImpl implements UserService {
    @Autowired
 private UserMapper userMapper;
    private static Map paramMap=new HashMap<>();;
    static{
        paramMap.put(1,"username");
        paramMap.put(2,"phone");
        paramMap.put(3,"email");
    }
    @Override
 public List findObject() {
        return userMapper.selectList(null);
    }
    /*
            
 SQL:select count(*) from tb_user where username="admin123"   :    true     ,false     
 */ @Override
 public boolean checkUser(String param, Integer type) {
        //String column=type==1?"username":(type==2?"phone":"email");
 String column=paramMap.get(type);
        QueryWrapper queryWrapper=new QueryWrapper<>();
        queryWrapper.eq(column,param);
        int count=userMapper.selectCount(queryWrapper);
        return count>0?true:false;
        //return count>0;
 }
}
2.2.7ページの効果展開
JT-day16_第10张图片
2.3グローバル異常処理
2.3.1編集ページJS
JT-day16_第11张图片
2.3.2グローバル異常を修正する
package com.jt.aop;
import com.fasterxml.jackson.databind.util.JSONPObject;
import com.jt.vo.SysResult;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RestControllerAdvice;
import javax.servlet.http.HttpServletRequest;
@RestControllerAdvice //        
public class SystemException {
    //            
 //JSONP      callback(JSON)          callback  ,        
 @ExceptionHandler(RuntimeException.class)
    public Object fail(Exception e, HttpServletRequest request){
        e.printStackTrace();    //      
 String callback=request.getParameter("callback");
        if (StringUtils.isEmpty(callback)){
            //               
 return SysResult.fail();
        }else {
            // callback  ,       
 SysResult sysResult=SysResult.fail();
            return new JSONPObject(callback,sysResult);
        }
    }
}