背景

前回、keycloakの設定まで実施した。今回は認証機能を導入するElectronアプリを実装してみる。
https://qiita.com/yusuke-ka/items/69d4146f344a95aa4662

Auth0のブログで公開されているやり方が安全そうな気がするので、ここを参考にしてやってみようと思う。
https://auth0.com/blog/securing-electron-applications-with-openid-connect-and-oauth-2/

といっても、今回は単純なElectronアプリを作るだけで、認証回りは次回。

準備

まずは、プロジェクトの作成から。

> mkdir electron
> cd electron
> yarn init

initはすべてデフォルトのまま。

続いて依存のインストールを実施する。

> yarn add electron --dev

Electronのインストールだけ。少し時間がかかった。

Electronアプリの作成

最初に、アプリのホームページを作ってみる。

renderersというフォルダを作り、その下に以下のようなファイル(home.html)を作成する。

renderers/home.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Electron App</title>
  </head>

  <body>
    <p>Home</p>
    <button id="logout" class="btn">Logout</button>
  </body>

</html>

直接ブラウザでhome.htmlを読み込んだ際の見た目はこんな感じ。

テスト用なので、Homeという文字とログアウトボタンだけを配置したシンプルなホームページ。
もちろん、ログアウトボタンを押しても何も起こらない。

続いて、このページをElectronで表示するようにしてみる。

今度はmainというフォルダを作成し、その下にapp-process.jsというファイルを置く。

main/app-process.js

const { BrowserWindow } = require("electron");

function createAppWindow() {
  let win = new BrowserWindow({
    width: 1000,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
    },
  });

  win.loadFile("./renderers/home.html");

  win.on("closed", () => {
    win = null;
  });
}

module.exports = createAppWindow;

nodeIntegration: trueは、Node.jsの組み込みを実施するための設定。
enableRemoteModule: trueは、レンダラープロセスがメインプロセスと通信するための設定。

createAppWindowというfunctionをexportして公開している。

続いて、ルートフォルダの下に、最初に呼び出されるファイル(main.js)を作成する。

main.js

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

const createAppWindow = require('./main/app-process');

async function showWindow() {
  try {
    return createAppWindow();
  } catch (err) {
    // TODO 認証
  }
}

app.on('ready', showWindow);

app.on('window-all-closed', () => {
  app.quit();
});

今はまだ、先ほどのapp-process.jsが公開しているcreateAppWindowを呼び出すだけの実装。

とりあえず、この状態で動かしてみる。

package.jsonに以下を追記。

package.json

  "scripts": {
    "start": "electron ./main.js"
  }

electronコマンドでmain.jsを呼び出しているだけ。

実行。

> yarn start

Electronアプリとして、ホームページが表示された。

次回予告

ElectronアプリでKeycloakと連携したログイン機能を実装するために、今回は、確認用のシンプルなElectronアプリの実装をおこなった。

次は、いよいよElectronアプリに認証機能を導入する。
https://qiita.com/yusuke-ka/items/17a5b8fbd544c4c211a3

ElectronアプリでKeycloakと連携(2. Electronアプリの作成編)

背景

準備

Electronアプリの作成

次回予告