React Native : Suppression sécurisée de fichiers dans Back4App

supprimer des fichiers d'une application react native introduction dans ce guide, vous apprendrez la meilleure façon de supprimer des fichiers du cloud back4app dans les applications react native pour gérer les fichiers d'application dans back4app, nous utilisons la parse file parse file classe utilitaire vous pouvez effectuer des opérations de stockage, de récupération et de suppression en utilisant cette classe dans la section précédente, https //www back4app com/docs/js framework/react native files , nous avons couvert le stockage et la récupération de fichiers en créant une application de galerie de démonstration à ce stade, vous devriez être conscient qu'après avoir créé et enregistré un parse file parse file , la meilleure pratique est de toujours l'associer à un autre objet de données cela empêchera la création de fichiers orphelins dans votre projet et vous permettra de les trouver et de les supprimer sur le cloud back4app parse file parse file fournit un moyen de supprimer des fichiers, mais c'est une opération sensible en matière de sécurité que vous ne devriez pas effectuer côté client dans ce tutoriel, vous apprendrez la meilleure pratique pour supprimer vos fichiers d'application objectif ajouter une action de suppression d'image à une application de galerie de démonstration react native prérequis pour compléter ce tutoriel, vous aurez besoin de compléter le https //app archbee com/docs/ roxiyumxobue9i7uv49e/nijiqgqoc93tzrlydmcbi tutoriel parse >= 4 2 0 1 configuration de l'application dans la section précédente, https //www back4app com/docs/js framework/react native files , nous avons construit une application de galerie de démonstration pour télécharger et afficher les photos des utilisateurs pour ce tutoriel, vous allez augmenter cette application en ajoutant un bouton de suppression à chaque élément d'image dans le gallery js gallery js composant et en effectuant notre opération de suppression si vous avez déjà terminé de coder l'application de galerie de démonstration, vous pouvez passer à l'étape suivante alternativement, vous pouvez cloner la base de code de l'application pour suivre ce tutoriel pour cloner le projet, exécutez git clone https //github com/templates back4app/react native demo gallery app git clone https //github com/templates back4app/react native demo gallery app ensuite, installez les dépendances du projet 1 cd react native demo gallery app 2 3 # en utilisant yarn 4 yarn install 5 6 # en utilisant npm 7 npm install avant d'exécuter, n'oubliez pas de configurer vos identifiants back4app, id de l'application id de l'application et cléjavascript cléjavascript , dans la méthode d'initialisation méthode d'initialisation pour des informations sur la configuration des identifiants de l'application, voir https //www back4app com/docs/js framework/react native cli enfin, exécutez l'application react native 1 # pour android 2 npx react native run android 3 4 # pour ios 5 npx react native run ios 2 création d'un bouton de suppression dans l'application galerie, le gallery js gallery js composant rend la liste des images de votre projet cloud back4app ensuite, vous allez créer et ajouter un bouton à chaque élément d'image de la liste actuelle ouvrez le gallery js gallery js fichier et ajoutez le contenu suivant 1 import react, {usestate, useeffect} from 'react'; 2 import {text, view, image, flatlist, stylesheet, button, alert} from 'react native'; 3 import parse from 'parse/react native js'; 4&#x9; 5 const gallery = () => { 6 const \[images, setimages] = usestate(\[]); 7&#x9; 8 useeffect(() => { 9 const fetchimages = async () => { 10 let query = new parse query('gallery'); 11 const results = await query find(); 12 setimages(results); 13 }; 14&#x9; 15 fetchimages(); 16 }, \[]); 17&#x9; 18 async function ondeleteimage(image id) { 19 // todo implement this function 20 } 21&#x9; 22 return ( 23 \<flatlist 24 style={styles container} 25 contentcontainerstyle={styles listcontent} 26 data={images} 27 horizontal={false} 28 numcolumns={3} 29 listemptycomponent={() => \<text>no images uploaded \</text>} 30 renderitem={({item}) => ( 31 \<view> 32 \<image 33 source={ {uri item get('picture') url()} } 34 style={styles imageitem} 35 /> 36 \<button 37 title="delete" 38 color="red" 39 onpress={() => ondeleteimage(item id)} 40 /> 41 \</view> 42 )} 43 keyextractor={(item) => item id} 44 />); 45&#x9; 46 }; 47&#x9; 48 const styles = stylesheet create({ 49 container { 50 flex 1, 51 backgroundcolor '#f5f5f5', 52 }, 53 listcontent { 54 justifycontent 'center', 55 alignitems 'center', 56 }, 57 imageitem { 58 width 100, 59 height 100, 60 resizemode 'cover', 61 marginhorizontal 5, 62 marginvertical 5, 63 }, 64 }); 65 export default gallery; nous avons refactorisé la fonction renderitem, en incluant un bouton de suppression pour toutes les images rendues cependant, l'événement de clic sur le bouton n'a toujours pas de fonctionnalité implémentée vous le ferez à l'étape suivante 3 création d'une fonction cloud pour supprimer une image vous avez appris qu'un fichier doit toujours être associé à un objet de données sur le https //www back4app com/docs/js framework/react native files ne pas associer les fichiers aux objets de données entraînera des fichiers orphelins ces fichiers sont inaccessibles dans votre application une fois que vous ne pouvez plus les trouver, vous ne pouvez également pas les supprimer de votre application vous ne pouvez les effacer qu'en utilisant l'option purge files sur le tableau de bord back4app le processus de suppression consiste à trouver puis à supprimer dans parse, la destroy destroy méthode est utilisée pour supprimer les fichiers référencés cependant, l'utiliser côté client n'est pas sûr car cela nécessite le masterkey masterkey lorsque vous construisez une application react native, toutes vos clés sont regroupées, par conséquent, n'importe qui pourrait rétroconcevoir, décompiler votre application ou intercepter votre trafic réseau depuis son appareil pour trouver votre masterkey masterkey utiliser la clé maître vous permet de contourner tous les mécanismes de sécurité de votre application, tels que https //docs parseplatform org/js/guide/#class level permissions et https //docs parseplatform org/js/guide/#object level access control vous pouvez trouver plus de détails sur les meilleures pratiques de sécurité de parse https //blog back4app com/parse server security/ la meilleure façon de supprimer des fichiers est de le faire côté serveur en utilisant une https //www back4app com/docs/get started/cloud functions dans notre application de galerie, nous allons créer une fonction de code cloud pour cela créons un main js main js fichier avec la fonction cloud suivante 1 parse cloud define('deletegallerypicture', async (request) => { 2 const {image id} = request params; 3 const gallery = parse object extend('gallery'); 4 const query = new parse query(gallery); 5 try { 6 const image = await query get(image id); 7 const picture = image get('picture'); 8&#x9; 9 await picture destroy({usemasterkey true}); 10 await image destroy(); 11 return 'image removed '; 12 } catch (error) { 13 console log(error); 14 throw new error('error deleting image'); 15 } 16 }); pour plus de simplicité, nous utiliserons le tableau de bord pour télécharger des fonctions cloud directement ouvrez votre application tableau de bord tableau de bord à https //www back4app com/ et cliquez sur core core , puis fonctions de code cloud fonctions de code cloud téléchargez main js main js fichier à la racine du cloud/ cloud/ dossier déployez la fonction sur le serveur back4app après quelques secondes, votre fonction de code cloud sera disponible pour être appelée via rest ou parse sdk 4 appel de la fonction cloud de suppression depuis votre application une fois que vous avez déployé avec succès votre fonction cloud code back4app, allez y et implémentez l'action pour lorsque l'utilisateur appuie sur le bouton de suppression dans notre application galerie 1 // triggers on hitting delete 2 async function ondeleteimage(image id) { 3 try { 4 const params = {image id}; 5 const result = await parse cloud run('deletegallerypicture', params); 6 alert alert(result); 7 } catch (error) { 8 console log('delete error ', error); 9 } 10 } 11 maintenant, lorsque vous cliquez sur supprimer, votre application déclenchera la deletegallerypicture deletegallerypicture fonction cloud qui supprimera avec succès une image 5 purge des fichiers dans certaines situations, lorsque vous avez perdu la trace de vos fichiers d'application, vous devez supprimer des fichiers depuis votre tableau de bord cela se produit généralement lorsque vous créez les fichiers orphelins mentionnés dans cet article pour des informations sur la façon de nettoyer vos fichiers d'application essayez https //help back4app com/hc/en us/articles/360002327652 how to delete files completely ou voir https //www back4app com/docs/parse dashboard/app settings fait ! à ce stade, vous avez déployé avec succès une fonction de code cloud et appris comment supprimer une image dans une application react native