如何在W20中将Basic Authentication替换为Form Authentication？

核心结论 #

完全可以替换，需要从后端SeedStack配置和前端W20/AngularJS适配两方面入手，同时解决浏览器原生认证弹窗的问题。

第一步：解决当前401原生弹窗问题 #

浏览器弹出用户名/密码弹窗，是因为后端返回的401响应带有WWW-Authenticate: Basic头。先修改SeedStack配置，让后端返回不带该头的401：

# SeedStack application.yaml 配置
security:
  realms:
    - name: formRealm
      authenticationScheme: FORM
      # 关闭Basic认证头输出
      sendWWWAuthenticateHeader: false
      # 指定登录请求的处理路径（前端登录表单提交到这里）
      loginUrl: /login
      # 登录成功后的跳转路径
      successUrl: /
      # 登录失败后的跳转路径
      failureUrl: /login?error

第二步：配置SeedStack表单认证支持 #

继续完善SeedStack的安全配置，启用表单认证的会话管理，确保登录后会话有效：

security:
  web:
    # 保护需要认证的路径
    securedPaths:
      - /api/**
      - /app/**
    # 允许匿名访问登录页和静态资源
    anonymousPaths:
      - /login
      - /assets/**
  realms:
    - name: formRealm
      authenticationScheme: FORM
      sendWWWAuthenticateHeader: false
      loginUrl: /login
      successUrl: /
      failureUrl: /login?error
      # 配置用户存储（比如JDBC、LDAP，根据你的实际情况调整）
      userStore:
        type: jdbc
        dataSource: mainDataSource
        usersQuery: SELECT username, password, enabled FROM users WHERE username = ?
        authoritiesQuery: SELECT username, authority FROM authorities WHERE username = ?

第三步：前端W20 + AngularJS适配 #

1. 禁用W20默认的Basic Auth拦截器

找到你的W20应用配置文件（通常是w20.app.json），修改security模块配置，关闭basicAuth：

{
  "modules": {
    "security": {
      "enabled": true,
      "basicAuth": {
        "enabled": false
      }
    }
  }
}

2. 自定义AngularJS HTTP拦截器捕获401

创建一个拦截器，当请求返回401时，跳转到自定义登录页面，避免浏览器弹窗：

angular.module('yourApp').factory('authInterceptor', ['$q', '$location', function($q, $location) {
  return {
    responseError: function(response) {
      if (response.status === 401) {
        // 记录当前路径，登录成功后跳转回来
        sessionStorage.setItem('redirectUrl', $location.path());
        // 跳转到自定义登录页
        $location.path('/login');
      }
      return $q.reject(response);
    }
  };
}]);

// 注册拦截器
angular.module('yourApp').config(['$httpProvider', function($httpProvider) {
  $httpProvider.interceptors.push('authInterceptor');
}]);

3. 实现自定义登录页面和表单提交

创建登录页面模板（比如login.html），实现表单提交逻辑，调用后端SeedStack的登录接口：

<!-- login.html -->
<form ng-submit="login()">
  <input type="text" ng-model="credentials.username" placeholder="用户名" required>
  <input type="password" ng-model="credentials.password" placeholder="密码" required>
  <button type="submit">登录</button>
  <div ng-if="error" class="error">登录失败，请检查用户名密码</div>
</form>

对应的AngularJS控制器：

angular.module('yourApp').controller('LoginController', ['$scope', '$http', '$location', function($scope, $http, $location) {
  $scope.credentials = {};
  $scope.error = false;

  $scope.login = function() {
    $http.post('/login', $.param($scope.credentials), {
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).then(function(response) {
      // 登录成功，跳转到之前记录的路径或首页
      var redirectUrl = sessionStorage.getItem('redirectUrl') || '/';
      sessionStorage.removeItem('redirectUrl');
      $location.path(redirectUrl);
    }, function(error) {
      $scope.error = true;
    });
  };
}]);

第四步：验证流程 #

1. 访问受保护路径时，后端返回401（不带Basic头）
2. 前端拦截器捕获401，跳转到自定义登录页
3. 用户提交登录表单，后端验证通过后创建会话
4. 前端跳转到原访问路径，后续请求携带会话Cookie，无需再认证

内容的提问来源于stack exchange，提问作者Hugo Orlando Gonzalez