关于sso:第三阶段-Day16-用户模块跳转-SSO单点登录-JSONPcors跨域方式-用户登录校检

11次阅读

共计 7798 个字符，预计需要花费 20 分钟才能阅读完成。

阐明: 当用户点击登录 / 注册按钮时须要跳转到指定的页面中.

url 地址 1.:http://www.jt.com/user/regist…
url 地址 2: http://www.jt.com/user/login….

`package com.jt.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@Controller     // 须要进行页面跳转
@RequestMapping("/user")
public class UserController {

    /**
     * 实现用户模块页面跳转
     * url1: http://www.jt.com/user/login.html     页面:login.jsp
     * url2: http://www.jt.com/user/register.html  页面:register.jsp
     * 要求: 实现通用页面跳转
     * restFul 形式: 1. 动静获取 url 中的参数, 之后实现通用的跳转.
     */
    @RequestMapping("/{moduleName}")
    public String module(@PathVariable String moduleName){return moduleName;}

}`

`<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <artifactId>jt-sso</artifactId>
    <!-- 默认的打包形式就是 jar  不写也没有关系 -->
    <packaging>jar</packaging>

    <parent>
        <artifactId>jt</artifactId>
        <groupId>com.jt</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>

    <!--2. 增加依赖信息 -->
    <dependencies>
        <!-- 依赖本质依赖的是 jar 包文件 -->
        <dependency>
            <groupId>com.jt</groupId>
            <artifactId>jt-common</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
    </dependencies>

    <!--3. 增加插件 -->
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>`

`@TableName("tb_user")
@Data
@Accessors(chain = true)
public class User extends BasePojo{@TableId(type = IdType.AUTO)// 设定主键自增
    private Long id;            // 用户 ID 号
    private String username;    // 用户名
    private String password;    // 明码 须要 md5 加密
    private String phone;       // 电话号码
    private String email;       // 临时应用电话代替邮箱

}`

用户通过 sso.jt.com/findUserAll 获取 user 表中的信息 json 返回
代码构造如下:

`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;

    /**
     * 实现测试按钮
     * 1.url 地址 :findUserAll
     * 2. 参数信息: null
     * 3. 返回值后果: List<User>
     *
     */
    @RequestMapping("/findUserAll")
    public List<User> findUserAll(){return userService.findUserAll();
    }
}`

`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;

import java.util.List;

@Service
public class UserServiceImpl implements UserService{

    @Autowired
    private UserMapper userMapper;

    @Override
    public List<User> findUserAll() {return userMapper.selectList(null);
    }
}`

跨域实现(重要)

============

