SSL Pinning Issue with Ionic6 + Capacitor2/3 + Angular12 - capacitor

I am working on ionic 6 with angular 12 and capacitor 2,
where am trying to pin my ssl certificates, its works perfectly with devices and simulators,
but does not work properly with web / browser.
I have created a app , which is suited for all platforms, i.e web, android and ios.
My Code :
import { HTTP } from '#awesome-cordova-plugins/http/ngx'
constructor(private http: HTTP){
platform.ready().then(() => {
this.http
.setServerTrustMode('pinned')
.then(() => {
console.log('[SUCCESS] SSL Pinning Starts!')
})
.catch((e) => {
console.log('[ERROR] SSL Pinning Fails!', e)
})
}
}
In the error console am getting
[ERROR] SSL Pinning Fails! cordova_not_available

Related

How to connect my app to SocketIO server if i have CORS enabled

I'm trying to connect my Flutter APP to my SocketIO server (v2), if I enable cors
const io = require("socket.io")(httpServer, {
origins: ["http://localhost:5500", "*", "*:*"]
})
It shows this error (on Android Studio)
I/flutter (20998): reconnect_error: WebSocketException: Connection to 'http://192.168.1.8:3000/socket.io/?EIO=3&transport=websocket#' was not upgraded to websocket
If I disable cors it works perfectly, but I need cors because I need to be able to connect my test file (chat.html) that runs on localhost:5500, and in the future, connect my Flutter Web App
const io = require("socket.io")(httpServer, {
allowRequest: (req, callback) => {
const origin = req.headers.origin
const origins = [
undefined,
"http://localhost:5500",
"http://127.0.0.1:5500"
]
callback(null, origins.includes(origin))
}
})
(This works only for v2)

Keycloak Capacitor Adapter - Auth Redirect Problem

We are using Ionic Vue (5.4.0 - Vue3) with Capacitor and Keycloak as the Auth Provider. We have implemented the https://www.npmjs.com/package/keycloak-ionic Package which provides the Capacitor Adapter. We have set up the required deeplinks for both platforms and they are working. The app should authenticate the user in the system browser (capacitor-native adapter), save the tokens and reuse these tokens on the next appstart. It's working on android. On iOS the first startup is working but if i restart (terminating and starting again) i only see a blank screen. It's not redirecting into the secured content or showing the keycloak login page. I found out that the Safari Browser with the keycloak login is opened in the background. If i close this browser tab and start the app it's working by redirecting me to the keycloak login page.
May the browser with the opened keycloak instance be the problem?
I also tried the same with inappbrowster (capacitor adapter). The first start is working there also. If i restart the app the custom tab is opening the redirect url page without redirecting me to the secured content or to the keycloak login page.
Code Sample:
App.addListener('appUrlOpen', function (data: any) {
const slug = data.url.split('/kc1').pop()
// We only push to the route if there is a slug present
if (slug) {
router.push({ name: 'Overview' })
}
})
// init authentication
const initKeycloak = async () => {
const cachedKeycloak = new CacheUtil('keycloak')
const cachedKeycloakAccessToken = await cachedKeycloak.get('accessToken')
const cachedKeycloakRefreshToken = await cachedKeycloak.get('refreshToken')
const initOptions = { url: process.env.VUE_APP_AUTH_URL + '/auth', realm: 'mp', clientId: 'mobile', checkLoginIframe: false, onLoad: 'login-required', token: cachedKeycloakAccessToken, refreshToken: cachedKeycloakRefreshToken }
const keycloak = KeycloakIonic(initOptions)
keycloak.init({
adapter: 'capacitor-native',
pkceMethod:'S256',
onLoad: initOptions.onLoad as any,
redirectUri: process.env.VUE_APP_REDIRECT_URI
}).then((auth: any) => {
// auth and create app
if (!auth) {
console.log(auth)
} else {
const app = createApp(VueApp)
.use(IonicVue)
.use(router)
.use(store)
router.isReady().then(() => {
app.mount('#app')
})
}
}).catch((e: Error) => {
console.log('auth failed: ', e)
})
keycloak.onAuthSuccess = () => {
console.log('authenticated!')
// save tokens to device storage
cachedKeycloak.set('accessToken', keycloak.token)
cachedKeycloak.set('refreshToken', keycloak.refreshToken)
}
}
initKeycloak()

How to use Pushwoosh in Ionic 5 project with capacitor

Hi everyone I am migrating an app from ionic 1 to ionic 5 and I need to integrate the pushwoosh notification service, my project was started not using cordova, instead I use capacitor and I can't find information about how to integrate this service to an ionic 5 application.
Please, we already know that you can use cordova but when using the cordova plugin add pushwoosh-cordova-plugin#8.0.0 it gives you the following message:
Current working directory is not a Cordova-based project.
because as I said before it is a capacitor project not a cordovan project, Btw I already use ionic integrations enable cordova
So... if anyone can help us, It would be very helpful.
OK guys after many hours trying to integrate Pushwoosh into an ionic 5 application for me it was impossible,
If you set everything up correctly, the following will happen:
Your app will connect to Pushwoosh correctly
Your app will correctly register your device in pushwoosh
But your app will not listen to the listeners offered by the official Pushwoosh documentation
document.addEventListener('push-receive',
function (event) {
var message = (<any>event).notification.message;
var userData = (<any>event).notification.userdata;
alert("Push message received: " + message);
console.info(JSON.stringify((<any>event).notification));
//dump custom data to the console if it exists
if (typeof (userData) != "undefined") {
console.warn('user data: ' + JSON.stringify(userData));
}
}
);
This does not work in an ionic 5 app 👆🏽
This does work:
import { Component, OnInit } from '#angular/core';
import {
Plugins,
PushNotification,
PushNotificationToken,
PushNotificationActionPerformed,
} from '#capacitor/core';
const { PushNotifications } = Plugins;
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
ngOnInit() {
console.log('Initializing HomePage');
// Request permission to use push notifications
// iOS will prompt user and return if they granted permission or not
// Android will just grant without prompting
PushNotifications.requestPermission().then(result => {
if (result.granted) {
// Register with Apple / Google to receive push via APNS/FCM
PushNotifications.register();
} else {
// Show some error
}
});
PushNotifications.addListener(
'registration',
(token: PushNotificationToken) => {
alert('Push registration success, token: ' + token.value);
},
);
PushNotifications.addListener('registrationError', (error: any) => {
alert('Error on registration: ' + JSON.stringify(error));
});
PushNotifications.addListener(
'pushNotificationReceived',
(notification: PushNotification) => {
alert('Push received: ' + JSON.stringify(notification));
},
);
PushNotifications.addListener(
'pushNotificationActionPerformed',
(notification: PushNotificationActionPerformed) => {
alert('Push action performed: ' + JSON.stringify(notification));
},
);
}
}
I tried to combine Pushwoosh with the capacitor but the tokens of the devices that are generated are different so I still didn't get my notifications.
At the end of the day and after many hours and days of work I have no other option than to use firebase and now everything is going much better.

