Utilisez vos compétences de développement Web pour créer une application de bureau avec Electron –

septembre 20, 2018

Cet article a été publié à l'origine sur le blog des développeurs Okta . Nous vous remercions de soutenir les partenaires qui rendent SitePoint possible.

Electron est une infrastructure permettant de créer des applications de bureau multiplates-formes avec des technologies Web telles que JavaScript, HTML et CSS. Il a été créé pour l’éditeur Atom de GitHub et a depuis été largement adopté. Electron alimente plusieurs applications que j'utilise quotidiennement: Slack, Kitematic et Visual Studio Code pour n'en citer que quelques-unes.

Electron 2.0 a été lancé au début du mois de mai 2018, avec des modifications apportées au projet afin de respecter les versions C'est une bonne nouvelle pour les développeurs car cela signifie que les versions de correctifs seront plus stables et que les nouvelles fonctionnalités ne seront disponibles que dans les versions majeures. Lorsque les projets open source utilisent correctement la gestion des versions sémantiques, les utilisateurs finaux ne voient pas les changements de version aussi souvent et souvent comme productifs.

Ce tweet de Gerard Sans le cloue à mon avis:

Les gens demandent toujours quel est le meilleur cadre. Qu'est-ce qu'ils devraient demander, quelles sont les compétences dont ils ont besoin pour être productifs en utilisant le framework X? Le problème est généralement leur manque de compétences pas quel cadre ils utilisent #angular #reactjs #vuejs #javascript [1945 pic.twitter.com/8DWwM4PJoT

– ᐸ GerardSans / ᐳ??? (@gerardsans) 5 août 2018

Possédez-vous des compétences en développement Web? Génial! Vous avez tout ce dont vous avez besoin pour créer une application de bureau avec Electron!

Dans cet article, je vais vous montrer comment créer une application Electron avec TypeScript, AppAuth-JS et OpenID Connect (OIDC). Vous apprendrez à ajouter une authentification et à sécuriser une application Electron pour vos utilisateurs.

Qu'est-ce qu'AppAuth?

AppAuth est un projet visant à créer des SDK clients pour des applications natives. Cela permet d'implémenter l'authentification et l'autorisation dans vos applications en utilisant OIDC et OAuth 2.0. Des kits de développement logiciel sont disponibles pour les environnements iOS, macOS, Android et JavaScript. AppAuth-JS est le SDK pour les clients JavaScript. AppAuth prend également en charge l'extension PKCE vers OAuth pour sécuriser davantage les clients publics.

Presque toutes les applications dépendent d'un système de gestion d'identité sécurisé. Pour la plupart des développeurs qui créent des applications Electron, il faut choisir entre le déploiement de votre propre authentification / autorisation ou le branchement d'un service d'identité hébergé tel qu'Okta.

Création d'applications de bureau avec Electron

facile pour toi. Plutôt que de créer une application à partir de zéro, vous utiliserez un exemple préexistant. Le projet AppAuth-JS a deux exemples, un exemple côté serveur avec Node à src / node_app / index.ts et un appauth-js-electron-sample . Clone l'exemple Electron pour commencer.

 git clone https://github.com/googlesamples/appauth-js-electron-sample.git okta-electron-example

Ouvrez le package.json dans ce projet et apportez les modifications suivantes:

 @@ -6,8 +6,8 @@
   "scripts": {
     "compile": "tsc",
     "watch": "tsc --watch",
- "start": "npm run-script compile && node_modules / .bin / electron.",
- "dev": "npm run-script watch & node_modules / .bin / electron."
+ "start": "npm run compile && npx electron.",
+ "dev": "npm run compile && npm run watch & npx electron."
   },
   "des dossiers": [
     "construit/**"
@@ -22,10 +22,10 @@
     "@ openid / appauth": "^ 0.3.5",
     "@ types / react": "^ 16.3.17",
     "@ types / react-dom": "^ 16.0.6",
- "électron": "^ 2.0.2",
     "material-design-lite": "^ 1.3.0"
   },
   "devDependencies": {
- "dactylographié": "^ 2.9.1"
+ "électron": "^ 2.0.2",
+ "texte dactylographié": "^ 3.0.3"
   }

Ces modifications ne sont pas nécessaires, mais elles faciliteront les choses. Les modifications apportées aux «scripts» en font une compilation avant que vous ne lanciez npm run dev ou npm start . Vous déplacez également les dépendances electron vers devDependency et mettez à jour TypeScript vers la dernière version.

