Currently I am working on a Project which is implemented in Ionic 1 and AngularJs.
Now we are working to integrate it with BHIM UPI to perform In-App payment. I think we need to install IONIC Native Web Intent plugin in order to make web intent call to BHIM.
But I am fairly new to angularJs and Ionic. I have seen some of the questions related to this but those are implemented in Ionic3 and latest versions.
UPI Deeplinking from IONIC to GooglePay does not work as expected
DEEPLINK_HOST in ionic deeplink
Deeplinking - Opening an Ionic App through another Ionic App
I have tried to achieve this by making Web Intent calls with help of this https://www.npmjs.com/package/#ionic-native/web-intent?activeTab=readme but with no luck. It's giving Error message like below
ionic.bundle.min.js:150 Error: [$injector:unpr] http://errors.angularjs.org/1.5.3/$injector/unpr?p0=webIntentProvider%20%3C-%20webIntent%20%3C-%20PaymentComponent%20%3C-%20PaymentComponent
at http://localhost:8100/js/ionic.bundle.min.js:40:416
at http://localhost:8100/js/ionic.bundle.min.js:77:7
at Object.d [as get] (http://localhost:8100/js/ionic.bundle.min.js:74:270)
EDIT :
I want to open BHIM UPI app from my Ionic App and able return success or failure status of transaction.
Any help or directions to achieve this will be highly appreciated.
There is no 'webIntentProvider' exists in ionic providers.
You've to remove 'webIntent' from your controllers injections. And use below code to open existing UPIs available in your mobile.
window.plugins.intentShim.startActivity(
{
action: window.plugins.intentShim.ACTION_VIEW,
url: urlIntent
},
function () { },
function () {
alert('Failed to open URL via Android Intent')
}
);
It'll show all available UPI providers which are installed in your mobile. Please go through documentation Deeplinking UPI for more details.
Cross check your package.json & confilg.xml, whether you installed above plugin in your app or not.
Related
I'm building an AngularJS (1.x) and Ionic/Cordova mobile app for iOS + Android. I'd like to add/create a "deep link" to my Sign In page so that when I send a new user a "Confirm your Email" email and they click a link to confirm their registration, then if they're on their mobile device (with my app installed) they'll be taken into the app directly to the Sign In page.
I see this plugin but I have no experience creating deep links in AngularJS/Ionic/Cordova apps. Any ideas?
If you are unsure about deep linking, it will increase the robotic impressions of your page which will increase the number of crawlers.
If you want to learn more about deep linking visit the following link: http://www.divami.com/blog/deep-linking-angular/
Now, the thing you want to implement is authentication of the existing users making and API call to the server that will check to see if the user already exists. If the user exists they will be taken to the login page else they will be taken to the registration page. This can be achieved using resolvers in angularjs.
Below is a link on how to implement this:
https://medium.com/opinionated-angularjs/advanced-routing-and-resolves-a2fcbf874a1c
Since you are using cordova use this plugin, it will help you started for IOS and Android easily.
Install plugin with URL Scheme with below cmd
$ cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=mycoolapp
That's it, now your app can referenced with
Open my app
You can send authentication code along with your URL like
Open my app
To retrieve code in your App
function handleOpenURL(url) {
console.log("received url: " + url); ==> this will returnURL after://
}
From this you can authenticate the user in your app itself. This is simple way as you are new to deeplinking. Go through the rules in plugin to know more about the naming convention for custom URL(mycoolapp)
Try this plugin it works great.
document.addEventListener('eventName', didLaunchAppFromLink, false);
function didLaunchAppFromLink(event) {
var urlData = event.detail;
console.log('Did launch application from the link: ' + urlData.url);
// do some work
}
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
onDeviceReady: function() {
universalLinks.subscribe('eventName', app.didLaunchAppFromLink);
},
didLaunchAppFromLink: function(eventData) {
alert('Did launch application from the link: ' + eventData.url);
}
};
app.initialize();
As you can see, now you subscribe to an event via universalLinks module when the ready device is fired.
Actually, you can subscribe to it in any place of your application: plugin stores the event internally and dispatches it when there is a subscriber to it.
here is a link the tells how to deep link
https://blog.ionicframework.com/deeplinking-in-ionic-apps/
Install the Cordova and Ionic Native plugins:
$ ionic cordova plugin add ionic-plugin-deeplinks --variable URL_SCHEME=myapp --variable DEEPLINK_SCHEME=https --variable DEEPLINK_HOST=example.com --variable ANDROID_PATH_PREFIX=/
$ npm install --save #ionic-native/deeplinks
Add this plugin to your app's module
the below links explains more about that
https://ionicframework.com/docs/native/deeplinks/
I'm trying to use Ionic Push notifications on android, but every time I got the following error:
Ionic Push:, (debug) unexpected error occured.
Ionic Push:, [object Object]
I'm using Genymotion as my emulator, with Google Play Services installed (https://stevenkideckel.wordpress.com/2014/12/27/how-to-install-google-play-services-on-genymotion/). Testing on a real device is not working as well.
Also, I'm using this push plugin (https://github.com/phonegap/phonegap-plugin-push), and installed like this:
ionic plugin add phonegap-plugin-push --variable SENDER_ID="my-gcm-project-number"
My push code look's like this:
var push = new Ionic.Push({
'debug': true,
'pluginConfig': {
'android': {
'senderID': 'my-project-number',
'iconColor': '#343434'
}
}
});
push.register(function(token) {
console.log('Device token:', token.token);
push.saveToken(token);
});
I already configured my Ionic app using:
ionic config set dev_push false
ionic push --google-api-key my-google-api-key
ionic config set gcm_key <my-gcm-project-number>
I tried to search for similar problemas but never found a solution.
Anyone can help me?
Thanks!
To answer my own question:
When I published my app and testing on a real Android device downloading the app from Google Play, it worked.
A few things to try if you are getting this problem:
Remove and add again the push plugin:
ionic plugin remove phonegap-plugin-push
ionic plugin add phonegap-plugin-push --variable SENDER_ID="my-gcm-project-number"
Also:
Generate a new project number and API key on Google Console;
Check .io-config.json to check if your keys and numbers are correct;
Make sure your dev push is off: ionic config set dev_push false;
Set your GCM key on Ionic IO: ionic config set gcm_key <your-gcm-project-number>;
Check (and make it again if needed) your build profiles on Ionic IO;
Also check this answer: https://forum.ionicframework.com/t/ionic-push-not-working-on-android/52636/2
Hope this help someone.
I have a problem using pdfMake.js library. This library is supposed to generate PDF, client-side only.
It works well with chrome, Firefox...
But when I launch my ionic app on a device (Android in my case), I have the following error :
CordovaWebViewImpl﹕ Blocked (possibly sub-frame) navigation to non-allowed URL: data:application/pdf;base64,JVBERi0xLjMKJf39/f0KNiAwIG9iago8PAovVHlwZSAvRXh0R1.......
I encountered this problem before with AngularJs for example for Blobs...and using the following configuration worked :
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension|blob):/);
BUT not here... :(
Do you have any idea how to allow the data/pdf ?
Thanks !
You have to add permissions to your App inside manifest.xml file
I am using Ionic and Oauth.io to perform authentication. If I run ionic serve and include the outh.js file in my index everything works good from the browser.
But when I run ionic run ios or install the app in android, I get the following error when I press the auth button (the one that suppose to execute OAuth.popup
I do not know what to do, until now I have checked the following:
In config.xml I have access, allow-intent and allow-navigation full permisive
I have installed and re-installed the plugin ionic plugin add https://github.com/oauth-io/oauth-phonegap.git
I tried to run the native app without the inclusion of the oauth.js file and everything breaks.
Using current versions up to date.
I am new to Ionic, so I don't know how to debug the device-running app or simulator.
Could be similar to this post but not exactly .
Your advices will be appreciated.
I figure it out reading some posts. The OAuth initialization and references should be done after the device is ready, so it is best to put the initialize in this block:
$ionicPlatform.ready(function() {
// ...
if(typeof window.OAuth !== 'undefined'){
$rootScope.OAuth = window.OAuth;
$rootScope.OAuth.initialize('XXX');
}
else{
console.log("plugin not loaded, this is running in a browser");
$.getScript( "lib/oauth.js", function() {
$rootScope.OAuth = OAuth;
$rootScope.OAuth.initialize('XXX');
});
}
});
Now, if the plugin is loaded it initializes the window.OAuth object, else the app is running in browser, so I have to include the oauth.js file. Also I assigned the OAuth to the $rootScope for quick access.
Hope this helps anyone.
I am developing an hybrid app for Android and WP8 using Ionic. It works fine on Android platform but when I recently used this on WP8, its showing me
"You need to install an app for this task. Would you like to search
for one on the Store?"
When I click on some links (internal app links). Please can anybody tell me why this is happening. Thanks in advance.
Problem In windows phone Due to ms-appx IE problem :
When you use ng-href and dynamic url's in your app on Windows Phone, for example:
<a ng-href="#/view/"> click here </a>
You will notice that when you click on the url, you get a message "Search for app in appstore?". You receive this message because AngularJS can't handle the prefix that Windows Phone IE is adding.You can resolve this easily by adding an HTML5 him to your app.
.config([
'$compileProvider',
function ($compileProvider)
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|ghttps?|ms-appx|x-wmapp0):/);
// Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)
}
])
And if local & dynamic images are not showing in app then add following same as your app.js
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob|content|ghttps?|ms-appx|x-wmapp0):|img\//);
For more details to check here link1, link2 ,link3 and link4.
Install cordova-plugin-inappbrowser
In relation to this posting What is x-wmapp2 and x-wmapp1? it could also be diserable to have something like this:
$compileProvider.aHrefSanitizationWhitelist( /^\s*(g?https?|ftp|mailto|tel|file|local|ms-appx|x-wmapp\d+):/ );
Instead of only x-wmapp0 I am using x-wmapp\d+ in my regex.