Use Azure Mobile App Authentication to login using Facebook with a .NET Backend for Cordova with Ripple

Man that is a lot of buzzwords. Here be dragons.

Mostly notes for myself, rough steps:

Create ionic app (in VS project is called ‘Ionic Blank App’)
Add cordova browser platform, install the cordova plugin and the bower plugin:
```
 cordova platforms add browser
 cordova plugin cordova-plugin-ms-azure-mobile-apps  
 bower install angular-azure-mobile-service
```
Apply my patch to angular-azure-mobile-service (enables ALTERNATE_LOGIN_HOST)
In app.js add an angular dependency to azure-mobile-service.module

Add AzureMobileServiceClient to app.js:

 app.constant('AzureMobileServiceClient', {
     API_URL: (window.location.hostname == 'localhost') ? 'http://localhost:4400' : 'https://{yoursite}.azurewebsites.net',
     ALTERNATE_LOGIN_HOST: 'https://{yoursite}.azurewebsites.net'
 });

Sample Auth factory

 app.factory('Auth', function (Azureservice, $q, $rootScope) {
     return {
         login: function () {
             var deferred = $q.defer();
             return Azureservice.login('facebook').then(function (response) { 
                 console.log('response', response);
                 $rootScope.$broadcast('Auth.LoggedIn', response); 
                 deferred.resolve(response)
             }, function (error) {
                 deferred.reject(error);
             });
             return deferred.promise;
         },
         currentUser: Azureservice.getCurrentUser,
         isAuthenticated: Azureservice.isLoggedIn, 
         logout: function () {
             var deferred = $q.defer();
             return Azureservice.logout().then(function (response) { 
                 $rootScope.$broadcast('Auth.LoggedOut', response);
                 deferred.resolve(response);
             }, function (error) {
                 deferred.reject(error);
             }); 
             return deferred.promise;
         }
     };
 });

Sample login state:

 .state('login', {
     url: '/login',
     controller: 'LoginController',
     templateUrl: 'templates/login.html',
     onEnter: function ($state, Auth) { 
         if (Auth.isAuthenticated()) {
             $state.go('tab.dash');
         }
     }
 })

Sample login view:

 <div class="login-form">
     <p>Click below to login</p>
     <button ng-click="login()">Login with Facebook!</button>
 </div>

Create mobile app (in Visual Studio project is called ‘Azure Mobile App’)
Configure facebook authentication
Make sure https://{yoursite}.azurewebsites.net/.auth/login/facebook/callback is configured as your ‘Valid OAuth redirect URIs’ under ‘Facebook Login’

Go to Configuring your Mobile App .NET server backend project for local debugging and add the settings mentioned into web.config:

<add key="SigningKey" value="{your WEBSITE_AUTH_SIGNING_KEY value}" />
<add key="ValidAudience" value="https://{yoursite}.azurewebsites.net/" />
<add key="ValidIssuer" value="https://{yoursite}.azurewebsites.net/" />

Go to How to: Configure your Mobile App Service for External Redirect URLs.
Add in allowedExternalRedirectUrls for Ripple:
```
"allowedExternalRedirectUrls": [ "http://localhost:4400" ],
```

Create custom chrome launch shortcut:
Target:

 “C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” http://localhost:4400/index.html?enableripple=cordova-3.0.0-NexusGalaxy –allow-file-access-from-files –disable-web-security –no-first-run –disable-first-run-ui –profile-directory "RippleDebug"

Start In:

 "C:\Program Files (x86)\Google\Chrome\Application"

Kiasyn's Blog