SmartHR Chrome拡張機能開発秘話：フォームベース認証によるSSOの実現

こんにちは！情シス開発部に所属している、プロダクトエンジニアのtigerです。筋トレと直系二郎が好きです。ハードワークとハイカロリーの無限ループに囚われています。

この記事では、SmartHRのIdP機能の一つを実現するためにChrome拡張機能の公開に至った背景と、開発経緯をご紹介します。

SmartHRでのIdP機能

SmartHRでは、2024年7月にIdP機能の提供を始めました。 IdP機能は、SmartHRのホーム画面からさまざまなサービスへワンクリックでログインできる、SSO（シングルサインオン）*1 を実現する機能です。

IdP機能では、当初はSAML認証*2のみでSSOを実現していました。しかし、SAML認証でのSSOだけだと以下の課題がありました。

外部サービス側のSAML対応が必須であり、未対応の場合は連携できない
SAMLに対応している場合でも、上位プラン限定であったり、追加費用が発生する場合がある

そこで、フォームベース認証*3に対応し、 SAML認証に対応していない外部サービスにもSmartHR経由でSSOできるようにしました。

Chrome拡張機能によるフォームベース認証の実現

フォームベース認証は代理認証方式のため、使用する端末にエージェント（エージェントとは、各サービスのログイン画面が起動したことを検知し、従業員の代わりにログイン情報を自動入力してくれる仕組みです）をインストールする必要があります。

エージェントの提供方法には主に、ブラウザの拡張機能として提供する方法があり、以下の理由からChrome拡張機能を開発しました。

SmartHRの動作環境でGoogle Chromeがある
2023年に事業継承したメタップスクラウドの開発チームの知見があった*4

SmartHRのChrome拡張機能

SmartHRのChrome拡張機能は、SmartHRのIdP機能のフォームベース認証で、外部サービスにSSOするための拡張機能です。

インストールすることで、SmartHRのブラウザ拡張機能が従業員に代わってIDとパスワードを自動入力する仕組みです。これにより、外部サービスのログイン画面での手入力が不要になり、SmartHRからワンクリックでログインできます。

採用したフレームワーク

拡張機能開発のフレームワークには、wxtを採用しました。採用理由としては以下です。

拡張性
- 将来的に、ポップアップ機能におけるアプリケーション構築に対応できる
開発効率
- ブラウザ起動などの細かいサポートがある
- assetsのビルドなど、パイプライン管理をフレームワークに任せられる
保守性
- Viteのプラグインとして実行できるため、メンテナンスコストが低い
- ディレクトリ構造が強制されることで、実装に迷いにくくなる

plasmo、chrome-extension-tools、Extension.jsも検討しましたが、勘案した結果、上記の理由からwxtを採用しました。

汎用的なログイン処理の実現

メタップスクラウド時代のChrome拡張機能開発では、外部サービスごとに個別のログイン処理を実装していました。そのため、ある日突然、外部サービスで「ログインできない」という問題が発生することが多々ありました。よって、外部サービスのログイン画面が変更されるたびに、拡張機能側のコードも修正しなければなりませんでした……。

その経験を経てSmartHRでのChrome拡張機能開発では、SmartHRのカスタムアプリ*5として提供することにしました。カスタムアプリを利用してSmartHR管理者が外部サービスのログイン操作情報を保存することで、従業員は外部サービスをSSOで利用できます。

外部サービスのログイン画面が変更された場合でも、SmartHRの管理者が自ら修正を行えるため、運用の中断を最小限に抑えることが可能になりました。

Chrome拡張機能で行なっていること

Chrome拡張機能では、主に次の3つを行なっています。

条件に合致した環境（URL）でイベントを実行する
API経由で、従業員が登録した外部サービスのログイン情報を取得する
外部サービスのログイン画面に遷移し、DOMを操作してIDやパスワードの入力と、ログインボタンの押下を行う

SmartHR管理者が設定を完了させると、従業員のホーム画面に外部サービスが表示されます。

これにより、従業員が外部サービスのIDとパスワードを事前にSmartHRに登録するだけで、それ以降は、従業員がSmartHRからワンクリックするだけで外部サービスにログインできます*6。たとえば、上記画像の「ビジネスチャットSaaS」にログインする場合、従業員がここをクリックするだけで、自動的にログイン画面に遷移しログインが行なわれます。

Chrome拡張機能とフォームベース認証によるSSOによって、ログインにまつわる業務を効率化できます。