使用您的Web开发技能，用Electron构建桌面应用程序

最新推荐文章于 2024-05-31 09:47:24 发布
最新推荐文章于 2024-05-31 09:47:24 发布
阅读量331 收藏
点赞数
文章标签： javascript json 操作系统 ViewUI

本文最初发布在Okta开发人员博客上 。 感谢您支持使SitePoint成为可能的合作伙伴。

Electron是一个框架，可使用JavaScript，HTML和CSS等Web技术构建跨平台的桌面应用程序。 它是为GitHub的Atom编辑器创建的，此后得到了广泛的采用。 电子为我每天使用的多个应用程序提供动力：Slack，Kitematic和Visual Studio Code等。

Electron 2.0于2018年5月上旬发布，并对项目进行了更改以遵守严格的语义版本控制。 这对开发人员来说是个好消息，因为这意味着修补程序版本将更加稳定，并且新功能将仅在主要版本中提供。 当开放源代码项目正确使用语义版本控制时，最终用户不会经常看到破坏性的更改，并且往往会提高工作效率。

Electron 3.0于2018年9月18日发布，包含主要版本的颠簸和一些新功能。 有关更多信息，请参见Electron博客 。

使用Web技术开发桌面应用程序是一个吸引人的概念。 我认为Gerard Sans的这则推文很钉钉：

你有网页开发技能吗？ 大！ 您具有使用Electron构建桌面应用程序所需的条件！

在本文中，我将向您展示如何使用TypeScript，AppAuth-JS和OpenID Connect（OIDC）创建Electron应用程序。 您将学习如何为用户添加身份验证和保护Electron应用程序。

什么是AppAuth？

AppAuth是一个旨在为本机应用程序创建客户端SDK的项目。 使用OIDC和OAuth 2.0，可以在您的应用中实现身份验证和授权。 它具有可用于iOS，macOS，Android和JavaScript环境的SDK。 AppAuth-JS是JavaScript客户端的SDK。 AppAuth还支持OAuth的PKCE扩展 ，以使公共客户端更加安全。

几乎每个应用程序都依赖于安全的身份管理系统。 对于正在构建Electron应用程序的大多数开发人员，在滚动自己的身份验证/授权或插入托管身份服务（如Okta）之间都需要做出决定。

使用Electron构建桌面应用

我将为您简化事情。 您将使用现有示例，而不是从头开始构建应用程序。 AppAuth-JS项目有两个示例，一个服务器端示例，其节点位于src / node_app / index.ts ，一个appauth-js-electron-sample 。 克隆电子示例开始。 

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

在此项目中打开package.json并进行以下更改。 


   "scripts": {
     "compile": "tsc",
     "watch": "tsc --watch",
     "start": "npm run compile && npx electron .",
     "dev": "npm run compile && npm run watch & npx electron ."
   },
   "files": [
     "built/**"
   "author": "rahulrav",
   "license": "MIT",
   "dependencies": {
     "@openid/appauth": "^1.1.1",
     "@types/react": "^16.3.17",
     "@types/react-dom": "^16.0.6",
     "material-design-lite": "^1.3.0"
   },
   "devDependencies": {
     "electron": "^3.0.0",
     "typescript": "^2.9.1"
   }
 }

这些更改不是必需的，但它们会使事情变得更容易。 “脚本”中的更改使得它可以在运行npm run dev或npm start之前进行编译。 您还需要将electron依赖关系变为devDependency并将TypeScript升级到最新版本。

导航到克隆目录，使用npm安装依赖项，然后运行该应用程序。 

cd okta-electron-example
npm i
npm run dev

它应该启动该应用程序并显示一个登录链接。

initial-load.png

如果您拥有Google帐户，请点击登录 ，然后登录 ，您将被重定向回您的应用程序。 您应该会看到您的头像和名称。

Google登录后

下图显示了如何使用OpenID Connect进行此授权流程。

OIDC流程

此时，您可以看到正在通过Google进行身份验证。 在下一节中，我将向您展示如何添加PKCE支持以使该应用程序更安全，以及如何使用Okta代替Google。

为什么要使用Okta进行身份验证？

您可能会问：当使用Google身份验证时，为什么我应该使用Okta？ 原因很简单。 如果您想管理应用程序的用户（并且不可避免），Okta可以实现。 使用Google，拥有Google帐户的任何人都可以登录，但是您无法撤消访问权限或更新用户的权限，因为您无法通过Google管理用户。 Okta使您可以管理用户，以及修改其属性和权限。 更好的是，您仍然可以使用Okta将Google用作社交登录机制！

