Injecting Facebook JS SDK into AngularJS Controllers - dependency-injection

I'm trying to create a facebook service for Angular so I can more easily test code that needs to use the Facebook JS SDK and Graph API for stuff.
Here's what I have so far:
app.factory('facebook', function() {
return FB;
});
window.fbAsyncInit = function () {
FB.init({
appId: 'SOME_APP_ID_HERE', // App ID
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true, // parse XFBML
oauth: true
});
};
// Load the SDK Asynchronously
(function (d) {
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) { return; }
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
})(document);
Now, I know that the actual Facebook SDK part is working... but in my controller the reference is always null.
in my controller I just have something like this:
function FooCtrl($scope, facebook) {
facebook.getLoginStatus(function(response) {
if (response.status === 'connected') {
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
// do something
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
} else {
// the user isn't logged in to Facebook.
}
});
}
Angular then gripes that it can't find a facebookProvider. Any ideas on how I can accomplish this?

Enclose your factory function with array brackets like below
app.factory('facebook', [function() {
return FB;
}]);
API docs are not clear enough. Point of having array brackets is that you can specify dependencies. It will be injected on creation of your service with AUTO.$inject. But since you don't have dependencies it will skip that task :)
Anyway, if you need dependencies you can request them like this
app.factory('facebook', ["$log", function($someCrazyLoggerService){
$someCrazyLoggerService.log("I'm Auto Injected crazy Logger");
}]);

you should take a look at this Facebook module I wrote.
First use the FacebookProvider on your app config call, something as FacebookProvider.init('yourFacebookAppIdHere');, you could also configure other settings too, and then on your controllers use the Facebook service and register to events and call methods asyncrhonously ;)
https://github.com/ciul/angularjs-facebook

Related

Issues with OAuth 2.0 Library for Google Apps Scripts for MEETUP

I am using OAuth 2.0 Library for Google Spreadsheet for Meetup Api
Code.gs
function getMeetupService() {
return OAuth2.createService('meetup')
// Set the endpoint URLs, which are the same for all Google services.
.setAuthorizationBaseUrl('https://secure.meetup.com/oauth2/authorize')
.setTokenUrl('https://secure.meetup.com/oauth2/access')
// Set the client ID and secret, from the Google Developers Console.
.setClientId('.....')
.setClientSecret('......')
// Set the name of the callback function in the script referenced
// above that should be invoked to complete the OAuth flow.
.setCallbackFunction('authCallback')
// Set the property store where authorized tokens should be persisted.
.setPropertyStore(PropertiesService.getUserProperties())
.setTokenFormat(OAuth2.TOKEN_FORMAT.FORM_URL_ENCODED);
}
_eventId = null;
function startService(eventId) {
var meetupService = getMeetupService();
if (!meetupService.hasAccess()) {
var authorizationUrl = meetupService.getAuthorizationUrl();
return authorizationUrl;
} else {
//Yet to decide
}
return 123;
}
function authCallback(request) {
var meetupService = getMeetupService();
var isAuthorized = meetupService.handleCallback(request);
if (isAuthorized) {
//getAllDetails(_eventId);
} else {
return HtmlService.createHtmlOutput('Denied. You can close this tab');
}
}
Sidebar.html
$(function() {
checkService();
});
function checkService() {
google.script.run
.withSuccessHandler(function(url) {
if(url) {
$('body').append('Click here to Login into Meetup');
$('#run-get-details').attr("onclick", 'window.open("' + url + '")');
} else {
$('#run-get-details').attr("url", '');
}
$('#run-get-details').prop("disabled", false);
})
.withFailureHandler(failureHandler)
.startService($("#eventId").val());
}
function authCallback(request) {
alert(123);
}
Everything seems to be working till the link. Once the link is clicked it opens the authentication window of the meetup exactly i want. But then once I authorize the app in meetup and when it gets redirected to script.google.com
https://script.google.com/a/macros/{domain}/d/{PROJECT_ID}/usercallback?code={code}&state=ADEpC8wvspQd-+VXyQ0mOhYNenFu9Ib08hK6xfJ2gNJwcTxrIB4nVfphDyhejUHEMdgD0OhtwdcEs46KdhUZMD-Ekwftj3bzXwdi-mKc8PLKd7SsAYYqE-ZVZD2tm1HmyxtKYJCkoeg7R1K5DIMedYp38BiJ4F2Hbtei34fEdveObQhMSMDt1f2ufrmDzGh5W+fxdXMEmrfeCINO23hC8yV0JRXVDkErL3t8pQih8DicQoY6k2uqHThK8BqfSioBkgPZ0SPvj3Krtpgj9R+XWGtPqRRAwPum4k8etMROvy2DLT1ENNJdrVw
But then its throwing the error
The state token is invalid or has expired. Please try again.
Someone please help me in this.
So looking into this a bit further I found the issue. The Meetup server is changing the state token. If you copy your token from getAuthorizationUrl() and paste it into the state parameter in the url of the bad callback the Auth flow will successfully continue.
State Token made by Apps Script
ADEpC8zI8-E38GrIi2sB5Pf1xK2Hn-6XQ-SJLa0gmxos6z-hbvedTJ2UvXzSJxXbE_NfJlpHkOsjN4DLJ0sOGsYIZpTBc3OpAMWuoj-8UjUuKcTs1htZknyzv0QX9pPe-McxB_MC1fbGBjvrwEGP5_58tQdfRf3K70LURbe0cZ2qx_YK5xxN2qE
Returned State Token
ADEpC8zI8-E38GrIi2sB5Pf1xK2Hn-6XQ-SJLa0gmxos6z-hbvedTJ2UvXzSJxXbE+NfJlpHkOsjN4DLJ0sOGsYIZpTBc3OpAMWuoj-8UjUuKcTs1htZknyzv0QX9pPe-McxB+MC1fbGBjvrwEGP5+58tQdfRf3K70LURbe0cZ2qx+YK5xxN2qE

