title: How to implement oauth2 in angular2 with rest api?
body: <p>I implement oauth2 in angular2 with rest api. Backend developer gave me these data, and login data.</p>
  
  <pre><code>private OauthLoginEndPointUrl = 'http://localhost:8000/oauth/token';  
  
  private clientId ='2';
  
  private clientSecret ='fsdfasdfaasdfasdfadsasdfadsfasdf';
  </code></pre>
  
  <p>How do I connect with backend, using password grant? He is using <a href="https://laravel.com/docs/5.4/passport" rel="nofollow noreferrer">laravel passwort</a></p>
  
  <p>I followed <a href="http://whitepaper-achref.rhcloud.com/angular2-rest-api-oauth/" rel="nofollow noreferrer">this tutorial</a> but it seems to be outdated </p>
  
  <p>my login</p>
  
  <pre><code>&lt;h1&gt;Login&lt;/h1&gt;
  &lt;form role="form" (submit)="login($event, username.value, password.value)"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="username"&gt;Username&lt;/label&gt;
      &lt;input type="text" #username class="form-control" id="username" placeholder="Username"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="password"&gt;Password&lt;/label&gt;
      &lt;input type="password" #password class="form-control" id="password" placeholder="Password"&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-primary btn-block btn-large"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>logincomponent</p>
  
  <pre><code>      login(event, username, password) {
  
      event.preventDefault();
      this.loginService.login(username, password)
        .subscribe(
          response =&gt; {
            console.log("x");
            localStorage.setItem('token', response.access_token);
            this.router.navigate(['/home']);
          },
          error =&gt; {
            alert(error);
          }
        );
    }
  </code></pre>
  
  <p>login.service</p>
  
  <pre><code>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');
    }
  }
  </code></pre>