React Native の設定

GitHubから React Native統合用ファイルをダウンロードし、ch-react-native-integrationフォルダをプロジェクトに追加してください。

この例では、CrowdHandler を使用して、EC アプリ内の特定の商品を保護します。ユーザーがナビゲーションを呼び出した際、選択された商品に対してウェイティングルームが有効になります。

1. CrowdHandler プロバイダーの設定

アプリの最上位レベルでCrowdHandlerProviderをインポートしてください。

App.js

import { CrowdHandlerProvider } from './ch-react-native-integration';

アプリ内に、イベントを管理するためのオブジェクトを作成してください。

これらのイベントは、状態に応答できるようにするために、CrowdHandler によって呼び出されます。

必須のイベントリスナーが2つあります。

onWait() - CrowdHandler が、ユーザーを「待機室」画面に遷移させる必要があると検出したときに呼び出されます

onRedirect() - CrowdHandler が、ユーザーを保護対象の画面へ転送すべきであると検出した際に呼び出されます。

必要に応じて、onRequestStart() と onRequestEnd() という 2 つのイベントリスナーも利用できます。

これらは、CrowdHandlerリクエストの送信前および送信後に呼び出され、ユーザーに処理が進行中であることを示すのに役立ちます。

App.js

export default function App() {

    const CHEvents = {
        navigation: null, // holds the navigation stack so CrowdHandler can redirect the correct screens
        onWait: function (ch_response) { // required
            launchWaitingRoomScreen(ch_response);
        },
        onRedirect: function (ch_response) { // required
            redirectToScreen(ch_response);
        },
        onRequestStart: function () {}, //optional
        onRequestEnd: function () {} // optional
    };
...

そして、イベントを処理するための関数を作成します。

ここでは、待合室画面の名前を「CHWaitingRoom」に設定しています。

この名前が、ナビゲーションスタック内の画面名と一致していることを確認してください。

その ch_response によって返される onWait この関数には、という名前のプロパティが含まれています。リファラー. これを利用して、ナビゲーションスタックで履歴を上書きすべきかどうかを判断します。リダイレクトが待合室からのものである場合、ユーザーが「戻る」ボタンをクリックした際に待合室に戻ってしまうことを避けたいからです。

App.js

const launchWaitingRoomScreen = (ch_response) => {
    ch_response.navigation.navigate('CHWaitingRoom', { ...ch_response.screen_config });
}
const redirectToScreen = (ch_response) => {
    if(ch_response.referer === 'waiting_room') {
      ch_response.navigation.replace(ch_response.screen_config.redirect, ch_response.screen_config);
    } else {
      ch_response.navigation.navigate(ch_response.screen_config.redirect, ch_response.screen_config);
    }
}

アプリを CrowdHandlerProvider コンポーネントでラップし、プロップとして、先ほど作成したイベントオブジェクト「CHEvents」と公開 API キーを渡します。必要に応じて、 タイムアウト （ミリ秒単位）。これは、APIのタイムアウトやリクエストの処理が遅い場合に、CrowdHandlerが保護画面へリダイレクトするように指示するものです。設定されていない場合、デフォルト値は3000ミリ秒（3秒）になります。

App.js

<CrowdHandlerProvider
    timeout={3000}
    chEvents={CHEvents}
    apiKey={"04b39378b6abc3d4ee870824371646a9d1e157b1a7720821add4c260108ebd48"}>
    <NavigationStack/>
</CrowdHandlerProvider>

2. CrowdHandler WebView をナビゲーションスタックに追加します。

ナビゲーションスタックを作成する場所ならどこでも、CHWebView コンポーネントをインポートしてください

NavigationStack.js

import {CHWebView} from './ch-react-native-integration';

CHWebView は、WebViewコンポーネントを返すコンポーネントであり、依存関係としてreact-native-webviewが必要です。

react-native-webview をインストールするには、次のコマンドを実行します。

yarn add react-native-webview

または

npm install --save react-native-webview

react-native-webview に関する詳細はこちらをご覧ください

https://github.com/react-native-webview/react-native-webview/blob/master/docs/Getting-Started.md

ナビゲーションスタックには、「待合室」用の画面が必要です。name プロパティを、 launchWaitingRoomScreen 上記の関数；これを CHWaitingRoom に設定しました。

CHWebViewコンポーネントをインポートし、画面の component プロパティをCHWebViewコンポーネントに設定します。

This is the screen that the user will see if they are required to wait so its important that the name of the screen matches the name you specified in the method called by the onWait event in App.js. i.e. <Stack.Screen name="CHWaitingRoom" component={CHWebView} />

NavigationStack.js

...
<Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen}/>
    <Stack.Screen name="Details" component={ProductsScreen}/>
    <Stack.Screen name="ProductScreen" component={ProductScreen} />
    <Stack.Screen name="CHWaitingRoom" component={CHWebView} />
