{"id":7523,"date":"2015-07-18T03:26:35","date_gmt":"2015-07-18T03:26:35","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2015\/07\/18\/satellizer-http-interceptor-open-source-projects-sahat-satellizer\/"},"modified":"2015-07-18T03:26:35","modified_gmt":"2015-07-18T03:26:35","slug":"satellizer-http-interceptor-open-source-projects-sahat-satellizer","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2015\/07\/18\/satellizer-http-interceptor-open-source-projects-sahat-satellizer\/","title":{"rendered":"Satellizer Http Interceptor-open source projects sahat\/satellizer"},"content":{"rendered":"

Currently I’m using satellizer library to authenticate using json web token. On the backend, I have tested the api and the authentication and everything is working. By the way Im using Twitter authentication.<\/p>\n

While on the frontend, which the angular part,After I have authenticated with twitter and successfully redirect to home page, I couldn’t get user’s information whenever i go to \/profile<\/strong>, it doesnt render the user’s information and when I check the network tab on google chrome, angular doesnt even call the \/api\/me route from the backend.<\/p>\n

I believe it has something to do with Http interceptor. The authorization header is set as x-access-token<\/strong> both on frontend and backend.<\/p>\n

Here’s the code.<\/p>\n

app.js\n\nangular.module('MyApp', [ 'ngMessages','ngRoute', 'ui.router','satellizer'])\n\n  .config(function($authProvider) {\n\n         \/\/ Twitter\n    $authProvider.authHeader = 'x-access-token';\n    $authProvider.httpInterceptor = true; \/\/ Add Authorization header to HTTP request\n    $authProvider.tokenPrefix = 'twitterAuth'; \/\/ Local Storage name prefix\n\n\n    $authProvider.twitter({\n      url: '\/auth\/twitter',\n      type: '1.0',\n      popupOptions: { width: 495, height: 645 }\n    });\n\n\n  })\n\n\n\n  .config(function($stateProvider, $urlRouterProvider,$locationProvider) {\n    $stateProvider\n      .state('home', {\n        url: '\/',\n        templateUrl: 'app\/views\/home.html'\n      })\n      .state('login', {\n        url: '\/login',\n        templateUrl: 'app\/views\/login.html',\n        controller: 'LoginCtrl'\n      })\n      .state('profile', {\n        url: '\/profile',\n        templateUrl: 'app\/views\/profile.html',\n        controller: 'ProfileCtrl',\n      })\n      .state('logout', {\n        url: '\/logout',\n        template: null,\n        controller: 'LogoutCtrl'\n      })\n\n\n    $urlRouterProvider.otherwise('\/');\n    $locationProvider.html5Mode(true);\n\n\n  })\n<\/code><\/pre>\n
the controllers login.js<\/p>\n
angular.module('MyApp')\n  .controller('LoginCtrl', function($scope, $auth) {\n\n    $scope.authenticate = function(provider) {\n      $auth.authenticate(provider);\n    };\n\n  });\n<\/code><\/pre>\n
profile.js<\/p>\n
angular.module('MyApp')\n  .controller('ProfileCtrl', function($scope, $auth, Account) {\n    $scope.getProfile = function() {\n      Account.getProfile()\n        .success(function(data) {\n          $scope.user = data;\n        })\n    };\n  });\n<\/code><\/pre>\n
services account.js<\/p>\n
angular.module('MyApp')\n  .factory('Account', function($http) {\n    return {\n      getProfile: function() {\n        return $http.get('\/api\/me');\n      }\n    };\n  });\n<\/code><\/pre>\n
Views profile.html<\/p>\n
\n  \n    Profile\n    \n      \n        \n          Profile Picture\n          \n        \n        \n           Display Name\n          \n        \n        \n           Email Address\n          \n        \n\n      \n    \n  \n\n<\/code><\/pre>\n
This is where the user’s information from twitter authentication should render, on the backend everything is showing when I’m using Chrome postman.<\/p>\n
I’ve been pulling my hair for the past 4 hours, so what did I do wrong over here?<\/p>\n","protected":false},"excerpt":{"rendered":"
Currently I’m using satellizer library to authenticate using json web token. On the backend, I have tested the api and the authentication and everything is working. By the way Im using Twitter authentication. While on the frontend, which the angular part,After I have authenticated with twitter and successfully redirect to home page, I couldn’t get […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7523","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=7523"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7523\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=7523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=7523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=7523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}