Accédez au répertoire cloné, installez les dépendances avec npm et exécutez l'application .

 cd okta-electron-example
npm i
npm run dev

Il devrait démarrer l'application et afficher un lien de connexion.

Si vous avez un compte Google, cliquez sur Connexion , connectez-vous et vous serez redirigé vers votre application. Vous devriez voir votre avatar et votre nom affichés.

Le diagramme ci-dessous montre comment ce flux d'autorisation se produit avec OpenID Connect.

À ce stade, vous pouvez voir que l'authentification avec Google fonctionne. Dans les sections suivantes, je vais vous montrer comment ajouter le support PKCE pour rendre cette application plus sûre et comment utiliser Okta au lieu de Google.

Pourquoi utiliser Okta pour l'authentification?

J'utilise Okta lorsque l'authentification avec Google fonctionne? La raison est simple; Si vous souhaitez gérer les utilisateurs de votre application (et vous le ferez forcément), Okta le permet. Avec Google, toute personne disposant d'un compte Google peut se connecter, mais vous ne pouvez pas révoquer l'accès ni mettre à jour les autorisations des utilisateurs car vous ne pouvez pas gérer vos utilisateurs via Google. Okta vous permet de gérer vos utilisateurs, ainsi que de modifier leurs attributs et autorisations. Mieux encore, vous pouvez toujours utiliser Google comme mécanisme de connexion sociale avec Okta!

Utilisez Okta pour l'authentification avec OIDC dans votre application de bureau

L'objectif d'Okta est de rendre la gestion des identités beaucoup plus facile, sécurisée et évolutive que ce à quoi vous êtes habitué. Okta est un service cloud qui permet aux développeurs de créer, modifier et stocker en toute sécurité des comptes utilisateur et des données de compte utilisateur, et de les connecter à une ou plusieurs applications. Notre API vous permet de:

Êtes-vous prêt? Inscrivez-vous pour un compte de développeur toujours libre de aujourd'hui! Lorsque vous avez terminé, procédez comme suit pour créer une application OIDC native.

Connectez-vous à votre compte de développeur sur developer.okta.com .
Naviguez jusqu'à Applications et cliquez sur Ajouter une application .
Sélectionnez Native et cliquez sur Suivant .
Nommez l'application (par exemple, My Electron App ) et ajouter http: // localhost: 8000 comme URI de redirection de connexion.
Pour le type de licence autorisé, sélectionnez Refresh Token en plus de Authorization Code .
Cliquez sur Done .

Vous pouvez maintenant utiliser les paramètres de votre application pour passer de l'utilisation de Google à Okta. Modifiez flow.ts pour utiliser les paramètres de votre application Okta.

 const openIdConnectUrl = 'https: // {yourOktaDomain} / oauth2 / default';
const clientId = '{yourClientId}';
const redirectUri = 'http: // localhost: 8000';

Vous souhaitez également mettre à jour app.ts pour utiliser le noeud final / userinfo .

 let request =
    nouvelle demande ('https: // {yourOktaDomain} / oauth2 / default / v1 / userinfo', {
      headers: new Headers ({'Authorization': `Bearer $ {accessToken}`}),
      méthode: 'GET',
      cache: 'no-cache'
    })

Si vous redémarrez votre application et que vous essayez de vous connecter, cela échouera car vous n'utilisez pas PKCE. Vous verrez une erreur similaire à la suivante dans la barre d'adresse de votre navigateur lancé.

 error = invalid_request & error_description = PKCE + code + challenge + est + requis + lorsque + le + jeton + authentification + méthode + est +% 27NONE% 27 .

Ajouter le support PKCE à votre application de bureau

PKCE (prononcé «pixy») est une extension de sécurité pour OAuth 2.0 pour les clients publics sur les clients mobiles (et de bureau). Il est conçu pour empêcher l’interception du code d’autorisation par une application malveillante exécutée sur le même périphérique.

 + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +
    | Périphérique final (Smartphone, par exemple) |
    | |
    | + ------------- + + ---------- + | (6) Jeton d’accès + ---------- +
    | | Légitimé | | Malicious |  | |
    | + ------------- + + ---------- + | (5) Autorisation | |
    | | ^ ^ | Grant | |
    | |  | | | |
    | |  (4) | | | |
    | (1) |  Authz | | | |
    | Authz |  Code | | | Authz |
    | Demande |  | | | Serveur |
    | |  | | | |
    | |  | | | |
    | v  | | | |
    | + ---------------------------- + | | |
    | | | | (3) Code Authz | |
    | | Système d'exploitation / |  | |
    | | | | (2) Authz Request | |
    | + ---------------------------- + | + ---------- +
    + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +

Le groupe de travail PKCE fournit une excellente explication que j'ai incluse ci-dessous. Vous pouvez en lire plus dans la RFC officielle .

«Pour atténuer cette attaque, PKCE utilise une clé aléatoire et cryptographiquement créée appelée« vérificateur de code ». Un vérificateur de code unique est créé pour chaque demande d'autorisation et sa valeur transformée, appelée «défi code», est envoyée au serveur d'autorisation pour obtenir le code d'autorisation. Le code d'autorisation obtenu est alors envoyé au point d'extrémité du jeton avec le «vérificateur de code», et le serveur le compare au code de demande précédemment reçu afin qu'il puisse effectuer la preuve de possession du «vérificateur de code» par le client. Cela fonctionne comme une atténuation puisque l'attaquant ne connaîtrait pas cette clé unique, car elle est envoyée via TLS et ne peut pas être interceptée. »

Le diagramme ci-dessous montre comment PKCE fonctionne avec votre application et Okta.

Vous allez maintenant ajouter PKCE à votre application Electron! Dans flow.ts ajoutez une variable challengePair pour PKCE en tant que variable membre de la classe AuthFlow .

 private challengePair: {verifier: string, challenge : chaîne };

Ajoutez une ligne à la fin du constructeur pour initialiser cette variable.

 this.challengePair = AuthService.getPKCEChallengePair ();

Créer pkce.ts pour définir la classe AuthService .

 const crypto = require ('crypto');

classe d'exportation AuthService {

  statique getPKCEChallengePair () {
    let verifier = AuthService.base64URLEncode (crypto.randomBytes (32));
    let challenge = AuthService.base64URLEncode (AuthService.sha256 (vérificateur));
    retourne {vérificateur, challenge};
  }

  base64URLEncode statique (str: Buffer) {
    return str.toString ('base64')
      .replace (/  + / g, '-')
      .replace (/  // g, '_')
      .replace (/ = / g, '');
  }

  static sha256 (buffer: string): Buffer {
    retourne crypto.createHash ('sha256'). update (buffer) .digest ();
  }
}

Ajoutez une importation pour cette classe à flow.ts :

 import {AuthService} à partir de "./pkce";

Dans la méthode makeAuthorizationRequest () juste après la logique if (nom d'utilisateur) {} ajoutez le code challenge et la méthode à la carte extras .

 // PKCE
extras ['code_challenge'] = this.challengePair.challenge;
extras ['code_challenge_method'] = 'S256';

Dans makeRequestTokenRequest () ajoutez une variable tokenRequestExtras et envoyez-la dans la requête.

 let tokenRequestExtras = {code_verifier: this.challengePair.verifier};

// utilise le code pour faire la demande de jeton.
let request = new TokenRequest (
  identité du client,
  redirectUri,
  GRANT_TYPE_AUTHORIZATION_CODE,
  code,
  indéfini,
  tokenRequestExtras
);

Après avoir apporté ces modifications, vous devriez pouvoir vous connecter. Toutefois, lorsque vous cliquez sur USER INFO vous ne verrez ni le nom ni l’avatar de votre utilisateur. Ouvrez les outils du développeur Chrome avec Afficher > Basculer les outils de développeur pour voir pourquoi.

] portée variable dans flow.ts pour inclure profil . Pendant que vous y êtes, ajoutez offline_access afin que votre application puisse fonctionner sans connexion Internet.

 const scope = 'openid profile offline_access';

Actualisez votre application (Commande + R sur Mac, Ctrl + R sous Windows / Linux) et vous devriez maintenant voir le nom en cliquant sur USER INFO .

NOTE: J'ai utilisé ces exemples de code PKCE pour faire tout ce travail.

Ajouter un avatar dans Okta

