403.60 - Forbidden error authenticating Cordova with Azure Mobile Apps

Question

Solution
Phonegap oauth2 redirect issue Authentication works on device but not Ripple Still trying to figure out how to get it to work on Ripple

Initial Problem
I'm following the tutorials to create a starter Cordova app with authentication against an Azure App Service: https://azure.microsoft.com/en-us/documentation/articles/app-service-mobile-cordova-get-started-users/ and https://azure.microsoft.com/en-us/documentation/articles/app-service-mobile-how-to-configure-microsoft-authentication/

I can browse directly to the app service at zumotest4.azurewebsites.net but the Cordova app (generated by Azure Mobile App quickstart) is failing. The azure mobile service call, client.login('microsoftaccount'); does launch the OAuth login page but, after submitting credentials, the OAuth login screen stays open with a blank screen. The network trace shows a 403 forbidden failure for the callback. The Azure App Service error log reports the error as HTTP Error 403.60 - Forbidden.

Backend = .NET (C#)

The server is set to 'Allow request (no action)' when a request is not authenticated. The todo controller is set to [Authorize].

    [Authorize]
    public class TodoItemController : TableController<TodoItem>
    {...

Microsoft Registered Application Configuration:

-Mobile or desktop client app: Yes

-Target domain: blank

-Restrict JWT issuing: Yes

-Root domain: zumotest4.azurewebsites.net

-Redirect URLs:

*https://zumotest4.azurewebsites.net/.auth/login/microsoftaccount/callback

*https://zumotest4.azurewebsites.net/.auth/login/microsoftaccount

*https://zumotest4.azurewebsites.net/.auth/login/done 

*https://zumotest4.azurewebsites.net

Cordova client CSP: <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://login.windows.net https://login.live.com https://zumotest4.azurewebsite...; style-src 'self'">

Cordova client index.js:

function onDeviceReady() {
    client = new WindowsAzure.MobileServiceClient('https://zumotest4.azurewebsites.net');

    // Login to the service
    client.login('microsoftaccount')
        .then(function () {
            // BEGINNING OF ORIGINAL CODE

            // Create a table reference
            todoItemTable = client.getTable('todoitem');

            // Refresh the todoItems
            refreshDisplay();

            // Wire up the UI Event Handler for the Add Item
            $('#add-item').submit(addItemHandler);
            $('#refresh').on('click', refreshDisplay);

            // END OF ORIGINAL CODE

        }, handleError);
}

Network trace:

Name: https://zumotest4.azurewebsite..."%"3dc28004776f304afca14c71b77d660d8d_20160311125405"%"26redir"%"3d" -H "Accept-Encoding: gzip, deflate, sdch" -H "Accept-Language: en-US,en;q=0.8" -H "Upgrade-Insecure-Requests: 1" -H "User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36" -H "Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8" -H "Referer: https://login.live.com/oauth20..."%"3A"%"2F"%"2Fzumotest4.azurewebsites.net"%"2F.auth"%"2Flogin"%"2Fmicrosoftaccount"%"2Fcallback&response_type=code&scope=wl.basic&state=nonce"%"3Dc28004776f304afca14c71b77d660d8d_20160311125405"%"26redir"%"3D" -H "Cookie: CompletionOrigin=http://localhost:4400; CompletionType=postMessage; Nonce=JpK4rfK4vvSKl3Mr6xhuJdy5b0xzu2nls5zL4ShiBrxVjw64e9n9/JXXhLlOeq3S8Pn9YFfV9G2RGowbFB4YZem5vCGwDWHV3vHoa0iT3/XvHHA9SAOD5AjlXxN3ffbk; AppServiceSessionMode=token; ARRAffinity=45469bcdd9e2de45e5ee43c5a6d02e5e7b574ac8ea3eb9b10e5cce208e5268b6" -H "Connection: keep-alive" -H "Cache-Control: max-age=0" --compressed

Status: 403 - Forbidden

Type: document

Initiator: https://zumotest4.azurewebsite..."%"3dc28004776f304afca14c71b77d660d8d_20160311125405"%"26redir"%"3d" -H "Accept-Encoding: gzip, deflate, sdch" -H "Accept-Language: en-US,en;q=0.8" -H "Upgrade-Insecure-Requests: 1" -H "User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36" -H "Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8" -H "Referer: https://login.live.com/oauth20..."%"3A"%"2F"%"2Fzumotest4.azurewebsites.net"%"2F.auth"%"2Flogin"%"2Fmicrosoftaccount"%"2Fcallback&response_type=code&scope=wl.basic&state=nonce"%"3Dc28004776f304afca14c71b77d660d8d_20160311125405"%"26redir"%"3D" -H "Cookie: CompletionOrigin=http://localhost:4400; CompletionType=postMessage; Nonce=JpK4rfK4vvSKl3Mr6xhuJdy5b0xzu2nls5zL4ShiBrxVjw64e9n9/JXXhLlOeq3S8Pn9YFfV9G2RGowbFB4YZem5vCGwDWHV3vHoa0iT3/XvHHA9SAOD5AjlXxN3ffbk; AppServiceSessionMode=token; ARRAffinity=45469bcdd9e2de45e5ee43c5a6d02e5e7b574ac8ea3eb9b10e5cce208e5268b6" -H "Connection: keep-alive" -H "Cache-Control: max-age=0" --compressed

Thanks in advance for your help.

For reference, can you please let us know: 1) Are there any error messages in the console if you run the cordova app in a debug / ripple environment and 2) what version of the cordova-ms-azure-mobile-apps are you running? — Adrian Hall
Please note, I added a 'solution' to the original issue. The problem is Ripple. Authentication works in emulator. I am using version="2.0.0-beta4" of cordova-plugin-ms-azure-mobile-apps which is automatically included by the Azure quickstart. Would be nice if authentication would work in Ripple which is convenient for its speed. — Gerard MC

Shrirang - Microsoft Shrirang - Microsoft · Accepted Answer · 2016-03-11T23:07:31

There are a few additional steps needed to get authentication working in browser. Refer the resolution mentioned in this GitHub issue: https://github.com/Azure/azure-mobile-apps-js-client/issues/81. Let me know if it helps.

403.60 - Forbidden error authenticating Cordova with Azure Mobile Apps

1 Answers