Angular2、ionic2、Springセキュリティ： "code"： "401"、 "message"： "このリソースにアクセスするには完全な認証が必要です"

Question

私が開発しているモバイルアプリケーションのログイン認証を試みていますin

REST APIを使用したAngular2（final）、rc6およびionic2。

私は2つのAPIをした、

1は、他の成功した認証のユーザーのユーザーの詳細情報を取得することで、

をログインIDとパスワードを送信するためです。

私はこの目的のために春のセキュリティを使用しています。

"code"： "401"、 "message"： "このリソースにアクセスするには完全な認証が必要です"というエラーが表示されます。

私は、これに基づいてstackoverflowに多くの投稿があることを知っていますが、廃止されているか、typescript.Alsoで書かれていないので、私はそれらを使用することはできません。私は2回通話しなければならない。私はどこが間違っているのか分かりません。私はこれが私にとっては非常に単純なエラーであるはずです。

これはlogin.tsページで、ユーザーから入力したパラメータを取得します。その後、私は2つのhttpは、ユーザーの詳細情報を取得するにはパラメータ

を送信するには

1. を呼び出します。

ユーザーが認証され、コードが200になると「コード」が生成されます。私のプログラムはここまでうまく動作しますが、このエラーが発生するため、ユーザーの詳細を取得できません。

import { Component } from '@angular/core'; 
    import { NavController, NavParams } from 'ionic-angular'; 
    import { FormBuilder, FormGroup, Validators, AbstractControl } from  '@angular/forms'; 
    import { checkFirstCharacterValidator } from '../Validators/customvalidator'; 
    import { EmailValidator } from '../Validators/emailvalidator'; 
    import { Http, Headers, Response, RequestOptions, BaseRequestOptions } from '@angular/http'; 
    import { Observable } from 'rxjs/Observable'; 


    import 'rxjs/add/operator/map'; 
    import 'rxjs/add/operator/do'; 
    import 'rxjs/add/operator/catch'; 

    declare var sha256_digest: any; 
    @Component({ 
     selector: 'page-login', 
     templateUrl: 'login.html' 
    }) 
    export class LoginPage 
    { 
     loginform : FormGroup; 
     constructor(public navCtrl: NavController, public navParams: NavParams, fb: FormBuilder,public http:Http) 
     { 
     this.loginform = fb.group 
     ({ 
      'email' : [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(40),checkFirstCharacterValidator(/^\d/), 
             EmailValidator.isValidMailFormat])], 
      'password': [null, Validators.compose([Validators.required, Validators.maxLength(25),])] 
     }) 
     } 

     private extractData(res: Response) { 
     let body = res.json(); 
     console.log(body); 
     return body || {}; 
     } 

     submitForm(value: any):void 
     { 
     console.log('Form submited!'); 
     value.password = sha256_digest(value.password); 
     console.log(value); 

      var userdata = 
      { 
      login:value.email, 
      password:value.password 
      }; 

      let headers = new Headers({'Content-Type': 'application/json'}); 
      headers.append('Authorization','Basic '); 
      let options = new RequestOptions({headers: headers}); 

      this.http.post('dummy/api/login',userdata,options).map(res=>res.json()).subscribe(resp=> 
     { 
       console.log(resp.data); 
       if(resp.code === 200) 
       { 
        return this.http.get('dummy/api/auth/registration/success',options) 
        .subscribe(resp=>{ 
        console.log(resp); 
       }); 
       } 
     }, 
     err=>{console.log(err);}, 
     ()=>{}); 

     } 

     ionViewDidLoad() { 
     console.log('ionViewDidLoad LoginPage'); 
     } 

    } 

私もヘッダのこのバージョンを試してみました：

Spring-Security-Oauth2: Full authentication is required to access this resource

401 full authentication is required to access this resource：

let headers = new Headers(); 
    headers.append("Authorization", "Basic " + btoa(userdata.login + ":" + userdata.password)); 
    headers.append("Content-Type", "application/x-www-form-urlencoded"); 

親切に私はこのerror.Theseを是正助けるが、私がから試したすべての源であります

Angular 2 Basic Authentication not working

Angular2/Http (POST) headers

Answer 1

私は同じエラーがありました。提案された解決策のどれも私のために働いたことはありません。問題は、別のポートにあり、Spring全体（私の場合はマイクロサービス）の設定に含まれていなかったUI /クライアントからバックエンドサービスにアクセスしていたことでした。結局それはすべてCORSに来た。

下記のソリューションは、別のポートからUIやその他のサービスによってアクセスされているバックエンドサービス（Spring Securityを使用）で実装する必要があります。

希望すると助かります！

@Component 
@Order(Ordered.HIGHEST_PRECEDENCE) 
public class SimpleCorsFilter implements Filter { 

    Logger log = LoggerFactory.getLogger(this.getClass()); 

    @Override 
    public void init(FilterConfig fc) throws ServletException { 
    } 

    @Override 
    public void doFilter(ServletRequest req, ServletResponse resp, 
         FilterChain chain) throws IOException, ServletException { 

     HttpServletResponse response = (HttpServletResponse) resp; 
     HttpServletRequest request = (HttpServletRequest) req; 
     // FIXME: this is a temp solution for CORS 
     response.setHeader("Access-Control-Allow-Origin", "http://localhost:4200"); 
     response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); 
     response.setHeader("Access-Control-Max-Age", "3600"); 
     response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization, Content-Type, Authorization, credential, X-XSRF-TOKEN"); 

     if ("OPTIONS".equalsIgnoreCase(request.getMethod())) { 
      response.setStatus(HttpServletResponse.SC_OK); 
     } else { 
      chain.doFilter(req, resp); 
     } 

    } 

    @Override 
    public void destroy() { 
    } 

}