在桌面应用程序中使用Okta与OIDC进行身份验证

Okta的目标是使身份管理比以往更加轻松，安全和可伸缩。 Okta是一项云服务，允许开发人员创建，编辑和安全地存储用户帐户和用户帐户数据，并将它们与一个或多个应用程序连接。 我们的API使您能够：

你准备好了吗？ 立即注册一个永久免费的开发者帐户 ！ 完成后，请完成以下步骤以创建本机OIDC应用程序。

  1. 登录到您在developer.okta.com上的开发者帐户。
  2. 导航到“ 应用程序” ，然后单击“ 添加应用程序” 。
  3. 选择本机 ，然后单击下一步 。
  4. 为应用程序命名（例如My Electron App ），然后添加http://localhost:8000作为登录重定向URI。
  5. 对于允许的授予类型，除了授权代码外，选择刷新令牌 。
  6. 单击完成 。

现在，您可以使用应用程序设置将使用Google更改为Okta。 修改flow.ts以使用Okta应用程序的设置。 

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

您还需要更新app.ts以使用应用程序的/userinfo端点。 

let request =
    new Request('https://{yourOktaDomain}/oauth2/default/v1/userinfo', {
      headers: new Headers({'Authorization': `Bearer ${accessToken}`}),
      method: 'GET',
      cache: 'no-cache'
    });

如果您重新启动应用程序并尝试登录，它将失败，因为您没有使用PKCE。 在启动的浏览器的地址栏中，您会看到类似以下的错误。 

error=invalid_request&error_description=PKCE+code+challenge+is+required+when+the+token+endpoint+authentication+method+is+%27NONE%27.

将PKCE支持添加到您的桌面应用程序

PKCE（发音为“ pixy”）是OAuth 2.0的安全扩展，适用于移动（和桌面）客户端上的公共客户端。 它旨在防止在同一设备上运行的恶意应用程序拦截授权代码。 

    +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+
    | End Device (e.g., Smartphone)  |
    |                                |
    | +-------------+   +----------+ | (6) Access Token  +----------+
    | |Legitimate   |   | Malicious|<--------------------|          |
    | |OAuth 2.0 App|   | App      |-------------------->|          |
    | +-------------+   +----------+ | (5) Authorization |          |
    |        |    ^          ^       |        Grant      |          |
    |        |     \         |       |                   |          |
    |        |      \   (4)  |       |                   |          |
    |    (1) |       \  Authz|       |                   |          |
    |   Authz|        \ Code |       |                   |  Authz   |
    | Request|         \     |       |                   |  Server  |
    |        |          \    |       |                   |          |
    |        |           \   |       |                   |          |
    |        v            \  |       |                   |          |
    | +----------------------------+ |                   |          |
    | |                            | | (3) Authz Code    |          |
    | |     Operating System/      |<--------------------|          |
    | |         Browser            |-------------------->|          |
    | |                            | | (2) Authz Request |          |
    | +----------------------------+ |                   +----------+
    +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+

PKCE工作组提供了一个很好的解释，我在下面进行了介绍。 您可以在官方RFC中阅读更多内容。

“为减轻这种攻击，PKCE使用了动态创建的密码随机密钥，称为“代码验证器”。 为每个授权请求创建一个唯一的代码验证器，并将其转换后的值（称为“代码挑战”）发送到授权服务器以获取授权代码。 然后，将获得的授权代码与“代码验证者”一起发送到令牌端点，服务器将其与先前接收的请求代码进行比较，以便它可以执行客户端对“代码验证者”的拥有证明。 这是缓解措施，因为攻击者不知道此一次性密钥，因为它是通过TLS发送的并且无法被截获。”

下图显示了PKCE如何与您的应用程序和Okta一起使用。

PKCE的验证码流

现在，您将PKCE添加到您的Electron应用程序中！ 在flow.ts ，为PKCE添加一个challengePair变量作为AuthFlow类的成员变量。 

private challengePair: { verifier: string, challenge: string };

在构造函数的末尾添加一行以初始化此变量。 

this.challengePair = AuthService.getPKCEChallengePair();

创建pkce.ts来定义AuthService类。 

const crypto = require('crypto');

