In this electron packager tutorial we will look at how to create MacOS, Windows and Linux executables with an app icon. This is also a continuation of the Electron app icon post, so start there if you haven’t read it (It’s short, i promise). Therefore, in order to make it executable for everyone, it is necessary to pack it along with the Electron's execution environment. In this time I will use a tool called electron-packager that automatically does my neighborhood. Install first. $ npm i electron-packager -g And packaging it. For packaging for Mac and Windows, for example below.
Electron is a framework for building cross-platform desktop applications with web technologies like JavaScript, HTML, and CSS. It was created for GitHub’s Atom editor and has achieved widespread adoption since. Electron powers several apps that I use on a daily basis: Slack, Kitematic, and Visual Studio Code to name a few. Electron 2.0 was released in early May 2018, along with changes to the project to adhere to strict semantic versioning. This is good news for developers because it means patch releases will be more stable and new features will come in major versions only. When open source projects use semantic versioning correctly, end users don’t see breaking changes as often and tend to be productive. Electron 3.0 was released on September 18, 2018 and contains major version bumps and some new features.
See the for more information. Developing desktop applications with web technologies is an appealing notion. From Gerard Sans nails it in my opinion. People always ask what's the best framework. What they should be asking is what skills they need to be productive using framework X? The issue is usually their lack of skills not which framework they use ✨? — ᐸGerardSans/ᐳ??? (@gerardsans) Do you have web development skills?
You have what’s needed to build a desktop app with Electron! In this article, I’ll show you how to create an app with TypeScript, AppAuth-JS, and OpenID Connect (OIDC).
You’ll learn how to add authentication and secure an Electron app for your users. What is AppAuth? Is a project that aims to create client SDKs for native apps.
![]()
It makes it possible to implement authentication and authorization in your apps using OIDC and OAuth 2.0. It has SDKs available for iOS, macOS, Android, and JavaScript environments. AppAuth-JS is the SDK for JavaScript clients.
AppAuth also supports the to OAuth to make public clients more secure. Pretty much every application depends upon a secure identity management system. For most developers who are building Electron apps, there’s a decision to be made between rolling your own authentication/authorization or plugging in a hosted identity service like Okta. Build Desktop Apps with Electron I’m going to make things easy for you.
Rather than building an app from scratch, you’ll use a pre-existing example. The AppAuth-JS project has two examples, a server-side example with Node at, and an.
Clone the Electron example to begin. Cd okta-electron-example npm i npm run dev It should start the app and show a Sign-In link. If you have a Google account, click Sign-In, log in, and you’ll be redirected back to your app. You should see your avatar and name displayed. The diagram below shows how this authorization flow happens using OpenID Connect. At this point, you can see that authentication with Google is working.
In the next sections, I’ll show you how to use Okta instead of Google. Why Use Okta for Authentication? You might be asking: why should I use Okta when authentication with Google works? The reason is simple; if you want to manage the users of your app (and you inevitably will), Okta makes it possible. With Google, anyone with a Google Account can log in, but you have no way of revoking access or updating user’s permissions because you can’t manage your users through Google. Okta lets you manage your users, as well as modify their attributes and permissions. Better yet, you can still use Google as a social login mechanism with Okta!
Use Okta for Authentication with OIDC in Your Desktop App Okta’s goal is to make identity management a lot easier, more secure, and more scalable than what you’re used to. Okta is a cloud service that allows developers to create, edit, and securely store user accounts and user account data, and connect them with one or multiple applications. Our API enables you to:. and your users. Store data about your users. Perform password-based and. Secure your application with.
And much more! Check out our Are you ready? When you’re finished, complete the steps below to create a Native OIDC app. Log in to your developer account on. Navigate to Applications and click on Add Application. Select Native and click Next. Give the application a name (e.g., My Electron App) and add as a Login redirect URI.
For Grant type allowed, select Refresh Token in addition to Authorization Code. Click Done.
![]()
Now you can use your app settings to change from using Google to Okta. Modify flow.ts to use your Okta app’s settings. End Device (e.g., Smartphone) +-+ +-+ (6) Access Token +-+ Legitimate Malicious +-+ +-+ (5) Authorization ^ ^ Grant (4) (1) Authz Authz Code Authz Request Server v +-+ (3) Authz Code Operating System/ (2) Authz Request +-+ +-+ The PKCE working group provides an excellent explanation I’ve included below. You can read more in. “To mitigate this attack, PKCE uses a dynamically created cryptographically random key called a “code verifier”.
A unique code verifier is created for every authorization request, and its transformed value, called “code challenge”, is sent to the authorization server to obtain the authorization code. The authorization code obtained is then sent to the token endpoint with the “code verifier”, and the server compares it with the previously received request code so that it can perform the proof of possession of the “code verifier” by the client. This works as the mitigation since the attacker would not know this one-time key since it is sent over TLS and cannot be intercepted.” The diagram below shows how PKCE works with your app and Okta. You don’t need to change any code in your Electron app to add PKCE.
That was done when you upgraded flow.ts to use AppAuth 1.1.1. Start your app with npm start, and try to login. You should be able to. However, when you click on USER INFO, you won’t see your user’s name or avatar. Open Chrome Developer Tools with View Toggle Developer Tools to see why.
To fix this issue, change the scope variable in flow.ts to include profile. While you’re at it, add offlineaccess so your app can work without an internet connection. Now if you click on the user info link, you should see an avatar associated with your user. TIP: If you’re going to use this in production, I’d recommend you use a smaller image for the picture (e.g., with 150x150 dimensions). You can also an image and use its value for your picture. Below is a screenshot that shows this app with some additional polish and a base64 image value for my account. Package Your Desktop App For Production To package this app for production distribution, you can use.
Install electron-builder with npm.
Packaging and distributing apps is an integral part of the development process of a desktop application. Since Electron is a cross-platform desktop application development framework, packaging and distribution of apps for all the platforms should also be a seamless experience. The electron community has created a project, that takes care of the same for us. It allows us to package and distribute our Electron app with OS-specific bundles (.app,.exe etc) via JS or CLI.
Comments are closed.
|
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |