How do I authenticate a user with AngularJS and DreamFactory?


#1

Many people ask about how to authenticate users with Angular and DreamFactory’s user management REST API.

One easy way to do this (as well as user registration) is to use our Angular module on GitHub. There’s also a three-part tutorial below about how to use the module:

You don’t have to use this module though. Logging users in with an Angular app is pretty straightforward.

First, make sure to set your API key in your app.js file. The API key is just the name of the app you’ve created in DreamFactory (so DreamFactory knows whether the user logging in has permission to access the app).

angular.module(‘yourAwesomeApp', [])

// set a constant
.constant(‘DSP_API_KEY’, YOUR_APP_NAME_HERE)

// Create a config block.  Inject $httpProvider.  Set default header for $http service calls
 .config(['$httpProvider', 'DSP_API_KEY', function ($httpProvider, DSP_API_KEY) {

        // Set default headers for http requests
        $httpProvider.defaults.headers.common["X-DreamFactory-Application-Name"] = DSP_API_KEY;
    }])

Then create controllers for login and logout. The session header we set for Angular’s $http will persist for all calls until we delete on logout.

 // Store user info from html form
    scope.email = USER_EMAIL;
    scope.password = USER_PASSWORD;
    
    // This function makes the login request
    scope.getSession = function (emailStr, passwordStr) {
    
    	return $http({
    			method: “POST”,
    			url: https://YOUR_DSP_URL/rest/user/session,
    			data: {
    				email: emailStr
    				password: passwordStr
    			}
    		});
    }
    
    // This function makes the logout request    
    scope.deleteSession = function () {
    
    	return $http({
    		method: “DELETE”,
    		url: https://YOUR_DSP_URL/rest/user/session
    	});
    }
    
    // attach this to a UI button or form submit
    scope.login = function () {
    
    	// Call our login function and handle its returned promise
    	scope.getSession(scope.email, scope.password).then(
    
    		// Handle successful login
    		function (result) {
    
    			// set header for future $http service calls to dreamfactory
    			$http.defaults.headers.common[‘X-DreamFactory-Session-Token’] = result.data.session_id;
    
    			// Do whatever else you want to do for app setup after login
    
    		},
    
    		// handle login failure
    		function (reject) {
    
    			throw reject;
    		});
    }
    
    // handle logout
    scope.logout = function () {
    
    	// Call delete function and handle response
    	scope.deleteSession().then(
    		// handle success
    		function(result) {
    
    			// Don’t forget to delete the session header on logout!
    			$http.defaults.headers.common[‘X-DreamFactory-Session-Header’] = '';
    		},
    
    		// handle failure
    		function(reject) {
    
    			throw reject;
    		})
    }

Then just invoke your login and logout methods from your login and logout buttons in your html.

// Login & Logout buttons html
<button type=“button” data-ng-click=“login()”>Login Button</button>
<button type=“button” data-ng-click=“logout()”>Logout Button</button>

#2

What is the difference between DreamFactory user management module and angularjs sdk?

Which one should I use for angularjs mobile app?

I see more users have starred angularjs sdk than DreamFactory user management module


#3

In the login function I had to use:

$http.defaults.headers.common[“X-DreamFactory-Session-Token”] = result.session_id;
instead of
$http.defaults.headers.common[“X-DreamFactory-Session-Token”] = result.data.session_id; (it gives me an error)


#4

Can you elaborate? Which one gave you error and which one should I use? I mean which library


#5

That’s what I’m using:

...
.constant('DSP_URL', 'http://example.com')
.constant('DSP_API_KEY', 'yoursApp')
.config(function ($httpProvider, DSP_API_KEY) {
    $httpProvider.defaults.headers.common["X-DreamFactory-Application-Name"] = DSP_API_KEY;
})

and in your controller

    DreamFactory.api.user.login($scope.creds,
      function(result) {
        console.log(result);
        $http.defaults.headers.common["X-DreamFactory-Session-Token"] = result.session_id;
         },
      function(error) {
      }
        );

Hope it helps.


#6

@Anand the angularjs sdk provides an easy way to call DreamFactory’s REST API e.g. CRUD operations. The user management module is specifically for registering and authenticating end users in your applications, using DreamFactory’s user management system.


#7

@benbusse
Ok So I should use DreamFactory’s user management module to authenticate user and after authenticating I can pass the session into the header and perform CRUD operations for that user using angular-dreamfactory . Correct me if I am wrong.

In your 3 part tutorial you have included lots of dependencies
"dependencies": {
“angular”: “1.2.15”,
“json3”: “~3.2.6”,
“es5-shim”: “~2.1.0”,
“jquery”: “~1.11.0”,
“bootstrap”: “~3.0.3”,
“angular-resource”: “1.2.15”,
“angular-cookies”: “1.2.15”,
“angular-sanitize”: “1.2.15”,
“angular-route”: “1.2.15”,
“dreamfactory-user-management”: “>=1.0.0”
},
“devDependencies”: {
“angular-mocks”: “1.2.15”,
“angular-scenario”: “1.2.15”}
which dependencies are absolutely necessary ?
I do not wish to support internet explorer 8 and below nor do I want to perform automated tests on my code. So I assume that I can go without devDependencies ,es5-shim and json3 also I am using a ionic framework
so I assume I do not need bootstrap.
Also I see the Jquery in dependencies is it required?


#8

Yes, that’s correct.

So I assume that I can go without devDependencies ,es5-shim and json3 also I am using a ionic framework so I assume I do not need bootstrap.

Correct.

Also I see the Jquery in dependencies is it required?

You should be OK without jQuery.