如何将随机数添加到 react-oidc 库?

How to add a nonce to react-oidc library?

我正在尝试弄清楚如何为 react-oidc 库的配置文件提供随机数,当我单击按钮启动重定向时,它告诉我它缺少一个随机数,但我'我不确定如何提供?

我的配置:

window.config = {
  authority: "xxxxxxxxxxxxxxx",
  client_id:
    "xxxxxxxxxxxxxxxxx",
  redirect_uri: "http://localhost:2222/authorized-page",
  response_type: "code",
  scope: "openid profile",
  post_logout_redirect_uri: "http://localhost:2222/logout",
  acr_values: "ial/1",
};

我的代码:

import React, { useEffect } from "react";

import { makeUserManager } from "react-oidc";

const {
  authority,
  client_id,
  redirect_uri,
  response_type,
  scope,
  post_logout_redirect_uri,
} = window.config;

console.log("config...", window.config);

const userManager = makeUserManager(window.config);

const LoginSso = () => {

  useEffect(() => {
    userManager.signinRedirect();
  }, []);

  return <></>;
};

export default LoginSso;

url 给我的错误:

http://localhost:2222/authorized-page?error=invalid_request&error_description=Nonce+Please+fill+in+this+field.+Nonce+is+too+ short+%28minimum+is+22+characters%29&state=

只有在前端通道返回令牌时才真正需要随机数,例如在混合或隐式流中。在这种情况下,值被写入 ID 令牌,您应该在收到响应时对其进行验证。

response_type=code id_token

不过您使用的是首选流程,如果您捕获了完整的请求 URL 我希望库不会发送随机数 - 也许您的授权服务器 - 或其配置 - 不太正确。

一个可能的解决方法是使用对额外请求参数的支持。暂时使用它感觉不对,但这个库选项有时很有用,可以处理供应商特定的行为。

userMamager.signInRedirect({
  extraQueryParams: {
      nonce: 'my-value',
  },
})