> 웹 프론트엔드 > JS 튜토리얼 > 싱글 사인온(SSO) 시스템이란 무엇입니까? nodejs를 사용하여 구현하는 방법은 무엇입니까?

싱글 사인온(SSO) 시스템이란 무엇입니까? nodejs를 사용하여 구현하는 방법은 무엇입니까?

青灯夜游
풀어 주다: 2023-02-24 19:33:33
앞으로
2309명이 탐색했습니다.

Single Sign-On 시스템이란 무엇인가요? nodejs를 사용하여 구현하는 방법은 무엇입니까? 다음 글에서는 Node를 사용하여 Single Sign-On 시스템을 구현하는 방법을 소개하겠습니다. 도움이 되길 바랍니다.

싱글 사인온(SSO) 시스템이란 무엇입니까? nodejs를 사용하여 구현하는 방법은 무엇입니까?

Single Sign On SSO(Single Sign On)는 두 개 이상의 비즈니스 시스템에서 로그인 기능을 제거하여 새로운 시스템을 구성하여 한 번의 로그인 후에는 어떤 비즈니스 시스템에도 로그인할 수 있도록 하는 것입니다. 로그인해야 합니다.

1. 기본 지식

1.1 동일 출처 정책

소스 = 프로토콜 + 도메인 이름 + 포트

http://www.a.com을 예로 들어보세요:

  • https: // www.a.com ❌(다른 프로토콜)
  • http://www.b.com ❌(다른 도메인 이름)
  • http://www.a.com:3000 ❌(다른 포트)

동일 출처 정책 애플리케이션 아래의 리소스는 이 애플리케이션에서만 액세스할 수 있도록 하여 보안을 보장하는 것이 브라우저의 동작입니다.

1.2 세션 메커니즘

http 프로토콜은 상태 비저장 프로토콜이므로(클라이언트와 서버 데이터가 교환된 후 연결이 닫히고 다음에 연결이 다시 설정됩니다) 비밀번호 등의 기능을 기억해야 하는 경우 세션을 기록해야 한다는 것은 명백합니다. [추천 관련 튜토리얼: nodejs 동영상 튜토리얼]

일반적으로 사용되는 세션 추적은 쿠키와 세션으로 간단히 이해하면 쿠키가 클라이언트에 저장된다는 점입니다. 측 및 세션은 서버 측에 저장됩니다.

2. 싱글 사인온

1. 동일한 상위 도메인 SSO

동일한 상위 도메인(예: www.app1.aaa.com, www) app2.aaa.com두 서버 모두 .aaa.com의 상위 도메인에 있습니다. www.app1.aaa.com,www.app2.aaa.com这两个服务器都是在.aaa.com的父域名。
默认情况下,两个服务器下页面之间的cookie是互相访问不到的。

但是我们可以通过设置cookie的domain属性为共通的父域名,使得两个服务器下页面之间的cookie可以相互访问到。

router.get('/createCookie', async (ctx, next) => {
  ctx.cookies.set('username', '123', {
    maxAge: 60 * 60 * 1000,
    httpOnly: false,
    path: '/',
    domain:'.a.com' //设置domain为共通的父域名
  });
  ctx.body = "create cookie ok"})router.get('/getCookie', async (ctx, next) => {
  let username=ctx.cookies.get('username')
  if (username){
    ctx.body=username  }else{
    ctx.body='no cookie'
  }})
로그인 후 복사

싱글 사인온(SSO) 시스템이란 무엇입니까? nodejs를 사용하여 구현하는 방법은 무엇입니까?

2. 跨域SSO

当我们的域名为www.a.com,www.b.com时,无论怎样设置domain都没用了。

那么就要想办法将身份凭证(token)写入到所有域的cookie中

2.1 跨域写cookie
2.1.1 利用标签跨域写cookie(jsonp)

在http://www.a.com/index.js中直接向https://www.c.com:3000/sso直接发送网络请求,是无法跨域写入cookie的。

  <script>
    $.ajax({
      url: &#39;https://www.c.com:3000/sso?key=username&value=123&#39;,
      method: &#39;get&#39;,
    })
  </script>
로그인 후 복사

但是我们可以通过标签发起跨域请求,写入cookie

<script></script>
로그인 후 복사
로그인 후 복사
로그인 후 복사

或者使用jquery jsonp的方式发起跨域请求,写入cookie,这种方式的原理也是通过标签能够跨域实现的。

 $.ajax({
      url: 'https://www.c.com:3000/sso?key=username&value=123',
      method: 'get',
      dataType:'jsonp'
    })
로그인 후 복사

这样通过标签就实现了往www.a.com中写入了domain为www.c.com的跨域cookie.
싱글 사인온(SSO) 시스템이란 무엇입니까? nodejs를 사용하여 구현하는 방법은 무엇입니까?
后端

