Ionic custom oauth2 redirect URL Angular - android

I'm building an android app with Ionic and cordova.
I have one wordpress website - where is oauth2 plugin installed with some access functions. I want first to get code and later send post to retrieve the token. I tested it in web-browser and it works well:
location.replace('https://xxx/oauth/authorize?response_type=code&client_id=xxx&redirect_uri=http://192.168.0.129:8100/');
Im getting code after client login to my website and its redirecting to my app which is standing on ip 192.168.0.129:8100 with code in url - it wo. But in the android Im usining:
var options = {
clearcache: 'yes',
toolbar: 'no'
};
$cordovaInAppBrowser.open('https://xxx/oauth/authorize?response_type=code&client_id=xxx&redirect_uri=http://192.168.0.129:8100/', '_blank' , options)
.then(function(event) {
}).then(function(){
});
Everything works but not redirection - it cant load my app again. I made some research and mostly people place http://localhost/ or http://localhost/callback to go back to android app but it also doesnt work for me. What is the redirect URL than?? How to get back to the app?
of course 'xxx' are just for example;)

After you have opened the url in the in app browser with $cordovaInAppBrowser , you need to listen to an event, $cordovaInAppBrowser:loadstart as described here, http://ngcordova.com/docs/plugins/inAppBrowser/.
So you can do it in the following way,
$cordovaInAppBrowser.open('https://xxx/oauth/authorize?response_type=code&client_id=xxx&redirect_uri=http://192.168.0.129:8100/', '_blank' , options);
$rootScope.$on('$cordovaInAppBrowser:loadstop', function(e, event) {
// check event for which url loaded. if it loaded the http://192.168.0.129:8100/ with the access token, then handle it there and close the in app browser with, $cordovaInAppBrowser.close();
})

Related

Deep link params are not passed through Mozilla Firefox and Opera to Android app

I am trying to open the app with created Deep link registered on the Firebase Deep Linking service. Alongside the original link, I am trying to pass some extra params to the app in order to process this link.
For example, I have a link: https://my-custom.page.link/page?page=place&id=1001126
The link https://my-custom.page.link/page is registered on the Firebase service and ?page=place&id=1001126 are custom params.
Since we are building a react-native app, this is working as expected on all browsers on the IOS application. On the Android application, it is working as expected on a Google browser but NOT on Firefox or Opera.
On the Android Firefox and Opera browsers when I click on the link it is redirected to my application but additional params are not passed to it.
Is there any other configuration that needs to be set for an Android project to fix this behavior?
After I log data returned from react-native Linking.getInitialURL() I got null.
import { Linking } from 'react-native'
.
.
.
async componentDidMount () {
const deepLinkUrl = await Linking.getInitialURL()
console.warn('deepLinkUrl => ', deepLinkUrl) // IOS: correct payload Object, Android: null - Firefox and Opera
}
I expect to get correct data payload on both platforms.
I have experienced similar issue while using Firebase Dynamic links.
Unfortunately I was not able to pass parameters from Mozilla and Opera browsers using this approach.
However I found hacky way of doing it.
If you use firebase react native package: import firebase from 'react-native-firebase', it also has functionality for getting deep link url : deepLinkUrl = await firebase.links().getInitialLink()
Using this function you will get the App Store url from Firebase Dynamic Link.
Idea is to pass your parameters through App Store url in the way that you encode parameters e.g https://yourlink.page.link/?link=https://play.google.com/store/apps/details?id%3Dcom.yourapp%26param1%3Dvalue%26param2%3Dvalue...
These parameters will be striped if user goes to the app store, and if the user opens the link in the app you will be able to extract parameters from this url.
I hope this answer helps. :)

Ionic Angular - Android platform with reCaptcha use