Meteor acounts add info from Twitter accounts

I'm trying to figure out how I can add additional information from a user's Twitter account to the created account on a Meteor installation.
In particular I am trying to access the user's bio via Twitter Api v 1.1 and am not successful in doing so.
Therefore I am trying to extend Accounts.onCreateUser(function(options,user) {}); with the Twitter bio. How do I do that? And then access this data from a template?
Here's a perfect answer for returning data from Github, however I've had trouble porting this approach over to Twitter as the authenticating service: Meteor login with external service: how to get profile information?
You could do it on this way:
Accounts.onCreateUser(function (options, user){
user.profile = options.profile || {};
//Twitter returns some useful info as the username and the picture
if(user.services.twitter){
user.profile.picture= user.services.twitter.profile_image_url_https;
user.profile.username= user.services.twitter.screenName;
}
return user;
});
For getting the data from the Twitter API I´m using the node package oauth:
OAuth = Npm.require('oauth');
oauth = new OAuth.OAuth(
'https://api.twitter.com/oauth/request_token',
'https://api.twitter.com/oauth/access_token',
'consumerKey',
'secretKey',
'1.0A',
null,
'HMAC-SHA1'
);
getTwitterUserData: function (id) {
var accountUser = AccountsUserCollection.findOne({_id: id});
var url = "https://api.twitter.com/1.1/users/show.json?screen_name="+accountUser.screen_name;
oauth.get(url, 'accessToken', 'accessSecret', function (err, data, response) {
if(err){
console.log(err);
}
if(data){
Fiber(function () {
AccountsUserCollection.update({_id: accountUser._id}, {$set: {dataTwitter: JSON.parse(data)}});
}).run();
}
if(response){
Log.info(response);
}
});
}

Make my web app authorize with google oAuth

I am trying to login with Google oAuth. But when ever i try to login with oAuth it ask for permission. From the code i realize that there need to add the authorization . I have gone through web and found another way to make the app authorize which is complete different than what i have used here. Is there any way so that i can just modify or add a function so that i will be able to make my app authorize with google oAuth ? I am using php and javascript for my web app.
var loginFinished = function(authResult)
{
if (authResult['status']['signed_in']) {
var btnLogOut=document.getElementById("social-integration-logout");
accessToken=authResult['access_token'];
expiresIn=authResult['expires_in'];
console.log(authResult);
gapi.client.load('oauth2', 'v2', function()
{
gapi.client.oauth2.userinfo.get()
.execute(function(resp)
{
var id = resp.id;
});
});
} else {
console.log('Sign-in state: ' + authResult['error']);
}
};
var options = {
'callback': loginFinished,
'approvalprompt': 'force',
'clientid': '',
'scope': 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile',
'requestvisibleactions': 'http://schemas.google.com/CommentActivity http://schemas.google.com/ReviewActivity',
'cookiepolicy': 'single_host_origin'
};
var renderBtn = function()
{
gapi.signin.render('btn_google_login', options);
}
Could you explain what issue you are having, i.e., what is not working? I notice that your script has 'approvalprompt': 'force', which will force the authorization dialog to always display. You may want to remove it so that returning users do not have to consent again. But I am not confident that this was your question.

how to secure or set a rails style before_filter for all angular controllers?