</Stack.Navigator>
...

3. ナビゲーションのクリックをインターセプトする

保護したいページについては、ユーザーのナビゲーション操作をインターセプトし、目的の画面を表示する前にCrowdHandlerに確認を行う必要があります。これを行うには、 useCrowdHandler CrowdHandlerGatekeeper ファイルからのコンテキストを、ナビゲーション入力を処理している画面コンポーネントに渡しします。

ProductsScreen.js

import { useCrowdHandler } from "./ch-react-native-integration";

次に、CrowdHandlerのコンテキストを画面コンポーネントに取り込みます。

ProductsScreen.js

export const ProductsScreen = ({ navigation }) => {

    const crowdhandler_gatekeeper = useCrowdHandler();

    // pass a reference of navigation to the gatekeeper
    // this allows CrowdHandler to redirect the user to the correct screen
    crowdhandler_gatekeeper.setNavigation(navigation);
...

ユーザーがナビゲーション要素をクリックした際、保護したい画面へ遷移させる処理を行う関数を追加してください。

移動先の画面に「slug」プロパティや「url」プロパティがあるかどうかを確認しておくのが良いでしょう。もしない場合は、CrowdHandlerでチェックする必要はありません。

ProductsScreen.js

export const ProductsScreen = ({ navigation }) => {
    const crowdhandler_gatekeeper = useCrowdHandler();

    // pass a reference of navigation to the gatekeeper
    // this allows CrowdHandler to redirect the user to the correct screen
    crowdhandler_gatekeeper.setNavigation(navigation);

    const handleCheckWithCrowdHandler = async (product) => {
        if (product.slug || product.url) {
            await crowdhandler_gatekeeper.redirectOrWait(product);
        } else {
            navigation.navigate(product.redirect, product)
        }
    }
...

そして、このハンドラをボタンの onPress イベントに追加します。

CrowdHandler では、「Waiting Room」というスラッグに基づいて、あるいは保護したい URL に基づいて、画面を保護することができます。

ProductsScreen.js

// A collection of products
// Minimum requirements are that they have the waiting room slug or URL to protect
// and a screen to redirect to
// Analogous to params that are sent to react-navigator and any
// params that are set here are sent to the navigator on redirect

const products = [
    {
        slug: '0MAID6M2iMjNW1WZs', // waiting room slug from crowdhandler admin
        redirect: 'ProductScreen', // the screen to redirect to
        title: 'Hiking Boots',
        productID: 'pct_000112312'
    }, {
        url: 'https://example.com/products/protected/page', // URL to protect -  set in crowdhandler admin
        redirect: 'ProductScreen',
        // the screen to redirect to
        title: 'Head Torch',
        productID: 'pct_030112552'
    }
]

{products.map((product) => {
    return (
        <Button
            key={product.productID}
            onPress = { () => {
                handleCheckWithCrowdHandler(product)} // send the data to check
            }
        >
        {product.title}
        </Button>
    )
})}
...

4. すべてをまとめます。

この実装では、ユーザーがボタンを押すと、handleCheckWithCrowdHandler() が呼び出され、引数として product オブジェクトが渡されます。つまり、

{
		slug: '0MAID6M2iMjNW1WZs', // waiting room slug from crowdhandler admin
    	redirect: 'ProductScreen', // the screen to redirect to
    	title: 'Hiking Boots',
    	productID: 'pct_000112312'
    }

CrowdHandler は、そのオブジェクトの slug プロパティまたは url プロパティに基づいてチェックを行います

ユーザーが待機する必要がある場合は、 onWait() で定義されたイベントが呼び出されます App.js. これは、 Screen() ハンドラ（これも App.js. 「CHWaitingRoom」画面が表示され、待合室が読み込まれます。

ユーザーが保護された画面にアクセスできる場合、 onRedirect() が呼び出され、ユーザーはプロダクトオブジェクトで指定された画面に遷移します。この場合は ProductScreen.

1. CrowdHandler プロバイダーの設定#

2. CrowdHandler WebView をナビゲーションスタックに追加します。#

3. ナビゲーションのクリックをインターセプトする#

4. すべてをまとめます。#

1. CrowdHandler プロバイダーの設定

2. CrowdHandler WebView をナビゲーションスタックに追加します。

3. ナビゲーションのクリックをインターセプトする

4. すべてをまとめます。