剖析:
1. 浏览器地址: http://manage.jt.com/test.html
2.ajax 申请地址: http://manage.jt.com/test.json
论断:
当浏览器地址与 ajax 申请的地址 ( 协定:// 域名: 端口 ) 雷同时能够实现失常的业务调用.

`<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
    <!-- 引入类库之后, 执行 js 代码 -->
<script type="text/javascript">
    <!-- 让整个页面加载实现之后执行 js-->
    $(function(){$.get("http://manage.jt.com/test.json",function(data){alert(data.name);
        })
    })
</script>`

剖析:
1. 浏览器地址: http://www.jt.com/test.html
2.ajax 申请地址: http://manage.jt.com/test.json
论断:
如果申请地址 (协定:// 域名: 端口) 不雷同则导致申请调用失败

阐明: 浏览器规定发动 ajax 时 如果 申请协定 / 域名 / 端口号 如果 3 者有一个与以后的浏览器的地址不雷同时, 则违反了 同源策略 的规定. 则浏览器不予解析返回值.

跨域问题: 违反同源策略的规定就是跨域申请.

利用 javascrpit 中的 src 属性实现跨域申请.
自定义回调函数 function callback(xxxx);
将返回值后果进行非凡的格局封装 callback(json);
因为利用 src 属性进行调用所以 只能反对 get申请类型.

封装返回值:

`hello({"id":"1","name":"tom"})`

页面 js 编辑

`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 测试 JSON 跨域问题 </title>    
    <script type="text/javascript">
        /*JS 是解释执行的语言  */
        /* 定义回调函数  */
        function hello(data){alert(data.name);
        }
    </script>
    <!-- 该 json 始终保留到浏览器中期待调用, 然而没有函数名称无奈调用  -->
    <script type="text/javascript" src="http://manage.jt.com/test.json"></script>
    <script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
</head>
<body>
    <h1>JS 跨域问题 </h1>
</body>
</html>`

JSONP(JSON with Padding)是 JSON 的一种“应用模式”，可用于解决支流浏览器的跨域数据拜访的问题 。因为同源策略，一般来说位于 server1.example.com 的网页无奈与不是 server1.example.com 的服务器沟通， 而 HTML 的

`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSONP 测试 </title>
<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript">
    $(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 串
                console.log(data);
            }
        });    
    })
</script>
</head>
<body>
    <h1>JSON 跨域申请测试 </h1>
</body>
</html>`

`package com.jt.web.controller;

import com.jt.pojo.ItemDesc;
import com.jt.util.ObjectMapperUtil;
import jdk.nashorn.internal.runtime.regexp.JoniRegExp;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class JSONPController {

    /**
     * 实现 JSONP 跨域申请
     * url 地址: http://manage.jt.com/web/testJSONP?callback=xxxxxx
     * 参数:    临时没有能够不接
     * 返回值:  callback(JSON);
     */
     @RequestMapping("/web/testJSONP")
     public String testJSONP(String callback){ItemDesc itemDesc = new ItemDesc();
         itemDesc.setItemId(1000L).setItemDesc("JSONP 测试!!!");
         String json = ObjectMapperUtil.toJSON(itemDesc);
         return callback+"("+json+")";
     }

}`

 `@RequestMapping("/web/testJSONP")
    public JSONPObject testJSONP(String callback){ItemDesc itemDesc = new ItemDesc();
        itemDesc.setItemId(1000L).setItemDesc("JSONP 测试!!!");
        return new JSONPObject(callback, itemDesc);
    }`

`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;
@Configuration  // 标识我是一个配置类
public class CorsConfig implements WebMvcConfigurer {

    // 在后端 配置 cors 容许拜访的策略
    @Override
    public void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**")
                .allowedMethods("GET","POST") // 定义容许跨域的申请类型
                .allowedOrigins("*")           // 任意网址都能够拜访
                .allowCredentials(true) // 是否容许携带 cookie
                .maxAge(1800);                 // 设定申请长链接超时工夫.
    }
}`

JSON 数据格式

1.jsonp
jsonp 实质利用 javaScript 中的 src 属性的 get 申请实现的跨域.
返回值必须通过非凡的格局封装.
2.cors
增加在响应头中信息. 指定哪些服务器容许拜访.

当用户在注册时, 如果输出用户名, 则应该向 jt-sso 单点登录零碎发动申请, 校验用户数据是否存在.
如果存在则提醒用户.

1.url 剖析

2. 检索 JS 代码

JS 剖析

 `$.ajax({url : "http://sso.jt.com/user/check/"+escape(pin)+"/1?r=" + Math.random(),
                dataType : "jsonp",
                success : function(data) {
                    checkpin = data.data?"1":"0";
                    if(data.status == 200){if (!data.data) {validateSettings.succeed.run(option);
                            namestate = true;
                         }else {validateSettings.error.run(option, "该用户名已占用！");
                            namestate = false;
                         }
                    }else{validateSettings.error.run(option, "服务器正忙, 请稍后!");
                          namestate = false;
                    }

                }
            });`

 `/**
     * 业务阐明: jt-web 服务器获取 jt-sso 数据 JSONP 跨域申请
     * url 地址: http://sso.jt.com/user/check/{param}/{type}
     * 参数:    param: 须要校验的数据   type: 校验的类型
     * 返回值:  SysResult 对象
     * 实在的返回值: callback(SysResult 的 JSON)
     */
    @RequestMapping("/check/{param}/{type}")
    public JSONPObject checkUser(@PathVariable String param,
                                 @PathVariable Integer type,
                                 String callback){
        //true 示意数据存在     false 示意数据能够应用
        boolean flag = userService.checkUser(param,type);
        SysResult.success(flag);
        return new JSONPObject(callback, SysResult.success(flag));
    }`

 `/**
     * 判断根据:  依据用户名查问 如果后果 >0 用户已存在.
     * @param param
     * @param type
     * @return
     */
    @Override
    public boolean checkUser(String param, Integer type) {
        //1. 须要将 type 类型转化为 具体字段信息  1=username  2=phone  3=email
        String column = columnMap.get(type);
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq(column, param);
        Integer count = userMapper.selectCount(queryWrapper);
        return  count > 0 ? true :false;
    }`

正文完

sso

发表至： sso

2020-11-09

0

关于sso:Casdoor-开始

关于sso:Authing-团队管理-Wechaty-机器人-无限可能

关于sso:实战模拟│单点登录-SSO-的实现

关于sso:单点登录认证系统-MaxKey-v230GA-发布

关于app:标梵IPFS矿机app软件开发软件-IPFSApp开发方法详解

关于sso:第三阶段-Day16-用户模块跳转-SSO单点登录-JSONPcors跨域方式-用户登录校检

1. 实现用户模块跳转

1.1 需要阐明

1.2 编辑 UserController

1.3 页面成果展示

2 JT-SSO 我的项目创立

2.1 创立我的项目

2.2 增加继承 / 依赖 / 插件

2.3 编辑 User 的 POJO 对象

2.4 测试 JT-SSO 我的项目

2.4.1 编辑 UserController

2.4.2 编辑 UserService

2.4.3 批改 nginx 配置

3.1 跨域拜访测试

3.1.1 同域测试

3.1.2 跨域测试

3.2 浏览器 - 同源策略阐明

3.3 跨域 1 -JSONP

3.3.1 JSONP 跨域原理

3.3.2 JSONP

3.3.3 JSONP 优化

3.3.4 编辑后端 Controller

3.3.5 控制台输入

3.3.6 JSONPObject 阐明

3.4 cors 跨域形式

3.4.1 cors 调用原理

3.4.2 实现 cors 调用

3.4.3 cors 调用响应头解析

3.4.4 cors 跨域测试

3.5 对于跨域的总结

4 实现用户数据校验

4.1 业务需要

4.2 业务接口文档阐明

4.3 前端 JS 剖析

4.4 编辑 JT-SSO UserController

4.5 编辑 JT-SSO UserService

4.6 页面成果展示

Just My Socks（注册教程内含优惠码）

关于sso:第三阶段-Day16-用户模块跳转-SSO单点登录-JSONPcors跨域方式-用户登录校检

1. 实现用户模块跳转

1.1 需要阐明

1.2 编辑 UserController

1.3 页面成果展示

2 JT-SSO 我的项目创立

2.1 创立我的项目

2.2 增加继承 / 依赖 / 插件

2.3 编辑 User 的 POJO 对象

2.4 测试 JT-SSO 我的项目

2.4.1 编辑 UserController

2.4.2 编辑 UserService

2.4.3 批改 nginx 配置

3.1 跨域拜访测试

3.1.1 同域测试

3.1.2 跨域测试

3.2 浏览器 - 同源策略阐明

3.3 跨域 1 -JSONP

3.3.1 JSONP 跨域原理

3.3.2 JSONP

3.3.3 JSONP 优化

3.3.4 编辑后端 Controller

3.3.5 控制台输入

3.3.6 JSONPObject 阐明

3.4 cors 跨域形式

3.4.1 cors 调用原理

3.4.2 实现 cors 调用

3.4.3 cors 调用响应头解析

3.4.4 cors 跨域测试

3.5 对于跨域的总结

4 实现用户数据校验

4.1 业务需要

4.2 业务接口文档阐明

4.3 前端 JS 剖析

4.4 编辑 JT-SSO UserController

4.5 编辑 JT-SSO UserService

4.6 页面成果展示

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）