const options = {
  key: fs.readFileSync(path.join(__dirname, './https/privatekey.pem')),
  cert: fs.readFileSync(path.join(__dirname, './https/certificate.pem')),
  secureOptions: 'TLSv1_2_method' //force TLS version 1.2}var server = https.createServer(options,app.callback());  //只能使用https协议写cookierouter.get('/sso', async (ctx, next) => {
  let {
    key, value  } = ctx.request.query
  ctx.cookies.set(key, value, {
    maxAge: 60 * 60 * 1000, //有效时间,单位毫秒
    httpOnly: false, //表示 cookie 是否仅通过 HTTP(S) 发送,, 且不提供给客户端 JavaScript (默认为 true).
    path: '/',
    sameSite: 'none', //限制第三方 Cookie
    secure: true //cookie是否仅通过 HTTPS 发送
  });
  ctx.body = 'create Cookie ok'})
로그인 후 복사

注意:

  • 浏览器未写入cookie报错his set-cookie was blocked due to http-only
    http-only:表示 cookie 是否仅通过 HTTP(S) 发送,, 且不提供给客户端 JavaScript (默认为 true).
    所以要将httpOnly设置为false.

  • 浏览器未写入cookie报错this set-cookie was blocked due to user preference
    这个真的坑,因为我是无痕模式打开的浏览器,但是chrome浏览器默认无痕模式下禁用第三方cookie,修改为允许所有cookie就行了.
    싱글 사인온(SSO) 시스템이란 무엇입니까? nodejs를 사용하여 구현하는 방법은 무엇입니까?

  • 浏览器未写入cookie报错this set cookie was blocked because it has the SameSite attribute but Secure not set
    需要设置sameSite和secure属性

  • 浏览器未写入cookie报错server error Error: Cannot send secure cookie over unencrypted connection 기본적으로 두 서버의 페이지 간 쿠키는 서로 액세스할 수 없습니다.

    하지만 쿠키의 도메인 속성을 공통 상위 도메인 이름으로 설정하여 두 서버의 페이지 사이에 있는 쿠키에 서로 액세스할 수 있습니다.
router.get('/sso', async (ctx, next) => {
  let {
    key, value  } = ctx.request.query
  ctx.cookies.set(key, value, {
    maxAge: 60 * 60 * 1000, //有效时间,单位毫秒
    httpOnly: false,
    path: '/',
    sameSite: 'none',
    secure: true
  });
  ctx.set("P3P", "CP='CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR'") //p3p响应头
  ctx.body = 'create Cookie ok'})
로그인 후 복사
여기에 이미지 설명 삽입
2 . Cross-domain SSO

저희 도메인 이름이 www.a.com, www.b.com이면 어떻게 도메인을 설정해도 소용이 없습니다. .
그런 다음 모든 도메인의 쿠키에 ID 자격 증명(토큰)을 기록하는 방법을 찾아야 합니다

.

🎜2.1 도메인 전체에 쿠키 쓰기🎜
🎜🎜2.1.1 <script></script> 태그를 사용하여 도메인 전체에 쿠키 작성(jsonp)🎜🎜🎜http://www.a.com /index .js에서 https://www.c.com:3000/sso로 직접 네트워크 요청을 보내는 경우 도메인 간에 쿠키를 쓸 수 없습니다. 🎜
router.get('/createToken', async (ctx, next) => {
  let { from } = ctx.request.query  let token = "123";
  ctx.response.redirect(`${from}?token=${token}`)})
로그인 후 복사
로그인 후 복사
🎜하지만 <script></script> 태그를 통해 도메인 간 요청을 시작하고 쿠키를 작성🎜
router.get('/createCookie', async (ctx, next) => {
  let { token } = ctx.request.query
  ctx.cookies.set('token', token, {
    maxAge: 60 * 60 * 1000, //有效时间,单位毫秒
    httpOnly: false,
    path: '/',
  });
  ctx.body = 'set cookie ok'})
로그인 후 복사
로그인 후 복사
🎜하거나 jquery jsonp를 사용하여 도메인 간 요청을 시작하고 쿠키를 작성할 수 있습니다. 스크립트 /> 태그는 여러 도메인에 걸쳐 구현될 수 있습니다. 🎜
<script></script>
로그인 후 복사
로그인 후 복사
로그인 후 복사
🎜이렇게 하면 <script></script> 태그를 통해 www.c.com 도메인의 크로스 도메인 쿠키가 www.a.com에 기록됩니다.🎜여기에 이미지 설명 삽입🎜 백엔드🎜
router.get('/readCookie', async (ctx, next) => {
  let username = ctx.cookies.get('username')
  console.log('cookie', username)})
로그인 후 복사
로그인 후 복사
🎜참고:🎜 🎜
    🎜🎜브라우저가 쿠키를 쓰지 않았고 오류를 보고했습니다그의 쿠키 설정은 http 전용으로 인해 차단되었습니다🎜 http- only: 쿠키가 HTTP(S)를 통해서만 전송되고 클라이언트 JavaScript에 제공되지 않는지 여부를 나타냅니다(기본값은 true).🎜 따라서 httpOnly를 false로 설정하세요.🎜🎜🎜🎜브라우저가 쿠키를 작성하지 않았고 오류를 보고했습니다. code>이 설정 쿠키는 사용자 기본 설정으로 인해 차단되었습니다.🎜 브라우저를 시크릿 모드로 열었지만 Chrome 브라우저는 기본적으로 시크릿 모드에서 타사 쿠키를 비활성화하므로 이는 정말 함정입니다. 모든 쿠키를 허용합니다.🎜🎜🎜🎜 🎜브라우저가 쿠키를 쓰지 않습니다 오류이 설정된 쿠키는 SameSite 속성이 있지만 보안이 설정되지 않았기 때문에 차단되었습니다🎜 sameSite 및 보안 속성을 설정해야 합니다🎜🎜🎜🎜브라우저가 쿠키를 작성하고 오류를 보고했습니다서버 오류 오류: 암호화되지 않은 연결을 통해 보안 쿠키를 보낼 수 없습니다🎜 이것이 쿠키 작성에 대한 Koa 프레임워크의 제한 사항인 것 같습니다. www.c.com을 https 서버로 변경했습니다.🎜🎜🎜🎜🎜 2.1.2 p3p 프로토콜 헤더는 IE 브라우저 크로스 도메인을 구현합니다. 🎜🎜🎜위에서 언급한 jsonp 메소드는 크롬 브라우저에서 완벽하게 실행되지만 IE 브라우저는 쿠키에 대해 더 엄격하며 위의 방법만으로는 쿠키를 작성할 수 없습니다. 해결책은 p3p 응답 헤더를 추가하는 것입니다. 🎜rrreee🎜🎜2.1.3 URL 매개변수는 도메인 간 정보 전송을 실현합니다🎜🎜🎜http://www.c.com:3000/createToken?from=http://www.a.com/createCookie🎜를 방문하세요.

    www.c.com上生成token后将url重写,带上token,重定向到www.a.com

router.get('/createToken', async (ctx, next) => {
  let { from } = ctx.request.query  let token = "123";
  ctx.response.redirect(`${from}?token=${token}`)})
로그인 후 복사
로그인 후 복사

www.a.com上从url上获取token,存入cookie

router.get('/createCookie', async (ctx, next) => {
  let { token } = ctx.request.query
  ctx.cookies.set('token', token, {
    maxAge: 60 * 60 * 1000, //有效时间,单位毫秒
    httpOnly: false,
    path: '/',
  });
  ctx.body = 'set cookie ok'})
로그인 후 복사
로그인 후 복사

这样就实现了跨域信息的传递.与上面的方式不同,这种方法只是单纯的http请求,适用于所有浏览器,但是缺点也很明显,每次只能分享给一个服务器。
싱글 사인온(SSO) 시스템이란 무엇입니까? nodejs를 사용하여 구현하는 방법은 무엇입니까?

2.2 跨域读cookie
2.2.1 利用标签跨域读cookie(jsonp)

之前2.1.1利用标签在www.a.com中写入了www.c.com的cookie(username,123),现在想要www.a.com请求的时候携带上www.c.com的cookie,也就是说要跨域读cookie.

其实也是同样的方法,在www.a.com上利用跨域访问访问www.c.com,会自动的带上domain为www.c.com的cookie。
www.a.com/index.js

<script></script>
로그인 후 복사
로그인 후 복사
로그인 후 복사

www.c.com

router.get('/readCookie', async (ctx, next) => {
  let username = ctx.cookies.get('username')
  console.log('cookie', username)})
로그인 후 복사
로그인 후 복사

싱글 사인온(SSO) 시스템이란 무엇입니까? nodejs를 사용하여 구현하는 방법은 무엇입니까?
可以看到读取到了存储在www.a.com里面domain为www.c.com的cookie.

3. nodejs实现单点登录系统实战

싱글 사인온(SSO) 시스템이란 무엇입니까? nodejs를 사용하여 구현하는 방법은 무엇입니까?
效果如图所示:

  • 第一次访问www.a.com首页

  • 跳转到www.c.com:3000登录页面,登录成功后跳转www.a.com首页

  • 再次访问www.a.com首页,无需登录直接跳转

  • 访问www.b.com首页,无需登录直接跳转

源码: https://github.com/wantao666/sso-nodejs

详细设计:
싱글 사인온(SSO) 시스템이란 무엇입니까? nodejs를 사용하여 구현하는 방법은 무엇입니까?

更多node相关知识,请访问:nodejs 教程

위 내용은 싱글 사인온(SSO) 시스템이란 무엇입니까? nodejs를 사용하여 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