如何使用rest api在angular2中實現oauth2？

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

下面是你需要採取的步驟的概述：

1. 在你的角的應用程序，創建一個「登錄」鏈接將用戶發送到http://localhost:8000/oauth/token?client_id=2（該URL的確切語法取決於你的後端.. ）。

2. 用戶看到授權提示（「允許訪問...？」）。他們可以點擊「允許」或「拒絕」。如果他們點擊「允許」，服務會將用戶重定向回您的網站，並使用授權碼，如http://localhost:4200/cb?code=AUTH_CODE_HERE。請注意，該網址現在是您的Angular應用的網址（在Angular中，您可以使用this.route.snapshot.queryParams['code']訪問?code=網址參數）。

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) 

}