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"