如何用angular-oauth2-oidc结合嵌入浏览器实现Ionic6的Keycloak登录

要实现内嵌浏览器加载Keycloak登录页，核心思路是禁用angular-oauth2-oidc的自动跳转逻辑，手动构建授权URL并通过Capacitor Browser打开，最后捕获回调URL完成登录流程，具体步骤如下：

1. 调整OAuthService配置，禁用自动跳转 #

首先修改angular-oauth2-oidc的配置，避免库自动打开外部浏览器：

import { OAuthService } from 'angular-oauth2-oidc';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class AuthService {
  constructor(private oauthService: OAuthService) {
    this.initOAuthConfig();
  }

  private initOAuthConfig() {
    this.oauthService.configure({
      issuer: 'https://你的Keycloak域名/auth/realms/你的Realm',
      clientId: '你的客户端ID',
      redirectUri: window.location.origin + '/callback', // 回调路由需提前配置
      scope: 'openid profile email',
      useHash: true, // 适配Ionic路由模式，避免路由冲突
      disableAtHashCheck: true,
      // 关键：不自动触发登录跳转，由我们手动控制
    });
  }
}

2. 手动构建授权URL，用Capacitor Browser打开内嵌窗口 #

先确保安装Capacitor Browser插件：npm install @capacitor/browser，然后实现登录逻辑：

import { Browser } from '@capacitor/browser';

// 在AuthService中添加登录方法
async login() {
  // 先加载Keycloak的发现文档
  await this.oauthService.loadDiscoveryDocument();

  // 手动生成授权跳转URL
  const authUrl = this.oauthService.createAuthorizationUrl();

  // 打开内嵌浏览器窗口
  await Browser.open({
    url: authUrl,
    windowName: '_self', // 强制内嵌打开，而非外部浏览器
    presentationStyle: 'fullscreen', // iOS端可按需选popover等样式
  });

  // 监听浏览器关闭事件，捕获回调URL
  Browser.addListener('browserFinished', async (event) => {
    if (event.url) {
      // 提取回调URL中的hash参数，交给oauth库完成登录
      const hashFragment = event.url.split('#')[1];
      await this.oauthService.tryLogin({ customHashFragment: hashFragment });

      // 登录成功后的逻辑：获取用户信息、跳转首页等
      const userInfo = this.oauthService.getIdentityClaims();
      console.log('登录成功：', userInfo);
    }
  });
}

3. 配置回调路由 #

在Ionic路由中添加一个空的回调页面（无需渲染内容，仅用于捕获回调）：

// app-routing.module.ts
const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomePageModule) },
  { path: 'callback', component: CallbackPage }, // 新增回调路由
];

CallbackPage可以是一个空组件，仅作为路由占位符。

4. iOS端额外配置 #

• 在capacitor.config.ts中允许跳转至Keycloak域名：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.你的应用ID',
  appName: '你的应用名称',
  webDir: 'www',
  server: {
    allowNavigation: ['https://你的Keycloak域名'] // 授权登录页的域名必须在此列表内
  }
};

export default config;

• 确保Keycloak客户端的Valid Redirect URIs包含你的回调地址（如http://localhost:8100/callback）。

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