针对 Spring Boot REST API 验证我的 Ionic 3 应用程序

Question

这个问题一定很典型，但是我实在找不到很好的对比。

我是 Ionic 和移动开发新手。我们有一个 REST API（Spring 启动）。 API 当前仅供 AngularJS 1.5 前端使用。 AngularJS 应用程序基于标准的基于会话的身份验证进行身份验证。

我应该使用什么来验证 ionic 3 应用程序？据我了解，有2个选项：

使用与 Angular 前端相同的身份验证。
在后端实施 oauth2 并将令牌用于 ionic 应用程序。

至于现在，我知道在后端实施 oauth2 是一种方法，因为使用选项 #1 我应该将用户名和密码存储在本地存储（离子应用程序）中，这是不安全的。否则，如果我不这样做 - 每次启动应用程序时，用户都必须进行身份验证。我说的对吗？

所以，我还有选项 #2 - 在设备上存储 oauth2 令牌？

Answer 1

很适合#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

  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);
    })

  }

Answer 2

我做出的最终解决方案：

离子应用程序：

实现了类似于 Swapnil Patwa 答案的 jwt 令牌存储。

Spring后端：

尝试使用他们的原始 ouath2 包，但发现与 spring/java 一样，配置太耗时 => 制作了一个简单的过滤器，用于检查手动生成和分配的 jwt 令牌。

针对 Spring Boot REST API 验证我的 Ionic 3 应用程序

Authenticating my Ionic 3 app against Spring Boot REST API

spring

ionic-framework

ionic2

ionic3