top of page
Blog article

Blog article

最短でFIDO認証を導入できるサービス『YubiOn FIDO2 Server Service』を使ってみた

  • Asa
  • 22 時間前
  • 読了時間: 7分

先日、YubiOnの新しいサービス、「YubiOn FIDO2 Server Service」がリリースされました。これは主に開発者・開発ベンダー向けのサービスで、自社が提供するサービスなどに簡単にFIDO認証（パスキー認証）を導入するためのサービスとなっています。本来、FIDO認証を正しく検証するためにはWebAuthnなどの仕様に則って様々な判定処理を実装する必要がありますが、それらをサービスとして提供する事で、気軽にパスキー認証を導入する事ができるサービスとなっています。


以前からソフト技研では「YubiOn FIDO2 Server」というFIDOアライアンスの認定を受けたFIDO2Server製品を持っていましたが、サービスという形では提供しておらず、お客様からの問い合わせに応じて環境を提供する形を取っておりました。今回の「YubiOn FIDO2 Server Service」はこれをサービス化することにより、お客様がより簡単に、また迅速に導入が行えるようになりました。


そこで今回は、弊社が用意したサンプルのアプリケーションを使って、「YubiOn FIDO2 Server Service」サービスを導入することでいかにパスキー認証が簡単に行えるようになるかをご紹介したいと思います。



■導入の流れ

システムの構成イメージや認証の仕組みなどサービスの概要を知りたい方はこちらをご参照ください。

導入の流れに関しまして、マニュアルにも記載がありますが、概ね以下の通りとなっています。


１．カスタマー登録

　　　↓

２．RP登録

　　　↓

３．APIキー登録

　　　↓

４．SDK組み込み

　　　↓

５．動作検証


本来であれば「４．SDK組み込み」において、SDK入手後、ご自身のサービスに「YubiOn FIDO2 Server Service」のAPIを呼び出すロジックを実装する必要がありますが、今回はこのロジックを既に実装しているサンプルを使用して体験したいと思います。



■サンプルを動かしてみる

利用した環境

  • OS：Windows 11

  • ブラウザ：Chrome

  • パスキー：Windows Hello（指紋認証）

  • ソースコードエディタ：Visual Studio Code

  • 前提：Node.jsとnpmをインストールしておく必要があります

    　　　私はNode.js（v22）とnpm（v10）を使用しました。

    　　　（Node.jsをインストールすれば通常はnpmもインストールされます）



サービスの登録・準備 


  1. カスタマーを無料登録する

    ●手順

    「YubiOn FIDO2 Server Service」を開き、右上の「新規登録」をクリックします。

    ree

    個人情報の取扱いに同意し、カスタマー登録画面に進みます。

    必要なカスタマー情報を入力、及び利用規約に同意し、「登録」ボタンをクリックします。

    　・管理者名：YubiOn（任意の名前）

    　・管理者メールアドレス：登録後、アクティベートするためのメールが届きます

    　・カスタマー名：Test Customer（任意の名前）

    ree

    カスタマー登録後、管理者メールアドレス宛にカスタマー登録承認メールが送信されますので、

    メール本文内のURLリンクをクリックし、カスタマーアクティベーション画面を開きます。

    「YubiOn FIDO2 Server Service」の管理WEBサイトにログインするためのパスキーを登録すれば、アクティベーションが完了します。

    ree

    パスキー登録モーダルが表示されますので、案内に従ってパスキーの登録を行います。

    今回はWindows Helloを利用して指紋で登録してみます。

    ree


  2. RPを登録する

    RP（Relying Party）はFIDOの用語で、FIDO認証を導入するサービスやWebアプリケーション自体を指します。


    RP IDは、そのサービスを識別するためのIDで、通常はドメイン名が使用されます。「YubiOn FIDO2 Server Service」の場合、第三者が勝手にサービスを登録するのを防ぐため、通常はRP登録時にドメインの所有者であることを確認しています。ただし、開発環境での動作確認を容易にするために、末尾が.localhostのRP IDは例外的に確認なしで利用することが可能となっており、今回はこの仕組みを使って作業を進めます。


    ●手順

    「YubiOn FIDO2 Server Service」の管理WEBサイトにログインし、RP画面を開きます。

    「RP登録」ボタンをクリックします。

    ree

    RP登録モーダルが開きますので、情報を入力し、登録します。

    　・RP ID：test-app.localhost（任意の名前+.localhost）

    　・RP名称：Test App（任意の名前）

    ree

    通常であればRPの所有確認を行うことにより「検証済み」状態になりますが、今回はRP IDに開発用の「.localhost」を利用しているので、RP登録時点で「検証済み」になっていることが確認できます。

    ree


  3. APIキーを登録する

    登録したRPから「YubiOn FIDO2 Server Service」のAPIにアクセスする際に必要なキーを作成します。Nonce署名認証で登録し、登録後に表示されるAPI認証IDとシークレットキーを控えておく必要があります。


    ●手順

    RP詳細の「APIキー」画面を開きます（RP詳細はRP画面で登録したRPクリックで開きます）。

    「APIキー登録」ボタンをクリックします。

    ree

    APIキー登録モーダルが開きますので、情報を入力し、登録します。

    　・API認証名称：Test API key（任意の名前）

    　・API認証種別：Nonce署名認証

    　　　　　　　　　※今回はサンプルアプリの実装上、Nonce署名認証を選択しています。

    　　　　　　　　　　実運用時は適切な認証種別を選択してください。

    ree

    APIキー登録後、API認証IDとシークレットキーを控えておきます。

    ree


