iOS 17下如何让Angular应用内OAuth登录页支持Safari调试

一、调整angular-oauth2-oidc的内嵌iframe配置 #

默认弹窗模式在iOS Safari中难以调试，可改为同域内嵌iframe模式（需OAuth授权服务器允许你的Angular域名作为iframe父域）：

1. 修改OAuth配置对象，开启静默刷新并指定跳转页：

import { AuthConfig } from 'angular-oauth2-oidc';

export const authConfig: AuthConfig = {
  issuer: '你的OAuth授权服务器地址',
  redirectUri: window.location.origin + '/callback',
  silentRefreshRedirectUri: window.location.origin + '/silent-refresh.html',
  clientId: '你的客户端ID',
  scope: 'openid profile email',
  useSilentRefresh: true,
  sessionChecksEnabled: true,
  showDebugInformation: true, // 开启调试日志辅助排查
};

2. 在项目根目录创建silent-refresh.html空白页：

<!DOCTYPE html>
<html>
<body>
  <script>
    window.addEventListener('message', (event) => {
      if (event.data?.type === 'silentRefresh') {
        window.opener.postMessage(event.data, event.origin);
        window.close();
      }
    });
  </script>
</body>
</html>

二、Safari调试工具设置 #

1. 打开iOS设备设置 > Safari浏览器 > 高级，开启Web检查器。
2. 用USB连接iOS设备到Mac，打开Mac端Safari，点击顶部菜单开发 > [你的设备名称] > [你的Angular应用页面]。
3. 在调试面板切换到Frames标签，即可找到内嵌的OAuth登录页iframe，点击进入调试界面（可查看DOM、Console、Network请求）。

三、OAuth授权服务器配套配置 #

若授权服务器禁止iframe嵌入，需联系后端团队添加以下配置：

• 在授权响应头中设置Content-Security-Policy: frame-ancestors 你的Angular应用域名;
• 在OAuth客户端配置中，将你的Angular域名加入allowed_origins或frame_ancestors白名单

四、弹窗模式调试替代方案 #

若无法使用iframe，可调整为弹窗模式并开启Safari弹窗调试：

1. 修改OAuth配置启用弹窗模式：

export const authConfig: AuthConfig = {
  // 保留其他基础配置
  oidc: true,
  responseType: 'code',
  popupMode: true,
  popupOptions: {
    width: 600,
    height: 800,
    left: window.screen.width / 2 - 300,
    top: window.screen.height / 2 - 400
  }
};

2. Mac端Safari的开发菜单下，弹窗会作为独立标签页出现在设备列表中，直接点击即可调试。

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