如何使用Angular 2发送OAuth2的客户端ID和密码ID? [英] How to send the client id and secret id of OAuth2 using Angular 2?

问题描述

我有使用Spring Boot和资源服务器和授权服务器开发的用于OAuth2的Rest API.我可以使用cURL，POSTMAN Rest客户端成功获取令牌，并可以使用OAuth提供的令牌请求授予的服务.现在，我需要知道如何使用angular2传递OAuth2 client_id，secret_id.我将请求传递为getOAuthToken(clientCredintial):可观察{

I have the Rest API for OAuth2 developed using spring boot with resource server and authorization server. I could successfully fetch the token using cURL, POSTMAN Rest client and could request the granted service using the token provided by OAuth. Now, i need to know how to pass the OAuth2 client_id, secret_id using angular2. i am passing request as getOAuthToken(clientCredintial):Observable {

var body = `username=admin&password=nex1234`;
var headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
let response = this.http.post(`${AppSettings.BACK_ENDPOINT}/oauth/token`,body,{ headers: headers });
let oauthTokenItems = response.map(mapOAuthTokenItems);
return oauthTokenItems;

}但是我在浏览器上得到异常选项 http://localhost:8080/rwsweb/oauth/token 401()

} but i am getting Exceptions on Browser as OPTIONS http://localhost:8080/rwsweb/oauth/token 401 ()

oauth-token:1 XMLHttpRequest cannot load                 http://localhost:8080/rwcweb/oauth/token. Response for preflight has invalid     HTTP status code 401
error_handler.js:47 EXCEPTION: Response with status: 0  for URL: null
ErrorHandler.handleError @ error_handler.js:47
next @ application_ref.js:272
schedulerFn @ async.js:82

Subscriber.js:227未捕获的响应{_body:ProgressEvent，状态:0，确定:false，statusText:"，标头:Headers…} 在此处输入代码

Subscriber.js:227 Uncaught Response {_body: ProgressEvent, status: 0, ok: false, statusText: "", headers: Headers…}enter code here

推荐答案

使用代码:

import { Injectable } from '@angular/core'
import { Http } from '@angular/http';
import { Headers, RequestOptions } from '@angular/http';

@Injectable()
export class LoginService {
    private urlLogin: string;

    constructor(private http: Http) {
        this.urlLogin = "http://yourserver/oauth/token";
    }

    public login(user) {

        let headers = new Headers({
            "Content-Type": "application/x-www-form-urlencoded",
            "Accept": "application/json",
            "Authorization": "Basic " + btoa("yourclientid" + ':' + "yourclientsecret")
        });

        let options = new RequestOptions({ headers: headers });

        let data = "username=" + user.yourlogin + "&password=" + encodeURIComponent(user.yourpass) + "&grant_type=password&" +
            "client_secret=yourclientsecret&client_id=yourclientid";

        return this.http.post(this.urlLogin, data, options)
            .map(res => res.json());
    }

}

这篇关于如何使用Angular 2发送OAuth2的客户端ID和密码ID?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！