Cannot login on IE

[curt0]

I implemented your code into my AngularJS app and it enables me to login with Facebook on Chrome, but not IE9 (I have not tested on other versions of IE). Nothing happens when I run $facebook.getLoginStatus(). When I run $facebook.login(), I get Facebook's dialog popup. After I enter my login info and click "Log In", the popup goes blank and nothing happens after that (though, if I open Facebook.com in another tab, it has logged me in there).

I spent a couple of days on trying to figure out how to get AngularJS-integrated code to login on IE9, but am at a lost. Are you able to? I have AngularJS version 1.0.4, but I don't see why I would need to upgrade if it works on Chrome and Firefox. Any ideas?

[ninjatronic]

I've not tested on IE as I don't have a windows machine to test it on. Are you sure that the popups aren't being blocked and that your security settings will allow the oAuth process to complete? Also worth noting that due to security restrictions in IE 7, 8, and 9 you might need to be serving from an SSL certified host in order to do the communication with Facebook properly (if I recall correctly).

[curt0]

Thanks for replying.

I don't think popups are blocked as the Facebook popup is appearing. Besides, I had my domain in the list of "allowed sites" in the Pop-up Blocker settings. Just to be sure, I turned off Pop-up Blocker anyways. I am serving from an SSL certified host.

When the Facebook popup appears, it has a long URL, part of it is this:

https://www.facebook.com/login.php?skip_api_login=1&api_key=1386155918327149&signed_next=1&next=https%3A%2F%2Fwww.facebook.com%2Fdialog%2Foauth%3Fredirect_uri%3Dhttps%253A%252F%252Fs-static.ak.facebook.com%252Fconnect%252Fxd_arbiter%252F8n77RrR4jg0.js%253Fversion%253D40%2523cb%253Df2b0390d5ffce....

When the Facebook popup goes blank after I click on "Log In", it has a long URL, part of it is this:

https://www.facebook.com/dialog/oauth?redirect_uri=https%3A%2F%2Fs-static.ak.facebook.com%2Fconnect%2Fxd_arbiter%2F8n77RrR4jg0.js%3Fversion%3D40%23cb%3Df1d57b90826ff49%....

I welcome any other suggestions or ideas.

[ninjatronic]

Have you tried using the Facebook SDK without an Angular wrapper, to see if it works?

[curt0]

Yes, if I put Facebook's SDK code in index.html and call FB.login() from a controller, it works in IE9. However, there are other problems without an Angular wrapper. When a user brings up my web app in Facebook's Canvas, my web app calls getLoginStatus() and login(). Without an Angular wrapper, my program doesn't know if FB.init has finished and the calls to getLoginStatus() and login() cause errors if FB.init hasn't finished. A user wouldn't see the errors in the console and would simply get no response, which is not acceptable.

Also, I sometimes get the following errors in the console, which stops the execution of my JS program, which I cannot fix:

SCRIPT438 Object doesn't support property or method 'me'
SCRIPT438 Object doesn't support property or method 'fblogin'
SCRIPT5007:  Unable to get value of the property 'data': object is null or undefined

SCRIPT438 errors are triggered when there are calls to $scope.me() and $scope.fblogin() in my AngularJS controller.
SCRIPT5007 error happens from the following code:

