メインコンテンツまでスキップ

Web アプリへの SDK 組み込み（PaSoRi を使用）

注意

Web アプリ用の SDK は、現在ベータ版での提供となります。

本 SDK の使用にはソニー株式会社から提供されている SDK for NFC Web Client の契約が別途必要となります。 対応している非接触 IC カードリーダー／ライターは SDK for NFC Web Client の製品仕様をご参照ください。

このセクションでは、Node.js + npm + Vite を用いて作成したプロジェクトへの SDK 組み込み方法を説明します。

Node.js, npm のインストール​

公式ドキュメント をご参照ください。

この資料では Node.js 20 と npm 10 を使用して解説します。 他のバージョンを利用する場合は、オプションなどが異なる場合がありますので、適宜読み替えてください。

プロジェクトの作成​

npm create vite@latest コマンドでプロジェクトを作成します。

  • Project name には 好きな名前を入力してください。
  • Select a framework は Vanilla を選択してください。
  • Select a variant は TypeScript を選択してください。
% npm create vite@latest
✔ Project name: … web-pasori-example
✔ Select a framework: › Vanilla
✔ Select a variant: › TypeScript

Scaffolding project in ・・・/web-pasori-example...

Done. Now run:

  cd web-pasori-example
  npm install
  npm run dev

SDK の組み込み​

まず、.npmrc ファイルを作成します。 .npmrc という名前のファイルをプロジェクトのルートディレクトリに作成し、以下の内容を追加してください。

@pocketsign:registry=https://repo.platform.p8n.app
//repo.platform.p8n.app/:_auth=<YOUR_BASIC_AUTH_STRING>

<YOUR_BASIC_AUTH_STRING> の部分は、以下のコマンドによって生成される値を入力してください。

echo -n "token-user:<YOUR_SDK_TOKEN>" | base64

<YOUR_SDK_TOKEN>の部分は、作成した SDK 取得用トークンを入力してください。

注意

実際のプロジェクトでは、.npmrc に SDK トークンを直接記載しないでください。 また、VCS にトークンが記録されないように注意してください。

保存したら、npm install @pocketsign/verify-web-pasori-jpki-mock を実行してパッケージに SDK をインストールします。

% npm install @pocketsign/verify-web-pasori-jpki-mock

added 1 package, and audited 14 packages in 844ms

3 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

プロジェクトの package.json が以下のようになっていれば成功です。

{
  "name": "web-pasori-example",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    /* ... */
  },
  "dependencies": {
    "@pocketsign/verify-web-pasori-jpki-mock": "^x.y.z"
  },
  "devDependencies": {
    /* ... */
  }
}
ヒント

この設定値は、モック環境用の SDK を読み込む設定です。 本番環境で利用する場合には、本番環境を参照してください。

サンプルコードの追加​

src ディレクトリの中の main.ts を開き、以下のコードで置き換えてください。

main.ts
import './style.css';
import { ReaderSession } from '@pocketsign/verify-web-pasori-jpki-mock';

// Verify SDK を使用するためには、NFCPortLib が別途必要となります。
// NFCPortLibはソニー株式会社から提供される SDK for NFC Web Client に含まれています。
const nfcPortLib = new NFCPortLib();

const run = async (pin: string) => {
  // JPKI APへの接続準備を行います。
  const session = new ReaderSession(nfcPortLib);

  // ここに実装を追加します。

  await session.close();
  return 'not implemented';
};

document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
<div class="card">
    <input id="pin" type="password" inputmode="text" placeholder="pin">
    <button id="verify" type="button">Read MyNumber Card</button>
</div>
<textarea id="output" readonly rows="8" cols="40"></textarea>
`;

const pin = document.querySelector<HTMLInputElement>('#pin')!;
const button = document.querySelector<HTMLButtonElement>('#verify')!;
button.addEventListener('click', async () => {
  document.querySelector<HTMLTextAreaElement>('#output')!.value = await run(pin.value);
});

これ以降、ハイライトした run()の中身を実装していきます。

テナント ID の設定​

モック環境は生成されるモックカード情報をカスタマイズするためのクラス ConfigurableCardSupplier を提供しています。 テナント ID の設定は、このクラスを通して行います。

追加したサンプルコードを以下のように変更してください。

import { ReaderSession, ConfigurableCardSupplier } from '@pocketsign/verify-web-pasori-jpki-mock';

/* ... */

const run = async (pin: string) => {
  const supplier = new ConfigurableCardSupplier({ tenantID: '00000000-0000-0000-0000-000000000000' });
  // JPKI APへの接続準備を行います。
  const session = new ReaderSession(nfcPortLib, undefined, supplier);

  // ここに実装を追加します。

  await session.close();
};

/* ... */

ビルド​

npm run dev コマンドで作成したコードをコンパイルし、Web アプリとして動かすことができます。

エラーが出なければ、SDK の組み込みは完了です。

% npm run dev

> [email protected] dev
> vite


  VITE v5.1.4  ready in 82 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

次のステップ​

SDK リファレンスを参照して、SDK の詳細な利用方法を確認してください。

実際のアプリケーションでの署名作成方法については、身元確認を参照してください。