403 error after authenticating Apache Cordova app with Azure App Service

Category: azure mobile

Question

Hugonne on Tue, 03 May 2016 20:00:59


Hello all. Here's the deal.

I created an Azure App Service application, which will serve as backend to an Apache Cordova app created from VS2015. The App Service has a .NET Backend, and the mobile app is able to connect to the API and get/post data.

I'm using the cordova-plugin-ms-azure-mobile-apps plugin to interact with Azure from my mobile app.

Now I'm trying to set up authentication. So I went to the Azure portal and configured my Google and Facebook providers, as explained here and here. Next, I went to the Mobile app and added authentication, also as explained here. When I try to log in from the mobile app, I successfully get the corresponding login page for either service, but after I enter the credentials I get a 403 response from the server in both cases, when the callback is done:

https://goleadores.azurewebsites.net/.auth/login/facebook/callback?code=AQDAKEMnCfxxt2tFi4-y8jX8NrYV3_CcCBvwKo7Glj8XcB8FRSLF_SMb0Z15PbUEhUjDp2zY4N9xcdp1obEOfK4V_0yLsBVolYr0faLFvF3pojlzkXFQiQRzru_TM57DTkZ7fu8Ffn2ICnzCRglh54HbnMUEeWlC7wjculSq914taSh8Fy5RDh1ctc-MflnJjkZZUQti6xYq96idermbU6j0fu71XVmw0FPSEDv_4d2s4dOAP0DWkq0znTtJ8rlcHuYgD-K__GIqs2UKZCTPUjbziZY6Tdk5xCeDq9K0BwEH_KPlhXniCxTBmjWU4Z25bNo&state=nonce%3D9ae1283b333e4602b402fefe783118ad_20160503195756%26redir%3D#_=_

Failed to load resource: the server responded with a status of 403 (Forbidden)

Any clues of what might be going on there? I've double checked in both Google and Facebook, and both redirect URIs seem to be correctly set up:

https://goleadores.azurewebsites.net/.auth/login/facebook/callback and https://goleadores.azurewebsites.net/.auth/login/google/callback

This is how I'm calling the login service:

var goleadoresClient = new window.WindowsAzure.MobileServiceClient('https://goleadores.azurewebsites.net/');
goleadoresClient.login('facebook').then(handleSuccess, handleError);

Any thoughts?

Thanks a lot for your help.


:. HUGONNE .: Please mark as answer if the post helps. Coding tips - http://hugonne.blogspot.com/

Replies

Aziel C Epilepsia on Tue, 03 May 2016 21:07:27


Hi,

It looks like your Facebook is set up correctly, but Google is not.

You should be able to open these links in the browser and get the auth flow, ending with .auth/login/done#token=......

https://goleadores.azurewebsites.net/.auth/login/google

https://goleadores.azurewebsites.net/.auth/login/facebook

I'm curious what you have set up for Authentication / Authorization "Action to take when request is not authenticated".

Try setting it to Allow request (no action). 

I suspect it might be set to try to login with google if not authenticated, but since google auth is not set up correctly, you're 403'ing.

Hugonne on Wed, 04 May 2016 21:06:16


Thanks for your reply. Actually, I'm getting the issue in both services (Facebook and Google), so I think it's a matter of how the App Service is set up. I even tested with a brand new application, with no logic other than the call to client.login(), and still got the 403 after I entered the credentials.

This is what my config looks like:

[EDIT]

When testing the URLs you provided directly through the browser, I am able to log in and get succesfully redirected to the mobile app home page. It just doesn't work through the Apache Cordova App (I'm testing with Ripple).

[EDIT 2]

The URLs that the mobile device is being sent to are 

https://goleadores.azurewebsites.net/.auth/login/facebook?session_mode=token&completion_type=postMessage&completion_origin=http%3A%2F%2Flocalhost%3A4400

and 

https://goleadores.azurewebsites.net/.auth/login/google?session_mode=token&completion_type=postMessage&completion_origin=http%3A%2F%2Flocalhost%3A4400

Testing both directly in the browser generates the 403 error. Could it be just related to Ripple?


:. HUGONNE .: Please mark as answer if the post helps. Coding tips - http://hugonne.blogspot.com/


Aziel C Epilepsia on Wed, 04 May 2016 21:16:31


We know that the backend is working fine because I get tokens from both Google and Facebook now:

https://goleadores.azurewebsites.net/.auth/login/facebook

https://goleadores.azurewebsites.net/.auth/login/google

You shouldn't have to work anything in portal, or on your backend.

I'm going to try to get our Cordova client dev to help out.

Hugonne on Wed, 04 May 2016 21:52:08


Well, I managed to actually solve it!

It was indeed an issue with the App Service configuration. I had to add the Ripple URL to the CORS allowed origins. Additionally, I had to manually modify the authsettings in the Azure Resource explorer, as explained here, in the "How to: Configure your Mobile App Service for External Redirect URLs" section.

Thanks for your help.

Aziel C Epilepsia on Wed, 04 May 2016 21:55:41


Great,  thanks for responding with the solution, hopefully it helps anyone else with similar issues.