How to pass Authorization Token in Header Angular JS

Question

In my controller I am trying to call my API but I am unable to pass Autherization token.

I have created a config var and passing my token in it but getting following response:

900902Missing CredentialsRequired OAuth credentials not provided. Make sure your API invocation call has a header: "Authorization: Bearer ACCESS_TOKEN"

** JS Code **

 app.controller("AuthenticationController", function($scope, API_URL, vcRecaptchaService, $http) {

       var config = {
         headers: {
           'Authorization': 'Bearer 00000-e5673-346756f-8676-f7567561a'
         }
       };
       $scope.verifyRecaptcha = function() {

         if (vcRecaptchaService.getResponse() === "") {
           alert("User did not resolve the recaptcha")
         } else {
           var post_data = {
             'g-recaptcha-response': vcRecaptchaService.getResponse()
           }
           $http.post('https:1.1.1.1/abc/vdc/verify', config, post_data).success(function(response) {

               if (response.success === true) {
                 alert("Successfully resolved the recaptcha.");
               } else {
                 alert("User verification failed");
               }
             })
             .error(function(error) {
               alert("Error Occured while resolving recaptcha.");
               console.log(error);
             })
         }
       }

Have you tried $http.defaults.headers.common['Authorization'] = 'Bearer ACCESS_TOKEN '; refer this stackoverflow.com/questions/32425107/… — Jayant Patil
– Jayant Patil, Commented Jul 11, 2017 at 7:41

Karim · Accepted Answer · 2019-05-08 11:39:23Z

2

i think you've switched the position of the payload and the header

should be http.post(url, data, config) instead of http.post(url, config, data)

link to doc

I'd recommend to put all the logic inside an http interceptor, so the auth header will be appended to each request.

edited May 8, 2019 at 11:39

answered Jul 11, 2017 at 7:47

Karim

8,6823 gold badges27 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maheen Nasir Over a year ago

Thanks bro. Banging head with walls.

Arun Sahani · Accepted Answer · 2017-07-11 07:48:29Z

1

To pass authorization in header, include $httpProvider in your angular module.

And the following function as factory :

function authInterceptor($localStorage) {

        return {
            request: function (config) {
                config.headers = config.headers || {};
                if ($localStorage.token) {
                    config.headers.Authorization = 'Bearer' + 
                    $localStorage.token;
                }
                return config;
            },
        };

    }

And call this factory in your module. So it will add Authorization header in all your $http requests automatically. And you don't need to add authorization header in each request.

answered Jul 11, 2017 at 7:48

Arun Sahani

726 bronze badges

2 Comments

Maheen Nasir Over a year ago

I dont want to use local storage

Arun Sahani Over a year ago

OK. you can use another way instead of local storage.

Collectives™ on Stack Overflow

How to pass Authorization Token in Header Angular JS

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related