web-dev-qa-db-ja.com

各ヘッダーにjson Webトークンを追加するにはどうすればよいですか？

したがって、私は認証にJSON Webトークンを使用しようとし、それらをヘッダーに添付してリクエストで送信する方法を理解しようと苦労しています。

私は https://github.com/auth0/angular2-jwt を使用しようとしましたが、Angularでそれを機能させることができず、あきらめて、私は考えましたすべてのリクエストでJWTを送信する方法、またはヘッダー（できればヘッダー）でJWTを送信する方法を理解することができますが、思ったよりも少し難しいだけです。

これが私のログインです

submitLogin(username, password){
        console.log(username);
        console.log(password);
        let body = {username, password};
        this._loginService.authenticate(body).subscribe(
            response => {
                console.log(response);
                localStorage.setItem('jwt', response);
                this.router.navigate(['UserList']);
            }
        );

    }

そして私のlogin.service

authenticate(form_body){
        return this.http.post('/login', JSON.stringify(form_body), {headers: headers})
                .map((response => response.json()));
    }

私はこれらが本当に必要ではないことを知っていますが、多分それは助けになるでしょう！このトークンが作成されて保存されたら、2つのことを行い、ヘッダーで送信し、これで入力した有効期限を抽出します。

Node.jsログインコードの一部

var jwt = require('jsonwebtoken');
function createToken(user) {
  return jwt.sign(user, "SUPER-SECRET", { expiresIn: 60*5 });
}

angularサービスを介して、このサービスを使用してノードに返送しようとしています。

getUsers(jwt){
        headers.append('Authorization', jwt);
        return this.http.get('/api/users/', {headers: headers})
            .map((response => response.json().data));
    }

JWTは、コンポーネントを介してサービスに渡すローカルストレージ内の私のwebtokenです。

エラーはどこにも発生しませんが、ノードサーバーに到達しても、ヘッダーで受信することはありません。

'content-type': 'application/json',
 accept: '*/*',
 referer: 'http://localhost:3000/',
 'accept-encoding': 'gzip, deflate, sdch',
 'accept-language': 'en-US,en;q=0.8',
 cookie: 'connect.sid=s%3Alh2I8i7DIugrasdfatcPEEybzK8ZJla92IUvt.aTUQ9U17MBLLfZlEET9E1gXySRQYvjOE157DZuAC15I',
 'if-none-match': 'W/"38b-jS9aafagadfasdhnN17vamSnTYDT6TvQ"' }
jsonangularjwtjson-web-tokenangular2-services
8
Morgan G

カスタムhttpクラスを作成し、requestメソッドをオーバーライドして、すべてのhttpリクエストにトークンを追加します。

http.service.ts

import {Injectable} from '@angular/core';
import {Http, XHRBackend, RequestOptions, Request, RequestOptionsArgs, Response, Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class HttpService extends Http {

  constructor (backend: XHRBackend, options: RequestOptions) {
    let token = localStorage.getItem('auth_token'); // your custom token getter function here
    options.headers.set('Authorization', `Bearer ${token}`);
    super(backend, options);
  }

  request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
    let token = localStorage.getItem('auth_token');
    if (typeof url === 'string') { // meaning we have to add the token to the options, not in url
      if (!options) {
        // let's make option object
        options = {headers: new Headers()};
      }
      options.headers.set('Authorization', `Bearer ${token}`);
    } else {
    // we have to add the token to the url object
      url.headers.set('Authorization', `Bearer ${token}`);
    }
    return super.request(url, options).catch(this.catchAuthError(this));
  }

  private catchAuthError (self: HttpService) {
    // we have to pass HttpService's own instance here as `self`
    return (res: Response) => {
      console.log(res);
      if (res.status === 401 || res.status === 403) {
        // if not authenticated
        console.log(res);
      }
      return Observable.throw(res);
    };
  }
}

ここで、メインモジュールを構成して、XHRBackendをカスタムhttpクラスに提供する必要があります。メインモジュール宣言で、次をプロバイダー配列に追加します。

app.module.ts

import { HttpModule, RequestOptions, XHRBackend } from '@angular/http';
import { HttpService } from './services/http.service';
...
@NgModule({
  imports: [..],
  providers: [
    {
      provide: HttpService,
      useFactory: (backend: XHRBackend, options: RequestOptions) => {
        return new HttpService(backend, options);
      },
      deps: [XHRBackend, RequestOptions]
    }
  ],
  bootstrap: [ AppComponent ]
})

その後、サービスでカスタムhttpプロバイダーを使用できるようになります。例えば：

user.service.ts

import { Injectable }     from '@angular/core';
import {HttpService} from './http.service';

@Injectable()
class UserService {
  constructor (private http: HttpService) {}

  // token will added automatically to get request header
  getUser (id: number) {
    return this.http.get(`/users/${id}`).map((res) => {
      return res.json();
    } );
  }
}

ソース

14
Adones Pitogo

各リクエストに対してヘッダーを透過的に設定するいくつかのオプションが表示されます。

  • デフォルトのHttpサービスの代わりに使用するHttpClientサービスを実装します。
  • RequestOptionsクラスの独自の実装を提供する
  • 自分でHttpクラスをオーバーライドする

このように、ヘッダーを1か所に設定すると、HTTP呼び出しに影響を与えます。

次の質問を参照してください。

7
Thierry Templier

Angularコードの例を示します。たとえば、プランを取得するには、次のように記述します。

 $scope.getPlans = function(){
    $http({
      url: '/api/plans',
      method: 'get',
      headers:{
        'x-access-token': $rootScope.token
      }
    }).then(function(response){
      $scope.plans = response.data;
    });
  }

サーバーでこれを行うことができます

var jwt    = require('jsonwebtoken'); // used to create, sign, and verify tokens
var config = require('./config'); // get our config file

var secret = {superSecret: config.secret}; // secret variable

// route middleware to verify a token. This code will be put in routes before the route code is executed.
PlansController.use(function(req, res, next) {

  // check header or url parameters or post parameters for token
  var token = req.body.token || req.query.token || req.headers['x-access-token'];

  // If token is there, then decode token
  if (token) {

    // verifies secret and checks exp
    jwt.verify(token, secret.superSecret, function(err, decoded) {
      if (err) {
        return res.json({ success: false, message: 'Failed to authenticate token.' });
      } else {
        // if everything is good, save to incoming request for use in other routes
        req.decoded = decoded;
        next();
      }
    });

  } else {

    // if there is no token
    // return an error
    return res.status(403).send({
        success: false,
        message: 'No token provided.'
    });

  }
});

// Routes
PlansController.get('/', function(req, res){
  Plan.find({}, function(err, plans){
  res.json(plans);
  });
});

それでも不明確な場合は、こちらのブログ投稿 JSON WebトークンによるノードAPI認証-正しい方法 で詳細を確認できます。

0
manutdfan