I am newbie to a Angular and Ionic as well.
Tried the following tutorial:
https://www.sitepoint.com/how-to-integrate-facebook-login-into-a-cordova-based-app/
Steps performed:
1.In app browser is installed.
Included libraries.
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="lib/ng-cordova-oauth/dist/ng-cordova-oauth.js"></script>
<script src="cordova.js"></script>
Include code inside index.html before body closing tag:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MyappID',
xfbml : true,
version : 'v2.6'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Following is my login.html :
<button class="btn-margin-left button button-positive" ng-click="menuCtrl.fbLogin()">
<i class="ion-social-facebook icon-size1 "></i>
</button>
This is my controller :
menuCtrl.fbLogin = function ($cordovaOauth,$http) {
facebookLogin(window.cordovaOauth, window.http);
}
This is my app.js :
angular.module("cgsi",['ionic', 'ngCordova','ngCordovaOauth'])
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider, $httpProvider, $logProvider, $sceDelegateProvider,$cordovaOauth,$http) {
window.cordovaOauth = $cordovaOauth;
window.http = $http;
});
I am getting error Unknown provider $cordovaOauth
Please let me know where i am going wrong?
first of all you need to have account as facebook developer and generate one app for test,
https://developers.facebook.com/
then create one cordova application and and set one button in UI side.
Then you need to install following plugin in your test-app.
https://github.com/Wizcorp/phonegap-facebook-plugin
or
https://github.com/jeduan/cordova-plugin-facebook4
please go through above plugin carefully because you need to add your app_id and app_name which you can find from developer-facebook account where you created your test app.
and then you need to go through related plugin documentation for getting facebook login code.
Thank you.
I can't see your controller has dependency injected or not, I hope you will get what my mean.
if still problem is same. use Adding google plus login to ionic app
And instead of google try facebook. after completion of installation you can add all other plugins that you want.
Related
I'm trying to add Facebooks SDK code right after my tag on the website built with React, but i'm getting errors. I think it's because my homepage is a .jsx template, but i'm not sure how else to include this code:
<script>
window.fbAsyncInit = function () {
FB.init({
appId: '1813842465324998',
autoLogAppEvents: true,
xfbml: true,
version: 'v2.11'
}); <- unexpected token, expected "}". SYNTAX ERROR
// Broadcast an event when FB object is ready
var fbInitEvent = new Event('FBObjectReady');
document.dispatchEvent(fbInitEvent);
};
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) { return; }
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
JSX does not allow JavaScript tags. Instead, just use the whole JavaScript code in componentDidMount. Ideally, you would put it in a separate file for handling the JS SDK of Facebook.
It would be pointless to use a script tag anyway, after all you are using a JavaScript file already. Also, the render function could be called multiple times, but you should only load the JS SDK once.
I have integrated Facebook Customer Plugin on one of our websites. I followed the instructions in the developer documentation. It is working fine when there is an active facebook session. However, the plugin does not appear at all when there is no active fb session. I might be missing something but I have no clue on what that is.
The solution for me was adding #xfbml=1&version=v2.12&autoLogAppEvents=1 after the xfbml.customerchat.js file like :
js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
i solved my problem using this script :
<div class="fb-customerchat"
page_id="<ENTER-YOUR-FACEBOOK-ID-HERE>"
minimized="true">
</div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'facebook-developer-app-id',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.11'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="your-page-id"
theme_color="#BE59B9">
</div>
Another case might be that, fb messenger only show when it it hosted, not locally.
For more info have a deep look at doumentation:
https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin
It is May 2018 now, the instruction in Page --> Settings --> Messenger platform --> Customer chat plugin is much more clear.
Plus checking Country Restrictions
I only added this code to the customer chat code provided in the page's settings:
window.fbAsyncInit = function() {
FB.init({
appId : '1175565702494581', // Trokis Philippines App ID; you may use your App ID but this App ID might work on you too.
autoLogAppEvents : true,
xfbml : true,
version : 'v2.11'
});
};
Original Code:
<script>
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="{your-page-id}"
theme_color="#BE59B9">
</div>
Final Code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1175565702494581',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.11'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="{your-page-id}"
theme_color="#BE59B9">
</div>
Well, shamelessly it was the "Whitelisted Domains" that I didn't operate right.
After you insert your domain you should click "Save"...
At first I tried with a code generated by Facebook Customer Chat Plugin wizard - no luck. To make it work I had to add FB.init section providing valid developer appId:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR-APP-ID-HERE',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.11'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/pl_PL/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="YOUR-PAGE-ID-HERE"
theme_color="#ed1d24"
logged_in_greeting="Hello, how can we help you?">
</div>
You can find more info on the Facebook Customer Chat Plugin here
For me problem was, that i had whitelisted non www domain, but opened it through www. Both cases should be added as whitelist cases.
If you are using brave and probably debugging the site with included messenger plugin code. Most likely you'll find setting Block cross-site trackers to be disabled, Block scripts to be disabled, Cookies to be Allow all cookies, and lastly Fingerprinting to Allow all fingerprinting be helpful.
Once you changed the settings and you find that you have no problem in your code, then it will be most likely to work.
If you are using Angular Framework you have to know that you need to add your code in the index.html page and not in the app or component. That solved my problem.
Mine was because my "page visibility" was set to "page unpublished". So I resolved mine by changing the "page visibility" to "page published"
page setting->General->page visibility
Found a solution. If anyone encounters this, please check your Facebook Page's Country Restrictions (Settings->General->Country Restrictions). It must be available everywhere in order for the plugin to render even if there is no active session
I am new to Angular & Firebase. I am currently developing an Ionic app. Somehow I came to know that, to use Firebase, I need to set up authentication system (I prefer Google).
It was not easy to integrate the code into AngularJS which were mentioned in official Firebase website. So I just picked up someone's working code and replaced his Firebase database URL to mine, I could get it done. But it was a mistake.
This is the unchanged code and his output (which is working as expected).
index.html
<script src="lib/angularfire/dist/angularfire.min.js"></script>
<script src="lib/firebase/firebase.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'firebase'])
.constant('FirebaseUrl', 'https://ionicle.firebaseio.com/')
.service('rootRef', ['FirebaseUrl', Firebase])
So first, I removed his Firebase URL to add mine and got this error:
We have detected that you are using the v2.x or lower authentication SDKs with a project that was created at console.firebase.google.com. You must use the 3.0.0 or greater authentication SDKs with projects that have been created in the new console.
Then I updated firebase.js file to 3.4.1 version. Then I got a Reference error in browser's Dev console: ReferenceError: Firebase is not defined
.service('rootRef', ['FirebaseUrl', Firebase])
So what I finally need is a working Google OAuth with Firebase 3.x and AngularJS.
Although you didn't provide enough examples of your code (dependency injection is not enough), I think that the main problem you are having is that you are using old examples of the code with the new Firebase version.
Things like this:
var app = angular.module('app', ['firebase']);
app.controller('Ctrl', function($scope, $firebaseAuth) {
var ref = new Firebase('https://...');
$scope.authObj = $firebaseAuth(ref);
...
});
are changed into this:
var app = angular.module('app', ['firebase']);
app.controller('Ctrl', function($scope, $firebaseAuth) {
var config = {
apiKey: "***",
authDomain: "***.firebaseapp.com",
databaseURL: "https://***.firebaseio.com",
storageBucket: "***.appspot.com",
messagingSenderId: "***"
};
firebase.initializeApp(config);
$scope.authObj = $firebaseAuth(firebase.auth());
...
});
Then on that authObj you can add a provider for the client you want to use to authenticate (Google/GitHub/Facebook...):
var provider = new firebase.auth.GoogleAuthProvider();
$scope.authObj.$signInWithPopup(provider).then(function(result) {
console.log(result);
});
Keep in mind that you must enable Authentication with Google (or any other provider) in your Firebase console. For detailed instructions please check this link.
I am trying to set up Facebook and Google authentication through FirebaseUI in my Cordova/PhoneGap app, and I am receiving an error when the "Sign in with X" buttons are clicked. The error states the following:
Refused to display 'https://www.facebook.com/login.php?skip_api_login=1&api_key=643683385780436…_&display=page&locale=en_US&logger_id=05e536a7-cf68-44a3-825b-63dd3edd5b0a' in a >frame because it set 'X-Frame-Options' to 'DENY'.
After a little research I've learned that the X-Frame option is set by the provider, and I cannot change it. I've looked through threads about how to work around this, but the answers either don't solve the problem or go over my head. Any explanation would be much appreciated.
My code is as follows:
login controller:
app.controller("loginCtrl", function ($scope, $state, $rootScope, $firebaseAuth, $location) {
// Firebase config.
var config = {
apiKey: "",
authDomain: "",
};
// FirebaseUI config.
var uiConfig = {
'queryParameterForWidgetMode': 'mode',
'signInSuccessUrl': '/home',
'signInOptions': [
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.GoogleAuthProvider.PROVIDER_ID
],
// Terms of service url.
//'tosUrl': '<your-tos-url>',
'callbacks': {
'signInSuccess': function (currentUser, credential, redirectUrl) {
// Do something.
// Return type determines whether we continue the redirect automatically
// or whether we leave that to developer to handle.
console.log('success');
return true;
}
}
};
// Initialize the FirebaseUI Widget using Firebase.
var app = firebase.initializeApp(config);
var auth = app.auth();
var ui = new firebaseui.auth.AuthUI(auth);
// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);
});
login.html
<ion-view title="Sign In">
<ion-content>
<div>
<center>
<br />
<h1>Sign In</h1>
</center>
<div id="firebaseui-auth-container"></div>
</div>
</ion-content>
relevant index.html
<!-- FirebaseUI for Facebook Auth -->
<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/ui/0.4.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/0.4.0/firebase-ui-auth.css" />
Thanks!
Sam
I am also trying to set up Facebook and Google authentication through FirebaseUI in my Cordova/PhoneGap app. However, while reading the FirebaseUI for Web — Auth docs I found the following:
FirebaseUI fully supports all recent browsers. Signing in with
federated providers (Google, Facebook, Twitter, Github) is not yet
supported in non-browser environments (Cordova, React Native,
Ionic...) nor Chrome extensions.
So, unfortunately it seems that using FirebaseUI with a Cordova app is not supported yet.
I've just added the Facebook share button to my Angular site however it only appears once I refresh the page.
So i have the Facebook SDK JS loading in my index.html (as taken from their webpage).
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And then I have an ng-view (and another .html page where i actually have the Share button):
<div class="fb-share-button"
data-href="http://www.exampleurl.com"
data-layout="button">
</div>
Any ideas why the button only appears after the page refresh. Is it ok to have to Facebook sdk JS in my index and use the share button with ng-view?
Thanks.
I had the same problem and got it to work by calling FB.XFBML.parse() from my controller - like this:
(function () {
"use strict";
angular.module("app")
.controller("myController", myController);
function myController() {
FB.XFBML.parse();
}
})();
Adding this after init solved this issue.
if (typeof (FB) != 'undefined'&& FB != null) { FB.XFBML.parse(); }
I solved this issue with more simply.
My index.html
reviews.html
<div
class="fb-comments"
[attr.data-href]="url"
data-width="100%"
data-numposts="5"
and in reviews.ts file
declare var FB: any;
ngOnInit(): void {
FB.XFBML.parse();
}