Question

我使用rest api在angular2中实现oauth2。后端开发人员向我提供了这些数据和登录数据。

private OauthLoginEndPointUrl = 'http://localhost:8000/oauth/token';  

private clientId ='2';

private clientSecret ='fsdfasdfaasdfasdfadsasdfadsfasdf';

如何使用密码授予连接后端？他正在使用laravel passwort

我跟着this tutorial，但似乎已经过时了

我的登录

<h1>Login</h1>
<form role="form" (submit)="login($event, username.value, password.value)">
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" #username class="form-control" id="username" placeholder="Username">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" #password class="form-control" id="password" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary btn-block btn-large">Submit</button>
</form>

logincomponent

      login(event, username, password) {

    event.preventDefault();
    this.loginService.login(username, password)
      .subscribe(
        response => {
          console.log("x");
          localStorage.setItem('token', response.access_token);
          this.router.navigate(['/home']);
        },
        error => {
          alert(error);
        }
      );
  }

login.service

import { Injectable } from '@angular/core';
import { Http , URLSearchParams , Response  } from '@angular/http';
import { Observable } from 'rxjs/Rx';


@Injectable()
export class LoginService {
  private OauthLoginEndPointUrl = 'http://localhost:8000/oauth/token';  // Oauth Login EndPointUrl to web API
  private clientId ='2';
  private clientSecret ='A4iX0neXv4LCwpWf0d4m9a8Q78RGeiCzwqfuiezn';

  constructor(public http: Http) {}

  login(username, password) : Observable {
    console.log("obs");
    let params: URLSearchParams = new URLSearchParams();
    params.set('username', username );
    params.set('password', password );
    params.set('client_id', this.clientId );
    params.set('client_secret', this.clientSecret );
    params.set('grant_type', 'password' );

    return this.http.get(this.OauthLoginEndPointUrl , {
      search: params
    }).map(this.handleData)
      .catch(this.handleError);
  }

  private handleData(res: Response) {
    let body = res.json();
    return body;
  }

  private handleError (error: any) {
    // In a real world app, we might use a remote logging infrastructure
    // We'd also dig deeper into the error to get a better message
    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
  }

  public logout() {
    localStorage.removeItem('token');
  }
}

Answer 1

以下是您需要采取的步骤概述：

在您的Angular应用中，创建一个“登录”链接，将用户发送到http://localhost:8000/oauth/token?client_id=2（URL的确切语法取决于您的后端...）。
用户看到授权提示（“允许访问...？”）。他们可以点击“允许”或“拒绝”。如果他们点击“允许”，该服务会使用授权代码将用户重定向回您的网站，例如http://localhost:4200/cb?code=AUTH_CODE_HERE。请注意，该网址现在是您的Angular应用的网址（在Angular中，您可以使用?code=访问this.route.snapshot.queryParams['code']网址参数。）
最后，您将收到的身份验证码HTTP POST到后端的另一个URL，以便将其换成令牌，例如http.post('http://localhost:8000/oauth/token', JSON.stringify({code: AUTH_CODE_HERE}))

此代码不应逐字使用，这只是一个大纲。将其调整到您的后端并查看https://aaronparecki.com/oauth-2-simplified/以获取深入信息。

SIDE NOTE。＃1和＃3中使用的网址通常不同。第一个URL是获取身份验证代码，另一个URL是为令牌交换身份验证代码。很奇怪你的后端开发者只给你一个URL。

Answer 2

试试这个。在组件

中

login() {

this
 .authService
 .login()
 .subscribe(
   (success) => {
     // do whatever you want with success response here

   },
   (error) => {
     // handle error here
   })

}

在authService中：

login() : observable {

return 
   this
    .http
    .get(OauthLoginEndPointUrl, {clientId, clientSecret })
    .map((data) => {
      return data.json();
    })
    .catch(error)

}

如何用rest api在angular2中实现oauth2？

2 个答案: