如何为react-oidc库添加nonce参数解决认证跳转报错

问题原因 #

你的身份提供商要求登录请求必须携带长度不小于22位的nonce参数，当前配置未主动传入符合要求的nonce导致报错。

解决方法 #

第一步：编写nonce生成函数 #

nonce需要是长度不小于22位的随机字符串，你可以用下面的工具函数生成：

// 生成指定长度的随机字符串作为nonce，默认生成长度32位，满足最小22位要求
function generateNonce(length = 32) {
  const charPool = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let result = '';
  for (let i = 0; i < length; i++) {
    result += charPool.charAt(Math.floor(Math.random() * charPool.length));
  }
  return result;
}

第二步：传入nonce参数，二选一即可 #

方式1：全局配置传入

直接在你的window.config配置中新增nonce字段：

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",
  nonce: generateNonce() // 新增此行
};

方式2：调用登录方法时动态传入

如果需要每次发起登录都生成新的nonce，可以在调用signinRedirect时传入参数，不需要修改全局配置：

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

额外说明 #

react-oidc底层基于oidc-client-ts实现，默认情况下会自动生成nonce参数，如果配置后还是报错，可检查你使用的库版本是否过低，升级到最新稳定版即可解决默认生成失效的问题。

内容的提问来源于stack exchange，提问作者Jorden