cordova not available in browser

user_2067148 0
Viewed 9066

I just start learning ionic framework and trying to implement Facebook login using firebase. I am running this application in browser and I have following codes which is giving me "cordova_not_available" error. Can anybody help me learn what is wrong with my attempt.

Thank you.

Inside app.module.js

import {Facebook} from '@ionic-native/facebook';
import firebase from 'firebase';

export const firebaseConfig = {
    ....
    ....
};

firebase.initializeApp(firebaseConfig);

Inside home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {Facebook} from '@ionic-native/facebook';
import firebase from 'firebase';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {

    constructor(public navCtrl: NavController, public facebook: Facebook) {

    }
    fblogin() {
        var me = this;
        me.facebook.login(['email']).then(res=>{
            const fc = firebase.auth.FacebookAuthProvider.credential(res.authResponse.accessToken);
            firebase.auth().signInWithCredential(fc).then(fs => {
                alert("Firebase sec");
            }).catch(ferr => {
                alert("error");
            })
        }).catch(err=>{
            console.log("JSON.stringify(err)");
        })
    }

}
ionic2 cordova-plugins ionic3 angular cordova
4 Answers

Add the browser plugin -- ionic cordova plugin add browser

then run your project by the following command ionic cordova run browser instead of ionic serve

user_97590110

I was trying to achieve the same and sebaferreras is right. You need different approaches for mobile version and for browser version. Something like this:

import { Injectable } from '@angular/core';
import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook/ngx';
import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase';
import { Platform } from '@ionic/angular';
// ...

@Injectable({
    providedIn: 'root'
})
export class AuthService {

    constructor(
        private fb: Facebook,
        private afAuth: AngularFireAuth,
        private platform: Platform
    ) { }

    /**
     * If it has Cordova support (Android, iOS), it returns true, otherwise false (usually browser).
     */
    private isCordova(): boolean {
        return this.platform.is('cordova');
    }

    doFacebookLogin(): Promise<any> {
        if (this.isCordova()) {
            return new Promise<any>((resolve, reject) => {
                this.fb.login(['email']).then((response: FacebookLoginResponse) => {
                    const credential = firebase.auth.FacebookAuthProvider.credential(response.authResponse.accessToken);
                    this.afAuth.auth.signInWithCredential(credential).then((res) => {
                        resolve(res);
                    });
                }).catch((error) => {
                    reject(error);
                });
            });
        } else {
            return new Promise<any>((resolve, reject) => {
                let provider = new firebase.auth.FacebookAuthProvider();
                this.afAuth.auth.signInWithPopup(provider).then(res => {
                    resolve(res);
                }, err => {
                    console.error(err);
                    reject(err);
                });
            });
        }
    }

    // ...
}
user_86790180
Related