电子的 registerHttpProtocol 在开发中工作吗? [英] Does electron's registerHttpProtocol work in development?
问题描述
我正在尝试使用电子注册自定义协议.我希望它是网站可以用来提供 api 密钥的重定向位置(如 myprotocol://example/payload=api-key).我一直在使用 electron 的 registerHttpProtocol 还尝试了电子的 interceptHttpProtocol.
I'm trying to register a custom protocol with electron. I want it to be a redirect location that a website can use to provide an api key (like myprotocol://example/payload=api-key). I have been using electron's registerHttpProtocol and also tried electron's interceptHttpProtocol.
但是，当网站尝试重定向到我的协议时，我的电子应用程序没有做任何事情.该网站转到 myprotocol://example/payload=api-key，并注册一个页面不存在错误"——而我的应用程序中没有任何反应.
But, when the website tries to redirect to my protocol my electron app doesn't do anything. The website goes to myprotocol://example/payload=api-key, and registers a "page doesn't exist error"--while nothing happens in my app.
这是在开发环境中.我看过一些讨论关于自定义协议假设一个生产环境.
This is in a development environment. I've seen some discussion about custom protocols that assume a production environment.
您可以在开发中使用电子注册自定义协议吗?
Can you register a custom protocol with electron in development?
为什么我无法拦截网站按照我设定的协议进行的操作?
Why am I not able to intercept the website's going to the protocol I've set out?
这是我的代码:
main.js:
app.whenReady().then(() => {
protocol.registerHttpProtocol('examplep', (request, callback) => {
console.log("examplep", request);
callback('it-worked');
}, (error) => {
if (error) console.error('Failed to register protocol = ' + error)
})
protocol.interceptHttpProtocol("examplep", function (request, callback) { //I've tried both registerHttp... and interceptHttp... methods, so including both here; though I think in practice only one should be required
console.log('intercepted!' + request)
callback(request);
});
})
提供到网站的重定向网址:
'http://examplep'
而且我已在网站本身上将此网址列入白名单.
And I've whitelisted this url on the website itself.
我也试过registerStringProtocol、interceptStringProtocol、registerFileProtocol、interceptFileProtocol等相关方法，都没有成功.
I've also tried related methods registerStringProtocol, interceptStringProtocol, registerFileProtocol, and interceptFileProtocol, without success.
我错过了什么?
推荐答案
听起来您需要支持桌面应用程序的深度链接，这是通过自定义 URI 方案完成的，并在 setAsDefaultProtocolClient 中注册.
Sounds like you need to support deep linking fora desktop app, which is done via a Custom URI Scheme and is registered with setAsDefaultProtocolClient.
当您的 Electron 应用启动时，在您的应用的主端编写此代码来注册方案:
When your Electron app starts up write this code to register the scheme, on the main side of your app:
const customScheme = 'x-mycompany-myapp';
app.setAsDefaultProtocolClient(customScheme);
可以像这样从命令行测试自定义方案，具体取决于您运行的是 macOS 还是 Windows:
The custom scheme can be tested from the command line like this, depending whether you are running macOS or Windows:
open x-mycompany-myapp:/some/location
start x-mycompany-myapp:/some/location
网络客户端只会调用 我的这个 Javascript 代码;
A web client will just invoke a URL as in this Javascript code of mine;
通知将在您的应用程序的主端收到，并且在 Windows 上将尝试创建应用程序的新实例，在这种情况下，您需要检测这种情况，处理通知然后取消新的应用程序实例.
The notification will be received within the main side of your app and on Windows will attempt to create a new instance of the app, in which case you need to detect this condition, process the notification then cancel the new app instance.
在 MacOS 上，它将在 open-url 事件中接收，因此您可以这样注册:
On MacOS it will be received within the open-url event, so you register it like this:
app.on('open-url', this._onOpenUrl);
一旦 Electron 应用程序的主端收到通知，它需要获取 URL 信息并将其转发给渲染器进程.您可以为此使用 ipcMain 事件.
Once the main side of the Electron app has the notification, it needs to get the URL information and forward it to the renderer process. You can use ipcMain events for this.
最后，在运行实例中接收通知和从深层链接启动应用程序的代码是不同的.
Finally the code for receiving the notification in running instances and starting the app from a deep link are different.
示例应用
由于代码有点棘手，这里有一些可能有用的示例代码，供您比较.如果对您有帮助，您还可以按照博文中的说明运行该应用程序:
Since the code is a little tricky, here is some example code that may be useful, to give you something to compare against. If it helps you can also run the app by following the instructions in the blog post:
我的用例是在从系统浏览器登录后接收 OAuth 响应.希望您可以从中借鉴一些与深度链接相关的想法.
My use case is around receiving OAuth responses after signing in from the system browser. Hopefully you can borrow some ideas from it related to deep linking though.
INFO.PLIST
我的理解是，在开发环境中(在 macOS 上)，深层链接在应用程序运行时起作用，但如果您停止应用程序并尝试深层链接，它将不会启动应用程序.
My understand is that in a development environment (on macOS) deep links work when the app is running, but if you stop the app and attempt a deep link it will not start the app.
您只能为需要 info.plist 的打包应用解决此问题.在我的代码示例中，info.plist 是从 在 package.json 文件中构建协议条目.
You can only resolve this for a packaged app, which requires an info.plist. In my code sample the info.plist is generated from build protocol entries in the package.json file.
我的代码示例由 Electron Packager 以基本方式打包，因此当我运行 npm run pack 时，应用程序会构建到 dist 文件夹.然后我可以运行该应用程序的打包版本，它会在系统中注册 - 如默认应用程序工具中所示.请参阅博文中的屏幕截图.
My code sample is packaged in a basic way by the Electron Packager, so when I run npm run pack, the app is built to a dist folder. I can then run the packaged version of the app and it gets registered with the system - as can be seen in the Default Apps tool. See screenshots in the blog post.
秘密
应使用操作系统安全存储来存储桌面应用程序的机密.博文中有凭证存储的截图.
Secrets for a desktop app should be stored using operating system secure storage. There are screenshots of credential storage in the blog post.
在 Electron 上，查看 keytar 组件 - 以及这个 我的包装类.我正在存储令牌(字符串)，因此您应该能够为您的 API 密钥调整代码.
On Electron, have a look at the keytar component - and this wrapper class of mine. I am storing tokens (strings) so you should be able to adapt the code for your API keys.
这篇关于电子的 registerHttpProtocol 在开发中工作吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
