CODEWITHSUNDEEP
asp.net-mvcfacebookjquery-mobileoauthmobile-website
espenalb
espenalb

Reputation: 548

How to get OAuth working on MVC4 mobile

I have been struggling to get OAuth to work on my MVC4 mobile application.

I basically

  1. Created an MVC4 Mobile application
  2. Created an MVC4 Web application
  3. Copied the AccountController, AccountModel, InitializeSimpleMembershipAttribute and all account views into my MVC4 Mobile application
  4. Enabled Google and Facebook OAuth providers
  5. I also ensured RoleManager was initialized according to simplemembershipprovider-not-working, although I do not think that was important. ( I needed it for some role-based security I was testing)
  6. Disabled ajax ( I think) by setting data-ajax="false": using (Html.BeginForm("ExternalLogin", "Account",new RouteValueDictionary { { "ReturnUrl", ViewBag.ReturnUrl } }, FormMethod.Post, new Dictionary<string, object> { { "data-ajax", false } })) (This did not seem to have any effect on the page - so I may be doing something wrong here...)

I can get to the LogIn view /Account/Login, and when I click the google button, the debugger breaks into public ActionResult ExternalLogin(string provider, string returnUrl)

However - the public ActionResult ExternalLoginCallback(string returnUrl) is never hit. Visually, I get the jquery mobile "page loading" animation - then I get "Error Loading Page"

I have two questions:

  1. How can I get more information when I try to figure out what happens?
  2. How can I get OAuth working on my MVC4 mobile site?

BTW: Both sites target .Net4.0

Upvotes: 1

Views: 1209

Answers (2)

codekilla
codekilla

Reputation: 43

The above answer from espenalb does work if your site loads directly to the login page, however if you have say a home page and then and a link to the login page(which uses the same layout), you will get an error loading page when you click one of the social login buttons.

To fix this add

<script>

    $('#login-link').live("click", function () {
        $.mobile.ajaxEnabled = false;
    });

</script>

to the bottom of your mobile layout page, this will attach an event handler that will disable ajax to the login link.

Upvotes: 0

espenalb
espenalb

Reputation: 548

OK - so I figured out the answer - the cuplrit was indeed the ajax in jQuery mobile.

I modified my _layout.cshtml so that it can render a custom script after loading jQuery, but before loading jQuery mobile:

    @Scripts.Render("~/bundles/jquery","~/scripts/RemoveHashFromWindowLocation")
    @RenderSection("beforeJqueryMobile", required: false);
    @Scripts.Render( "~/bundles/jquerymobile")
    @RenderSection("scripts", required: false)

Then I modified my Login.cshtml so that it contains the section:

@section BeforeJqueryMobile {
    @Scripts.Render("~/scripts/disable-ajax.js")
}

And finally, I added the following to my scripts folder:

disable-ajax.js:

$(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
});

RemoveHashFromWindowLocation.js: (Thanks to Facebook Oauth Login With Jquery Mobile #_=_)

if (window.location.hash == "#_=_")
    window.location.hash = "";

Voila - OAuth working with jQuery mobile. :-)

Upvotes: 2

Related Questions