express-openid-connectを使ってOIDC接続を行う
とりあえずサンプルまで。
まえおき
ElectronのアプリでOpen ID Connect(以下OIDC)を使った接続処理を行う必要が出てきました。
ただ、OIDCについては全くの未経験なため、まずはNodeJS単体で接続を行う方法を確認しようと思いました。
使うもの
- nuwan94/express-openid-connect-api: Sample application for Express OpenId Connect API
- Auth0のアカウント(後述の理由により必ずメールアドレス認証かGoogle認証にしておくこと)
上記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認証は基本的に
- アプリでサーバを立ち上げる
- アプリからOpenID認証のサイトをブラウザ表示させ、コールバックURLに上記サーバを指定する
- サービス側での認証が済んだら、そのレスポンスをサーバで受信し、サーバを終了させる
という手順になるようですので、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で接続するにはひと工夫ふた工夫必要そうです。
どちらにせよLINEログインではClientSecretを送らなければいけないため、デスクトップ上にそれら認証情報を配置しなければならないElectronで扱うのは適当ではない可能性が高そうです。
参考資料
Discussion