Spotify gebruiker data ophalen en weergeven

src/app/app.component.html

@@ -1 +1,5 @@
-<button (click)="connectSpotify()">Verbind met Spotify</button>
+<button *ngIf="!isConnectedToSpotify()" (click)="connectSpotify()">Verbind met Spotify</button>
+<ng-container *ngIf="isConnectedToSpotify()">
+  <div><img [src]="imgSrc"/></div>
+  {{ name }}
+</ng-container>

src/app/app.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { Http, RequestOptionsArgs, Headers } from '@angular/http';
+import 'rxjs/add/operator/map'
 
 @Component({
   selector: 'app-root',
@@ -8,22 +10,42 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class AppComponent implements OnInit {
   private accessToken: string;
+  public name: string;
+  public imgSrc: string;
 
-  constructor(private route: ActivatedRoute) {}
+  constructor(
+    private route: ActivatedRoute,
+    private http: Http
+  ) {}
 
   ngOnInit() {
     this.route.fragment.subscribe((fragment: string) => {
       if (fragment.startsWith("access_token=")) {
         let fragmentJson = this.getJsonFromFragmentParams(fragment);
         this.accessToken = fragmentJson.access_token;
+        this.getUserData();
       }
     })
   }
 
+  getUserData() {
+    let options: RequestOptionsArgs = {
+      headers: new Headers({
+        "Authorization": "Bearer " + this.accessToken,
+      })
+    };
+    this.http.get("https://api.spotify.com/v1/me", options)
+      .map((resp) => resp.json())
+      .subscribe((me: any) => {
+        this.name = me.display_name;
+        this.imgSrc = me.images[0].url;
+      });
+  }
+
   private getJsonFromFragmentParams(fragment: string): any {
-    var result = {};
-    fragment.split("&").forEach(function(part) {
-      var item = part.split("=");
+    let result = {};
+    fragment.split("&").forEach((part) => {
+      let item = part.split("=");
       result[item[0]] = decodeURIComponent(item[1]);
     });
     return result;
@@ -33,4 +55,8 @@ export class AppComponent implements OnInit {
     const clientId = "jouwClientID";
     location.href = "https://accounts.spotify.com/authorize?response_type=token&redirect_uri=http://localhost:4200&client_id=" + clientId;
   }
+
+  isConnectedToSpotify() {
+    return this.accessToken != null;
+  }
 }

src/app/app.module.ts

@@ -3,14 +3,16 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { HttpModule } from '@angular/http';
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    HttpModule
   ],
   providers: [],
   bootstrap: [AppComponent]