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:

  1. Create ionic app (in VS project is called ‘Ionic Blank App’)
    Add cordova browser platform: cordova platforms add browser
    Install cordova plugin: cordova plugin cordova-plugin-ms-azure-mobile-apps
    Install bower plugin angular-azure-mobile-service
    Apply my patch to angular-azure-mobile-service (enables ALTERNATE_LOGIN_HOST)
  2. In app.js add an angular dependency to azure-mobile-service.module
  3. Add AzureMobileServiceClient to app.js:
    app.constant(‘AzureMobileServiceClient’, {
    API_URL: (window.location.hostname == ‘localhost’) ? ‘http://localhost:4400’ : ‘https://{yoursite}’,
    ALTERNATE_LOGIN_HOST: ‘https://{yoursite}’
  4. 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);
    }, function (error) {
    return deferred.promise;
    currentUser: function () {
    return Azureservice.getCurrentUser();
    isAuthenticated: function () {
    return Azureservice.isLoggedIn();
    logout: function () {
    var deferred = $q.defer();
    return Azureservice.logout().then(function (response) {
    $rootScope.$broadcast('Auth.LoggedOut', response);
    }, function (error) {
    return deferred.promise;
  5. Sample login state: .state('login', {
    url: '/login',
    controller: 'LoginController',
    templateUrl: 'templates/login.html',
    onEnter: function ($state, Auth) {
    if (Auth.isAuthenticated()) {
  6. Sample login view:<div class="login-form">
    <p>You’re disgusting. Some people have an ability to write placeholder text... It's an art you're basically born with. You either have it or you don't.</p>
    <p>You’re disgusting. Look at these words. Are they small words? And he referred to my words – if they’re small, something else must be small. I guarantee you there’s no problem, I guarantee.</p><button class=”button button-positive” ng-click=”login()”>
    <i class=”icon ion-social-facebook”></i>
    Login with Facebook!
    </div><style type=”text/css”>
    .login-form {
    text-align: center;
    width: 80%;
    margin: 60px auto 0;
    }.login-button {
    width: 100%;
    margin: 0 auto;
    }.forgot-password {
    display: block;
    margin: 8px auto 0 auto;
    font-size: 14px;
  7. Sample login controller:
    .controller('LoginController', function ($scope, $state, Auth) {
    $scope.login = function () {
    Auth.login().then(function (resp) {
    }, function () {
  8. Create mobile app (in VS project is called ‘Azure Mobile App’)
  9. Configure facebook authentication
    Make sure https://{yoursite} is configured as your ‘Valid OAuth redirect URIs’ under ‘Facebook Login’
  10. 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}" />        
    <add key="ValidIssuer" value="https://{yoursite}" />
  11. Go to How to: Configure your Mobile App Service for External Redirect URLs.
    Add in allowedExternalRedirectUrls for Ripple: “allowedExternalRedirectUrls”: [ “http://localhost:4400” ],
  12. 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”