サンプルアプリケーションの準備

Visual Studio Code（VS Code）を利用してPC上でWEBサーバーを動作させます。


  1. SDKのサンプルアプリケーションを入手する

    Node.jsのSDKソースコードには、FIDOの登録・認証機能を試せるシンプルなサンプルアプリケーションが含まれています。このサンプルは、SDKをGitHubからソースコードをクローンするか、ZIPファイルをダウンロードして、その中のsampleディレクトリを利用することでアクセスできます。具体的なセットアップ手順は、sampleディレクトリ直下のREADME.md、またはREADME.ja.mdに記載されています。


  2. 環境変数を設定する

    sample/server/.env.sampleファイルをコピーして、同じ場所に.envファイルを作成します。

    VS Code上で.envファイルを編集します。

    　・FSS_RP_ID：test-app.localhost（登録したRP ID）

    　・FSS_API_KEY_ID：（APIキー登録時に控えておいたAPI認証ID）

    　・FSS_API_SECRET：（APIキー登録時に控えておいたシークレットキー）

    　・SESSION_SECRET：（ユーザーセッションを保護するための長くランダムな文字列）

    　・CLIENT_ORIGIN_URL：http://test-app.localhost:5173（クライアントアプリのURL）

    ree


    アプリの構造的にバックエンドとフロントエンドでサーバーが分かれている形になっているので、両方を起動する必要があります。


３．バックエンドを起動する

　　VS Codeのターミナルを開き、以下の通りコマンドを実行します。

#sample/serverディレクトリに移動
cd sample/server

#依存関係をインストール
npm ci

#開発サーバーを起動
npm run dev

　　サーバーがhttp://localhost:3000で起動すればOKです。


４．フロントエンドを起動する

　　VS Codeで新たにターミナルを開き、以下の通りコマンドを実行します。

#sample/clientディレクトリに移動
cd sample/client

#依存関係をインストール
npm ci

#開発サーバーを起動
npm run dev

　　クライアントの開発サーバーが http://localhost:5173 のようなポートで起動します。



サンプルの動作検証

サーバー側とクライアント側が起動したところで、ブラウザからパスキーの登録と認証、動作検証を行いたいと思います。

  1. サンプルアプリケーションにアクセスする

    ブラウザで、http://test-app.localhost:5173/（http://<設定したRPID>:5173/）にアクセスします。上記の設定が正しく行われていれば、サンプルアプリケーションのログイン画面が開きます。

    ree

  2. ユーザーとパスキーを登録する

    「Create a new account」リンクをクリックし、ユーザー登録画面を開きます。

    ree

    任意のユーザー情報を入力後、「Register and Add Passkey」ボタンをクリックします。

    パスキー登録モーダルが表示されますので、案内に従ってパスキーの登録を行います。

    今回も「YubiOn FIDO2 Server Service」と同様に指紋で登録してみます。

    ree

    SDKが組み込まれていることにより、パスキーの登録が正常に行われます。


  3. ログインする

    「Login with Passkey」ボタンをクリックし、パスキーでのログインを行います。

    ユーザーリストが表示されました。

    ree

    パスキー認証も成功です！


  4. 動作検証する

    動作検証として、「YubiOn FIDO2 Server Service」の管理WEBサイトを確認してみましょう。

    RP詳細の「APIログ」画面を開くと、情報が反映されており、パスキーの登録、認証が正常に行われたことが確認できます。

    ree


いかがでしたか？サンプルではありますが、アプリケーションにSDKを組み込み、実際にパスキーの登録、認証を行ってみました。本来であれば、自身のサービスにロジックを実装してSDKを組み込むという手順が必要になりますが、SDKを組み込むだけで、こんなにも簡単にFIDO認証が導入できることを実感いただけたかと思います。



■まとめ

「YubiOn FIDO2 Server Service」は、FIDO認証の導入を検討している企業にとって、開発コストと時間を大幅に削減する強力なソリューションです。セキュリティの強化とユーザーエクスペリエンスの向上を両立させるFIDO認証を、このサービスを利用することで迅速かつ効率的に自社サービスへ組み込むことが可能となります。

まずは無料で登録できますのでお気軽にお試しください。



■関連リンク

[YubiOn FIDO2 Server Service]


[YubiOn FIDO2 Server Serviceマニュアル]


All Tags

bottom of page