如何使用Rest API在angular2中實現oauth2？

Question

我用rest api在angular2中實現oauth2。 后端開發人員給了我這些數據和登錄數據。

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

private clientId ='2';

private clientSecret ='fsdfasdfaasdfasdfadsasdfadsfasdf';

如何使用密碼授予功能與后端連接？ 他在用laravel passwort

我遵循了本教程，但它似乎已經過時了

我的登入

<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

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

1. 在您的Angular應用中，創建一個“登錄”鏈接，將用戶發送到http://localhost:8000/oauth/token?client_id=2 （URL的確切語法取決於您的后端...）。

2. 用戶看到授權提示（“允許訪問...？”）。 他們可以單擊“允許”或“拒絕”。 如果他們單擊“允許”，該服務將使用身份驗證代碼將用戶重定向回您的站點，例如http://localhost:4200/cb?code=AUTH_CODE_HERE 。 請注意，URL現在是您的Angular應用程序的URL（在Angular中，您可以使用this.route.snapshot.queryParams['code']來訪問?code= URL參數）。

3. 最后，您將收到的身份驗證代碼HTTP POST到后端的另一個URL，以將其交換為令牌，例如http.post('http://localhost:8000/oauth/token', JSON.stringify({code: AUTH_CODE_HERE}))

不應逐字使用此代碼，這只是一個概述。 使其適應您的后端，並查看https://aaronparecki.com/oauth-2-simplified/了解更多信息。

邊注。 ＃1和＃3中使用的URL通常不同。 第一個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)

}