I have an Ionic 5.x app with the InAppBrowser plugin. I am trying to load a website with the plugin, the browser opens but the page is completely blank and with no errors thrown.
After many hours of debugging I have concluded that the issue is the certificate of the website not being trusted.
What does not make sense is the website is secure when viewed on a browser and is "Verified by: DigiCert Inc"
Other questions with same issue:
Loading url in ionic shows blank screen,
Cordova inAppBrowser opens www.google.com but not my custom facebook login page?
Does anyone have any ideas on why this is happening?
The code I am using to open:
this.browser = this.inAppBrowser.create( "https://mywebsite.com/", "_blank", "location=yes" );
this.browser.on("loadstart").subscribe( event => {
console.log( event ); // not triggered
});
this.browser.on("loadstop").subscribe( event => {
console.log( event ); // triggered
});
this.browser.on("loaderror").subscribe( event => {
console.log( event ); // not triggered
});
After many many hours of digging around I was finally able to find a solution. Editing a plugin file is not ideal but it does fix this issue!
Edit this file: plugins/cordova-plugin-inappbrowser/src/android/InAppBrowser.java
Add this to the import section:
import android.net.http.SslError;
import android.webkit.SslErrorHandler;
Then add this to the InAppBrowserClient class ( around line 1224 ):
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
handler.proceed();
return;
}
In file "plugins\cordova-plugin-inappbrowser\src\android\InAppBrowser.java":
Add this lines to import section:
import android.net.http.SslError;
import android.webkit.SslErrorHandler;
Add this to the InAppBrowserClient class ( around line 1224 ):
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
handler.proceed();
return;
}
In Console of Project Root: execute
$ cordova platform remove android
$ cordova platform add android
Related
I am trying to implement an OAuth2 implicit grant frow with a redirect.
Using the browser like this:
import { Plugins } from '#capacitor/core';
const { Browser } = Plugins;
await Browser.open({ url: loginUrl });
results in navigating to the login page, but then immediately jumping back to the previous (main app) screen. Any idea why? BTW, Angular's Platform.paused observable is getting triggered when opening the url and when jumping back (not-paused) as well
In case someone else stumbles upon this issue:
the problem was only on an Android Emulator, not on a real device. Wiping data in the AVD manager made it work in the Emulator as well.
I am developing the ionic4 app, to auto verification or whenever I will get SMS my app has to read that message. for this I used 'Cordova plugin add Cordova-plugin-SMS' but it is not working. i declared 'declare var window: any; and declare var SMS: any;' nothing has worked. it showing "java.lang.ClassNotFoundException: com.rjfun.cordova.sms.SMSPlugin" in Android, in the web while developing it showing " TypeError: Cannot read property 'listSMS' of undefined". can any one help me to solve this issue
There is one plugin which could solve your problem. Named cordova-plugin-sms-receive.
This will help to read sms when any phone received and you can do whatever you want.
https://www.npmjs.com/package/cordova-plugin-sms-receive
That plugin enables sending an SMS from the app, not receiving an SMS.
To get data from an SMS to your app, you could pass it as args using deeplinks. This would required the user to tap a link in the SMS. I am not aware of a way to have SMS data fed to your app automatically, and I would think it is not possible as it would be a security risk.
A custom URL scheme is the simplest way to do that (e.g. mycoolapp://some-path?p1=data1&p2=data2.
App Links (Android > 6.0) and Universal Links (iOS > 9.0) are more powerful but may be unnecessary and are not as well supported. It really depends on your use case.
Ionic has a community maintained plugin for this which I use and does the job, albeit with a workaround needed here and there. Branch.io's plugin is also an option but I haven't used it.
very nice question ... you need to use cordova plugin for that. Below are the
First you need to install Android Permission Ionic Native Plugin.
run these two commands first to install Android Permission Plugin.
ionic cordova plugin add cordova-plugin-android-permissions
npm install #ionic-native/android-permissions
Add android-permissions to your app's Module.
import { AndroidPermissions} from '#ionic-native/android-permissions';
#NgModule({
providers: [
AndroidPermissions
]
})
export class AppModule { }
Check permissions on page
import { AndroidPermissions } from '#ionic-native/android-permissions';
export class HomePage {
constructor(public androidPermissions: AndroidPermissions) { }
ionViewWillEnter()
{
this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.READ_SMS).then(
success => console.log('Permission granted'),
err => this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.READ_SMS)
);
this.androidPermissions.requestPermissions([this.androidPermissions.PERMISSION.READ_SMS]);
}
}
After allowing Read SMS permission now you need to install cordova-plugin-sms. Run this command for install it.
ionic cordova plugin add cordova-sms-plugin
npm install #ionic-native/sms
and in your page while reading SMS -
place this in top before declare class
declare var SMS:any;
place below inside class
ionViewDidEnter()
{
this.platform.ready().then((readySource) => {
if(SMS) SMS.startWatch(()=>{
console.log('watching started');
}, Error=>{
console.log('failed to start watching');
});
document.addEventListener('onSMSArrive', (e:any)=>{
var sms = e.data;
console.log(sms);
});
});
}
You can use this Ionic/Cordova plugin for Auto OTP verification and this will not ask the user for SMS read Permissions.
Plugin: https://github.com/hanatharesh2712/ionic-native-sms-retriever-plugin-master
Demo App: https://github.com/hanatharesh2712/sms-plugin-test
I am using InAppBrowser plugin to redirect user to payment website. The problem is that, when payment is done , I need to close that window automatically.
Is there any way to watch requests in InAppBrowser and check them, so that I can catch the successful response and close browser?
Normally you listen to page load events or other events happening in the InAppBrowser. Here is an example of using the Cordova plugin directly (without Ionic Native):
browser.addEventListener("loadstart", (event) => {
if ((event.url).indexOf("http://localhost/callback") === 0) {
browser.removeEventListener("exit", (event) => {});
browser.close();
// do things with `event.url` here
}
});
We are developing ionic app with mfp8.0. We have tried to register our device for push notification by using the following code,
function isPushSupported() {
MFPPush.isPushSupported(
function(successResponse) {
alert("Push Supported: " + successResponse);
registerDevice();
}, function(failureResponse) {
alert("Failed to get push support status");
}
);
}
function registerDevice() {
WLAuthorizationManager.obtainAccessToken("push.mobileclient").then(
MFPPush.registerDevice(
null,
function(successResponse) {
alert("Successfully registered");
},
function(failureResponse) {
alert("Failed to register device:" + JSON.stringify(failureResponse));
}
)
);
}
Not able to register the device now. While getting inside the registerDevice() function App is getting stopped.
Actually, We are getting this error recently. Before that the same code was working fine for us.
I have referred the documentation. But, I am not getting the solution.Link which I have reffered is,
https://github.com/MobileFirst-Platform-Developer-Center/PushNotificationsCordova/blob/release80/www/js/index.js
https://mobilefirstplatform.ibmcloud.com/tutorials/en/foundation/8.0/notifications/handling-push-notifications/
Note:
GCM recommeded to make use of FCM now, refer the following link,
https://developers.google.com/cloud-messaging/
Actually, after register my device with FCM credentails only I am facing the issue.
Anyone help will be Appreciated!!!
Please make sure you are following the correct instructions. The instructions are layed out in the following page: https://mobilefirstplatform.ibmcloud.com/tutorials/en/foundation/8.0/notifications/sending-notifications/
Visit the Firebase Console.
Create a new project and provide a project name.
Click on the Settings "cog wheel" icon and select Project settings.
Click the Cloud Messaging tab to generate a Server API Key and a Sender ID. and click Save.
I have just started an Ionic 2 mobile app.
I am setting up an update password process where a user can enter their email, click a "send password update email" button which then emails them a link. They can click that link which takes them to a page where they can update their password.
How do I send them a link in their email that when clicked on will open up the app and take them to a specific page?
Even more complicated is that I have a web app also. So if I'm sending them an email, should I show update password on website and update password on mobile app links? Or should I just add a link to the website?
In order to open the mobile app from a link, you need to integrate a cordova plugin called cordova-plugin-customurlscheme. With this plugin you can register a custom url "protocol" that is unique to your app (eg. myAwesomeApp://register?token=123). After installing the plugin with your custom url, clicking on any link starting with myAwesomeApp:// will open your app and also trigger a function hooked on the window object called handleOpenUrl which accepts the url as param. Inside there you can do your routing, depending on the url param.
let self = this;
(<any>window).handleOpenURL = function handleOpenURL(url) {
setTimeout(() => {
if (url && url.indexOf('\register') !== -1) {
let token = URLHelper.getParameterByName(url, 'token');
self.setAsRoot(ConfirmEmailPage, { activationToken: token });
}
}, 0);
};
As for dealing with your web app, what you could do is the following (this is what I am currently doing):
Host online a page (say www.myAwesomeWebsite.com/register?token=123) that checks to see if the user is coming from a mobile device (iOS or Android more specifically). If so on page load redirect them to your myAwesomeApp://register?token=123 link and have a button saying install app from app store with a link to your mobile app. If the user has the app, the app will be opened by the redirect, if they don't they will get an alert saying link cannot be found or sth and after clicking ok they will see the install App from app store button. If the user is not coming from a mobile device, just redirect them to your web app myAwesomeWebApp.com/register?token=123.
Another option is to use a third party service for deep linking like branch
Hope that helps.
EDIT: Since I posted this answer Ionic team has come with their own plugin for deep linking that kind of simplifies some of the hooking up inside your app. Their detailed blog post can be found here. In essence you install their plugin:
cordova plugin add ionic-plugin-deeplinks --variable URL_SCHEME=ionichats --variable DEEPLINK_SCHEME=https --variable DEEPLINK_HOST=ionic-hats.com
and then hook to it like so:
import {Component, ViewChild} from '#angular/core';
import {Platform, Nav, ionicBootstrap} from 'ionic-angular';
import {Deeplinks} from 'ionic-native';
import {AboutPage} from './pages/about/about';
import {HatDetailPage} from './pages/hat/hat';
#Component({
template: '<ion-nav [root]="rootPage"></ion-nav>',
})
class MyApp {
#ViewChild(Nav) nav:Nav;
constructor(private _platform: Platform) {}
ngAfterViewInit() {
this._platform.ready().then(() => {
Deeplinks.routeWithNavController(this.nav, {
'/about-us': AboutPage,
'/hats/:hatId': HatDetailPage
});
});
}
});
ionicBootstrap(MyApp);
Note that although this improves the plugin interfacing a bit, it does not change the fact that you have to use some other mechanism to handle deep links in conjunction with your web app.