we found a bit of a workaround, we ended up writing the file to capacitors cache then sharing it with that file location, and that seems to have worked in a similar fashion.
I did attempt the data url and received the same error, regardless of how the data url was parsed.
I am ecryptinga text in IONIC using @ionic-native/aes-256/ngx library and trying to decrypt the same in PHP but unable to do so.
Here’s the data : Key : 12345678901234567890123456789012 (32bit) IV : 1234567890123456 Plain Text : ABCD
Encrypted in IONIC : "W2/PbR8z0sKBblfd4ezO1DKI/7UrB/egwDEGyw7w9tY= "
But it’s decrypting in IONIC but not in PHP. In PHP i tried encryption of the same text using same keys but also I am getting different encrypted data. PHP encrypted data for string “ABCD” : “5JvCGZhhM12hA9Tz/ldBvw==”
Can somebody please explain if I am missing anything?
Encrypted data in IONIC and PHP are different. I want to decrypt the text in PHP which was done using IONIC
Please show your code. How are you encrypting/decrypting in Ionic? How are you encrypting/decrypting in PHP?
EDIT
Also as a side note, Ionic Native is dead (since 2021) - A New Chapter for @ionic-native - Ionic Blog. You should update your packages.
ionic:
import { AES256 } from ‘@ionic-native/aes-256/ngx’;
constructor(public aes:AES256){}
encrypt(key, iv, data){
return this.aes.encrypt(key, iv, data);
}
output : "W2/PbR8z0sKBblfd4ezO1DKI/7UrB/egwDEGyw7w9tY= "
PHP :
$iv = “1234567890123456”;
$key = “12345678901234567890123456789012”;
$encrypted = "W2/PbR8z0sKBblfd4ezO1DKI/7UrB/egwDEGyw7w9tY= ";
$decrypted = openssl_decrypt($encrypted, “AES-256-CBC”, $key, 0, $iv);
echo $decrypted;
output : error
I tried encrypting using same keys in php and getting different ecnrypted data as : “5JvCGZhhM12hA9Tz/ldBvw==” also same in www.devglan.com/online-tools/aes-encryption-decryption
Hello,
I no longer have access to the email address to which my Ionic account is registered. But simply changing the address in the profile settings throws an error that the user or email exists. I’m using my own name which is too unique to be repeated as the user name and my company email (there are 6 of us) so there are no other accounts with this information already.
Please advise.
I purposely declared an unused variable but running eslint produces no warnings.
No, just the default setup which comes when creating an Ionic React 8 project using the CLI.
Please use proper code blocks 
Are you testing on Android or iOS? There is more going on than just passing in the key and iv. A PBKDF2 is being created first. See the Android source here.
I tried replicating the Android encryption in PHP, but still missing something (at least not getting the same encrypted value as you shared).
const PBKDF2_ITERATION_COUNT = 1001;
const PBKDF2_KEY_LENGTH = 256;
const PBKDF2_SALT = 'hY0wTq6xwc6ni01G';
$secureKey = '12345678901234567890123456789012';
$iv = '1234567890123456';
$pbkdf2SecuredKey = openssl_pbkdf2(
$secureKey,
PBKDF2_SALT,
PBKDF2_KEY_LENGTH,
PBKDF2_ITERATION_COUNT
);
// $pbkdf2SecuredKey = base64_encode(bin2hex($pbkdf2SecuredKey));
$encrypted = openssl_encrypt('ABCD', 'aes-256-cbc', $pbkdf2SecuredKey, 0, $iv);
// base64_encode($encrypted);
Hi,
I am building an Android app using Ionic and React. I have a ZIP file stored in AWS S3 that I need to download, unzip, and store the contents in the Directory.Data directory, which is part of the Android’s external storage. Since I am using Capacitor v5, I need to know which plugins to use and the procedure to achieve this.
I have some experience with ReactJS, but I am new to Ionic. If you need more information, please let me know.
Ah cheers, I might have a further look into react-query.
I originally had a .reload() as a dirty quick fix, but it felt far too hacky. I wish there was a way clearing the stored component history in ionic, that’d be ideal.
For now, I’ve wrapped all my authed pages in a ProtectedPage component, which returns different content if the user doesn’t exist. It means the pages are always in the dom, and the user should rarely see it anyway.
Thanks for all the detailed responses, they’ve really helped me think about how the app is built at least!
Thanks, you are right, eslint is not properly configured, I’ve created an issue on the starters repository
You can use Filesystem Capacitor Plugin API | Capacitor Documentation to download/read the zip file and something like JSZip to unzip it.
There is this SO with some info - javascript - Capacitor App, Extracting a Zip File Locally and accessing it - Stack Overflow
I’ve been working on an Ionic project that involves using the Capacitor Camera Preview plugin to take selfies. Everything works fine when I run the app in the browser or on an emulator. However, when I build the APK and run it on a physical device, the camera preview shows a white screen. The overlay elements are visible, but the camera feed is not displayed.
I’ve ensured that the CameraPreviewOptions are correctly set, and I’ve tried adjusting the z-index and background styles as suggested in various forums, but the issue persists. Here are the details of my setup:
TypeScript (bp-tirar-selfie.component.ts):
import { Component, OnInit } from '@angular/core';
import { CameraPreview, CameraPreviewOptions } from '@capacitor-community/camera-preview';
import { SharedModule } from '../../shared.module';
import { InstrucoesSelfieComponent } from './modal-instrucoes-selfie/instrucoes-selfie.component';
import { ModalController, NavController } from '@ionic/angular';
import { VisualizarFotoComponent } from './modal-visualizar-foto/visualizar-foto.component';
import { OverlayService } from 'src/app/core/services/overlay/overlay.service';
const cameraPreviewOptions: CameraPreviewOptions = {
position: 'front',
className: 'cameraPreview',
parent: 'cameraPreview', // Ensure this element exists in your template
toBack: true, // Push the camera preview behind the web view content
};
@Component({
selector: 'app-bp-tirar-selfie',
templateUrl: './bp-tirar-selfie.component.html',
styleUrls: ['./bp-tirar-selfie.component.scss'],
standalone: true,
imports: [SharedModule],
})
export class BpTirarSelfieComponent implements OnInit {
public cameraActive = false;
public image: string | null = null;
public selfieUsuario = '';
constructor(private modalCtrl: ModalController, private overlayService: OverlayService) { }
ngOnInit() {
this.mostrarInstrucoes();
}
public async mostrarInstrucoes() {
const modal = await this.modalCtrl.create({
component: InstrucoesSelfieComponent,
backdropDismiss: false,
});
modal.onDidDismiss().then(() => {
this.openCamera();
});
return await modal.present();
}
public openCamera() {
CameraPreview.start(cameraPreviewOptions);
this.cameraActive = true;
}
public async takePicture() {
try {
const result = await CameraPreview.capture();
const base64PictureData = result.value;
sessionStorage.setItem('fotoFace', base64PictureData);
this.stopCamera();
await this.verificarFoto(base64PictureData);
} catch (error) {
console.error(error);
this.overlayService.toast({
message: 'Erro ao tirar foto, por favor tente novamente.',
duration: 2000,
color: 'danger',
});
}
}
public async verificarFoto(foto: string) {
const modal = await this.modalCtrl.create({
component: VisualizarFotoComponent,
componentProps: {
foto: 'data:image/png;base64,' + foto,
},
});
modal.onDidDismiss().then((ret) => {
if (ret.data && ret.data === 'mudar') {
sessionStorage.removeItem('fotoFace');
this.openCamera();
} else {
this.returnPage();
}
});
return await modal.present();
}
public async returnPage() {
await this.stopCamera();
this.modalCtrl.dismiss();
}
public async switchCamera() {
CameraPreview.flip();
}
public async stopCamera() {
CameraPreview.stop();
}
}
HTML (bp-tirar-selfie.component.html):
<ion-content>
<div id="cameraPreview" class="cameraPreview">
<!-- Camera feed will be displayed here -->
</div>
<img class="molde-cabeca" src="/assets/images/perfil/face.png" *ngIf="cameraActive" />
<p class="texto" *ngIf="cameraActive">
Enquadre seu rosto na moldura e aperte o botão Amarelo para tirar uma nova
foto. Tire máscaras, óculos e outros adereços.
</p>
<div *ngIf="cameraActive">
<ion-fab vertical="bottom" horizontal="start">
<ion-fab-button color="light" (click)="returnPage()" routerDirection="back">
<ion-icon name="arrow-back"></ion-icon>
</ion-fab-button>
</ion-fab>
<ion-fab vertical="bottom" horizontal="center">
<ion-fab-button color="warning" (click)="takePicture()">
<ion-icon name="camera"></ion-icon>
</ion-fab-button>
</ion-fab>
<ion-fab vertical="bottom" horizontal="end">
<ion-fab-button color="light" (click)="switchCamera()">
<ion-icon name="camera-reverse-sharp"></ion-icon>
</ion-fab-button>
</ion-fab>
</div>
</ion-content>
CSS (bp-tirar-selfie.component.scss):
.cameraPreview {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /* Ensure it's behind other elements */
background: transparent;
}
ion-content {
--background: transparent; /* Make sure the background is transparent */
position: relative; /* Ensure the content positions correctly */
z-index: 0; /* Default z-index for content */
}
.molde-cabeca {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1; /* Ensure the frame is above the camera preview */
}
Assuming you’ve debugged (looked for any errors) on your Android device looking at DevTools via chrome://inspect/#devices and LogCat in Android Studio?
Also, what version of Capacitor and the plugin are you using?
It’s not showing any error log in chrome://inspect/#devices. Clicking the yellow button only takes a snapshot.
Those are the versions that I am using.
"@capacitor-community/camera-preview": "^6.0.0",
"@capacitor/android": "5.6.0",
"@capacitor/app": "5.0.7",
"@capacitor/browser": "^5.2.0",
"@capacitor/core": "^6.1.0",
"@capacitor/haptics": "5.0.7",
"@capacitor/ios": "5.6.0",
"@capacitor/keyboard": "5.0.8",
"@capacitor/share": "^6.0.1",
"@capacitor/status-bar": "5.0.7",
First, you have mix-matched versions for Capacitor and its plugins. Everything should be on v5 or v6.
Depending on if you are using Capacitor 5 or 6, you also need to use the correct version for @capacitor-community/camera-preview.
Version 6 of this plugin requires Capacitor 6.
`I’ve tried to use version 5 of the plugin, but the error persists. So, I updated my Capacitor version, but I’m still getting the error.
Updating to 6.0 | Capacitor Documentation (capacitorjs.com)
"@capacitor-community/camera-preview": "^6.0.0",
"@capacitor/android": "^6.0.0",
"@capacitor/app": "^6.0.0",
"@capacitor/browser": "^6.0.0",
"@capacitor/core": "^6.0.0",
"@capacitor/haptics": "^6.0.0",
"@capacitor/ios": "^6.0.0",
"@capacitor/keyboard": "^6.0.0",
"@capacitor/share": "^6.0.0",
"@capacitor/status-bar": "^6.0.0",`
"@capacitor/cli": "^6.0.0",
I am testing in Android. But if I decrypt the same in ionic it works perfect. While passing to PHP its not decrypting. Is there anything to do with key and iv or encrypted data?
You’re welcome. One day when we get React Router 6 support it might become easier to keep state in the URL/query string, and that make things a lot easier since reloading would immediately give you back all the changes the user had made to the page.
Hi @efirst91, Have you found a solution?
I’m having trouble setting up Jest to work with Ionic 8 and Angular 18. I’ve done a lot of research, but nothing has worked for me so far. Can you please share your configurations with me? I would really appreciate it.