如何通过浏览器链接打开Electron React JS应用并跳转重置密码页

1. 注册应用自定义私有协议 #

这一步的作用是让系统识别你自定义的链接前缀，点击时自动唤起你的Electron应用，自定义协议名建议和你的应用名绑定，避免和其他应用冲突，示例用myapp://作为协议前缀。

主进程注册代码 #

在应用启动入口的主进程文件中加入以下代码，开发和打包环境都生效：

// 注册自定义协议，参数为你的协议名
app.setAsDefaultProtocolClient('myapp')

打包配置（以electron-builder为例） #

在package.json的build配置中加入协议声明，打包后安装应用时会自动向系统注册协议：

{
  "build": {
    "protocols": {
      "name": "你的应用名自定义协议",
      "schemes": ["myapp"]
    }
  }
}

2. 监听协议唤起事件，提取重置密码参数 #

不同系统的唤起触发逻辑不同，需要分别适配Windows和macOS：

macOS 监听逻辑 #

app.on('open-url', (event, url) => {
  event.preventDefault()
  // 匹配重置密码的协议路径
  if (url.startsWith('myapp://reset-password')) {
    // 提取url中的重置token
    const resetToken = new URL(url).searchParams.get('token')
    // 将token传递给渲染进程
    mainWindow.webContents.send('reset-password-trigger', resetToken)
    // 唤起应用窗口到前台
    if (mainWindow.isMinimized()) mainWindow.restore()
    mainWindow.focus()
  }
})

Windows 监听逻辑 #

Windows需要先做单实例锁处理，避免重复打开应用，同时处理首次启动和已有实例运行两种场景：

const gotTheLock = app.requestSingleInstanceLock()
if (!gotTheLock) {
  app.quit()
} else {
  // 场景1：应用已经在运行，点击链接触发第二个实例
  app.on('second-instance', (event, commandLine) => {
    // 从启动参数中匹配自定义协议链接
    const targetUrl = commandLine.find(arg => arg.startsWith('myapp://'))
    if (targetUrl?.startsWith('myapp://reset-password')) {
      const resetToken = new URL(targetUrl).searchParams.get('token')
      mainWindow.webContents.send('reset-password-trigger', resetToken)
      if (mainWindow.isMinimized()) mainWindow.restore()
      mainWindow.focus()
    }
  })

  // 场景2：应用未运行，点击链接启动应用
  app.on('ready', () => {
    const targetUrl = process.argv.find(arg => arg.startsWith('myapp://'))
    if (targetUrl?.startsWith('myapp://reset-password')) {
      const resetToken = new URL(targetUrl).searchParams.get('token')
      // 等待渲染进程加载完成后再传递参数
      mainWindow.webContents.on('did-finish-load', () => {
        mainWindow.webContents.send('reset-password-trigger', resetToken)
      })
    }
  })
}

3. 渲染进程接收参数，展示重置表单 #

在渲染进程的公共入口文件中监听主进程传递的事件，触发对应逻辑：

import { ipcRenderer } from 'electron'

ipcRenderer.on('reset-password-trigger', (event, token) => {
  // 此处根据你的前端技术栈实现逻辑：
  // 1. 如果用路由管理，直接跳转到重置密码页面，将token作为参数携带
  // 2. 如果是原生页面，直接显示重置密码表单，将token存入变量用于后续提交验证
  showResetPasswordForm(token)
})

4. 邮件链接配置 #

给用户发送的找回密码邮件中，跳转链接直接使用你自定义的协议即可，示例：

<a href="myapp://reset-password?token=当前用户的唯一重置有效token">点击重置密码</a>

注意事项 #

• 自定义协议名尽量唯一，不要使用app、tool这类通用名称，避免和其他已安装应用的协议冲突
• 重置token必须设置有效期，且验证一次后立即作废，避免安全风险
• 可在邮件中补充提示：如果点击链接无响应，请先确认已经安装本应用，也可以额外附带网页端重置密码的链接作为备用方案

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