Angular 7应用从Implicit Flow迁移至无PKCE的Authorization Code Flow

一、前端 Angular 7 改造 #

1. 依赖适配 #

安装适配 Angular 7 的 Okta Angular SDK：

npm install @okta/okta-angular@3.x

移除原 Implicit Flow 相关的依赖配置（如旧版 OAuth2 库的特定配置）。

2. 配置 Authorization Code Flow（禁用 PKCE） #

在 app.module.ts 中初始化 Okta 客户端，指定授权模式为 Authorization Code 并关闭 PKCE：

import { OktaAuthModule, OktaAuth } from '@okta/okta-angular';

const oktaAuth = new OktaAuth({
  issuer: 'https://你的Okta域名/oauth2/default',
  clientId: '你的客户端ID',
  redirectUri: window.location.origin + '/login/callback', // 或指向后端回调接口
  responseType: 'code', // 核心：使用授权码模式
  pkce: false, // 禁用 PKCE
  scope: 'openid profile email',
});

@NgModule({
  imports: [
    OktaAuthModule.forRoot({ oktaAuth }),
    // 其他业务模块
  ]
})
export class AppModule { }

3. 路由与回调处理 #

添加登录回调路由，用于接收 Okta 返回的授权码：

import { OktaCallbackComponent } from '@okta/okta-angular';

const routes: Routes = [
  { path: 'login/callback', component: OktaCallbackComponent },
  // 其他业务路由
];

4. 自动登录实现 #

自动登录的核心是检测 Okta 端的 SSO 会话，若存在则自动触发授权流程：

• 在根组件 app.component.ts 中添加初始化逻辑：

import { OktaAuth } from '@okta/okta-angular';

constructor(private oktaAuth: OktaAuth) {}

async ngOnInit() {
  const isAuthenticated = await this.oktaAuth.isAuthenticated();
  if (!isAuthenticated) {
    // 检查 Okta 是否存在有效 SSO 会话
    const hasSsoSession = await this.oktaAuth.session.exists();
    if (hasSsoSession) {
      // 自动发起授权跳转，跳转后会回调到指定路由
      await this.oktaAuth.signInWithRedirect();
    }
  }
}

• 路由守卫增强：在需要登录的路由上配置自定义守卫，确保未登录用户自动触发 SSO：

import { OktaAuthGuard } from '@okta/okta-angular';
import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable()
export class CustomAuthGuard extends OktaAuthGuard {
  async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    const isAuthenticated = await this.oktaAuth.isAuthenticated();
    if (isAuthenticated) return true;

    const hasSsoSession = await this.oktaAuth.session.exists();
    // 存在 SSO 会话则自动登录，否则跳转到 Okta 登录页
    await this.oktaAuth.signInWithRedirect({ originalUri: state.url });
    return false;
  }
}

二、后端 Spring Boot 配合 #

1. OAuth2 客户端配置 #

在 application.yml 中配置 Authorization Code Flow，确保与前端 Okta 配置一致：

spring:
  security:
    oauth2:
      client:
        registration:
          okta:
            client-id: 你的客户端ID
            client-secret: 你的客户端密钥
            authorization-grant-type: authorization_code
            redirect-uri: "{baseUrl}/login/oauth2/code/okta"
            scope: openid, profile, email
        provider:
          okta:
            issuer-uri: https://你的Okta域名/oauth2/default

2. 授权码交换与令牌管理 #

如果采用后端托管客户端密钥的安全模式（推荐，避免前端暴露密钥），可以在后端实现回调接口处理授权码交换：

@RestController
@RequestMapping("/api/auth")
public class AuthCallbackController {

    @Autowired
    private OAuth2AuthorizedClientService authorizedClientService;

    @GetMapping("/callback")
    public ResponseEntity<String> handleAuthCallback(
            @RegisteredOAuth2AuthorizedClient("okta") OAuth2AuthorizedClient authorizedClient) {
        // 获取 Okta 返回的访问令牌
        String accessToken = authorizedClient.getAccessToken().getTokenValue();
        // 可在此生成前端会话、存储令牌或直接返回（需确保 HTTPS 传输）
        return ResponseEntity.ok(accessToken);
    }
}

此时前端的 redirectUri 需改为后端回调接口地址，前端在回调后从后端获取令牌并存储，后续请求 API 时携带令牌。

3. API 资源验证 #

确保后端 API 能正确验证 Authorization Code Flow 获取的令牌，示例配置：

@Configuration
@EnableResourceServer
public class ResourceServerConfig extends ResourceServerConfigurerAdapter {
    @Override
    public void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
                .anyRequest().authenticated();
    }
}

三、关键注意事项 #

• 无 PKCE 的 Authorization Code Flow 仅适用于信任客户端（如部署在可控服务器的 Angular 应用），若为纯静态托管的公开应用，PKCE 更安全，需评估业务场景后选择。
• 客户端密钥需妥善保管，后端托管模式下避免前端暴露密钥。
• 确保 Okta 控制台中客户端的授权模式已开启 Authorization Code Flow，并禁用 Implicit Flow。

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