I am creating a simple sample auth app with Ionic 2 and angularfire 2 as backend, when i try to create new user it says:
EXCEPTION: Error: Uncaught (in promise): Error: The specified
authentication provider is not enabled for this Firebase.
But i already enabled firebase authentication in firebase console:
app.ts
import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';
import { FIREBASE_PROVIDERS, defaultFirebase, firebaseAuthConfig, AuthProviders, AuthMethods } from 'angularfire2';
#App({
template: '<ion-nav [root]="rootPage"></ion-nav>',
providers: [
FIREBASE_PROVIDERS,
defaultFirebase('https://samplequizapp-50eb5.firebaseio.com'),
firebaseAuthConfig({
provider: AuthProviders.Password,
method: AuthMethods.Password
})
],
config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
rootPage: any = HomePage;
constructor(platform: Platform) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
});
}
}
home.ts
import { Page } from 'ionic-angular';
import { AngularFire, FirebaseListObservable } from 'angularfire2';
import { OnInit } from '#angular/core'
#Page({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage implements OnInit {
user: any = {};
data: FirebaseListObservable<any[]>;
constructor(private af: AngularFire) {
}
ngOnInit() {
this.data = this.af.database.list('/userId')
}
signUp(data) {
this.af.auth.createUser({
email: data.email,
password: data.password
})
}
}
I am pretty sure there is nothing wrong with my code:
Firebase2 in its current version (2.4.2) is not yet compatible with Firebase SDK v3, and all projects created with the new Firebase console are only accessible with calls comaptible with SDK v3.
You want to create your Firebase backend in the legacy console www.firebase.com first, and then migrate to the new console.
This is documented in this closed issue of the angularfire2 github: https://github.com/angular/angularfire2/issues/189
Related
I use OneSignal Push Notification for Ionic 3 . I want to when click notification application open page.
My app.component.ts
import { Component, ViewChild } from '#angular/core';
import { Platform, NavController } from 'ionic-angular';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
import { OneSignal } from '#ionic-native/onesignal';
import { DuyurularPage } from '../pages/duyurular/duyurular';
#Component({
templateUrl: 'app.html',
providers:[OneSignal],
template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'
})
export class MyApp {
rootPage:any = 'MenuPage';
bgColor: string = '#fff';
#ViewChild('myNav') nav: NavController;
constructor(platform: Platform, statusBar: StatusBar, splashScreen:
SplashScreen, private oneSignal: OneSignal,) {
platform.ready().then(() => {
statusBar.styleDefault();
splashScreen.hide();
window["plugins"].OneSignal
.startInit("**************", "***********")
.handleNotificationOpened()
.handleNotificationReceived()
.endInit();
});
this.oneSignal.handleNotificationOpened().subscribe((jsonData) => {
alert(JSON.stringify(jsonData));
this.nav.push(DuyurularPage);
});
this.oneSignal.handleNotificationReceived().subscribe((jsonData) =>
{
alert(JSON.stringify(jsonData));
this.nav.push(DuyurularPage);
});
}
}
When I do mistake I don' t know. Notification coming but not show alert or not push DuyurularPage, just open homepage.
if you Need to Open a Specific page on Notification Tapped. Follow the technique.
In App.component.ts
this.oneSignal.handleNotificationOpened().subscribe((data) => {
// do something when a notification is opened
console.log('Tapped',data);
if(data.notification.payload.additionalData.landing_page != undefined && data.notification.payload.additionalData.landing_page != ''){
this.PushProvider.landing_page = data.notification.payload.additionalData.landing_page;
}
if(data.notification.payload.additionalData.product_id != undefined && data.notification.payload.additionalData.product_id != ''){
this.PushProvider.product_id = data.notification.payload.additionalData.product_id;
}
});
this.oneSignal.endInit();
//On Home Page
if(this.PushProvider.landing_page != undefined){
console.log('on home if',this.PushProvider.landing_page);
this.navCtrl.push('offerzonePage',{ from_tab: this.PushProvider.landing_page});
}
if(this.PushProvider.product_id != undefined){
console.log('on home if',this.PushProvider.product_id);
this.navCtrl.push('ProductPage',{ product_id: this.PushProvider.product_id });
}
On Pushprovicer.ts
import { Injectable } from '#angular/core';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
#Injectable()
export class PushProvider {
// Produc ID
product_id: any;
// Landing pages
landing_page: any;
}
can you use the below syntax and try;
import { Component, ViewChild } from '#angular/core';
import { Platform, NavController } from 'ionic-angular';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
import { OneSignal } from '#ionic-native/onesignal';
import { DuyurularPage } from '../pages/duyurular/duyurular';
#Component({
templateUrl: 'app.html',
providers:[OneSignal],
template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'
})
export class MyApp {
rootPage:any = 'MenuPage';
bgColor: string = '#fff';
#ViewChild('myNav') nav: NavController;
constructor(platform: Platform, statusBar: StatusBar, splashScreen:
SplashScreen, private oneSignal: OneSignal,) {
platform.ready().then(() => {
statusBar.styleDefault();
splashScreen.hide();
this.oneSignal.startInit('*****', '***');
this.oneSignal.inFocusDisplaying(this.oneSignal.OSInFocusDisplayOption.InAppAlert);
this.oneSignal.handleNotificationOpened().subscribe((jsonData) => {
alert(JSON.stringify(jsonData));
this.nav.push(DuyurularPage);
});
this.oneSignal.handleNotificationReceived().subscribe((jsonData) =>
{
alert(JSON.stringify(jsonData));
});
}
You cannot use NavController in app.component.ts it seems.
Can you use Nav or App
What I would do is create an obsevable and subscribe to it anywhere needed in my app. The observable will emit its next value whenever the plugin callback is fired.
RxJS Observable
Emit next value on callback
Subscribe anywhere in your app
Use provided NavCtrl to push a component into the view
The same principle would work if you inject ionic's Event.
Btw you have a random comma at the end of your constructor
I did facebook login to my app and I'm trying to check if the user logged in then go to HomePage,if not go to loginPage.
I did it with firebase but I'm trying to do that with angularfire2
that's my code with firebase (I want it in angularfire2)
firebase.auth().onAuthStateChanged((user) => {
var that=this;
if (user) {
if(this.reg_boolean=="true"){
console.log("regCompleted");
this.nav.setRoot(TabsPage,{
dep:this.department,year:this.year,semester:this.semester
})
this.rootPage=TabsPage;
}
else{
this.rootPage = SignupPage;
}
console.log("I'm here! HomePage");
} else {
this.rootPage = LoginPage;
console.log("I'm here! LoginPage");
}
});
I got this to work in app.component.ts file.
import { ViewChild } from '#angular/core';
import { Nav } from 'ionic-angular';
import { AngularFire } from 'angularfire2'; // import this, duh
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
export class MyApp {
#ViewChild(Nav) nav: Nav;
rootPage: any;
pages: Array<{ title: string, component: any }>;
userName:string;
constructor(public platform: Platform,
public af: AngularFire,
public authService: AuthenticationService) { // used for logout
this.initializeApp();
// Listen for auth sub
af.auth.subscribe(user => {
this.rootPage = user ? HomePage : LoginPage;
});
....
So basically get listening on the subscribe and change the rootPage based on the value passed into the var user. You can do a console.log() on user if you want to be more specific with the redirection.
I am building an app in Ionic2. I want to implement Facebook within the app and so I am trying to use the ionic-native Facebook api. I imported it and then attempted to assign it to a variable so I could use the functions associated with it.
Here is my code.
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Facebook } from 'ionic-native';
#Component({
selector: 'page-news-feed',
templateUrl: 'news-feed.html',
})
export class NewsFeed {
fb: any;
constructor(public navCtrl: NavController, facebook: Facebook) {
this.fb = facebook;
}
doRefresh(refresher) {
console.log('Begin async operation', refresher);
setTimeout(() => {
console.log('Async operation has ended');
refresher.complete();
}, 2000);
}
this.fb.login([]);
ionViewDidLoad() {
console.log('Hello NewsFeed Page');
}
}
I thought an import works much like a class in that you can import it and assign it to a variable and then have access to its methods. Does it not work like that? How does it work?
You just have to import Facebook class like it is said in Ionic native docs :
https://ionicframework.com/docs/v2/native/
You don't need to inject it through the constructor. As method are static this will print an error.
Be sure to also call Facebook after platform.ready event. And don't forget to add the plugin. See your example modified accordingly.
import { Component } from '#angular/core';
import { NavController, Platform } from 'ionic-angular';
import { Facebook } from 'ionic-native';
#Component({
selector: 'page-news-feed',
templateUrl: 'news-feed.html',
})
export class NewsFeed {
constructor(public navCtrl: NavController, platform: Platform) {
platform.ready().then(() => {
console.log('Faceboook');
Facebook.login([]).then((response) => {
console.log(response);
}).catch((error) => {
console.error(error);
});
})
}
doRefresh(refresher) {
console.log('Begin async operation', refresher);
setTimeout(() => {
console.log('Async operation has ended');
refresher.complete();
}, 2000);
}
ionViewDidLoad() {
console.log('Hello NewsFeed Page');
}
}
i'm trying to save data in local storage in ionic 2 app so i
import the storage and did exactly like i saw in the website and it not save the data in the storage
import { Component} from '#angular/core';
import { NavController,NavParams,LoadingController,AlertController,ViewController } from 'ionic-angular';
import { Facebook } from 'ionic-native';
//import pages
import {LoginPage} from "../../pages/login/login";
import {User} from '../../models/user'
import { Storage} from '#ionic/storage';
//import provider
import { ProfileData } from '../../providers/profile-data';
import { NotesData } from '../../providers/notes-data';
import firebase from 'firebase'
import {AddNote} from "../add-note/add-note";
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
pages: Array<{title: string, component: any}>;
photo:any;
constructor(public navCtrl: NavController,public storage:Storage) {
}
ionViewDidLoad() {
this.getDetailsFacebook();
}
getDetailsFacebook() {
var that=this;
Facebook.getLoginStatus().then((response)=> {
if (response.status == 'connected') {
Facebook.api('/' + response.authResponse.userID + '?fields=id,name,gender', []).then((response)=> {
that.uid = response.id;
that.photo = "http://graph.facebook.com/"+that.uid+"/picture?type=large";
that.storage.set('photo',that.photo');
//console.log("id:"+this.uid+this.name+this.photo);
}, (error)=> {
alert(error);
})
}
else {
alert('Not Logged in');
}
})
photo of the inspect with chrome developer
i don't see any key of photo as i set it.. why is that?
Installation
To use this in your Ionic 2/Angular 2 apps, either start a fresh Ionic project which has it installed by default, or run:
npm install #ionic/storage
If you'd like to use SQLite as a storage engine, install a SQLite plugin (only works while running in a simulator or on device):
cordova plugin add cordova-sqlite-storage --save
In order to use Storage you may have to edit your NgModule declaration in src/app/app.module.ts to add Storage as a provider as below:
import { Storage } from '#ionic/storage';
#NgModule({
declarations: [
...
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
...
],
providers: [ Storage ] // Add Storage as a provider
})
export class AppModule {}
Now, you can easily inject Storage into a component:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Storage } from '#ionic/storage';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, public storage: Storage) {
}
}
To set an item, use Storage.set(key, value):
this.storage.set('name', 'Mr. Ionitron');
To get the item back, use Storage.get(name).then((value) => {}) since get() returns a Promise:
this.storage.get('name').then((name) => {
console.log('Me: Hey, ' + name + '! You have a very nice name.');
console.log('You: Thanks! I got it for my birthday.');
});
For more info on Storage module refer link: https://github.com/driftyco/ionic-storage
at the moment iam implementing a signIn into my ionic 2 app.
I want to use ionic 2 native facebook and somehow save the data to my firebase app.
Is there any way to archive that?
One way is to create a new firebase auth user with the facebook email adress and some password hash, but maybe there is a better solution.
Here is what i got so far (i know, not much) :)
import {NavController, Loading, Platform, Storage, LocalStorage} from "ionic-angular";
import {OnInit, Inject, Component} from "#angular/core";
import {ForgotPasswordPage} from "../forgot-password/forgot-password";
import {SignUpPage} from "../sign-up/sign-up";
import {HomePage} from "../../home/home";
import * as firebase from 'firebase';
import {Facebook} from 'ionic-native';
/*
Generated class for the LoginPage page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
#Component({
templateUrl: 'build/pages/auth/login/login.html',
})
export class LoginPage {
private local: any;
constructor(private navCtrl: NavController, private platform:Platform) {
this.local = new Storage(LocalStorage);
}
openForgotPasswordPage():void {
this.navCtrl.push(ForgotPasswordPage);
}
openSignUpPage():void {
this.navCtrl.push(SignUpPage);
}
login() {
firebase.auth().signInWithEmailAndPassword("test#test.com", "correcthorsebatterystaple").then(function (result) {
console.log("AUTH OK "+ result);
}, function (error) {
console.log("dawdaw");
});
}
facebookLogin() {
Facebook.login(['public_profile', 'user_birthday']).then(() => {
this.local.set('logged', true);
this.navCtrl.setRoot(HomePage);
}, (...args) => {
console.log(args);
})
} }
facebookLogin() {
Facebook.login(['public_profile', 'user_birthday']).then((result) => {
var creds = firebase.auth.FacebookAuthProvider.credential(result.access_token);
return firebase.auth().signInWithCredential(creds);
})
.then((_user) => {
console.log("_user:", _user);
})
.catch((_error) => {
console.error("Error:", _error);
});
}
see more info here - https://firebase.google.com/docs/auth/web/facebook-login#advanced-handle-the-sign-in-flow-manually
I have not tried this, so might not be 100% working, but try this Gist I found: https://gist.github.com/katowulf/de9ef6b04552091864fb807092764224