I am new to WebAPI, AngularJS and .NET Authentication and I use this tutorial HERE (~ up to 10 minutes) and I get an error message regarding Failed to load resource: net::ERR_CONNECTION_REFUSED , usually I can just delete Google, but I'm really lost, because for me it's all new technology.
Everything worked smoothly, until I tried to "register" at the end of the tutorial, an error appears here. Can someone double check this tutorial and see if they can get a job registration or quickly say that something they use is outdated or broken? As mentioned, it takes literally less than 10 minutes.
Here is my code regardless
Corner 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 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; } // we have to 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) {// Web API configuration and services // Configuring the 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 } ); }
}
Again, the error I get is testing the Register function for the first time in the tutorial. I get Failed to load resource: net::ERR_CONNECTION_REFUSED