不正検知モバイルSDK(React Native)

概要 ➿

ForterのReact Nativeプラグインは以下のSDKに対して作成されています。

インストール

ご利用のpackage.jsonファイルにForterの依存関係を追加します。

{
 "dependencies": {
       "forter-react-plugin": "<forter-plugin-bitbucket-link>#v0.1.17"
  },
}

iOS 📱

ForterSDK podおよびReact Native podを自身のPodfileに追加して、pod installを実行します。

pod 'ForterSDK', :git => '<forter-ios-sdk-bitbucket-link>forter-ios-sdk.git'
pod 'react-native-forter', :path => '../node_modules/forter-react'

ReactNative 0.60より前のバージョンを実行している場合は、 こちらに記載されているように、PodfileでReactの依存関係を定義する必要があります。

pod installを実行する (ios ディレクトリ内で).

Android 💚

android/settings.gradle

を編集します。

include ':react-native-forter'
project(':react-native-forter').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-forter/android')

以下のandroid/app/build.gradleを追加して、ForterのプライベートMavenリポジトリを追加します。

repositories {
  maven {
    url "https:<forter-android-sdk-link>/android"
    credentials {
      username "username" // provided in Forter's portal documentation
      password "password" // provided in Forter's portal documentation
    }
  }
}

🔥 注：ReactNative 0.60以上を使用している場合は、以下のステップは不要です。 🔥

プロジェクトのリンク：シェルからreact-native link react-native-forterをプロジェクトルートで実行するか、または手動で追加します。

依存関係にプロジェクトを追加する

  dependencies {
    ...
    compile project(':react-native-forter')
  }

最後に、以下のコードをアプリに追加して、Forterのモジュールを登録します。

import com.forter.mobile.reactnative.RNForterPackage;

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            //...
            new RNForterPackage(MainApplication.this)
            //...
      );
    }

JavaScript設定

アプリケーションのindex.jsに、カスタムイベントトラッキングとともに以下のJavaScriptコードを追加します。

import {forterSDK, ForterActionType, ForterNavigationType} from 'react-native-forter';

AppRegistry.registerComponent(appName, () => App);

var myForterID = "1e34987a83" // Modify this with your Forter Site ID

forterSDK.setDevLogsEnabled();
forterSDK.getDeviceUniqueID( (deviceID) => {
    console.warn("deviceID = " + deviceID + " merchant=" + myForterID);
    forterSDK.init(myForterID, deviceID, (successResult) => {
        console.warn("OK: " + successResult);
    }, (errorResult) => {
        console.warn("FAIL: " + errorResult);
    });
});
 
// Examples for custom tracking
forterSDK.trackNavigation('mainpage', ForterNavigationType.PRODUCT);
forterSDK.trackAction(ForterActionType.ADD_TO_CART)

テスト

（サンドボックス環境のSiteIdを使用して）サンドボックス環境でモバイルSDKを連携すると、Sandbox Mobile Events Viewerを使用して、Forterに渡されるイベントの特定のmobileUIDを調べることができます。これにより開発者は、Forterがモバイルイベントをどのように受け取り、保存しているかを可視化することができます。

バックエンドおよびForter APIリクエストにmobileUIDを含める

ネイティブのモバイルアプリケーションで注文が行われたときにForter SDKで生成されたmobileUIDを、バックエンドに送信します。これによりForterは、モバイルアプリケーションで収集された行動やネットワークに関するデータを、バックエンドから送信された注文データに連結させることができます。

orderType: ご利用のOSに応じて"MOBILE"、"iOS"、"ANDROID"のいずれか。（"MOBILE"は、OSがiOS、Androidいずれの場合も使用できます）
forterMobileUID: アプリが、決済ページも含めて完全にネイティブなアプリの場合は、forterTokenCookieではなく、このフィールドにデータが挿入されるようにします。決済ページでWebviewを使用している場合は、Webview Integrationを参照してください。
mobileAppVersion: ユーザーが使用しているアプリのバージョンが反映されるようにします。

API実行例

{
  "orderId": "Example_react_or06349",
  "orderType": "MOBILE",
  "timeSentToForter": 1415287568000,
  "checkoutTime": 1415273168,
  "connectionInformation": {
    "customerIP": "107.57.208.5",
    "userAgent": "testStore 18.4.1 rv:184100001 (iPhone; iOS 12.4.1; en_US; iPhone10,3)",
    "forterMobileUID": "6A9798AG16FF41F7B6B9878DD488ADD5", 
    "mobileAppVersion": "18.4.1"
  },
  "totalAmount": {
    "amountUSD": "99.95"
  }
  ...
}