I am working on a project that allows Android Built Ionic version 2 app to create user and authenticate to a Django dev site through Django Rest API.
The authentication works when using ionic serve this was achieved through the use of Cross Origin Resource Sharing (installed as google chrome plugin).
As I've tried to run the application on an actual android device, the authentication fails (HTTP 404: URL not found) when using the app but the localhost can be accessed through browser of the same device (through 192.168.22.4:80).
Details:
My current private IP address is 192.168.22.4 and the dev site is currently being served at the localhost port 80 through Wamp Apache Server.
Here is the code fragment of my http request on Ionic App (signup):
let headers = new Headers();
headers.append('Content-Type','application/json');
this.http.post("http://192.168.22.4:80/api-user-create", JSON.stringify(this.postData), {headers: headers}).subscribe(res => {
console.log(res.json());
this.showAlert();
}, (err) => {
console.log(err);
});
Applied Solutions:
These are the steps that I have tried but still failed to connect to the localhost:
Ensure that the app is allowed to access to WiFi connection, verify whether my IP address is correct, turned off my firewall and even my antivirus. I have also enabled network discovery on my dev server.
Use proxy server (ngrok) and edit Ionic request
Enable CORS on Apache Server and edit Ionic request
Edit Ionic request code. I have tried to changed 192.168.22.4:80 to:
192.168.22.4
127.0.0.1:80
127.0.0.1
localhost:80
localhost
10.0.2.2
10.0.2.2:80
Has anyone encountered this problem and solved it?
Problem solved!
I have solved it by:
Make wamp listen to the < ip address >:< port number >. It was initially set to 0.0.0.0:80 by default. To configure, I updated the httpd.conf on my wamp server then added the line:
Listen 192.168.22.4:80
install cordova-plugin-whitelist on my ionic project. To do this, I have to run:
cordova plugin add cordova-plugin-whitelist --save
edit my Ionic code and removed the port number to the request:
let headers = new Headers();
headers.append('Content-Type','application/json');
this.http.post("http://192.168.22.4/api-user-create", JSON.stringify(this.postData), {headers: headers}).subscribe(res => {
console.log(res.json());
this.showAlert();
}, (err) => {
console.log(err);
});
rebuild and run the application
Read Ionic App - No Internet Access for more information.
Related
I have a Flutter application that uses Firebase as its back-end. I use Firebase emulators to test my app in debug mode.
In order to allow physical devices to connect to the emulators I run on my development machine, I've changed the configuration so that the emulators run using that machine's local IP on my local network. (I specify this IP via a Dart environment variable.)
firebase.json
{
// ...
"emulators": {
"auth": {
"host": "0.0.0.0", // this is to avoid having to hard-code my local IP, which might change
"port": 9099
},
"firestore": {
"host": "0.0.0.0",
"port": 8080
},
// ...
}
}
main.dart
if (kDebugMode) {
const emulatorHost =
String.fromEnvironment("EMULATOR_HOST", defaultValue: "localhost");
FirebaseAuth.instance.useAuthEmulator(emulatorHost, 9099);
FirebaseFirestore.instance.useFirestoreEmulator(emulatorHost, 8080);
}
To test the web version on my app, I start the emulators and run the web app through Android Studio, all on the same app. The app is able to communicate with the Auth emulator, no problem.
However, when I run the app in debug mode on my physical Android device or on an Android emulator, whenever it tries to communicate to the Auth emulator (namely in the sign-in screen, which is given by firebase_ui_auth), I get this error:
com.google.firebase.FirebaseException: An internal error has occurred. [ Cleartext HTTP traffic to <my local ip> not permitted ]
(Curiously, this only happens with the Auth emulator, because if I bypass any auth functionality, the Android app connects without problems to the Firestore emulator.)
As far as I understand, this means the app is trying to communicate to the emulator via non-encrypted HTTP traffic, which Android doesn't allow (for this app configuration).
The suggested solutions I've seen (Error connecting to local Firebase functions emulator from Flutter app, Flutter Cleartext HTTP traffic not permitted) all involve removing this restriction, either by allowing clear-text HTTP traffic app-wide
<application android:usesCleartextTraffic="true" />
or by just allowing clear text traffic to the specific IP the emulators are running on
<network-security-config>
<domain-config cleartextTrafficPermitted="true">
<domain>10.0.2.2</domain>
</domain-config>
</network-security-config>
I do not want to use either of these solutions, because I don't want to enable clear-text HTTP just because I need it for local testing with Firebase emulators, and I don't want to have to hard-code my local IP, which might change, in an Android xml file somewhere.
Is there an alternative solution that doesn't have these issues? Can I make the SDK connect to the emulator via HTTPS, for example?
As a temporary solution/band-aid, for now I'm enabling clear-text HTTP app-wide but only for the debug flavour of the app, by applying the solution mentioned above to the Android manifest in android/app/src/debug instead of android/app/src/main.
I am trying to setup CI/CD for android application and publish APKs to Firebase and I am behind proxy
I was able to generate APK successfully by executing the command mentioned below on Ubuntu 20 (server NOT client) - 10.22.xx.xx
Note: I connect to Ubuntu Server from my Windows Desktop using PuTTY
root#android:~/android-ur-app#./gradlew appDistributionLogin
and it provided me the following link to sign in.
Please open the following address in your browser:
https://accounts.google.com/o/oauth2/auth?access_type=offline&client_id=5849e6.apps.googleusercontent.com&redirect_uri=http://localhost:42319/Callback&response_type=code&scope=https://www.googleapis.com/auth/cloud-platform
I opened the link my Windows Desktop Browser and I was able to sign in with the firebase account but it failed with "localhost refused to connect" on redirect_uri
Note: I understand that NO process is listening on port# 42319 on my Windows Desktop
But, how can I change the redirect_uri in gradle from 'localhost' to '10.22.xx.xx'
We also created a DNS mapping and tried hitting the URL with 'ourdomainname.com' instead of 'localhost' in redirect_uri which failed with
Error 400: redirect_uri_mismatch
Kindly let me know how to set redirect_uri correctly in GRADLE to get the firebase_access_token
I was able to resolve the proxy issue by adding the following to 'gradlew' command
root#android:~/android-ur-app#./gradlew appDistributionLogin -Dhttps.proxyHost=10.xx.xx.xx -Dhttps.proxyPort=8080 "-Dhttps.nonProxyHosts=localhost" --stacktrace
Note: We should add "-Dhttps.nonProxyHosts=localhost" and just adding https.proxy did NOT resolve the issue
I'm trying to create an Android app with Ionic to send messages to a Node.js server. I'm using socket.io#2.3.0 for the server and socket.io-client#2.3.0 for the Ionic app. The Ionic app is supposed to open a socket.io connection with the server, then send the message "Hello, World!". The Ionic app build for the web works properly, I tried running it from other devices (my laptop and my phone) and in both cases the socket.io connection worked and the server printed out the message received from the Ionic app.
// Server output
Server running on port 5000.
New connection from 7rI7qvo9gNjVD5ElAAAA
Hello, World!
But when I build the Ionic app for Android using the commands:
ionic cap add android
ionic cap open android
And then debug from Android Studio, the app launches, but I don't see any message from the server, and I don't even see an error message in the Android Studio debug tab.
// Server output
Server running on port 5000.
At first I thought this was a network problem so I made sure the AndroidManifest.xml file included the permissions INTERNET and ACCESS_NETWORK_STATE, I tried building an APK and running it on my phone, but it still doesn't work so I don't know what I should do.
I'm using the version 5.4.16 of Ionic.
Thanks for reading this, have a nice day :)
I fixed this issue by hosting the Node.js server on Heroku, now everything works fine, I'm not sure why though. Since the protocol changes from http to https when I host the server on Heroku, I'm guessing Android doesn't like the http protocol.
I have this ionic app that consumes from a server api (Spring). When i use capacitor to use the android version it works fine on the emulator from android studio, but when using a real device the http requests doesn't work. It retrives the message: "Msg: Status: 0, Message: Http failure response for http:///login: 0 Unknown Error". Things i tried: Disabled the firewall and use the same wi-fi from server.
message from server
I have created a hybrid mobile app using ionic 2. The app can connect to a Django-powered website on a localhost through Rest API when using "ionic serve" command (using web browser on my end device).
Now, I want to use the app using Bluestacks as emulator. The Django website and the API (running on the localhost) can be accessed through the browser app of the bluestacks. Here were the steps I performed to do this one:
Installed allow-control-allow-origin to enable cross origin information sharing on Google Chrome on my local device.
I have added ALLOWED_HOSTS = ['10.0.2.2'] in my django settings.
Access the django website through Bluestacks' browser using
http://10.0.2.2:8000/
However, the mobile app emulated in Bluestacks could not access the API. Any solution to this problem?
The django conf look's OK.
With this kind of problem, in general, i use tools like :
localtunnel (free)
ngrok
to acces to my localhost from everywhere
example with lt :
$ lt -p 8000 -s andynionic
your url is: https://andynionic.localtunnel.me
You must also add andynionic.localtunnel.me to the Django config
ALLOWED_HOSTS = ['10.0.2.2', 'andynionic.localtunnel.me']
with hibrid, you probably do CORS request, see also cors-django
hope it's help