背景
前回、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
Electronのインストールだけ。少し時間がかかった。
Electronアプリの作成
最初に、アプリのホームページを作ってみる。
renderersというフォルダを作り、その下に以下のようなファイル(home.html)を作成する。
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"/><title>Electron App</title></head><body><p>Home</p><buttonid="logout"class="btn">Logout</button></body></html>直接ブラウザでhome.htmlを読み込んだ際の見た目はこんな感じ。
テスト用なので、Homeという文字とログアウトボタンだけを配置したシンプルなホームページ。
もちろん、ログアウトボタンを押しても何も起こらない。
続いて、このページをElectronで表示するようにしてみる。
今度はmainというフォルダを作成し、その下にapp-process.jsというファイルを置く。
const{BrowserWindow}=require("electron");functioncreateAppWindow(){letwin=newBrowserWindow({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)を作成する。
const{app}=require('electron');constcreateAppWindow=require('./main/app-process');asyncfunctionshowWindow(){try{returncreateAppWindow();}catch(err){// TODO 認証}}app.on('ready',showWindow);app.on('window-all-closed',()=>{app.quit();});今はまだ、先ほどのapp-process.jsが公開しているcreateAppWindowを呼び出すだけの実装。
とりあえず、この状態で動かしてみる。
package.jsonに以下を追記。
"scripts":{"start":"electron ./main.js"}electronコマンドでmain.jsを呼び出しているだけ。
実行。
>yarn start
Electronアプリとして、ホームページが表示された。
次回予告
ElectronアプリでKeycloakと連携したログイン機能を実装するために、今回は、確認用のシンプルなElectronアプリの実装をおこなった。
次は、いよいよElectronアプリに認証機能を導入する。
https://qiita.com/yusuke-ka/items/17a5b8fbd544c4c211a3