如何使用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) 

}