export class AuthService {

  static getPKCEChallengePair() {
    let verifier = AuthService.base64URLEncode(crypto.randomBytes(32));
    let challenge = AuthService.base64URLEncode(AuthService.sha256(verifier));
    return {verifier, challenge};
  }

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

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

将此类的导入添加到flow.ts ： 

import { AuthService } from './pkce';

在makeAuthorizationRequest()方法中，在if (username) {}逻辑之后，将代码质询和方法添加到extras映射中。 

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

在makeRequestTokenRequest() ，添加一个tokenRequestExtras变量并将其发送到请求中。 

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

// use the code to make the token request.
let request = new TokenRequest(
  clientId,
  redirectUri,
  GRANT_TYPE_AUTHORIZATION_CODE,
  code,
  undefined,
  tokenRequestExtras
);

进行这些更改之后，您应该可以登录。但是，当您单击USER INFO时 ，您将看不到用户的名称或头像。 通过查看 > 切换开发者工具打开Chrome开发者工具以了解原因。

Electron的开发人员工具

要解决此问题，请在flow.ts中将scope变量flow.ts为包括profile 。 在使用时，请添加offline_access以便您的应用无需互联网即可正常运行。 

const scope = 'openid profile offline_access';

刷新您的应用程序（在Mac上为Command + R，在Windows / Linux上为Ctrl + R），现在单击USER INFO时应会看到名称。

来自用户信息端点的名称

注意：我利用这些PKCE代码示例来完成所有这些工作。

在Okta中添加头像

您可能会注意到，用户信息端点未返回化身。 app.ts的代码根据picture属性设置头像。 

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 = '';
  }
}

您可以在上面的代码中删除?sz=96 ，因为此示例未使用它。

要向您的用户添加picture属性，请登录Okta仪表板，然后导航至Users > Profile Editor 。 单击第一个“用户”并添加picture属性。 点击保存 。

添加图片属性

浏览回到配置文件编辑器，然后为您的Electron App单击映射 。 创建从user.picture到picture的映射，然后选择将映射应用于用户创建和更新。 单击“ 保存映射并立即应用更新” 。

添加图片映射

现在转到“ 用户” >“ 人员” ，选择一个用户，导航至“ 个人资料”标签，然后点击“ 编辑” 。 在底部添加picture的值。 例如，您可以使用我们的Okta Developer徽标的URL。 

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

现在，如果您单击用户信息链接，则应该看到与您的用户关联的头像。

用户信息图片

提示：如果要在生产中使用此图像，建议您为图片使用较小的图像（例如150×150尺寸）。 您还可以对图像进行base64编码 ，并将其值用于图片。

下面的屏幕截图显示了此应用，并为我的帐户添加了一些额外的修饰和base64图像值。

抛光哑光

打包您的桌面应用以进行生产

要将此应用打包以进行生产发行，可以使用electronic-builder 。 使用npm安装电子生成器。 

npm i -D electron-builder@20.28.4

在您的package.json添加一个build部分： 

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

然后添加pack ， dist和postinstall脚本。 

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

要将您的应用打包以进行生产，请使用以下命令：

  • npm run pack会生成package目录，而不会真正打包它。 这对于测试目的很有用。
  • npm run dist将以可分发格式打包（例如dmg，Windows安装程序，deb软件包）。

注意：如果应用程序在打包后仍未启动，则可能是因为您未配置代码签名 。 要在构建macOS时禁用代码签名，请运行export CSC_IDENTITY_AUTO_DISCOVERY=false 。 如果您拥有Apple开发者帐户，请打开Xcode，转到“首选项” >“ 帐户”并确保您已登录，并下载了开发证书。

电子示例应用程序源代码

您可以在此处找到本文的源代码。

我做了一些小的调整（例如，优化导入，将双引号更改为单引号），但是没有什么大的调整。 要查看该项目与原始项目之间的区别， 请单击此处 。

了解有关Electron，AppAuth和OIDC的更多信息

你有它！ 继续并使用您的网络技能来创建出色的桌面应用程序！

要了解有关Electron，AppAuth，React和OIDC的更多信息，请查看以下资源：

有问题吗？ 请在下面发表评论， 在Twitter上对我进行ping操作 ，或在我们的开发者论坛上提问。

喜欢在这里学到的东西吗？ 关注@oktadev ， 在Facebook上像我们一样， 在LinkedIn 上关注我们，或在YouTube上观看我们的视频 。

