title: Basic Authentication via Angular, why is this throwing error 401
body: <p>I have an Angular application that I'm trying to authenticate with Basic authentication to my REST service. I'm adding the authorization header with the corresponding "Base {username:password}" encoded in base64 and I'm calling my rest api but keep getting back a 401. I'm obviously missing a step here...</p>
  
  <p>Here's the angular code:</p>
  
  <pre><code>angular
      .module('myApp.services')
      .factory('AuthenticationService', ['$http', '$q', '$location', 'Base64', 'SessionService', function ($http, $q, $location, encoder, session) {
          return {
              authenticate:
                  function (user, password) {
  
                      var deferred = $q.defer();
                      var url = "http://localhost:28924/api/login";
  
                      if (user &amp;&amp; password) {
                          var encoded = encoder.encode(user + ':' + password);
                          $http.defaults.headers.common.Authorization = 'Basic ' + encoded;
                          console.log('here');
                          sessionStorage.setItem('Authorization', $http.defaults.headers.common.Authorization);
  
                          $http.get(url)
                              .success(function (data, status, headers, config) {
                                  console.log('login Successful in Authentication service');
                                  deferred.resolve(data);
                                  session.setSession();
                              })
                              .error(function (data, status, headers, config) {
                                  deferred.reject(status);
                              });
                      }
                      else {
                          deferred.reject(401);
                      }
  
                      return deferred.promise;
                  },
              logout:
                  function () {
                      $http.defaults.headers.common.Authorization = null;
                      $http.defaults.headers.common.Impersonate = null;
                      $location.url('/login');
                  }
          };
      }
      ]
  );
  </code></pre>
  
  <p>Here's my LoginController:</p>
  
  <pre><code>public class LoginController : ApiController
  {
      public LoginController()
      {
  
      }
      [Authorize]
      public HttpResponseMessage Get()
      {
          //return this.ControllerContext.Request.CreateResponse(HttpStatusCode.OK);
  
          if (this.User.Identity.IsAuthenticated)
          {
              return this.ControllerContext.Request.CreateResponse(HttpStatusCode.OK);
          }
          return this.ControllerContext.Request.CreateResponse(HttpStatusCode.Unauthorized);
      }
  }
  </code></pre>
  
  <p>And I've also set my IISExpress config file to "Allow" basic authentication, like described here: <a href="https://stackoverflow.com/questions/4762538/iis-express-windows-authentication">set basic authentication in IIS Express</a>.</p>
  
  <p>Does just adding the "Authorize" attribute to my Get method let the host know to check the credentials that were passed in the Authorization header? Or do I need to implement something extra, like in this SO post (the question part): <a href="https://stackoverflow.com/questions/15961875/how-to-tell-authorize-attribute-to-use-basic-authentication-with-custom-messag">basic authentication with custom message handler</a>?</p>
  
  <p>It seems to me that there needs to be more in my "Get" method, but I can't find any good examples to help walk me through this....(if you haven't figure it out, this is my first try with basic authentication AND REST api/services.</p>
  
  <p><strong>Edit:</strong> Aha! I'm getting closer. @Chandermani's response for some reason prompted me to check out my OWN web.config and I realized I didn't have this:</p>
  
  <pre><code>&lt;security&gt;
    &lt;authentication&gt;
      &lt;basicAuthentication enabled="true"/&gt;
    &lt;/authentication&gt;
  &lt;/security&gt;
  </code></pre>
  
  <p>Adding this now prompts me for my credentials when navigating to the .../api/login page.</p>
  
  <p><strong>Edit2:</strong> Checking to see what was sent across the wire via Chrome Dev tools shows that the authorization header is being sent, while specifying Basic authentication and my base64 encoded username and password. Here's what it looks like:</p>
  
  <pre><code>Request URL:http://localhost:28924/api/login
  Request Method:GET
  Status Code:401 Unauthorized
  Request Headersview source
  Accept:application/json, text/plain, */*
  Accept-Encoding:gzip,deflate,sdch
  Accept-Language:en-US,en;q=0.8
  Authorization:Basic YWblahblahblahDE=
  Connection:keep-alive
  Host:localhost:28924
  Referer:http://localhost:28924/index.html
  User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
  Response Headersview source
  Cache-Control:private
  Content-Length:6333
  Content-Type:text/html; charset=utf-8
  Date:Wed, 08 Jan 2014 14:32:14 GMT
  Server:Microsoft-IIS/8.0
  WWW-Authenticate:Negotiate
  WWW-Authenticate:NTLM
  WWW-Authenticate:Basic realm="localhost"
  X-Powered-By:ASP.NET
  X-SourceFiles:=?UTF-8?B?QzpcU291cmNlQ29kZVxUcmlhbHNNb2JpbGVcVHJhaWxzTW9iaWxlLldlYlxhcGlcbG9naW4=?=
  </code></pre>
  
  <p>When the api/login page prompts me for my credentials it gets stuck in an infinite loop. I'll enter them, hit enter, then it asks for them again.</p>
  
  <p>Edit3: Ok, I'm able to authenticate!!! I had to specify the domain in front of my username since I'm running localhost...</p>
  
  <p>Thanks everyone for pointing me in the right direction!</p>