Electron api demo6/10/2023 This has been done with other tools like ImageOptim, which uses eight different tools under the hood.Īt karriere.at we experimented with sprite animations as an alternative to animating SVGs with CSS. You can quickly create a GUI wrapper for internal tools, for example automation for graphic designers. But in my case the reason for choosing Electron was that it let’s you build a graphical user interface just by using your existing HTML/CSS and JavaScript knowledge. There are compelling reasons for building a desktop application rather than a web application. You can find a long list of apps on /apps, if you are interested. It is used by the messaging apps Franz and Slack or the open-source editors Atom and Visual Studio Code. The source code of the finished Sprite Animation Generator – which we’ll be building – is available on Github, as well as the source code of the original command-line utility.Įlectron enables you to build cross-platform desktop applications using Chromium and Node.js. It also provides a succinct overview of the few things you really need to know when you are just getting started. It guides you through providing a GUI for a command-line utility. getLogOutUrl ( ) returns the URL of the /v2 /logout endpoint from your Auth0 tenant, which you can use to clear user sessions in the Auth0 layer.This post summarizes my experience building a simple Electron app.getAccessToken ( ) returns the current accessToken.keytarService and keytarAccount define what keytar uses to persist the refresh token on the disk or to retrieve it.Īmong the functions mentioned earlier, you have these other functions in this service:.redirectUri defines what URL Auth0 will call after finishing the authentication process.The authentication service uses apiIdentifier, auth0Domain, and clientId to interact with the Auth0 Authorization Server.json file and replace its content with the following: Īt the beginning of this file, you find the definition of the following constants: # init npm with default properties npm init -yĪfter that, open the package. So, open a new terminal window and execute the following commands to create a directory to host the Electron app and initialize an npm project within it: # create a directory for your Electron app mkdir electron-openid-oauth You will build a simple Electron app that uses an Authorization Server (Auth0) to authenticate users and authorize the app to access protected data from a Resource Server (an external API). Now that you have configured Auth0, you can focus on learning how to secure an Electron application. Leave this page open as you will need to copy a few values from it soon to integrate Auth0 into your app. Click the Save Changes button at the bottom of the "Settings" page to complete the process. That's all the configuration you need to register your Electron application. Despite the URL structure, you don't need to have an actual server listening to it you just need to have your Electron application listening to it, as you will learn later on. Once done, Auth0 will invoke your allowed callback URL to take your users back to your application and inform it about the outcome: was authentication successful or not? For security reasons, Auth0 will only call URLs registered in the Allowed Callback URLs field. When your users click a login button in your user interface, your Electron app will redirect them to the Auth0 Universal Login page, where Auth0 will carry out the authentication process. When using Auth0 for user authentication, you don't need to build login or sign-up forms. Search for the Allowed Callback URLs field and put the following URL as its value: You are probably wondering what this URL is and why you need it. From there, click on the Settings tab to configure Auth0 to communicate with your Electron application. Once done, the Auth0 application page loads up. Provide a name for your application, such as "Auth0 Electron Demo".To start, open the Applications section of the Auth0 Dashboard and click on Create Application. If you don't have an Auth0 account yet, you can sign up for a free one right now. To use Auth0 with Electron, you need to register your Electron application with Auth0 and set up a communication bridge between them. Register an Electron Application with Auth0
0 Comments
Leave a Reply. |