I've added ionic cloud services to my app and want to use the native FaceBook authentication.
import { FacebookAuth } from '#ionic/cloud-angular';
this.facebookAuth.login()
When running this function on an Android phone, as expected I get the Facebook prompt to ask if my app can get permissions to read profile and email. When I click YES, the function returns an empty ERROR object:
Object {}
I'm sure I am catching it right, because when I choose CANCEL on the FB prompt, I get this error object:
Object {errorCode: "4201", errorMessage: "User cancelled dialog"}
Note: I'm using remote web inspector in chrome to see the full console. Unfortunately, as this requires a real device I can not Plunker this. However, I hope someone has an idea why this could happen. I have followed all these steps, including the FB developer settings, the hash and the ionic.io settings.
I have done that and it's working fine on the real device.If you have any question, please comment below.
Play with Git Repo
app.module.ts
import { CloudSettings, CloudModule } from '#ionic/cloud-angular';
const cloudSettings: CloudSettings = {
'core': {
'app_id': 'd32c02d2'
},
'auth': {
'facebook': {
'scope': ['public_profile', 'email']
}
}
};
#NgModule({
declarations: [
],
imports: [
CloudModule.forRoot(cloudSettings)
],
bootstrap: [IonicApp],
entryComponents: [
],
providers: [
]
})
export class AppModule { }
home.html
<button ion-button block type="button" (click)="fbLogin()">Fb Login</button>
home.ts
import { Component } from '#angular/core';
import { FacebookAuth, User } from '#ionic/cloud-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public facebookAuth: FacebookAuth, public user: User) {
}
fbLogin() {
this.facebookAuth.login();
}
}
Ok it's quite silly, but the first root cause was that the FB user I was trying to log in with was not registered as a tester. Apparently in that case, an empty error is returned by the plugin.
After adding as a tester, I received a real error (Andoird manifest dod not allow internet access). After fixing that issue, again I'm getting an empty error.
So my assumption is that some of the errors returned by FB are not well communicated by the plugin and so any other FB error can be causing this issue.
UPDATE 23/04: There seems to be a change from FB side, now the FB login screen did not succeed but gave an error about the hashing key. After fixing that issue, the FB login is working now.
Related
I'm running in the browser an ionic 5 APP using capacitor and I'm trying to use the file transfer functionality. I follow the documentation https://ionicframework.com/docs/native/file-transfer and configure my app using capacitor. Thus running:
npm install cordova-plugin-file-transfer
npm install #ionic-native/file-transfer
ionic cap sync
In my app.module, I registered the providers:
import { FileTransfer } from '#ionic-native/file-transfer/ngx';
import { File } from '#ionic-native/file/ngx';
...
providers: [
StatusBar,
SplashScreen,
...
FileTransfer,
File
],
Note that I also installed the native file package, so in total I have the following 4 new packages:
"#ionic-native/file": "^5.27.0",
"#ionic-native/file-transfer": "^5.27.0",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-file-transfer": "^1.7.1",
My code in the component is:
import { Input, Component } from '#angular/core';
import { FileTransfer, FileTransferObject } from '#ionic-native/file-transfer/ngx';
import { File } from '#ionic-native/file/ngx';
#Component({
selector: 'app-order-detail-order-card',
templateUrl: './order-detail-order-card.page.html'
})
export class OrderDetailOrderCardPage {
#Input() pdfUrl: string;
#Input() orderCardId: string;
constructor(private transfer: FileTransfer, private file: File) { }
public downloadFile(): void {
const fileTransfer: FileTransferObject = this.transfer.create();
fileTransfer.download(this.pdfUrl, this.file.applicationDirectory + `${orderCardId}.pdf`).then((entry) => {
console.log('download complete: ' + entry.toURL());
}, (error) => {
// handle error
});
}
}
When I run the app in the browser, I get the following warning and I'm not sure whether the file should donwload somewhere?
common.js:284 Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
Even if I don't get the file, I would be expecting to see the "download complete" message. It's not very clear to me as to whether I have to configure something else in my app to be able to run it locally or I have to use this functionality ONLY in either the emulator or the device itself.
What else needs to be configured to get this to work?
common.js:284 Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
this means that you are using the browser emulator which doesn't have any splashscreen, you can totally ignore that warning ( you won't get it using a simulator or a real device).
You should paste the html section of that page too, because probably the download doesn't start because an incomplete url and it doesn't proceed with the "then()"
maybe i'm wrong, but it can be possible.
I’m trying to find a way to open the settings/preferences app with capacitor but I’m unsuccessful.
App.canOpenUrl({ url: 'com.apple.Preferences' }) is failing with error message -canOpenURL: failed for URL: "com.apple.Preferences" - error: "Invalid input URL"
I’m not sure if I’m doing it wrong or if it’s even possible with capacitor to open native app…?
this article shows how to open the facebook app, but nothing about native app
There's now a capacitor plugin for this, capacitor native settings.
It's similar to the cordova plugin but you have to call the correct function for each platform (iOS or Android) instead of using a single function for both.
for someone with the same problem
Install:
cordova-open-native-settings
$ npm install cordova-open-native-settings
$ npm install #ionic-native/open-native-settings
$ ionic cap sync
app.module.ts
// ...
import { OpenNativeSettings } from '#ionic-native/open-native-settings/ngx';
#NgModule({
declarations: [
// ...
],
entryComponents: [
// ...
],
imports: [
// ...
],
providers: [
// ...
OpenNativeSettings,
],
bootstrap: [AppComponent]
})
export class AppModule {}
whatever.page.ts
// ...
import { OpenNativeSettings } from '#ionic-native/open-native-settings/ngx';
#Component({
selector: 'app-whatever',
templateUrl: './whatever.page.html',
styleUrls: ['./whatever.page.scss'],
})
export class PopoverComponent implements OnInit {
constructor(
// ...
private nativeSettings: OpenNativeSettings
) { }
phoneSettings() {
this.nativeSettings
.open('settings')
.then( res => {
console.log(res);
})
.catch( err => {
console.log(err);
})
}
}
I need to open payment method url inside ionic app, but i didn't found any solution of that. I have tried Iframe but it doesn't work for payment method urls, because of security reasons i guess. I have also treid InAppBrowser that doesn't work.
What I have tried open the url in browser but i need it to open within app.
Any solution?
You can use InAppBrowser-plugin to open an external url.
Install:
ionic plugin add cordova-plugin-inappbrowser --save
npm install --save #ionic-native/in-app-browser
See here:
import { Component , OnInit } from '#angular/core';
import { NavController } from 'ionic-angular';
import { InAppBrowser } from '#ionic-native/in-app-browser';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage implements OnInit{
constructor(public navCtrl: NavController,private iab: InAppBrowser) {
}
ngOnInit(){
const browser = this.iab.create('https://www.stackoverflow.com','_self',{location:'no'});
}
}
I am using the Iconic 4 framework and I'm trying to use the FirebaseUIAuth feature within my application but I am facing an issue when the user signs in.
Issue: When the user logs in, the sign in buttons disappear for the web & ios rendering of the application on my localhost (this is good), but I am having issues with the Android rendering. After logging in, the login/sign in buttons remain visible in the android rendering (not good...womp womp).
I have tried changing the signInFlow parameter to 'redirect' but the extent of my knowledge with the Ionic Framework has me a bit stumped since I am confused on how to get the login buttons redirect the user to a new view.
[app.module.ts file with firebaseUI config only]
const firebaseUiAuthConfig: firebaseui.auth.Config = {
signInFlow: 'popup', /*tried using 'redirect' to fix android rendering*/
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
{
scopes: [
'public_profile',
'email',
'user_likes',
'user_friends'
],
customParameters: {
'auth_type': 'reauthenticate'
},
provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID
},
{
requireDisplayName: true,
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID
}
],
tosUrl: '/terms',
privacyPolicyUrl: '/privacy',
credentialHelper: firebaseui.auth.CredentialHelper.NONE
};
[home.page.html file with firebaseui tag]
<ion-content padding>
<firebase-ui></firebase-ui>
<h1 *ngIf="afAuth.auth.currentUser">Welcome {{afAuth.auth.currentUser.displayName}}!</h1>
<ion-button *ngIf="afAuth.auth.currentUser" (click)="signOut();">Sign Out</ion-button>
</ion-content>
[home.page.ts file with signout method]
import { Component } from '#angular/core';
import { AngularFireAuth } from '#angular/fire/auth';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(public afAuth: AngularFireAuth,) {
}
signOut() {
this.afAuth.auth.signOut().then(() => {
location.reload();
});
}
}
I expected that the android rendering will only display:
Welcome some user!
But it also displays the sign in buttons that are configured with the firebaseui (google, facebook, email)
I want to make connection between my angular app and my REST API.
Here it returns JSON http://is.njn.mvm.bg/check. So my question is which providers do I need because I include in app.module, but it still doesn't work.
import { HttpModule} from '#angular/http';
I am using Angular2 HTTP tutorial
private heroesUrl = 'http://is.njn.mvm.bg/check'; // URL to web API
constructor (private http: Http) {}
getHeroes (): Observable<Hero[]> {
return this.http.get(this.heroesUrl)
.map(this.extractData)
.catch(this.handleError);
}
I am getting XMLHttpRequest cannot load http://localhost:8000/da. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
you are using the http request wrong. plz use following code.
app.component.ts
//our root app component
import { Component } from '#angular/core'
import { Http } from '#angular/http';
import 'rxjs/add/operator/map';
#Component({
selector: 'root',
template: `
<div>
{{people}}
{{ err}}
</div>
`
})
export class App {
people;
err;
constructor(http:Http) {
http.get('http://is.njn.mvm.bg/check').map(res => res.text()).subscribe(people => this.people = people,err=>this.err = err);
// Subscribe to the observable to get the parsed people object and attach it to the
// component
}
}
Also remember
Follow error occur in your console:
Access-control-allow-origin
For remove this error see:
chrome extension for access control
You need to put header parameter "Access-Control-Allow-Origin" in the server's HTTP response. You can't make this work from the client side only. I also had the same issue when trying to grab data from my Java JSON REST server. I am not sure what you use server side, but in Java it looks something like this:
return Response.ok() //200
.header("Access-Control-Allow-Origin", "*");
For information on this error (CORS), see this:
How does Access-Control-Allow-Origin header work?
You also need to add it to imports of #NgModule
#NgModule({
imports: [BrowserModule, HttpModule]
...
})
You module code will be like below:
#NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
],
declarations: [
AppComponent
],
providers: [
{provide: APP_BASE_HREF, useValue: '/'},
],
bootstrap: [AppComponent]
})
export class AppModule {
}
you service code need to similar to this
constructor(private http: Http) {
}
getCountriesByRegion(region: string) {
return this.http.get(this.countries_endpoint_url + region).map(res => res.json());
}
//you can also do like this
getHeroes(): Observable<any[]> {
return this.http.get(this.heroesUrl)
.map(this.extractData)
.catch(this.handleError);
}
You have the Angular app that's served by the server running on port 3000, but this app tries to make HTTP calls to the server running on another port 8000.
You have two options:
1. Deploy your Angular app under the server that runs on port 8000, in which case your Angular app will hit the same port it was served from.
2. Configure a proxy on the server that runs on port 3000 to allow access to port 8000.
For the second scenario, if you use Angular CLI with your project, create a file proxy-conf.json, for example:
{
"/api": {
"target": "http://localhost:8000",
"secure": false
}
}
Then sevre your Anglar app like this:
ng serve --proxy-config proxy-conf.json