Ionic native secure storage plugin fails silently (on Ionic View and Ionic Dev App on Android)

I have added Ionic Secure Storage plugin (to store authentication tokens) into my Ionic project, and it works properly locally when running cordova run browser (so that cordova is loaded as a plaform).
However, when I open my project in Ionic DevApp and Ionic View on Android (works correctly on iOS), it fails silently whenever I try to retrieve the saved token.
Here is my code:
// ... unrelated imports omitted
import {Platform} from "ionic-angular";
import {SecureStorage, SecureStorageObject} from "#ionic-native/secure-storage";
#Component({
selector: 'my-component',
templateUrl: 'my-component.html'
})
export class MyComponent {
constructor(private platform: Platform,
private secureStorage: SecureStorage) {
}
ngOnInit() {
this.getToken().then(token => {
// ... do something with the retrieved token
});
}
getToken() {
if (this.platform.is('cordova')) {
/**
* Code below silently fails in Ionic View and Ionic Dev App
* on Android (works correctly on iOS)
*/
return this.platform.ready().then(() =>
return this.secureStorage.create('cp_secure_storage')
.then((storage: SecureStorageObject) => {
return storage.get('TOKEN_NAME')
.then(token => {
console.log(token);
return token;
}, () => null);
});
});
} else {
return Promise.resolve(localStorage.getItem('TOKEN_NAME'));
}
}
}
I have Ionic error monitoring turned on and it catches no errors.
Plugin version:
"#ionic-native/secure-storage": "4.5.3",
"cordova-plugin-secure-storage": "^2.6.8"

Ionic 2 App - Not making any Ajax calls via IOS Simulator

I have been trying to run this app through simulator.
When I run ionic emulate ios, this app will not make any Ajax Calls
When I run ionic emulate ios -c -l this app works perfectly
This is my provider class which I copied pretty much exactly from the Ionic Conference App
import {Injectable} from 'angular2/core';
import {Http, Headers} from 'angular2/http';
import 'rxjs/add/operator/map';
import {Storage,SqlStorage} from 'ionic-framework/ionic';
/*
Generated class for the RafitoData provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
*/
#Injectable()
export class RafitoData {
static get parameters() {
return [[Http]];
}
constructor(http) {
this.http = http;
this.districts = null;
this.storage = new Storage(SqlStorage);
}
addCustomer(customer) {
// don't have the data yet
return new Promise(resolve => {
var headers = new Headers();
headers.append('Content-Type','application/json');
var partialURL = '/rafitows/userInfo/create';
var body = JSON.stringify(customer);
// We're using Angular Http provider to request the data,
// then on the response it'll map the JSON data to a parsed JS object.
// Next we process the data and resolve the promise with the new data.
this.http.post(partialURL,body,{headers:headers})
.map(res => res.json())
.subscribe(data => {
resolve(data.status);
}, err=> {console.log(err)});
});
}
}
I am not sure what am I doing wrong. I have the cordova whitelist plugin.
This is my ionic information:
Cordova CLI: 5.4.0
Ionic Version: 2.0.0-beta.1
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
ios-deploy version: Not installed
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v5.3.0
Xcode version: Xcode 7.2.1 Build version 7C1002
I have uploaded the whole project on gitHub
https://github.com/alyn000r/testAjax/tree/master/testAjax
Please add the below line to your config.xml
<allow-navigation href="*" />
Also have a look here.
Hope this helps you. Thanks.