如何实现Next.js与Electron轻客户端跳转及数据传输（类Teams/Zoom功能）

一、实现浏览器内链接的选择弹窗（类似Teams/Zoom） #

浏览器默认对自定义协议链接的提示逻辑不可控，要实现自定义选择弹窗，需要前端主动拦截链接点击，替换为自定义交互：

1. 核心逻辑

   • 页面中使用普通HTTP链接（而非直接用自定义协议），点击时触发自定义模态框，让用户选择「打开桌面应用」或「继续在浏览器」。
   • 用户选「打开应用」时，再通过JS唤起自定义协议URL；选「浏览器」则跳转至对应页面或保留当前操作。

2. Next.js组件示例

import { useState } from 'react';

const LaunchSelector = () => {
  const [showModal, setShowModal] = useState(false);

  const handleOpenApp = () => {
    // 唤起自定义协议
    window.location.href = 'myapp://launch';
    setShowModal(false);
    // 可选：检测唤起失败，引导用户
    setTimeout(() => {
      window.focus();
      alert('无法打开桌面应用，请检查是否已安装');
    }, 1000);
  };

  const handleStayInBrowser = () => {
    // 跳转到浏览器端业务页面
    window.location.href = '/app-browser';
    setShowModal(false);
  };

  return (
    <>
      <button onClick={() => setShowModal(true)}>打开项目</button>
      {showModal && (
        <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ background: '#fff', padding: '2rem', borderRadius: '8px', minWidth: '300px' }}>
            <h3>选择打开方式</h3>
            <div style={{ marginTop: '1.5rem', display: 'flex', gap: '1rem', justifyContent: 'flex-end' }}>
              <button onClick={handleStayInBrowser}>继续在浏览器</button>
              <button onClick={handleOpenApp} style={{ background: '#0078d4', color: '#fff', border: 'none', padding: '0.5rem 1rem', borderRadius: '4px' }}>打开桌面应用</button>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default LaunchSelector;

3. 补充说明
   • 若用户之前设置了「始终打开」自定义协议，浏览器会直接唤起应用，此时可通过setTimeout检测页面是否失去焦点判断唤起状态，失败则提示用户。
   • 模态框样式可根据项目UI自定义，尽量贴近系统弹窗的视觉风格。

二、将Next.js的认证令牌传输至Electron窗口 #

推荐两种可靠方案，可根据令牌敏感程度选择：

方案1：自定义协议URL携带参数（简单直接） #

通过自定义协议URL拼接令牌参数，Electron主进程解析后传递给渲染进程：

1. Next.js端唤起时拼接参数

const handleOpenApp = () => {
  const authToken = localStorage.getItem('auth_token'); // 从本地存储或接口获取令牌
  // 编码参数避免特殊字符问题
  const encodedToken = encodeURIComponent(authToken);
  window.location.href = `myapp://launch?token=${encodedToken}`;
  setShowModal(false);
};

2. Electron主进程监听并解析

const { app, BrowserWindow } = require('electron');
const path = require('path');
let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')
    }
  });
  mainWindow.loadFile('index.html');
}

app.whenReady().then(() => {
  createWindow();

  // 监听自定义协议唤起事件
  app.on('open-url', (event, url) => {
    event.preventDefault();
    // 解析URL参数
    const urlObj = new URL(url);
    const token = urlObj.searchParams.get('token');
    
    // 将令牌发送给渲染进程
    if (mainWindow) {
      mainWindow.webContents.send('auth-token-received', token);
    }
  });
});

// macOS需额外设置默认协议
app.setAsDefaultProtocolClient('myapp');

3. Electron渲染进程接收令牌（通过preload桥接）
   preload.js：

const { ipcRenderer, contextBridge } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  onAuthTokenReceived: (callback) => ipcRenderer.on('auth-token-received', (_, token) => callback(token))
});

渲染进程页面：

window.electronAPI.onAuthTokenReceived((token) => {
  // 用令牌完成认证逻辑，比如存入本地存储、设置请求头
  localStorage.setItem('electron_auth_token', token);
  console.log('已接收认证令牌');
});

方案2：本地HTTP服务器传输（更安全，适合敏感令牌） #

若令牌敏感，不希望暴露在URL中，可在Electron启动时启动本地HTTP服务，Next.js通过POST请求发送令牌：

1. Electron主进程启动本地服务

const { app, BrowserWindow } = require('electron');
const express = require('express');
const bodyParser = require('body-parser');
const appExpress = express();
let mainWindow;

appExpress.use(bodyParser.json());

// 接收令牌的接口
appExpress.post('/send-auth-token', (req, res) => {
  const { token } = req.body;
  if (mainWindow) {
    mainWindow.webContents.send('auth-token-received', token);
  }
  res.status(200).send('令牌已接收');
});

// 绑定本地回环地址，避免外部访问
const server = appExpress.listen(3001, '127.0.0.1', () => {
  console.log('本地服务运行于 http://127.0.0.1:3001');
});

// 应用退出时关闭服务
app.on('quit', () => server.close());

// 窗口创建逻辑同方案1

2. Next.js端发送令牌

const handleOpenApp = async () => {
  const authToken = localStorage.getItem('auth_token');
  // 先唤起应用
  window.location.href = 'myapp://launch';
  // 延迟发送，确保Electron已启动服务
  setTimeout(async () => {
    try {
      await fetch('http://127.0.0.1:3001/send-auth-token', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ token: authToken })
      });
    } catch (err) {
      console.error('令牌发送失败:', err);
    }
  }, 1500);
  setShowModal(false);
};

3. 安全注意事项
   • 本地服务仅绑定127.0.0.1，禁止外部访问。
   • 可添加请求验证（比如固定密钥），防止恶意请求。

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