使用 asp.net web api 验证 Ionic 2 应用程序答案

【问题标题】：Authenticate Ionic 2 app with asp.net web api使用 asp.net web api 验证 Ionic 2 应用程序
【发布时间】：2017-02-16 11:57:01
【问题描述】：

我使用 ASP.net Web API 2 作为后端，使用 Ionic 2 应用作为前端。

我正在使用 Microsoft 的 UserStore 管理器对我的应用程序进行身份验证。

它使用基于令牌的身份验证（如果我使用了错误的命名，请原谅我，我还是新手）。

我能够通过 Postman 获取令牌，然后在请求标头中使用此令牌，例如“Bearer [token]”，以从我的 Web api 获取任何数据。

如您所见，Method 是 Post，Content-Type 是 x-www-form-urlencoded。

这样做会生成一个 access_token，然后我将这个令牌用于我的标题中以获得我需要的东西。

在我的 Ionic App 中，我使用名为 login() 的公共方法创建了一个 auth-service.ts

  public login(credentials) {
if (credentials.username === null || credentials.password === null) {
  let error = this.alertController.create({
    title:'Lol',
    message:'incomplete credentials, Fill them up and come back',
    buttons: ['ok']
  });

  error.present();
}
else {
  return new Promise(resolve => {
    this.http.post(`${this.baseUrl}/token`,
    {
      grant_type:'password',
      username:credentials.username,
      password:credentials.password
    }).map(res => console.log(resolve(res.json())));
  });
}

}

这是调用此方法的 circles.ts 中的代码：

  login(){
let credentials = {
  username:"01286220336",
  password:"P@$$w0rd"
}
this.authService.login(credentials)
.then(data => console.log(data))
.catch(data => console.log(data));

}

我的问题是当我在 Circles.ts 中调用登录方法时，没有任何反应，我不知道为什么。我已经尝试了 2 周，但我放弃了。

我也不确定我是否在 authservice.ts 中实现了登录方法。

最后我只需要以某种方式获得这个令牌，如果有人能让我走上正确的道路，我将非常感激！

【问题讨论】：

问题是格式..你必须设置你登录的标题以正确的格式（x-www-form-url编码）发送它，因为默认它作为json发送..和你必须连接用户名/密码/grant_type 像.. username=xxxx&password=xxxx&grant_type=password
return new Promise(resolve => { this.http.post(${this.baseUrl}/token, username=${credentials.username}&password=${credentials.password}&grant_type=password ).map(res => resolve(res.json())); });这是新的 sn-p ，仍然没有返回任何内容
等待你覆盖你的帖子的标题..类似于：this.http.post(${this.baseUrl}/token,username=${credentials.username}&password=$ {credentials.pass‌word}&grant_type=pas‌sword,{headers:{'Content-type:''x-www-form-urlencoded'}})
我已经进行了编辑...订单已磨损 ....标题在最后

标签： angular asp.net-web-api ionic2

【解决方案1】：

尝试用以下代码替换 else 部分。

else{
    let authObject = "username=xxxx&password=xxxx&grant_type=password";
    let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
    headers.append('Accept', 'application/json');
    let options = new RequestOptions({ headers: headers });
    return this.http.post(this.baseUrl + '/token', authObject, options)
      .toPromise()
      .then(res => {
           alert(JSON.stringify(res.json(), null, 4));
      });
}

【讨论】：