变更日志：

From: https://www.sitepoint.com/use-your-web-dev-skills-to-build-a-desktop-app-with-electron/

dingshi7798
关注
electron-publish-example:用于构建和发布多平台 Electron 应用程序的示例存储库
05-31
电子发布示例 这是构建和发布多平台 Electron 应用程序的示例。 有关详细说明，请参阅。
ionic-appauth:将OpenIdAppAuth-JS集成到Ionic V345中
05-18
离子应用程序身份验证 Ionic App Auth是针对Ionic用户的实现。 它包括用于运行Ionic应用程序（例如和核心cordova插件的代码扩展。 cordova插件是可选的，可以替换为Angular / React / Vue http处理程序和/或Capacitor插件。 该库旨在具有与离子V5一样的灵活性和兼容性。 安装 运行以下命令以在项目中安装Ionic App Auth。 npm install ionic-appauth --save 例子 React / Capacitor： : Angular /科多瓦： : Angular /电容器： : 贡献 拉请求是欢迎的。 对于重大更改，请先打开一个问题以讨论您要更改的内容。 执照 此项目已获得MIT许可证的许可-有关详细信息，请参阅文件。 致谢 AppAuth-JS AppAuth离子
IdentityServer4填坑(3) - Hybird Flow
tonytonychopper的专栏
05-29 1777
做Hybird Flow实验时，Identity Server端的Config.cs中Client使用如下配置，遇到了两个问题。 public static IEnumerable<Client> Clients(bool useHttps) { string url = useHttps ? "https://localhost:5005" : "http://localhost:5004"; System.Console.WriteLine(url); retur
Jupyter 使用 & Electron Example
wushirenfei的博客
10-18 494
如果有一些数据统计分析可视化的诉求，但又不需要提供商业化平台，生态圈提供，一款非常实用工具。并且近期因频繁接触端侧一些事务，对于当下 PC 侧跨端应用的开发构建，简单了解一下 Electron。
探索 Electron 的无限可能：examples-electron
最新发布
gitblog_00013的博客
05-31 312
探索 Electron 的无限可能：examples-electron examples-electronExamples for Electron applications.项目地址:https://gitcode.com/gh_mirrors/ex/examples-electron 项目介绍 examples-electron 是一个精彩的开源项目集合，专为那些希望在 Electron 框...
使用Electron构建桌面应用
02-24
使用JavaScript开发桌面应用意味着在打包（packageapplication）的时候你会需要根据操作系统的不同发出不同的命令。这一行为是将原生桌面应用兼容不同平台的概念抽象出来，方便维护应用。现在，我们可以借助Electron...
基于Vue+Electron构建桌面应用程序实践
01-27
总结来说，基于Vue+Electron构建桌面应用程序的关键步骤包括： 1. 使用`electron-vue`模板初始化项目，选择所需的插件和工具。 2. 理解和设置项目结构，包括`main`和`renderer`进程。 3. 创建Vue组件，处理用户输入...
使用electron+vue集成跨平台桌面应用程序
03-17
Electron 是一个基于Chromium和Node.js的框架，它允许开发者使用Web技术（HTML、CSS和JavaScript）来构建桌面应用。Vue.js，另一方面，是一个轻量级的前端MVVM框架，因其易学易用和强大的功能而备受青睐。本文将...
electron-vue开发桌面应用界面模板
11-01
Electron是一个用JavaScript、HTML和CSS构建跨平台桌面应用的开源库，它允许开发者使用Web技术来开发原生桌面应用。Vue.js则是一个流行的前端JavaScript框架，用于构建用户界面。当这两者结合时，可以创建出具有现代...
iamport-electron-example:这是一个示例项目，可让您在Electron环境中测试IImport常规付款和手机身份验证。
05-25
导入电子示例 这是一个示例项目，可让您在Electron环境中测试IImport常规/常规付款和手机身份验证。 支援信息 在iImport Electron示例项目中，您可以测试일반결제 ， 정기결제和휴대폰 본인인증所有功能。 但是，由于弹出窗口阻止问题，BC卡系列（例如Woori卡）仅限于测试。 运行它 通过以下命令克隆该项目。 $ git clone https://github.com/SoleeChoi/iamport-electorn-example.git 移至项目文件夹后，安装必要的模块。 $ cd ./iamport-electron-example $ yarn 根据操作系统环境构建项目。 $ yarn dev // 개발 모드 빌드 $ yarn package // 현재 OS에 맞는 실행파일을 빌드 $ yarn pac
electron 桌面程序_使用您的Web开发技能，用Electron构建桌面应用程序
09-20 293
electron 桌面程序 本文最初发布在Okta开发人员博客上 。 感谢您支持使SitePoint成为可能的合作伙伴。 Electron是一个框架，用于使用JavaScript，HTML和CSS等Web技术构建跨平台的桌面应用程序。 它是为GitHub的Atom编辑器创建的，此后得到了广泛的采用。 电子为我每天使用的多个应用程序提供动力：Slack，Kitematic和Visual Stud...
如何修復Instagram上“challenge_required”錯誤？
ecommerce_Amazon的博客
11-10 331
現在，您一定遇到了Instagram登陸錯誤的問題。challenge_required消息有多個版本，但最常見的是“Instagram API/Response/LoginResponse：需要挑戰”。如果您看到此錯誤消息，則意味著Instagram在正常運行所需的適當安全協議時存在問題。challenge_require是 Instagram開發人員創建的一種方法，用於檢查用戶是否為人類，並防止機器人使用該平臺。 此外，它另一個目的是確保您為該帳戶的持有者。
基于OIDC（OpenID Connect）的SSO（纯JS客户端）
dotNET跨平台
12-02 7898
在上一篇基于OIDC的SSO的中涉及到了4个Web站点： oidc-server.dev：利用oidc实现的统一认证和授权中心，SSO站点。 oidc-client-hybrid.dev：oidc的一个客户端，采用hybrid模式。 oidc-client-implicit.dev：odic的另一个客户端，采用implicit模式。 oidc-client-js.dev
Electron简单例子
天空之外
05-08 724
Electron 可以使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。我们可以把它看作一个 Node. js 的变体，它专注于桌面应用而不是 Web 服务器端。 从开发的角度来看，Electron 应用本质上是一个 Node. js 应用程序。 与 Node.js 模块相同，应用的入口是 package.json 文件。 一个简单的 Electron 项目包含三个基本文件：package.json，index.hmtl，main.js 。 package.json 是 Node.j
pythonelectron桌面开发案例_Electron 用前端技术开发桌面应用
weixin_29870701的博客
01-29 2365
一、electron简介1、electron是由 Github开发的开源框架。2、它允许开发者使用Web技术构建跨平台的桌面应用。3、Electron = Chromium + Node.js + Native API。二、运行流程1、读取package.json中的入口文件。main.js2、main.js主进程中创建渲染进程。3、读取应用页面的布局和样式。4、使用IPC在主进程执行任务并获取信...
Electron入门笔记:安装篇
Mukae1997的博客
03-21 3842
Electron社区提供的样板文件组件Photon官网 electron画图工具（？）一系列css配置。Menubarexamplenpm install的时候遇到问题 npm ERR! electron@1.6.2 postinstall: node install.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at
Electron将Web页面打包成桌面应用实例
热门推荐
qq_32614411的博客
07-02 2万+
上一篇文章Electron-vue脚手架改造vue项目 介绍了如何将Vue项目构建成桌面应用的方法。 这篇文章将继续介绍Electron构建桌面项目，不仅仅局限于Vue项目，使用Vue项目做案例，只是目前做的Vue项目比较多，拿其中一个练手比较方便。 事实是，将项目打包成桌面应用跟使用什么前端框架没有关系，通过Electron任何项目都能打包成桌面应用 electron官网：https...
[electron]终极奥义 五千字教程丢给你
weixin_33962621的博客
09-18 2394
前言 本文包含打包、自动更新、简易API、调试、进程通信等相关知识点，内容较多，可能会引起不适，请酌情查看（手动滑稽）。 electron 简介 electron是由Github开发，是一个用Html、css、JavaScript来构建桌面应用程序的开源库，可以打包为Mac、Windows、Linux系统下的应用。 electron是一个运行时环境，包含Node和Chromium，可以理解成把we...
使用Electron构建桌面应用：Node.js开发指南
6. 分发与打包：完成应用开发后，可以使用Electron-builder或Electron-packager等工具将应用打包为可分发的跨平台安装程序。这包括处理应用图标、设置默认启动文件等细节。 Electron为开发者提供了一种使用Web技术...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值