I am trying to integrate reCaptcha with my Ionic Android/IOS app. The reason for this is that it calls the same API as the public Web app API.
I have tried creating a web key but due to the fact that the app is served from file:// it doesn't have a domain and as such i cant white list it.
I also tried to create a Android key and white list the App's package name but in both cases, i get the same error:
"error for site owner invalid domain for site key"
I tried using these recaptcha angular wrappers: ng-recaptcha and angular2-recaptcha, but obviously they fail as is a domain issue.
Is there any way to go around this?
So, after long searches and reading everything i found on the subject, i managed to find a workaround.
Instead of trying to load the captcha in my Ionic app, i am using the in-app-browser to open a page on our web version of the app that has the captcha. When the captcha is checked, it saves the code in the localStorage of the in-app-browser.
When the browser is initially opened i start running a script on the browser that checks its storage for the captchaCode.
Code example:
captchaCheck($event){
const browser = this.iab.create(YOUR_CAPTCHA_PAGE_URL_HERE,'_blank', 'location=no'); //AppSettings.CAPTCHA_URL
let loginCtx = this;
browser.on( "loadstop").subscribe(function() {
browser.executeScript({ code: "localStorage.setItem( 'captchaCode', '' );" });
var loop = setInterval(function() {
browser.executeScript({code: "localStorage.getItem( 'captchaCode' )"}).then((values)=>{
var captchaCode = values[0];
if (captchaCode) {
loginCtx.signinForm.get('captchaCode').setValue(captchaCode);
clearInterval( loop );
browser.close();
}
});
});
});
}
}

How to redirect to an Ionic app's base URL?

I am building an app using the Ionic platform.
I have a requirement which follows the following flow:
app home -> external link ---> unknown process flow ---> app home
A redirection on the client is triggered in the process of the external link process flow, this is where I need to provide the app's home page.
What URL should I be using to redirect to the app's home page.
Things I have tried:
I used
window.location.origin + "/#/app/home"
which worked for development.
However this fails in the actual app.
I basically need to provide a URL that loads the app's home page to the web view.
I think this plugin does exactly what you need:
https://github.com/EddyVerbruggen/Custom-URL-scheme/blob/d1432ecfff63678a3155804839dda21607706e72/README.md
Old question, but unanswered.
I was working on this... Run your app then run chrome remote, there, you should see the url. Basically, with ionic this is what I figured out how to redirect to base url
$scope.goHome = function() {
window.open('file:///android_asset/www/index.html#/app/home', '_self')
}
You're going to need to figure out folder escaping (if you have any) but this can get you going.

What redirect URL to use when redirecting ionic for third party webflow

I am developing a ionic mobile app in which i want to redirect to a thirdparty webflow which requests users' consent and redirects to the callback url which i should specific for me to grab the token as permission token to make further API calls. Since ionic itself is a html5 mobile app, what do i specify for the redirect url so the control comes back to my mobile app?
abstract:
This isn't exactly what you are asking for, but it works pretty well.
The Idea is that you use $cordovaInAppBrowser to open a webview and listen for events, namely
$cordovaInAppBrowser:loadstart
and
$cordovaInAppBrowser:loaderror
you can then look at the error and event arguments that are passed and use those to determine if you want to call
$cordovaInAppBrowser.close();
which will return you to your ionic app
code:
angular.module('myApp', ['ionic', 'ngCordova']).controller('AppCtrl', function($rootScope, $ionicPlatform, $cordovaInAppBrowser) {
$scope.openThirdPartyWhatever = function() {
$ionicPlatform.ready(function() {
var options = {
location: 'yes',
clearcache: 'no',
toolbar: 'yes'
};
$cordovaInAppBrowser.open('http://www.myAwesomeSite.com', '_blank', options)
});
};
//at some point your app tries to load 'http://localhost:8100/send-me-back-to-app'
$rootScope.$on('$cordovaInAppBrowser:loadstart', function(e, event) {
//and this function is called, so you do something like
if(event.url === 'http://localhost:8100/send-me-back-to-app'){
$cordovaInAppBrowser.close();
}
});
$rootScope.$on('$cordovaInAppBrowser:loaderror', function(e, event) {
$cordovaInAppBrowser.close();
alert('sorry, something went wrong');
});
});
helpful links:
https://www.genuitec.com/products/gapdebug/
http://ngcordova.com/docs/plugins/inAppBrowser/
It sounds that you will need to handle popup and redirects, you will need to install the cordova "inappbrowser" plugin in order to be able to open the thrid party webflow inside the app browser and then go back to normal.
Please take a look at this article in where they are explaining how to deal with facebook authentification using the firebase login methods with Ionic and cordova. It describes very similar steps that you will need to tackle your problem.
Firebase simple login with Ionic and Cordova
If you are in a rush start from "Getting It Working in the Emulator" but I recommend reading all the article quickly.
I am not sure which kind of third party webflow are you using, but maybe this could help you:
Zapier
I was looking for the same thing and found this plugin:
https://github.com/EddyVerbruggen/Custom-URL-scheme/blob/d1432ecfff63678a3155804839dda21607706e72/README.md

Trying to use openFB with Cordova

So i´m having a situation that someone might be able to help.
Im creating a Mobile APP using PhoneGap Build. I´m trying to use this http://coenraets.org/blog/2014/04/facebook-phonegap-cordova-without-plugin/
Right know if I open the app inBrowser it will work. Ask's for permissions etc and fetch the user data correctly. Of course I defined a Valid oAuth: localhost/...html.
So it works for browser but doesnt work for mobile. Wich should be, if so, the valid url for the mobile? Cause since it's an APP iºm confused. I dont think it's necessary show code but if so just ask me.
Thanks ;)
You can still use openFB and it will work. you don't even need to change anything in the openfb.js file. all you have to do is manipulate the call method from the page where you want to call the facebook login window.
say for example you have the facebook call method in index.html
then add this script to that index.html page where the function "facebooklogin()" is called
<script>
openFB.init({ appId: 'your-app-id' });
function facebooklogin() {
openFB.login(function (response) {
if (response.status === 'connected') {
if (response.authResponse) {
var accessToken = response.authResponse.accessToken;
openFB.api({
path: "/{your app version in facebook developer envi.}/me?",
params: { "access_token": accessToken, "?fields":"name,email,gender,user_birthday,locale,bio&access_token='"+accessToken+"'" },
success: function (response) {
var data = JSON.stringify(response);
// do whatever you want with the data for example
$(".data_div").html(data);
$(".data_email").html(data.email);
},
error: function(err){
alert(err);
}
});
}
else {
alert(“empty response returned”);
}
}
else {
alert(“not connected”);
}
},
{
scope: "public_profile,email,user_birthday"
});
}
</script>
very important! Please replace {your app version in facebook developer envi.} with your app version like v2.0 or v2.5
also don't forget to change 'your app id' to you facebook app id example 432046826485152
with openfb you don't need to crack your head over learning hoe to configure facebook login in other platforms. this will serve all platforms
I've got it working on the phone.
The weird thing is that a real URL is not necessary, just a semantic valid one. I've added a Facebook Canvas platform, on the facebook app page, and filled the platform form:
URL = http://localhost/www/
Secure Canvas URL = https://localhost/www/
Both of above domains doesn't exists. I haven't filled the "Valid OAuth redirect URIs" field in the advanced tab.
After that, I've written the following code in my app:
openFB.init("xyz!##123456789"
, "http://localhost/www/oauthcallback.html");
It seems that what matters is that Facebook Canvas's domains or sub domains matches the one on the openFB.init redirectURL param...
I'm using openFB version 0.1. I'm gonna test the earlier versions.
UPDATE
It just have worked because I was using phonegap serve and it makes openFB understand that my app is a website, because phonegap developer app is a browser wrapper, not a app wrapper. If I try to run it in a compiled app (phonegap local build), my code doesn't work. I think I'll have to use facebook-connect earlier than I thought...

Categories

Resources