スプリングブートREST APIに対してIonic 3アプリを認証

Question

質問は非常に典型的でなければなりませんが、私は本当に良い比較を見つけることができません。

私はIonicをnew &モバイル用の開発者です。 REST API（Spring Boot）があります。 APIは現在、AngularJS 1.5フロントエンドのみで使用されています。 AngularJSアプリは、標準のセッションベースの認証に基づいて認証されます。

イオン3アプリの認証にはどうすればよいですか？ 私が理解するように、2つのオプションがあります：

1. Angularフロントエンドと同じ認証を使用してください。
2. バックエンドでoauth2を実装し、イオンアプリケーション用にトークンを使用します。

は、今のように、私は、バックエンドでのOAuth2実装する私は安全ではありません、ローカルストレージ内のユーザ名&パスワード（イオンアプリ）を、保存する必要がありますオプション＃1であるため移動するための方法であることを理解します。それ以外の場合は、私はそれをしない - ユーザーは、アプリケーションが起動されるたびに認証する必要があります。私は正しい？

だから、オプション＃2 - デバイスにoauth2トークンを保存しますか？

Answer 1

logOut(): void { 
    this.shared.Alert.confirm('Do you want to logout?').then((data) => { 
     this.shared.LS.remove('user').then(() => { 
     this.tokenProvider.dropAuthData(); 
     this.app.getRootNav().setRoot(AuthPage); 
     },() => { 
     this.shared.Toast.show('Oops! something went wrong.'); 
     }); 
    }, err => { 
     console.log(err); 
    }) 

    } 

最終溶液私は作った：

イオンアプリ：

はSwapnil Patwa答えに似JWTトークンストレージを実装しました。

春のバックエンド：

は元ouath2パッケージを使用しようとしましたが、いつものように、スプリング/ javaので、コンフィグは時間がかかりすぎるためにチェックしている単純なフィルタを> =作られていることが判明手動で生成された&はjwtトークンを割り当てられました。

Answer 2

＃2と一緒に行けます。ここで私はトークンを管理する方法です。 私はイオンストレージを使用してトークンを格納し、実行時にトークンを保持するプロバイダconfig.tsを使用します。

config.ts

import { Injectable } from '@angular/core'; 
@Injectable() 
export class TokenProvider { 
    public token: any; 
    public user: any = {}; 

    constructor() { } 
    setAuthData (data) { 
    this.token = data.token; 
    this.user = data 
    } 
    dropAuthData() { 
    this.token = null; 
    this.user = null; 
    } 
} 

auth.ts

import { TokenProvider} from '../../providers/config'; 

constructor(public tokenProvider: TokenProvider) { } 

login() { 
     this.api.authUser(this.login).subscribe(data => { 
     this.shared.Loader.hide(); 
      this.shared.LS.set('user', data); 
      this.tokenProvider.setAuthData(data); 
      this.navCtrl.setRoot(TabsPage); 
     }, err => { 
     console.log(err); 
     this.submitted = false; 
     this.shared.Loader.hide(); 
     this.shared.Toast.show('Invalid Username or Password'); 
     this.login.password = null; 
     }); 
} 

と私はチェックアプリの起動を行います。 （コンストラクタで） app.component.ts

shared.LS.get('user').then((data: any) => { 
     if (!data) { 
     this.rootPage = AuthPage; 
     } else { 
     tokenProvider.setAuthData(data); 
     this.rootPage = TabsPage; 
     } 
    }); 

api.provider.ts

updateUser(data): Observable <any> { 
     let headers = new Headers({ 
      'Content-Type': 'application/json', 
      'X-AUTH-TOKEN': (this.tokenProvider.token) 
     }); 
    return this.http.post(`${baseUrl}/updateUser`, JSON.stringify(data), { 
      headers: headers 
     }) 
     .map((response: Response) => { 
      return response.json(); 
     }) 
     .catch(this.handleError); 
} 

そして最後logout.ts