第三方认证中心跳转

一、业务需求

由第三方认证中心将 token 放在 header 中跳转系统,前端获取到第三方系统携带 header 中的 token。

二、 业务流程

模拟第三方应用

  • CUSTOM-USERTOKEN 是第三方的 token
  • proxy_pass 是我们的前端地址
nginx 复制代码
  server {
    listen 12345;
    server_name localhost;

    location / {
      proxy_set_header Host $host:$server_port;
      proxy_set_header REMOTE-HOST $remote_addr;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Real-Port $remote_port;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header CUSTOM-USERTOKEN 'MY-TOKEN'
      proxy_pass http://127.0.0.1;
    }
  }

前端静态代理

  • backend 是后端服务地址
  • 80 是前端代理端口
nginx 复制代码
  server {
    listen 80;
    server_name localhost;

    location / {
      root /vuepress/docs;
      index index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page 405 =200 $uri;
  }

三、处理方式

由于放在 header 中的内容,前端只有从 XHR 请求中才能拿到,所以直接打开页面时,肯定是无法拿到 header 中的 token 的,又因为这个 token 只有从第三方系统中跳转才能携带,所以也无法通过请求当前页面去获取 header 中的内容。

一、通过后端重定向

在 nginx 代理中,第三方请求从原本跳转访问前端的地址==改为==后端地址, 因为后端是可以从请求总直接拿到 header,所以这时由后端去处理 token ,在重定向到前端。

  • 后端可以设置 cookie,前端从 cookie 中获取
  • 后端可以拼接 URL, 前端从 url 中获取
  • 后端可以通过缓存 cookie, 重定向到前端后发请求获取 token

模拟第三方应用

  • 第三方应用由跳转前端改为跳转后端接口
nginx 复制代码
  server {
    listen 12345;
    server_name localhost;

    location / {
      proxy_set_header Host $host:$server_port;
      proxy_set_header REMOTE-HOST $remote_addr;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Real-Port $remote_port;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header CUSTOM-USERTOKEN 'MY-TOKEN'
      proxy_pass http://backend/token;
    }
  }

前端静态代理

  • 前端代理不需要做任何处理
nginx 复制代码
  server {
    listen 80;
    server_name localhost;

    location / {
      root /vuepress/docs;
      index index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page 405 =200 $uri;
  }

二、通过 nginx 重定向 URL

在 nginx 代理中,新增一个 /token 的代理地址,用于转发地址,第三方请求 从原本跳转访问前端的地址,改为 /token 代理地址 因为 nginx 中是可以获取 header 中的内容的,所以这时由 /token 处理拼接好 url ,在重定向到前端。

模拟第三方应用

  • 第三方应用访问路径改为 http://127.0.0.1/token
nginx 复制代码
  server {
    listen 12345;
    server_name localhost;

    location / {
      proxy_set_header Host $host:$server_port;
      proxy_set_header REMOTE-HOST $remote_addr;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Real-Port $remote_port;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header CUSTOM-USERTOKEN 'MY-TOKEN'
      proxy_pass http://127.0.0.1/token;
    }
  }

前端静态代理

  • 新增 /token 代理,进行拼接 URL 后跳转
nginx 复制代码
  server {
    listen 80;
    server_name localhost;

    location / {
      root /vuepress/docs;
      index index.html;
      try_files $uri $uri/ /index.html;
    }
    location /token {
      # 将 $http_custom_usertoken 拼接在 URL 中,同时重定向到前端
      # 前端通过 location.search 处理 token
      rewrite (.+) http://127.0.0.1?token=$http_custom_usertoken;
    }
    error_page 405 =200 $uri;
  }

由于通过响应头中设置 Set-Cookie 可以直接存储到浏览器中,所以我们也可以通过直接设置 cookie 的方式处理。

模拟第三方应用

  • 此时第三方应用直接访问前端即可
nginx 复制代码
  server {
    listen 12345;
    server_name localhost;

    location / {
      proxy_set_header Host $host:$server_port;
      proxy_set_header REMOTE-HOST $remote_addr;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Real-Port $remote_port;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header CUSTOM-USERTOKEN 'MY-TOKEN'
      proxy_pass http://127.0.0.1;
    }
  }

前端静态代理

  • token 设置在 cookie
nginx 复制代码
  server {
    listen 80;
    server_name localhost;

    location / {
      add_header Set-Cookie "token=$http_custom_usertoken;HttpOnly;Secure";
      root /vuepress/docs;
      index index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page 405 =200 $uri;
  }

方法 [三、通过 nginx 设置 Cookie](#三、通过 nginx 设置 Cookie "#%E4%B8%89%E3%80%81%E9%80%9A%E8%BF%87%20nginx%20%E8%AE%BE%E7%BD%AE%20Cookie") 中,存在一个问题,由于此时在前端静态代理上添加 cookie,这就会导致所有静态资源都会携带 cookie, 这就会造成 cookie 中因为 path 不同而重复添加, 所以我们还可以通过造一层代理的方式处理这个问题

模拟第三方应用

  • 代理地址再次修改为 token
nginx 复制代码
  server {
    listen 12345;
    server_name localhost;

    location / {
      proxy_set_header Host $host:$server_port;
      proxy_set_header REMOTE-HOST $remote_addr;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Real-Port $remote_port;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header CUSTOM-USERTOKEN 'MY-TOKEN'
      proxy_pass http://127.0.0.1/token;
    }
  }

前端静态代理

  • token 设置在 /token 代理地址的 cookie
  • /token 重定向到前端地址
nginx 复制代码
  server {
    listen 80;
    server_name localhost;
	
    location / {
      root /vuepress/docs;
      index index.html;
      try_files $uri $uri/ /index.html;
    }
    
    location /token {
      add_header Set-Cookie "token=$http_custom_usertoken;HttpOnly;Secure";
      rewrite (.+) http://127.0.0.1;
    }
    error_page 405 =200 $uri;
  }
相关推荐
软件小伟4 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾25 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧34 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm43 分钟前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
代码吐槽菌2 小时前
基于SSM的毕业论文管理系统【附源码】
java·开发语言·数据库·后端·ssm
豌豆花下猫2 小时前
Python 潮流周刊#78:async/await 是糟糕的设计(摘要)
后端·python·ai