基于Iframe+Postmessage前端实现SSO(SingleSignOn)单点登录功能

最新推荐文章于 2024-05-12 00:22:50 发布

kevin_xingka

最新推荐文章于 2024-05-12 00:22:50 发布

阅读量1.1k

点赞数

分类专栏：前端工程化文章标签：前端 html css

本文链接：https://blog.csdn.net/kevin_xingka/article/details/121294509

版权

概述

SSO单点登录前端需要实现的主要功能就是一端token，多端可用 ~
同时后端基于Oauth2+JWT实现的SSO单点登录功能需要有统一的中转登录页 middle.html
触发的场景可以有从中转登录页登录后，通过昆仑跳转只邻汇吧、PMS、location；或者直接通过新窗口打开这些页面

middle.html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录验证中心</title>
  <style>
    .login-form{
      margin: 100px auto;
      text-align: center;
    }
    .login-form button{
      width: 200px;
      margin-top: 20px;;
    }
    .login-form p{
      margin-top: 20px;
      font-size: 24px;;
    }
    .login-form p.success{
      color: lightgreen;
    }
    .login-form p.fail{
      color: orangered;
    }
  </style>
</head>
<body>
  <form class="login-form">
    <div>
      <label for="username">账号: </label><input type="text" name="username" id="username"/>
    </div>
    <div>
      <label for="password">密码: </label><input type="password" name="password" id="password"/>
    </div>
    <button type="button" onclick="sendLogin('http://pms.nps.700777.xyz/api/oauth/token', 'post')">登录</button>
    <p class="login-info"></p>
  </form>
  <div class="nav">
    <a href="http://127.0.0.1:5500/client1.html">client1</a>
    <a href="http://127.0.0.1:5500/client2.html">client2</a&

最低0.47元/天解锁文章

kevin_xingka

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于Iframe+Postmessage前端实现SSO(SingleSignOn)单点登录功能

概述SSO单点登录前端需要实现的主要功能就是一端token，多端可用 ~ 同时后端基于Oauth2+JWT实现的SSO单点登录功能需要有统一的中转登录页 middle.html 触发的场景可以有从中转登录页登录后，通过昆仑跳转只邻汇吧、PMS、location；或者直接通过新窗口打开这些页面middle.html代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&gt
复制链接

扫一扫