如何在Cordova应用中处理OAuth2回调URI？

问题 #

我用Cordova运行Angular安卓移动端应用，采用Auth0实现OAuth2身份认证。Web端功能正常：认证完成后，Auth0携带令牌重定向至回调URL，Web应用接收参数后重启。

最初移动端测试时，应用会打开外部浏览器登录，无法返回应用。后来在config.xml中添加了<allow-navigation href="https://[my domain].eu.auth0.com/*"/>配置，现在能在应用内完成认证，但回调URL为https://localhost/index.html?code=[token]，应用无法识别该URL属于自身。

请问如何让Cordova应用识别并处理该URL？或者正确的回调URL应该是什么？

更新：找到一个Ionic/Capacitor的Angular示例项目，尚未成功运行，重点关注其中的解决方案。

解决方案 #

1. 配置正确的Auth0回调URL #

Cordova应用不能用https://localhost作为回调URL，需使用自定义URL Scheme，格式一般为your-app-scheme://callback（比如myangularapp://callback）。操作步骤：

• 登录Auth0控制台，在应用设置中将该自定义Scheme URL添加到Allowed Callback URLs、Allowed Logout URLs、Allowed Web Origins列表中。
• 在Angular的Auth0配置里，把redirectUri设置为这个自定义Scheme URL。

2. 配置Cordova支持自定义URL Scheme #

安装Cordova的cordova-plugin-customurlscheme插件来处理自定义Scheme：

cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=your-app-scheme

替换your-app-scheme为你自定义的Scheme（比如myangularapp），需与Auth0配置中的保持一致。

3. 处理回调参数 #

认证完成后，Auth0会重定向到自定义Scheme URL，Cordova会捕获该跳转。需在Angular应用中监听事件，解析URL中的code参数完成令牌交换：

• 在应用初始化阶段（比如app.component.ts的ngOnInit方法内）添加监听逻辑：

document.addEventListener('deviceready', () => {
  window.handleOpenURL = (url: string) => {
    // 解析URL中的code参数
    const code = new URL(url).searchParams.get('code');
    // 调用Auth0的令牌交换方法，完成认证流程
    this.auth0Service.exchangeCodeForToken(code);
  };
}, false);

4. 调整Cordova导航配置 #

保留之前的<allow-navigation href="https://[my domain].eu.auth0.com/*"/>配置，确保Auth0登录页面能在应用内加载，无需添加自定义Scheme的allow-navigation规则，插件会自动处理相关跳转。

内容的提问来源于stack exchange，提问作者Árpád Magosányi