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

注意

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

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

開発環境のインストール

React Native アプリの開発には、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 の詳細な利用方法を確認してください。

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

開発環境のインストール​

プロジェクトの作成​

SDK の組み込み​

サンプルコードの追加​

Bare Workflow を使用したビルド​

Android アプリの設定​

iOS アプリの設定​

ビルド​

Managed Workflow を使用したビルド​

環境変数の設定​

iOS アプリの設定​

ビルド​

次のステップ​

開発環境のインストール

プロジェクトの作成

SDK の組み込み

サンプルコードの追加

Bare Workflow を使用したビルド

Android アプリの設定

iOS アプリの設定

ビルド

Managed Workflow を使用したビルド

環境変数の設定

iOS アプリの設定

ビルド

次のステップ