Wie das umzusetzen, oauth2 in angular2 mit rest-api?
Implementiere ich oauth2 in angular2 mit der rest-api. Backend Entwickler gab mir diese Daten und login-Daten.
private OauthLoginEndPointUrl = 'http://localhost:8000/oauth/token';
private clientId ='2';
private clientSecret ='fsdfasdfaasdfasdfadsasdfadsfasdf';
Wie kann ich eine Verbindung mit backend mit Passwort geben? Er ist mit laravel passwort
Folgte ich dieses tutorial, aber es scheint veraltet
mein login
<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');
}
}
InformationsquelleAutor Tomasz Cysewski | 2017-02-14
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hier ist ein überblick der Schritte, die Sie ergreifen müssen:
In Ihrem Winkel-app, erstellen Sie ein "Log In" - link senden, den Benutzer zu
http://localhost:8000/oauth/token?client_id=2
(die genaue syntax für die URL hängt davon ab, IHRE back-End...).Sieht der Benutzer eine Berechtigung prompt ("Zugriff Erlauben...?"). Sie können entweder klicken Sie auf "Zulassen" oder "Verweigern". Wenn Sie klicken Sie auf "Zulassen" und der Dienst leitet den Nutzer wieder auf Ihre Website mit einem auth-code, so etwas wie
http://localhost:4200/cb?code=AUTH_CODE_HERE
. Beachten Sie, dass die URL ist nun die URL Ihrer Winkel-app (in Eckig können Sie den Zugriff auf die?code=
URL-Parameter mitthis.route.snapshot.queryParams['code']
).Schließlich, Sie HTTP-POST-den auth-code, den Sie erhalten haben, zu einer anderen URL im backend dafür einen token, z.B.
http.post('http://localhost:8000/oauth/token', JSON.stringify({code: AUTH_CODE_HERE}))
Dieser code sollte nicht verwendet werden, wörtlich, das ist nur ein Entwurf. Passen Sie IHRE backend-und check-out https://aaronparecki.com/oauth-2-simplified/ für die ausführlichen info.
SEITE BEACHTEN. Die URLs in #1 und #3 sind in der Regel anders. Die erste URL ist, erhalten Sie den auth-code, und die andere URL ist der Austausch der auth-code für ein token. Seltsam, dass Ihr backend Entwickler nur gab Sie eine URL ein.
In diesem Fall wird in Schritt #1, anstatt den Benutzer auf die URL direkt, Sie zeigen dem Nutzer ein Benutzername/Passwort-Formular und buchen Sie die Werte, die er im Formular angegeben an die URL an.
InformationsquelleAutor AngularChef
Versuchen. In Komponente
In authService:
InformationsquelleAutor rgk