Azure Static Web Apps自定义认证回调错误页面：求临时解决方案

针对SWA认证回调错误页面不够友好的问题，目前有几个可行的临时方案：

方案1：静态页面+路由重写 #

这是最简单的方案，无需后端代码，仅通过静态页面和路由规则实现：

1. 在项目根目录创建staticwebapp.config.json，添加路由规则，将带错误参数的回调请求重定向到自定义错误页面：

{
  "routes": [
    {
      "route": "/.auth/login/*/callback",
      "rewrite": "/auth-error.html",
      "conditions": {
        "query": {
          "error": "*"
        }
      }
    }
  ]
}

2. 创建auth-error.html页面，通过JS解析URL参数并展示友好提示：

<!DOCTYPE html>
<html>
<head>
  <title>登录出错</title>
  <style>
    .error-box {
      max-width: 600px;
      margin: 2rem auto;
      padding: 2rem;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      font-family: sans-serif;
    }
    .error-box h1 {
      color: #dc2626;
      margin-top: 0;
    }
    .btn {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      background: #2563eb;
      color: white;
      text-decoration: none;
      border-radius: 4px;
      margin-top: 1rem;
    }
  </style>
</head>
<body>
  <div class="error-box">
    <h1>登录遇到问题</h1>
    <p id="error-text"></p>
    <a href="/login" class="btn">重新登录</a>
  </div>
  <script>
    const params = new URLSearchParams(window.location.search);
    const errorCode = params.get('error');
    const rawDesc = params.get('error_description');
    
    // 把技术错误码转成用户易懂的描述
    let userMsg = '';
    switch(errorCode) {
      case 'access_denied':
        userMsg = '你取消了登录授权，点击按钮重新尝试即可。';
        break;
      case 'invalid_scope':
        userMsg = '登录请求的权限范围无效，请联系系统管理员。';
        break;
      case 'invalid_grant':
        userMsg = '登录凭证无效，请确认账号信息后重试。';
        break;
      default:
        userMsg = rawDesc || '登录过程中发生未知错误，请稍后再试。';
    }
    document.getElementById('error-text').textContent = userMsg;
  </script>
</body>
</html>

方案2：API函数处理错误 #

如果你的SWA项目包含API，可以用后端函数来处理错误并返回自定义页面，适合需要更复杂逻辑的场景：

1. 在API目录下创建auth-error-handler/index.js（以Node.js为例）：

module.exports = async function (context, req) {
  const errorCode = req.query.error;
  const rawDesc = req.query.error_description;
  
  let friendlyMsg = '';
  switch(errorCode) {
    case 'access_denied':
      friendlyMsg = '你取消了登录授权，点击下方按钮重新登录。';
      break;
    case 'invalid_grant':
      friendlyMsg = '登录凭证无效，请检查账号后重试。';
      break;
    default:
      friendlyMsg = rawDesc || '登录失败，请稍后再试。';
  }

  context.res = {
    headers: { 'Content-Type': 'text/html' },
    body: `
      <!DOCTYPE html>
      <html>
      <head>
        <title>登录出错</title>
        <style>
          body { font-family: Arial, sans-serif; padding: 2rem; text-align: center; }
          .error-container { max-width: 500px; margin: 0 auto; }
          .btn { padding: 0.75rem 1.5rem; background: #0078d4; color: white; border: none; border-radius: 4px; cursor: pointer; }
        </style>
      </head>
      <body>
        <div class="error-container">
          <h2>登录遇到问题</h2>
          <p>${friendlyMsg}</p>
          <button class="btn" onclick="window.location.href='/login'">重新登录</button>
        </div>
      </body>
      </html>
    `
  };
};

2. 在staticwebapp.config.json中添加路由规则，将错误请求导向该API：

{
  "routes": [
    {
      "route": "/.auth/login/*/callback",
      "rewrite": "/api/auth-error-handler",
      "conditions": {
        "query": {
          "error": "*"
        }
      }
    }
  ]
}

方案3：完全自定义登录流程 #

如果需要极致的控制，可以绕过SWA内置的认证流程，直接对接身份提供商（如Azure AD、GitHub等）的OAuth2/OpenID Connect接口，这样就能完全掌控错误处理和页面展示。不过这个方案开发工作量较大，适合对登录流程有高度定制需求的场景。

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