$scope.me = function(caller) {  // this is called only if user is logged in
    var request_ids = getQueryStringParameter('request_ids');
    if (request_ids) {
        FB.api('', {"ids": request_ids }, function(response) {
        if (response) {
            // Get the first request
            for (var first in response) break;
            var temp = JSON.parse(response[first].data);

I forgot to answer your question about oAuth. I have the following

         $facebookProvider.init({
             appId:  XXXXXXXXX,
            status     : true, // check login status
            cookie     : true, // enable cookies to allow the server to access the session
            xfbml      : true,  // parse XFBML
            oauth      : true
         });

I've scoured through StackOverflow, Github and the web and I find it strange that no one else seems to have mentioned that they cannot log into Facebook on IE using Facebook's Javascript SDK in an AngularJS app.

We all hate IE, especially me, but a significant percentage of the population still use IE.

Do you know of a way to solve my above problems without using an Angular wrapper?

[ninjatronic]

Yes I can imagine that you hate IE quite a lot looking at all this. It does look like you are generally having a lot of problems with it even aside from the FB wrapper stuff with things disappearing from your $scope (SCRIPT438). have you tried using a more recent version of angular for all this? 1.0.4 is a very old version.

[curt0]

I don't understand why AngularJS would be the cause of the problem, because the Facebook API works beautifully with Chrome and Firefox from AngularJS 1.0.4.

I'm still surprised that no one else has either tried using Facebook's API from an AngularJS app on IE, or mentioned any problems with this.

I'm reluctant to upgrade AngularJS. When my former-partner upgraded AngularJS in the past, we had to spend a few days to fix new problems or bugs. What was your experience like? Now my former-partner is currently busy with another project, so I would have to upgrade it. What is involved in upgrading? I searched and could not find step-by-step instructions. Do I simply run the following, as per http://stackoverflow.com/questions/18846786/how-to-install-latest-unstable-angularjs-components-using-bower ?

bower install angular#1.2.0-rc.2

[ninjatronic]

I've never had a lot of trouble upgrading Angular. 1.0.4 is a very old version. The release from the 1.0.x track that is generally considered the most stable LTS release is 1.0.8 so maybe it's worth trying that. bower install angular#1.0.8 should do the trick.

I'm suggesting the problem is angular because you're having trouble binding to keys on your $scope that aren't directly associated with the Facebook SDK. I can't see how the FB SDK or any wrapper for it would cause those problems.

[curt0]

Didn't you have to spend a few days each time you upgraded AngularJS, to fix bugs or changes?

The call to $scope.me() happens after calling FB.login() or FB.getLoginStatus and the call to $scope.fblogin() happens after calling FB.getLoginStatus(). So, there is a good probability that they are associated with the Facebook SDK. Also, those SCRIPT438 and SCRIPT5007 errors happen only when I'm using IE. No errors with Chrome and Firefox. There's a chance that AngularJS is causing these errors only for IE, but I would think that it's unlikely.

Every upgrade of AngularJS seems to take a few days of work. Is 1.2.0-rc.2 stable? If so, why not upgrade to 1.2.0-rc.2 instead of 1.0.8?

[ninjatronic]

I think 1.2.16 is the latest stable release. 1.3.x branch seems reasonably stable too. I suppose the amount of time you are going to have to spend upgrading depends upon the complexity of your project.

Do you have any stack traces or more detailed debug information you can share here about these errors?

[curt0]

As mentioned in my first posting, $facebook.login() causes Facebook to show its popup dialog, but nothing happens after I click on "Log In". The problem happens while using Facebook's popup. So, I'm not aware of any potential stack traces or detailed debug information or how to get them. Any ideas on how to get them?

If I can get around to upgrading AngularJS, I will likely use 1.2.16. 1.3.x seems bleeding edge.

[ninjatronic]

Maybe try hitting F12 once the Facebook popup has focus and using the dev tools to insect the console there?

[curt0]

Good suggestion. Sounds like you're familiar with IE.

When the Facebook login dialog popup appears, it shows the following in the console:

HTML1204: facebook.com is running in Compatibility View because 'Display all websites in Compatibility View' is checked.

login.php?login_attempt=1&next=https%3A%2F%2Fwww.facebook.com%2Fdialog%2Foauth%3Fredirect_uri%3Dhttps%253A%252F%252Fs-static.ak.facebook.com%252Fconnect%252Fxd_arbiter%252F8n77RrR4jg0.js%253Fversion%253D40%2523cb%253Df1097a1afb7eeb5%2526...... 

After I enter my login info and click on "Log In", nothing else appears in the console. Facebook usually shows nothing in the console.

I'm still amazed that I'm the only person in the Angular/Facebook world who has this IE problem, or who has reported it.

[curt0]

I think I upgraded to 1.2.16, but I'm not sure. I replaced my 1.0.4 angular.js file with the following in index.html:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>

I added the following:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>

I changed the following:

var app = angular.module('app', ['ngCookies', 'io', 'ui', 'bs', '$strap',
    'app.controllers', 'app.directives', 'app.factories', 'app.filters', 'app.modules', 'app.config', 'angularPayments', 'facebook']);

to

var app = angular.module('app', ['ngRoute', 'ngCookies', 'io', 'ui', 'bs', '$strap',
    'app.controllers', 'app.directives', 'app.factories', 'app.filters', 'app.modules', 'app.config', 'angularPayments', 'facebook']);

Now, one of my pages won't show. I haven't done a thorough test to ensure that everything is still working. Nevertheless, on quick glance, most other pages show. I tried ngFacebook on IE9 and still got the same problem.

[ninjatronic]

Can you see the login request being sent by the Facebook popup when you click login in network capture? http://msdn.microsoft.com/en-us/library/gg130952(v=vs.85).aspx

[curt0]

Yes, below is what I get. The first URL appears immediately after I click on "Log In". The second URL appears when the popup goes blank and hangs.

The screenshots below are details of the second (above) URL:

I do not understand or get much meaning from most of this. The Frame URL in this Initiator tab is the only clue that I could see. It's a very long URL. The second screenshot below is the right end of it. At the end of this URL, it has "access_denied", "error_description", "Permissions", "error_reason", etc.

But when I searched for this, I can only find http://stackoverflow.com/questions/7204877/facebook-php-authentication-returns-user-denied-permissions-when-i-click-allo , which didn't help because I'm not denying any permissions and there is no pending status.

Do these screenshots provide any clue to you?

Thanks for all your help. I appreciate it.

[curt0]

I tried my app with your code at browserstack.com. I can login with IE11. Here are my results:

Windows 7
IE 9 - no, $facebook.login() runs but Facebook window goes blank and hangs after clicking on Log In. $facebook.getLoginStatus() does not run.
IE 10 - no and getLoginStatus does not run
IE 11 - yes I can login

Windows 8
IE 10 - no and $facebook.getLoginStatus does not run
IE 10 desktop - no and $facebook.getLoginStatus does not run

Windows 8.1
IE 11 - yes
IE desktop - yes

According to this posting, IE still has the largest market share among browsers: http://thenextweb.com/insider/2014/02/01/ie11-passes-ie10-market-share-firefox-slips-bit-chrome-gains-back-share/ . So, even though the Linux, Mac, Chrome lovers, which includes me, hate IE, we are excluding a huge percentage of the population by not getting our code to work with IE.

What do you think is different with IE11 that enables AngularJS to work?

Is there anything else that we can look into?

[ninjatronic]

Off the top of my head I simply don't know, but I suspect that this is something CORS related. Commenting to keep this at the top of my stack, will take a look and post back again soon.

[imrangithub]

I too face similar issue. When i use FF or chrome immediately after i click login in login popup it makes a GET request and fill my form with the logged in user details.

Whereas when i use IE (9,10,11) nothing happens after i click login. Network tab in f12 also doesn't shows anything .

[ninjatronic]

Hi @imrangithub @curt0

This got dropped in favour of other work, apologies.

If you are setting 'http-equiv' in a meta tag anywhere on the page you need to make sure the value is IE=8 or greater, otherwise IE10 will open the Facebook popup in IE8 mode.

<meta http-equiv="X-UA-Compatible" value="IE=9">