Configurazione di React Native

Scarica i file di integrazione React Native da https://github.com/Crowdhandler/ch-react-native-integration/releases/download/1.0.0/ch-react-native-integration.zip e aggiungi la cartella ch-react-native-integration al tuo progetto

In questo esempio useremo CrowdHandler per proteggere determinati prodotti in un'app di e-commerce. La "sala d'attesa" si attiverà per i prodotti selezionati quando l'utente avvierà la navigazione.

1. Configurare il CrowdHandler#

Importa CrowdHandlerProvider nel livello principale della tua app.

App.js

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

Crea un oggetto all'interno della tua app per gestire gli eventi.

Questi eventi vengono generati da CrowdHandler per consentire di reagire allo stato.

Sono richiesti 2 listener di eventi.

onWait() - Viene chiamato quando CrowdHandler rileva che un utente deve essere reindirizzato alla schermata della sala d'attesa

onRedirect() - Viene chiamato quando CrowdHandler rileva che un utente deve essere reindirizzato alla schermata che stai proteggendo.

Se lo desideri, puoi utilizzare altri due listener di eventi: onRequestStart() e onRequestEnd().

Vengono richiamate prima e dopo l'invio della richiesta a CrowdHandler e sono utili per mostrare all'utente che l'operazione è in corso.

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
    };
...

e creare funzioni per gestire gli eventi.

Qui stiamo impostando il nome della schermata della sala d'attesa su "CHWaitingRoom".

Assicurati che questo nome corrisponda a quello della schermata presente nella tua pila di navigazione.

Il ch_response restituito dal onWait La funzione contiene una proprietà denominata referer. Lo utilizziamo per stabilire se lo stack di navigazione debba sostituire la cronologia. Se il reindirizzamento proviene dalla sala d'attesa, non vogliamo che l'utente torni alla sala d'attesa quando fa clic sul pulsante "Indietro".

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);
    }
}

Avvolgi la tua app con il componente CrowdHandlerProvider passando come prop l'oggetto evento creato in precedenza, CHEvents, e la tua chiave API pubblica. Facoltativamente, puoi aggiungere un valore per timeout in millisecondi. Questo parametro indica a CrowdHandler di reindirizzare alla schermata protetta in caso di timeout dell'API o di richiesta lenta. Se non viene impostato, il valore predefinito è 3000 ms (ovvero 3 secondi)

App.js

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

2. Aggiungi il CrowdHandler WebView allo stack di navigazione.

Importa il componente CHWebView nel punto in cui stai creando il tuo stack di navigazione

NavigationStack.js

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

CHWebView è un componente che restituisce un componente WebView e richiede react-native-webview come dipendenza.

Per installare react-native-webview, eseguire il comando

yarn add react-native-webview

oppure

npm install --save react-native-webview

Maggiori informazioni su react-native-webview sono disponibili qui

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

Nello stack di navigazione dovrai inserire una schermata dedicata alla “Sala d’attesa”. Imposta la proprietà “name” sullo stesso valore che hai impostato nel <span>launchWaitingRoomScreen</span> Nella funzione sopra riportata, l'abbiamo impostata su CHWaitingRoom.

Importa il componente CHWebView e imposta la proprietà "component" della schermata sul componente 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. Intercettazione di navigazione#

Per le pagine che desideri proteggere, devi intercettare l'interazione di navigazione dell'utente e verificare con CrowdHandler prima di mostrargli la schermata desiderata. Per farlo, importa il useCrowdHandler il contesto dal file CrowdHandlerGatekeeper nel componente dello schermo che gestisce l'input di navigazione.

ProductsScreen.js

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

quindi inserire il contesto CrowdHandler nel componente dello schermo.

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);
...

Aggiungi una funzione che gestisca il caso in cui un utente faccia clic su un elemento di navigazione che lo reindirizza a una schermata che desideri proteggere.

È consigliabile verificare se la schermata a cui si sta accedendo dispone di una proprietà "slug" o "url". In caso contrario, non è necessario effettuare la verifica tramite 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)
        }
    }
...

e aggiungi questo gestore all'evento onPress del pulsante.

Crowdhandler può proteggere gli schermi in base allo slug della "Sala d'attesa" o in base all'URL che desideri proteggere.

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 crowdhander 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 crowdhander 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. Mettere tutto insieme.

In questa implementazione, quando un utente preme il pulsante, viene chiamata la funzione ` handleCheckWithCrowdHandler() `, alla quale viene passato come argomento l'oggetto `product`, ovvero

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

CrowdHandler esegue quindi una verifica in base alla proprietà "slug" o alla proprietà "url" dell'oggetto

Se l'utente è costretto ad attendere il onWait() viene chiamato l'evento definito in App.js. Questo viene gestito dal launchWaitingRoom() gestore, definito anche in App.js. Viene visualizzata la schermata CHWaitingRoom e viene caricata la sala d'attesa.

Se l'utente è in grado di accedere alla schermata protetta onRedirect() viene richiamata e l'utente viene reindirizzato alla schermata specificata nell'oggetto prodotto, in questo caso Scheda prodotto

1. Configurare il provider CrowdHandler#

2. Aggiungi il CrowdHandler WebView allo stack di navigazione.#

3. Intercettazione dei clic di navigazione#

4. Mettere tutto insieme.#

1. Configurare il CrowdHandler#

2. Aggiungi il CrowdHandler WebView allo stack di navigazione.

3. Intercettazione di navigazione#

4. Mettere tutto insieme.