Electron+Angular如何获取从应用打开的外部浏览器标签页URL？

方法一：使用自定义协议（推荐） #

自定义协议是桌面应用处理外部回调的标准方案，Electron原生支持注册和监听自定义协议，完美适配Discord OAuth2的回调需求。

步骤1：在Electron主进程注册自定义协议 #

修改main.js，添加协议注册和监听逻辑：

const { app, shell, ipcMain } = require('electron');

// 注册自定义协议（协议名需小写，符合RFC规范）
app.setAsDefaultProtocolClient('myapp');

// Windows平台额外处理启动参数，确保应用已启动时能捕获协议激活事件
if (process.platform === 'win32') {
  app.setAsDefaultProtocolClient('myapp', process.execPath, [process.argv[0]]);
}

// 监听外部浏览器通过自定义协议唤起应用的事件
app.on('open-url', (event, url) => {
  event.preventDefault();
  // 解析URL中的code参数
  const urlParams = new URLSearchParams(new URL(url).search);
  const code = urlParams.get('code');
  
  // 将code发送给Angular渲染进程
  if (win) { // win为你的主窗口实例
    win.webContents.send('discord-auth-code', code);
  }
});

步骤2：配置Discord开发者后台 #

登录Discord开发者平台，找到你的应用，在OAuth2 → Redirects中添加回调URL：myapp://auth/discord

步骤3：修改Angular中的认证链接 #

调整endPoint，确保redirect_uri参数指向自定义协议地址：

// 构造Discord认证链接示例
const clientId = '你的Discord客户端ID';
const redirectUri = encodeURIComponent('myapp://auth/discord');
const scope = encodeURIComponent('identify email');
const endPoint = `https://discord.com/api/oauth2/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}`;

// 打开外部浏览器
const win = window.open(endPoint, 'loginNav', strWindowFeatures);

步骤4：Angular中接收主进程传来的code #

在Angular组件中通过Electron的IPC监听code：

import { Component, OnInit } from '@angular/core';
const { ipcRenderer } = window.require('electron');

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  ngOnInit(): void {
    ipcRenderer.on('discord-auth-code', (event, code) => {
      // 拿到code后执行后续逻辑：交换token、获取用户信息等
      console.log('Discord认证code:', code);
    });
  }
}

方法二：使用本地临时HTTP服务器 #

如果自定义协议存在兼容性问题，可以通过本地HTTP服务器接收回调：

步骤1：主进程启动临时HTTP服务器 #

在main.js中添加Node.js HTTP服务器逻辑：

const { app, shell, ipcMain } = require('electron');
const http = require('http');

let authServer;

// 启动本地认证服务器
function startAuthServer() {
  authServer = http.createServer((req, res) => {
    // 解析请求URL中的code
    const urlParams = new URLSearchParams(new URL(req.url, 'http://localhost:3000').search);
    const code = urlParams.get('code');
    
    if (code) {
      // 发送code到渲染进程
      if (win) {
        win.webContents.send('discord-auth-code', code);
      }
      // 返回成功提示给浏览器
      res.writeHead(200, {'Content-Type': 'text/html'});
      res.end('<h1>认证成功！可以关闭此页面了</h1>');
      // 关闭临时服务器
      authServer.close();
    }
  });
  
  authServer.listen(3000, 'localhost', () => {
    console.log('认证服务器启动在 http://localhost:3000');
  });
}

// 在主窗口创建后或用户点击登录前调用：startAuthServer();

步骤2：配置Discord回调URL #

在Discord开发者后台添加：http://localhost:3000/auth/discord

步骤3：修改Angular的认证链接 #

const redirectUri = encodeURIComponent('http://localhost:3000/auth/discord');
const endPoint = `https://discord.com/api/oauth2/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}`;

步骤4：Angular中接收code（同方法一） #

通过ipcRenderer监听discord-auth-code事件处理code即可。

注意事项 #

• 自定义协议名需符合RFC规范，仅支持小写字母开头，不能包含特殊字符。
• 生产环境打包时，自定义协议需在打包配置中声明（如electron-builder的protocols字段）。
• 本地HTTP服务器需确保端口未被占用，也可通过代码随机选择可用端口。

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