AngularJSトークンベースの認証ヘッダー

Question

私は多少角度があり、私が始めたアプリを持っています。これの始まりは、REST APIをヒットしてユーザーを認証し、ユーザーを検証するJSONトークンを返すシンプルなログインにすぎません。それ以降に行われたリクエストはすべて、トークンを含む認証ヘッダーを送信して、もちろんログインしていることを確認します。ここで

は私のコードは、これまでである -

AngularJS：

;(function(){ 

function authInterceptor(API, auth) { 
    return { 
    request: function(config) { 
     return config; 
    } 
    } 
} 


function authService() { 

} 


function userService($http, API, auth) { 

    $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;'; 
    $http.defaults.transformRequest = [function(data) { 
     return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data; 
     }]; 

    var self = this; 

    self.login = function(username, pwd, ctrl) { 
     ctrl.requestdata = API + '/winauth' + '; with ' + username; 
    return $http.post(API + '/winauth', { 
     username: username, 
     pwd: pwd 
     }) 
    }; 

    var param = function(obj) { 
    var query = '', 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; 
    }; 

} 


    function MainCtrl(user, auth) { 
    var self = this; 

    function handleRequest(res) { 
     self.responsedata = res; 
     self.message = res.data.message; 
    } 

    self.login = function() { 
     this.requestdata = 'Starting request...'; 
     user.login(self.username, self.pwd, self) 
     .then(handleRequest, handleRequest) 
    } 
    } 

    angular.module('app', []) 
    .factory('authInterceptor', authInterceptor) 
    .service('user', userService) 
    .service('auth', authService) 
    .constant('API', 'http://development-server.com:8080/ecar/api') 
    .config(function($httpProvider) { 
    $httpProvider.interceptors.push('authInterceptor'); 
    }) 
    .controller('Main', MainCtrl) 
    })(); 

私は今、これはJWT ませであり、このが動作していることとしましょう。それはサーバに当たって、認証が成功した後に（私の上司からの言葉が続きます）** 返される応答は、フィールド名 "auth_token"を含むJSON配列で、後続のリクエストとともに返されるトークンを含んでいます。そのトークンは、X-PCC-API-TOKENという名前のカスタム要求ヘッダーとして後続の要求と共に送信する必要があります。あなたはそれが続くとトークンが含まれているフィールド名「auth_token」とJSON配列を返して見ることができるように

http://appsdev.pccportal.com:8080/ecar/api/winauth; with myUsername 
     {"data":{"status":"Authentication has succeeded.","auth_token":"qidn0pwcuvl4jbml73qls94hk4"},"status":200,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"url":"http://development-server.com:8080/ecar/api/winauth","data":{"username":"myUsername","pwd":"myPassword"},"headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/x-www-form-urlencoded;"}},"statusText":"OK"} 

：ここで**

は、サーバーが返す応答です。

私はトークンをローカルストレージに保存し、私の上司が（彼はAPIを設計した人である）"そのトークンをすべての後続のリクエストで送り返す必要があると思います迎撃のための

function authService($window) { 
    var self = this; 

    self.parseJwt = function(token) { 
    var base64Url = token.split('.')[1]; 
    var base64 = base64Url.replace('-', '+').replace('_', '/'); 
    return JSON.parse($window.atob(base64)); 
    } 

    self.saveToken = function(token) { 
    $window.localStorage['jwtToken'] = token; 
    } 

    self.getToken = function() { 
    return $window.localStorage['jwtToken']; 
    } 

    self.isAuthed = function() { 
    var token = self.getToken(); 
    if(token) { 
     var params = self.parseJwt(token); 
     return Math.round(new Date().getTime()/1000) <= params.exp; 
    } else { 
     return false; 
    } 
    } 

    self.logout = function() { 
    $window.localStorage.removeItem('jwtToken'); 
    } 
} 

とこの：

トークンは、これは私が通過してたチュートリアルにあった「X-PCC-API-TOKENというカスタムリクエストヘッダとして

を送信する必要があります

function authInterceptor(API, auth) { 
    return { 

    request: function(config) { 
     var token = auth.getToken(); 
     if(token && config.url.indexOf(API) === 0) { 
     config.headers.Authorization = 'Bearer ' + token; 
     } 

     return config; 
    } 
    } 

} 

しかし、それは明らかにJWTです。私は上司のガイドラインに準拠し、JWTも使用しないことが必要です。

すべてのコードは申し訳ありません。それが悪いことではないことを願っています。しかし、これをうまくまとめて、それ以降のリクエストごとにX-PCC-API-TOKENという名前のカスタムヘッダーとして返す必要のあるトークンを含むJSON配列を返信し、トークンをローカルストレージに保存しておきます。

私は本当にこれについて助けが必要です。そして、これをどうやって行うのか本当に分からない。

ありがとうございました

Answer 1

基本的には、ログイン方法が多少有効です。あなたは、APIサーバーをヒットし、あなたはトークンで応答を取得します。ここまでは順調ですね。 localStorageにトークンを保存して、すべてのAPI呼び出しのX-PCC-API-TOKENヘッダーに追加するだけです。

あなたがストレージを扱う別のサービスを作成することもできますが、あなたは/複雑さのようなものを必要としたくない場合は、ログインから返されたデータを扱うどこ、あなただけの

var authToken = res.data.auth_token; 
localStorage.setItem('token', authToken); 

を追加することができます - あなたに場合は、あなたのhandleRequest関数です。

その後、インターセプタを追加するだけです。 JWTのあなたの例は、あなたが実際に必要とするものに本当に近いです。 （JWTは、だけではなく、あなたが必要とするものをAuthorizationヘッダを設定している。）

function authInterceptor() { 
    return { 
     request: function (request) { 
      request.headers = request.headers || {}; 
      request.headers['X-PCC-API-TOKEN'] = localStorage.getItem('token'); 
      return request; 
     } 
    }; 
} 

明らかにあなたがストレージを処理するためにサービスを使用した場合、あなたはそれを通じてトークンを得ることができます。また、API呼び出しにカスタムヘッダーを追加するだけでよいので、単純なifに入れて、それが1であるかどうかを確認してください。