le point final de l'info utilisateur ne renvoie pas d'avatar. Le code dans app.ts définit l'avatar en fonction d'un attribut d'image .

 private updateUi () {
  this.handleSignIn.textContent = SIGN_OUT;
  this.fetchUserInfo.style.display = '';
  if (this.userInfo) {
    this.userProfileImage.src = `$ {this.userInfo.picture}? sz = 96`;
    this.userName.textContent = this.userInfo.name;
    this.showSnackBar (
        {message: `Welcome $ {this.userInfo.name}`, timeout: 4000});
    this.userCard.style.display = '';
  }
}

Vous pouvez supprimer ? Sz = 96 dans le code ci-dessus, car cet exemple ne l'utilise pas.

Pour ajouter un attribut image à votre utilisateur, connectez-vous à votre tableau de bord Okta et accédez à Users > Profile Editor . Cliquez sur le premier "utilisateur" et ajoutez un attribut image . Cliquez sur Sauvegarder .

Revenez à l'éditeur de profil et cliquez sur Mappages pour votre application Electron. Créez un mappage de l'image user.picture à et sélectionnez pour appliquer le mappage à la création et à la mise à jour de l'utilisateur. Cliquez Sauver la cartographie et Appliquer les mises à jour maintenant .

Allez à Utilisateurs > sélectionnez un utilisateur, accédez à l'onglet Profile puis cliquez sur Edit . Ajoutez une valeur pour l'image en bas. Par exemple, vous pouvez utiliser l'URL de notre logo Okta Developer.

 https://www.okta.com/sites/all/themes/Okta/images/logos/developer/Dev_Logo-02_Large.png

Maintenant, si vous cliquez sur le lien info utilisateur, vous devriez voir un avatar associé à votre utilisateur.

ASTUCE: Pour l'utiliser dans la production, je vous recommande d'utiliser une image plus petite pour l'image (par exemple, avec 150 × 150 dimensions). Vous pouvez également base64 coder une image et utiliser sa valeur pour votre image.

Ci-dessous, une capture d'écran montrant cette application avec un vernis supplémentaire et une valeur d'image base64 pour mon compte.

] Polished Matt « />

Emballez votre application de bureau pour la production

Pour emballer cette application pour la distribution de la production, vous pouvez utiliser constructeur d'électrons . Installez le constructeur d'électrons avec npm.

 npm i -D electron-builder@20.28.4

Ajoutez une section build à votre package.json :

 "build": {
  "appId": "com.okta.developer.electron",
  "productName": "Awesomeness Electron",
  "Mac": {
    "catégorie": "public.app-category.developer-tools"
  }
}

Puis, ajouter les scripts pack dist et postinstall .

 "scripts": {
  ...
  "pack": "npm run compile && electron-builder --dir",
  "dist": "npm run compile && électron-builder",
  "postinstall": "installateur-app-deps"
}

Pour empaqueter votre application en vue de la production, utilisez les commandes suivantes:

Le module d'exécution npm générera le répertoire du package sans vraiment le mettre en package. Ceci est utile à des fins de test.
npm run dist compilera dans un format distribuable (par exemple, dmg, programme d'installation Windows, paquet deb).

REMARQUE: t commencer après le conditionnement, il est probable que la signature de code n’est pas configurée. Pour désactiver la signature de code lors de la création de macOS, exécutez export CSC_IDENTITY_AUTO_DISCOVERY = false . Si vous avez un compte de développeur Apple, ouvrez Xcode, accédez à Preferences > Accounts et assurez-vous d'être connecté et vos certificats de développement téléchargés.

Exemple d'application Electron Code source

Vous pouvez trouver le code source de cet article ici .

J'ai effectué quelques ajustements mineurs (par exemple, optimisation des importations, modification des guillemets doubles), mais rien de majeur. Pour voir une différence entre ce projet et l'original, cliquez ici .

En savoir plus sur Electron, AppAuth et OIDC

Voilà! Allez de l'avant et utilisez vos compétences Web pour créer des applications de bureau étonnantes!

Pour en savoir plus sur Electron, AppAuth, React et OIDC, consultez les ressources suivantes:

Vous avez des questions? Veuillez laisser un commentaire ci-dessous, sur Twitter ou posez-le sur nos Forums de développeurs .

Vous aimez ce que vous avez appris ici? Suivez @oktadev comme nous sur Facebook suivez-nous sur sur LinkedIn ou regardez nos vidéos sur YouTube .

Matt est un champion Java, développeur web et développeur Advocate chez Okta. Il aime coder à la fois en Java et en Javascript, mais s'est également beaucoup amusé avec TypeScript récemment.

Source link