Maison > interface Web > js tutoriel > Qu'est-ce qu'un système d'authentification unique ? Comment l'implémenter en utilisant nodejs ?

Qu'est-ce qu'un système d'authentification unique ? Comment l'implémenter en utilisant nodejs ?

青灯夜游
Libérer: 2023-02-24 19:33:33
avant
2308 Les gens l'ont consulté

Qu'est-ce qu'un système d'authentification unique ? Comment l'implémenter en utilisant nodejs ? L'article suivant vous présentera comment utiliser Node pour implémenter un système d'authentification unique. J'espère qu'il vous sera utile !

Qu'est-ce qu'un système d'authentification unique ? Comment l'implémenter en utilisant nodejs ?

Single Sign On SSO (Single Sign On) consiste à supprimer la fonction de connexion dans deux ou plusieurs systèmes d'entreprise pour former un nouveau système, de sorte qu'après une connexion, vous puissiez vous connecter à n'importe quel système d'entreprise Non besoin de se connecter.

1. Connaissances de base

1.1 Même politique d'origine

Source = protocole + nom de domaine + port

Prenons http://www.a.com comme exemple :

  • https : // www.a.com ❌(protocole différent)
  • http://www.b.com ❌(nom de domaine différent)
  • http://www.a.com:3000 ❌(port différent)

Politique de même origine Le comportement du navigateur consiste à assurer la sécurité en garantissant que les ressources de l'application ne sont accessibles que par cette application.

1.2 Mécanisme de session

Puisque le protocole http est un protocole sans état (une fois les données client et serveur échangées, la connexion sera fermée et la connexion sera rétablie la prochaine fois), mais nous besoin de mémoriser le mot de passe, etc. fonction, il est évident que la session doit être enregistrée. [Recommandations de didacticiel associées : Tutoriel vidéo Nodejs]

Le suivi de session couramment utilisé est celui des cookies et des sessions. Une compréhension simple de ceux-ci est qu'il s'agit de structures de données qui peuvent stocker des clés et des valeurs. côté et les sessions sont stockées côté serveur.

2. Authentification unique

1. Même domaine parent SSO

Même domaine parent, tel que www.app1.aaa.com, www. app2. aaa.comLes deux serveurs se trouvent dans le domaine parent de .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'
  }})
Copier après la connexion

Quest-ce quun système dauthentification unique ? Comment limplémenter en utilisant 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>
Copier après la connexion

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

<script></script>
Copier après la connexion
Copier après la connexion
Copier après la connexion

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

 $.ajax({
      url: 'https://www.c.com:3000/sso?key=username&value=123',
      method: 'get',
      dataType:'jsonp'
    })
Copier après la connexion

这样通过标签就实现了往www.a.com中写入了domain为www.c.com的跨域cookie.
Quest-ce quun système dauthentification unique ? Comment limplémenter en utilisant 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'})
Copier après la connexion

注意:

  • 浏览器未写入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就行了.
    Quest-ce quun système dauthentification unique ? Comment limplémenter en utilisant 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 Par défaut, les cookies entre les pages des deux serveurs ne sont pas accessibles entre eux.

    Mais nous pouvons définir l'attribut de domaine du cookie sur un nom de domaine parent commun afin que les cookies entre les pages des deux serveurs soient accessibles l'un depuis l'autre.
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'})
Copier après la connexion
Insérer la description de l'image ici
2 . SSO inter-domaines

Lorsque notre nom de domaine est www.a.com, www.b.com, peu importe la façon dont nous définissons le domaine, cela ne sert à rien .
Ensuite, nous devons trouver un moyen d'écrire les informations d'identification (jeton) dans les cookies de tous les domaines

.

🎜2.1 Écrivez des cookies sur plusieurs domaines🎜
🎜🎜2.1.1 Utilisez la balise <script></script> pour écrire des cookies sur plusieurs domaines (jsonp)🎜🎜🎜sur http://www.a.com /index Si vous envoyez directement une requête réseau à https://www.c.com:3000/sso en .js, vous ne pouvez pas écrire de cookies sur plusieurs domaines. 🎜
router.get('/createToken', async (ctx, next) => {
  let { from } = ctx.request.query  let token = "123";
  ctx.response.redirect(`${from}?token=${token}`)})
Copier après la connexion
Copier après la connexion
🎜Mais nous pouvons lancer des requêtes inter-domaines via la balise <script></script> et écrire des cookies🎜
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'})
Copier après la connexion
Copier après la connexion
🎜ou utiliser jquery jsonp pour lancer des requêtes inter-domaines et écrire des cookies. Le principe de cette méthode passe également par peut être implémentée dans tous les domaines. 🎜
<script></script>
Copier après la connexion
Copier après la connexion
Copier après la connexion
🎜De cette façon, via la balise , le cookie inter-domaines avec le domaine www.c.com est écrit sur www.a.com.🎜Insérer la description de l'image ici🎜 Backend🎜
router.get('/readCookie', async (ctx, next) => {
  let username = ctx.cookies.get('username')
  console.log('cookie', username)})
Copier après la connexion
Copier après la connexion
🎜Remarque :🎜 🎜
    🎜🎜Le navigateur n'a pas écrit le cookie et a signalé une erreurson set-cookie a été bloqué en raison de http uniquement🎜 http- only : indique si le cookie est uniquement envoyé via HTTP(S) et n'est pas fourni au client JavaScript (la valeur par défaut est true).🎜 Définissez donc httpOnly sur false.🎜🎜🎜🎜Le navigateur n'a pas écrit le cookie et a signalé une erreur ce set-cookie a été bloqué en raison des préférences de l'utilisateur🎜 C'est vraiment un piège, car j'ai ouvert le navigateur en mode navigation privée, mais le navigateur Chrome désactive les cookies tiers en mode navigation privée par défaut. pour autoriser tous les cookies.🎜🎜🎜🎜 🎜Le navigateur n'écrit pas d'erreur de cookiece cookie défini a été bloqué car il a l'attribut SameSite mais Secure n'est pas défini🎜 Les attributs sameSite et secure doivent être définis🎜🎜🎜🎜Le navigateur n'a pas écrit le cookie et a signalé une erreurerreur de serveur Erreur : impossible d'envoyer un cookie sécurisé via une connexion non cryptée🎜 Je pense qu'il s'agit d'une limitation du framework koa pour l'écriture de cookies. Il ne peut prendre en charge que l'écriture de cookies https..., donc. J'ai changé www.c.com en serveur https.🎜🎜🎜🎜🎜 2.1.2 L'en-tête du protocole p3p implémente le multi-domaine du navigateur IE 🎜🎜🎜La méthode jsonp mentionnée ci-dessus fonctionne parfaitement dans le navigateur Chrome, mais le navigateur IE est plus strict sur les cookies, et le cookie ne peut pas être écrit en utilisant uniquement la méthode ci-dessus. La solution est d'ajouter un en-tête de réponse p3p. 🎜rrreee🎜🎜2.1.3 les paramètres d'URL réalisent le transfert d'informations entre domaines🎜🎜🎜Visitez 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}`)})
Copier après la connexion
Copier après la connexion

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'})
Copier après la connexion
Copier après la connexion

这样就实现了跨域信息的传递.与上面的方式不同,这种方法只是单纯的http请求,适用于所有浏览器,但是缺点也很明显,每次只能分享给一个服务器。
Quest-ce quun système dauthentification unique ? Comment limplémenter en utilisant 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>
Copier après la connexion
Copier après la connexion
Copier après la connexion

www.c.com

router.get('/readCookie', async (ctx, next) => {
  let username = ctx.cookies.get('username')
  console.log('cookie', username)})
Copier après la connexion
Copier après la connexion

Quest-ce quun système dauthentification unique ? Comment limplémenter en utilisant nodejs ?
可以看到读取到了存储在www.a.com里面domain为www.c.com的cookie.

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

Quest-ce quun système dauthentification unique ? Comment limplémenter en utilisant nodejs ?
效果如图所示:

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

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

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

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

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

详细设计:
Quest-ce quun système dauthentification unique ? Comment limplémenter en utilisant nodejs ?

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal