🔗

express-openid-connectを使ってOIDC接続を行う

2022/06/06に公開約3,900字

とりあえずサンプルまで。

まえおき

ElectronのアプリでOpen ID Connect(以下OIDC)を使った接続処理を行う必要が出てきました。
ただ、OIDCについては全くの未経験なため、まずはNodeJS単体で接続を行う方法を確認しようと思いました。

使うもの

上記express-openid-connect-apiのサンプルが最低限のコードで使いやすいので、これを少しいじるかたちで実装します。

手順

クローンする

ひとまずexpress-openid-connect-apiのリポジトリをクローンします。
そして、フォルダを開きnpm installでモジュールをインストールします。

> git clone https://github.com/nuwan94/express-openid-connect-api.git
> cd express-openid-connect-api
> npm install

2022/06/06現在のバージョンだとモジュールの指定が古いので警告が数件表示されるものの、あくまで検証なので今回は無視(たぶん最新バージョンなら問題ないだろう…)。

最低限の設定

このリポジトリで重要なモジュールは次の三つ。

  • dotenv
  • express
  • express-openid-connect

dotenvというのは、プロジェクトのルートフォルダに.envというファイルがあれば、そのファイルの設定を読み込むモジュール。
ただ読み込むだけなら別にファイルを読み込めばいいだけですが、このモジュールのちょっとちがうところは、環境変数に同じ値があればその値で.envの値を上書きできる ということ。
このリポジトリだとsample.envというファイルがあるはずなので、これを.envという名前に置き換えて使います(内容は後述)。

expressおよびexpress-openid-connectというのは、NodeJSでサーバを展開するためのフレームワーク。

ElectronおよびNodeJSでのOpenID認証は基本的に

  1. アプリでサーバを立ち上げる
  2. アプリからOpenID認証のサイトをブラウザ表示させ、コールバックURLに上記サーバを指定する
  3. サービス側での認証が済んだら、そのレスポンスをサーバで受信し、サーバを終了させる

という手順になるようですので、expressモジュールでサーバを構築します。

express-openid-connectモジュールは、そこでOIDC認証を行うためのプラグインのようなものでしょうか。

認証情報を設定する

以下のサイトを参考に、.envファイルに認証情報を設定します。
Auth0 Express SDK Quickstarts: Login

と、いうより、OAuth0のアカウントにログインしておくと項番5のところのサンプルコードにほぼほぼコードが表示されるので、その内容を.envに転記します。

  • ISSUER_BASE_URL:https://[テナント名].us.auth0.com
  • CLIENT_ID=[上記に表示されているクライアントID]
  • BASE_URL=http://localhost:3000/
  • SECRET=ランダムな文字列

SECRETについては、一般的なOIDC認証について多少でも知っている人はサーバ上に表示されたクライアントシークレットなどを必要とするのかと思ってしまいそうです(わたしは思いました)が、実際はそんなことは無く本当にただのランダム文字列です(クッキーのキーに使うだけだそうな)。
同じアプリ内で一意であればなんでも良さそうなので、とりあえずわたしはnodeコンソールを立ち上げ以下のコマンドで出てきたコードをそのまま転記しました。

const crypto = require("crypto");
crypto.randomBytes(60).toString('base64').substring(0, 32);

では実行 の前に

Auth0を使う場合はその先に進む前に、コールバックURLをサーバに登録する必要があります。Auth0のサービスにログインし、ダッシュボードから、Applications>Applications>Default App>Settingsタブの中段にある「Application URIs」セクションを探し、「Allowed Callback URLs」に「 http://localhost:3000/callback 」と設定します。

実行・認証

ここまでできたらnpm startなどでサーバを起動し、ブラウザで http://localhost:3000 を表示します。

「Logged Out」という表示が確認できたら、次に「 http://localhost:3000/profile 」にアクセスし、ログイン処理を開始します。

ログインが終了すると、ブラウザにログイン結果を示すJSONファイルがそのまま表示されます。これでログイン成功となります。

この後 http://localhost:3000 を表示してみると…。

ログインが完了しました。

実際に使うときは…

実際にElectronで使うときは、expressとexpress-openid-connectモジュールをインストールすれば良さそうです。dotenvはまあ、GUIがあるElectronですから不要でしょう。
サーバを介さない処理の方が多い場合はexpressによるサーバを、終了次第早々にシャットダウンする必要がありそうですね。

LINEログインはおすすめ…ではなさそうです。

なお、以下の記事に「現状、LINEログインがおすすめです。」と書いてあったのでexpress-openid-connectを使ってLINEログインができないかどうか試してみたものの、LINEログインが処理可能なResponceTypeが少ないためexpress-openid-connectで接続するにはひと工夫ふた工夫必要そうです。

https://zenn.dev/protoout/articles/25-electron-auth0-collaboration

どちらにせよLINEログインではClientSecretを送らなければいけないため、デスクトップ上にそれら認証情報を配置しなければならないElectronで扱うのは適当ではない可能性が高そうです。

参考資料

https://zenn.dev/protoout/articles/25-electron-auth0-collaboration
https://auth0.com/docs/quickstart/webapp/express?ref=morioh.com&utm_source=morioh.com
https://github.com/nuwan94/express-openid-connect-api
https://stackoverflow.com/questions/71013817/express-openid-connect-how-to-specify-grant-type

Discussion

ログインするとコメントできます