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

Question

这个问题一定很典型，但我真的找不到一个好的比较。

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

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

1. 使用与 Angular 前端相同的身份验证。
2. 在后端实现 OAuth2，并将令牌用于 Ionic 应用。

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

所以，这给我留下了选项 #2 - 在设备上存储 oauth2 令牌？

Answer 1

很好选择#2。这是我管理令牌的方式。 我使用离子存储来存储令牌和在运行时保存令牌的提供程序 config.ts。

配置.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;
}
}

身份验证

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(in constructor(

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

和最后注销.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 PatwaAnswer 的 JWT 令牌存储。

弹簧后端：

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