React Native アプリへの SDK 組み込み

注意

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

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

開発環境のインストール

React Native アプリの開発には、Node.js、React Native、Expo が必要です。 それぞれ、以下の公式ドキュメントに従ってインストールしてください。

• Node.js
• React Native
• Expo

この資料では VS Code を使用してコードを編集します。

他のエディタ、環境などを利用する場合は、設定などが異なる場合がありますので、適宜読み替えてください。

プロジェクトの作成

npx create-expo-app@latest コマンドでプロジェクトを作成します。

• What is your app named? では 好きな名前を入力してください。

% npx create-expo-app@latest
Creating an Expo project using the default template.

To choose from all available templates (https://github.com/expo/expo/tree/main/templates) pass in the --template arg:
  $ npx create-expo-app --template

To choose from all available examples (https://github.com/expo/examples) pass in the --example arg:
  $ npx create-expo-app --example

? What is your app named? › react-native-example

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 取得用トークンを入力してください。 <YOUR_SDK_TOKEN>の値は、 後で Android アプリや iOS アプリの設定を行う際にも使用します。

注意

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

保存したら、以下のコマンドを実行してパッケージに SDK をインストールします。

npm install \
  @pocketsign/verify-react-native-jpki-mock \
  @pocketsign/verify-react-native-driver-mock \
  @pocketsign/verify-react-native-shared \
  @pocketsign/verify-expo-plugin

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

{
  "name": "react-native-example",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    /* ... */
  },
  "dependencies": {
    "@expo/vector-icons": "^14.1.0",
    "@pocketsign/verify-expo-plugin": "^x.y.z",
    "@pocketsign/verify-react-native-driver-mock": "^x.y.z",
    "@pocketsign/verify-react-native-jpki-mock": "^x.y.z",
    "@pocketsign/verify-react-native-shared": "^x.y.z",
    /* ... */
  },
  "devDependencies": {
    /* ... */
  },
  /* ... */
}

次に、プロジェクトの app.json または app.config.js を設定します。

app.json または app.config.js ファイルを開き、以下の内容を追加・編集してください。

{
  "expo": {
    /* ... */
    "ios": {
      "supportsTablet": true,
      "infoPlist": {
        "NFCReaderUsageDescription": "マイナンバーカードの読み取りに利用します。",
        "com.apple.developer.nfc.readersession.felica.systemcodes": ["0003", "FE00", "88B4"]
      },
      "entitlements": {
        "com.apple.developer.nfc.readersession.formats": ["TAG"]
      }
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "edgeToEdgeEnabled": true,
      "permissions": ["android.permission.NFC"]
    },
    /* ... */
    "plugins": [
      /* ... */
      [
        "@pocketsign/verify-expo-plugin",
        {
          "types": ["verify-mock-jpki"],
          "tenantId": "00000000-0000-4000-8000-000000000000"
        }
      ]
    ],
    /* ... */
  }
}

テナント ID の設定 を行う場合、 "@pocketsign/verify-expo-plugin" プラグインの "tenantId" の設定値を変更してください。

ヒント

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

サンプルコードの追加

app/(tabs)/index.tsx ファイルを開き、以下のコードで置き換えてください。

import { ReaderSession } from '@pocketsign/verify-react-native-jpki-mock';
import React, { useState } from 'react';
import { Button, ScrollView, StyleSheet, Text, TextInput } from 'react-native';

export default function App() {
  const [pin, setPin] = useState('');
  const [result, setResult] = useState('カードをタッチしてください ...');

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

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

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

  const handleRun = async () => {
    try {
      const result = await run(pin);
      setResult(result);
    } catch (error: any) {
      setResult(`エラー: ${error.message}`);
    }
  };

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <TextInput
        value={pin}
        onChangeText={setPin}
        placeholder="PIN"
      />
      <Button title="実行" onPress={handleRun} />
      <Text>{result}</Text>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingVertical: 48,
    paddingHorizontal: 24,
    gap: 24,
  },
});

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

Bare Workflow を使用したビルド

Expo の Bare Workflow を使用してビルドを行う場合、以下の設定を行います。 Expo の Managed Workflow を使用してビルドを行う場合は、 Managed Workflow を使用したビルド を参照してください。

プロジェクトを作成した段階では Managed Workflow を使用してビルドを行うように設定されているので、 npx expo prebuild コマンドを実行して Bare Workflow に切り替えてください。

Android アプリの設定

Android をターゲットにして React Native アプリを作成するためには、 Android Studio のインストールが必要です。 インストール方法は公式ドキュメントをご参照ください。

環境変数 P8N_SDK_TOKEN を設定します。

export P8N_SDK_TOKEN=<YOUR_SDK_TOKEN>

これで Android アプリの設定は完了です。

iOS アプリの設定

iOS をターゲットにして React Native アプリを作成するためには、 XCode のインストールが必要です。 インストール方法は公式ドキュメントをご参照ください。

React Native で iOS をターゲットにした開発を行う場合に必要な設定を行います。

~/.netrc に以下の通り認証情報を書き込みます。 また、このファイルのパーミッションは 600 に設定してください。

machine repo.platform.p8n.app
login token-user
password <YOUR_SDK_TOKEN>

これで、iOS アプリの設定は完了です。

ビルド

• Android でアプリを実行する場合は npm run android -- --device コマンドを実行してください。
• iOS でアプリを実行する場合は npm run ios -- --device コマンドを実行してください。

コマンドを実行すると利用可能なデバイス一覧が表示されるので、アプリを実行したいデバイスを選択してください。

これで SDK の組み込みは完了です。

Managed Workflow を使用したビルド

環境変数の設定

ブラウザで Expo プロジェクト の環境変数設定画面（ Environment variables ）を開き、環境変数を追加します。

右上の「＋ Add Variables」をクリックし、

• Name は P8N_SDK_TOKEN
• Value は PocketSign Platform で作成した SDK トークンの値
• Visibility は Secret
• Environment は production, preview, development の全てにチェック

とし、「Add Variables」 をクリックして環境変数を追加してください。

iOS アプリの設定

iOS アプリをターゲットにする場合、追加で以下を設定する必要があります。

scripts フォルダに create-netrc.sh という名前でファイルを作成し、以下の内容を書き込んでください。

#!/usr/bin/env bash

cat <<EOF > ~/.netrc
machine repo.platform.p8n.app
login token-user
password $P8N_SDK_TOKEN
EOF
chmod 600 ~/.netrc

作成したら、このファイルに実行権限を与えます。 以下のコマンドを実行してください。

chmod +x scripts/create-netrc.sh

EAS の Managed Workflow には、 npm-hooks という機能があり、 package.json の scripts に "eas-build-pre-install" というターゲットを設定することで EASのビルドにおいて npm install を実行する前に任意コマンドを実行できます。 これを用い、ビルド前に scripts/create-netrc.sh を実行します。

package.json に以下を追加してください。

  "scripts": {
    ...
    "lint": "expo lint",
    "eas-build-pre-install": "./scripts/create-netrc.sh"
  },
  "dependencies": {

ビルド

• Android アプリをビルドする場合は eas build --platform android --profile development コマンドを実行してください。
• iOS アプリを実行する場合は eas build --platform ios --profile development コマンドを実行してください。

コマンドを実行すると Expo 上でビルドが始まります。

これで SDK の組み込みは完了です。

---

次のステップ

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

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