Seeking guidance on WebAPI, AngularJS, and .NET Authentication, I am currently following a tutorial mentioned HERE. The tutorial is brief (~under 10 mins), but I encountered an error stating
Failed to load resource: net::ERR_CONNECTION_REFUSEDEverything progressed smoothly until I reached the "register" step towards the end of the tutorial, where the aforementioned error surfaced. Could someone verify the tutorial to check if the registration process works correctly? Alternatively, please let me know if any components used in the tutorial are outdated or malfunctioning. As previously stated, the tutorial can be completed in under 10 minutes.
Provided below is the code snippet:
AngularJSClient Solution
app.js
(function () {
'use strict';
// Module name is handy for logging
var id = 'app';
// Create the module and define its dependencies.
var app = angular.module('app', [
]);
app.config(['$httpProvider', function ($httpProvider) {
// Use x-www-form-urlencoded Content-Type
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
// Override $http service's default transformRequest
$httpProvider.defaults.transformRequest = [function (data) {
/**
* The workhorse; converts an object to x-www-form-urlencoded serialization.
* @param {Object} obj
* @return {String}
*/
var param = function (obj) {
var query = '';
var name, value, fullSubName, subName, subValue, innerObj, i;
for (name in obj) {
value = obj[name];
if (value instanceof Array) {
for (i = 0; i < value.length; ++i) {
subValue = value[i];
fullSubName = name + '[' + i + ']';
innerObj = {};
innerObj[fullSubName] = subValue;
query += param(innerObj) + '&';
}
}
else if (value instanceof Object) {
for (subName in value) {
subValue = value[subName];
fullSubName = name + '[' + subName + ']';
innerObj = {};
innerObj[fullSubName] = subValue;
query += param(innerObj) + '&';
}
}
else if (value !== undefined && value !== null) {
query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
}
}
return query.length ? query.substr(0, query.length - 1) : query;
};
return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
}];
}]);
// Execute bootstrapping code and any dependencies.
app.run(['$q', '$rootScope',
function ($q, $rootScope) {
}]);
})();
mainCtrl.js
(function () {
'use strict';
var controllerId = 'mainCtrl';
angular.module('app').controller(controllerId,
['userAccountService', mainCtrl]);
function mainCtrl(userAccountService) {
// Using 'Controller As' syntax, so we assign this to the vm variable (for viewmodel).
var vm = this;
// Bindable properties and functions are placed on vm.
vm.title = 'mainCtrl';
vm.isRegistered = false;
vm.isLoggedIn = false;
vm.userData = {
userName: "",
password: "",
confirmPassword: "",
};
vm.registerUser = registerUser;
vm.loginUser = loginUser;
vm.getValues = getValues;
function registerUser() {
userAccountService.registerUser(vm.userData).then(function (data) {
vm.isRegistered = true;
}, function (error, status) {
vm.isRegistered = false;
console.log(status);
});
}
function loginUser() {
userAccountService.loginUser(vm.userData).then(function (data) {
vm.isLoggedIn = true;
vm.userName = data.userName;
vm.bearerToken = data.access_token;
}, function (error, status) {
vm.isLoggedIn = false;
console.log(status);
});
}
function getValues() {
userAccountService.getValues().then(function (data) {
vm.values = data;
console.log('back... with success');
});
}
}
})();
userAccountService.js
(function () {
'use strict';
var serviceId = 'userAccountService';
angular.module('app').factory(serviceId, ['$http', '$q', userAccountService]);
function userAccountService($http, $q) {
// Define the functions and properties to reveal.
var service = {
registerUser: registerUser,
loginUser: loginUser,
getValues: getValues,
};
var serverBaseUrl = "http://localhost:60737";
return service;
var accessToken = "";
function registerUser(userData) {
var accountUrl = serverBaseUrl + "/api/Account/Register";
var deferred = $q.defer();
$http({
method: 'POST',
url: accountUrl,
data: userData,
}).success(function (data, status, headers, cfg) {
console.log(data);
deferred.resolve(data);
}).error(function (err, status) {
console.log(err);
deferred.reject(status);
});
return deferred.promise;
}
function loginUser(userData) {
var tokenUrl = serverBaseUrl + "/Token";
if (!userData.grant_type) {
userData.grant_type = "password";
}
var deferred = $q.defer();
$http({
method: 'POST',
url: tokenUrl,
data: userData,
}).success(function (data, status, headers, cfg) {
// save the access_token as this is required for each API call.
accessToken = data.access_token;
// check the log screen to know currently back from the server when a user log in successfully.
console.log(data);
deferred.resolve(data);
}).error(function (err, status) {
console.log(err);
deferred.reject(status);
});
return deferred.promise;
}
function getValues() {
var url = serverBaseUrl + "/api/values/";
var deferred = $q.defer();
$http({
method: 'GET',
url: url,
headers: getHeaders(),
}).success(function (data, status, headers, cfg) {
console.log(data);
deferred.resolve(data);
}).error(function (err, status) {
console.log(err);
deferred.reject(status);
});
return deferred.promise;
}
// include the Bearer token with each call to the Web API controllers.
function getHeaders() {
if (accessToken) {
return { "Authorization": "Bearer " + accessToken };
}
}
}
})();
WebAPI2 Solution
WebApiConfig.cs*
public static class WebApiConfig { public static void Register(HttpConfiguration config) { // Web API configuration and services // Configure Web API to use only bearer token authentication. config.SuppressDefaultHostAuthentication(); config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));
//Enable CORS for all origins, all headers, and all methods,
// You can customize this to match your requirements
var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
The issue persists while attempting to test the Register function during the tutorial. An error message reading
Failed to load resource: net::ERR_CONNECTION_REFUSED