I'm using angularjs for the front end and rails + devise for authentication on the backend.
On the front end I have added a responseInterceptor to redirect to the /#/sign_in page upon any 401 response from any xhr request and display a growl style pop-up message using toastr.
App.config(['$httpProvider', function ($httpProvider) {
$httpProvider.responseInterceptors.push('securityInterceptor');
}]);
App.factory('securityInterceptor', ['$injector', '$location', '$cookieStore', function ($injector,$location,$cookieStore) {
return function(promise) {
var $http = $injector.get('$http');
return promise.then(null, function(response){
if (response.status === 401) {
$cookieStore.remove('_angular_devise_user');
toastr.warning('You are logged out');
$location.path('/#/sign_in');
}
});
};
});
My problem is, when I click on a page that loads several xhr requests during the controllers initialization, for example:
var products = Product.query();
var categories = Category.query();
var variations = Variation.query();
These are needed for various navigation components and they all fire off in parallel, resulting in several duplicate growl-style messages.
Is there a way to make angular quit on the first 401 and stop execution of the rest of the controller from within the interceptor? In a traditional rails app, there would be a "before_filter" that stops regular execution, preventing the page and queries from loading... what's the best way to do this in angular?
I've been pondering about this problem for my own apps too. A sketch of my thoughts (NOT REAL IMPLEMENTATION, SO BEWARE):
A userData service keeps track of whether the user is logged in + other information (e.g. user name, real user name etc):
App.service("userData", function() {
var currentData = {
loggedIn: false
};
function getCurrent() {
return currentData;
}
// called when the user logs in with the user data
function loggedIn(userData) {
// the object is REPLACED to avoid race conditions, see explanation below
currentData = angular.extend({loggedIn: true}, userData);
}
return {
getCurrent: getCurrent,
loggedIn: loggedIn
};
});
The interceptors keep track of the currentData. If an interceptor receives HTTP 401 and the loggedIn flag is true, it changes the flag to false and redirects to the login view. If an interceptor receives HTTP 401 and the loggedIn flag is false, it does nothing besides rejecting the request, because another interceptor has done the view redirection.
When the user logs in, the currentData is replaced, so as to avoid situations with delayed responses (e.g. call1 and call2 are initiated, call1 responds 401; call2 also results in 401, but the delivery of the actual response is delayed; then the user logs in again; then call2 receives its 401; the second 401 should not overwrite the current state)
App.config(["$provide", "$httpProvider", function($provide, $httpProvider) {
$provide.factory("myHttpInterceptor", ["$q", "userData", "$cookieStore", "toastr", "$location",
function($q, userData, $cookieStore, toastr, $location) {
return {
request: function(config) {
config.currentUserData = userData.getCurrent();
return config;
},
responseError: function(rejection) {
if( rejection && rejection.status === 401 && rejection.config && rejection.config.currentUserData && rejection.config.currentUserData.loggedIn ) {
rejection.config.currentUserData.loggedIn = false;
$cookieStore.remove('_angular_devise_user');
toastr.warning('You are logged out');
$location.path('/#/sign_in');
}
return $q.reject(rejection);
}
};
}
]);
$httpProvider.interceptors.push("myHttpInterceptor");
});
Also note I am using the newer way to register interceptors, as $httpProvider.responseInterceptors seems to be deprecated.

FB redirect issue with white page in iOS chrome

When I press the login button I get the facebook page where I have to give permission to use my facebook account.
After I give permission, it redirects to https://www.facebook.com/dialog/permissions.request and a blank page is shown. On Android the "window.FB.login" callback is called (see code below) where I can get the info and redirect the user but on Windows Phone it only shows that blank page. When I go to my facebook page, my site is registered in the app list. So the registration did work correctly.
This error has been caused due to unsafe loading of facebook js file.
For integrating Facebook app in your application you have to follow the steps instructed in Facebook app documentation.
var fbApi = {
init: function () {
$.getScript(document.location.protocol + '//connect.facebook.net/en_US/all.js', function () {
if (window.FB) {
window.FB.init({
appId: MY_APP_ID,
status: true,
cookie: true,
xfbml: false,
oauth: true,
channelUrl: 'http://www.yourdomain.com/channel.html'
});
}
});
},
login: function () {
/// <summary>
/// Login facebook button clicked
/// </summary>
log("login facebook button clicked");
if (window.FB) {
//Windows phone does not enter this method, Android and Iphone do
window.FB.login(function (response) {
if (response.status) {
log('it means the user has allowed to communicate with facebook');
fbAccessToken = response.authResponse.accessToken;
window.FB.api('/me', function (response) {
//get information of the facebook user.
loginService.subscribeSocialUser(response.id, response.first_name, response.last_name, fbAccessToken, "", "FaceBook", fbSucces, fbFail);
});
} else {
log('User cancelled login or did not fully authorize.');
}
},
{ scope: 'email'
});
}
}
};
channel URL is added so as to resolve any cross browser issues.
It should point to an html file which refers to the js as follows:
<script src="//connect.facebook.net/en_US/all.js"></script>
If once an error has been hit while initializing Facebook.js, you will not be able to login successfully.
You can load java script either synchronously or asynchronously.
(function(d, debug){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));

Resources