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();
}
});
});
});
}
}
Related
This is only happening on IOS, on android I'm getting expected behavior.
I have this property on my web view from react-native-webview
onNavigationStateChange={(e) => {
if (e?.url.includes(TOKEN_QUERY_PARAM)) {
let startIndex = e.url.indexOf(TOKEN_QUERY_PARAM);
let token = e.url.substring(startIndex + TOKEN_QUERY_PARAM.length);
authorize(token);
}
}}
As you can see, the webview will send me a link with a token that I can then send to my authorize function to get my user signed into the app. This works the first time the app is used but then begins caching the same call/response if you do it again. Its working as it should on android, but on ios the authorize function is returning the same information from the last time it was called.
Has anyone experienced anything like this? I tried setting all the different cache properties on the webview to be false and it still doesnt work. Any ideas??
I have a very basic Ionic Android app using firebase authentication. When the user enter wrong credentials and I catch an error I simply change a reactive property to display the error to user:
async login() {
try {
await this.authService.login(this.email, this.password);
this.error = "";
} catch (error) {
this.error = error;
}
}
This functino is called when clicking on login button and the function login in authService looks like this :
login(email: string, password: string) {
return this.afAuth.signInWithEmailAndPassword(email, password);
}
And in my login html page I am trying to display the error like this :
<p>
<ion-text color="danger"><i>{{error}}</i></ion-text>
</p>
Everything is basic nothing fancy, and everythings works perfectly in a browser if I run the app via ionic serve, but it's does not work the same on an Android device after running the app ionic cordova run android.
If the credentials are wrong the error is well catched but not displayed on the interface, unless I click on an input then the error is displayed. I believe that Angular does not detect change, and by using ChangeDetectorRef as described in this solution here it works.
But I find it a hacky way to solve this bug. Why can't angular detect the change itself? why it's working on a browser but not on the mobile device?
I've checked many other similar problems but no one got the issue that it's working on a browser but not on an Android device.
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. :)
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();
})
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...