web-dev-qa-db-fra.com

Comment lancer mon application électronique depuis un site Web

Nous avons une application de cryptographie électronique qui signe les transactions (entre autres).

Nous voulons que d'autres sites Web aient la possibilité d'avoir un bouton qui ouvre cette application électronique, pré-rempli avec certains paramètres (les informations de transaction).

le débit est:

  1. l'utilisateur clique sur "effectuer une transaction" sur some-crypto-site.com
  2. l'application électronique s'ouvre avec des paramètres pré-remplis
  3. l'utilisateur clique sur "signer la transaction" dans l'application électronique
  4. l'application électronique fait des trucs dans les coulisses
  5. l'application électronique se ferme et envoie un message à some-crypto-site.com

Cela peut être fait lors de l'exécution ou lors de l'installation.

Ce que j'ai essayé (linux, chrome)

appelant app.setAsDefaultProtocolClient avec le code ce Gist , qui est essentiellement:

app.setAsDefaultProtocolClient("my-app")

Mais après avoir mis my-app://foo?bar=baz dans chrome chrome, j'obtiens la fenêtre contextuelle suivante, et appuyer sur open-xdg ne fait rien (à part fermer la fenêtre contextuelle)

enter image description here

J'ai regardé

  1. Electron protocole api qui semble gérer uniquement les protocoles intégrés à l'application
  2. fichier webtorrent .desktop C'est peut-être la voie à suivre, je ne sais tout simplement pas comment procéder.

Peut-être existe-t-il un moyen de le faire lors de l'installation via générateur d'électrons ?

Merci d'avance pour l'aide, je n'ai aucune idée de comment procéder ici!

Ressources qui pourraient être utiles

  1. repo github avec exemple mac + fenêtre
  2. commentaire github pour linux
  3. commentaire github pour linux 2
  4. SO réponse pour les 3 OS
  5. réponse SO windows
  6. paquet npm pour le registre Windows
  7. réponse SO mac
  8. réponse SO linux
  9. Microsoft docs pour windows
  10. article Windows
  11. commentaire github pour windows
  12. commentaire github pour mac
  13. info.plst pour mac
  14. ancien repo pour mac et win
electronelectron-builder
14
goldylucks

Comme cela peut être pertinent pour ce que je fais au travail, j'ai décidé d'essayer. Je n'ai testé cela que sur OSX!

J'ai regardé la documentation de app.setAsDefaultProtocolClient et il dit ceci:

Remarque: Sous macOS, vous ne pouvez enregistrer que les protocoles qui ont été ajoutés à info.plist de votre application, qui ne peuvent pas être modifiés au moment de l'exécution. Vous pouvez cependant modifier le fichier avec un simple éditeur de texte ou script pendant la construction. Veuillez consulter la documentation d'Apple pour plus de détails.

Ces protocoles peuvent être définis lors de l'empaquetage de votre application avec electron-builder. Voir build:

{
  "name": "foobar",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dist": "electron-builder"
  },
  "devDependencies": {
    "electron": "^3.0.7",
    "electron-builder": "^20.38.2"
  },
  "dependencies": {},
  "build": {
    "appId": "foobar.id",
    "mac": {
      "category": "foo.bar.category"
    },
    "protocols": {
      "name": "foobar-protocol",
      "schemes": [
        "foobar"
      ]
    }
  }
}

Dans votre fil principal:

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

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600})
  mainWindow.loadFile('index.html');
}

app.on('ready', createWindow);

var link;

// This will catch clicks on links such as <a href="foobar://abc=1">open in foobar</a>
app.on('open-url', function (event, data) {
  event.preventDefault();
  link = data;
});

app.setAsDefaultProtocolClient('foobar');

// Export so you can access it from the renderer thread
module.exports.getLink = () => link;

Dans votre thread de rendu:

Remarquez l'utilisation de l'API remote pour accéder à la fonction getLink exportée dans le thread principal

<!DOCTYPE html>
<html>
  <body>
    <p>Received this data <input id="data"/></p>
    <script>
      const {getLink} = require('electron').remote.require('./main.js');
      document.querySelector('#data').value = getLink();
    </script>
  </body>
</html>

Exemple 

<a href="foobar://abc=1">open in foobar</a>

enter image description here

Cela vous permet également de lancer à partir de la ligne de commande:

open "foobar://xyz=1"

enter image description here

Comment revenez-vous à l'appelant d'origine?

Je suppose que lorsque vous lancez l'application, vous pouvez inclure l'URL de l'appelant:

<a href="foobar://abc=1&caller=example.com”>open in foobar</a>

Lorsque votre application électronique termine le traitement des données, elle renvoie simplement cette URL

Crédits

La plupart de mes conclusions sont basées sur:

15
customcommander