如何向 react-oidc 库添加随机数？答案

【问题标题】：How to add a nonce to react-oidc library?如何向 react-oidc 库添加随机数？
【发布时间】：2021-12-31 19:08:16
【问题描述】：

我试图弄清楚如何为我的 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=

【问题讨论】：

标签： openid-connect react-oidc

【解决方案1】：

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

response_type=code id_token

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

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

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

【讨论】：

谢谢你的工作:) 是的，我只是不知道如何根据查询参数提供随机数。