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.
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 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();
}
});
});
});
}
}
I recently made my first progressive web app with a service worker generated by the Google node module "sw-precache" (I've used the Gulp task in the demo). Everything works fine and I am able to navigate through the web app when I am offline using Chrome on mobile or using the icon created by Chrome using the "Add to home screen" option (my progressive web app).
I only have one weird issue: if I am offline and I refresh the page in Chrome, it still works but if I do the same using the pwa, it shows the dinosaur and the "You are offline" message (refresh by scrolling up). But if I navigate through the app without refreshing a page, no dinosaur.
Is it a known issue?
From the looks of it, you jut only used sw-precache. The service worker seems to does not have an event handler to listen to what to do if the page is not cached. You can use sw-toolbox to handle the caching of future visits and handle the offline page. Heres the code
self.toolbox.router.get('/(.*)', function (req, vals, opts) {
return self.toolbox.networkFirst(req, vals, opts)
.catch(function (error) {
if (req.method === 'GET' && req.headers.get('accept').includes('text/html')) {
return self.toolbox.cacheOnly(new Request(OFFLINE_URL), vals, opts);
}
throw error;
});
});
I am building an Android App, using Phonegap. I have included oauth.io and have configured twitter / google+ and facebook logins.
I have included : OAuth.initialize('ACTUAL PUBLIC KEY'); in the device ready event.
I have written the same function, as per sample :
function login(provider, callback) {
OAuth.popup(provider)
.done(function(result) {
callback(null, result);
})
.fail(function(error) {
console.log(error);
callback(error);
});
}
When I call this function, InApp browser is opened and credentials are coming up, for each provider respectively. When the user logs in successfully, it goes to
http://localhost/#oauthio=%7B%22status%22success%22%2C%22data%22%3A%7B%22oaculDQAHRHACioXNL2BHMoFMHXQzKWZZn%22%2c
It does not come back to the Android App.
The InApp browser also does not close automatically.
As per manual, it should call back the function. Instead it is redirecting to a web page, which does not exist in Phonegap App.
Please guide.
Removed and added the plugin. It worked. Thanks.
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...