演示

App: https://7jpsan.github.io/spotify-auth-demo/ Repo: https://github.com/7jpsan/spotify-auth-demo/

Spotify Auth - Angular 5

这是一个简单的库，用于处理与Angular API在JS环境中交互的Angular 5应用的认证流程，无需后端服务！

特性（v2+）

• Spotify API v1和Angular 5的认证库
• 演示应用程序，展示如何使用。

即将推出

• 处理token过期/无效
• 处理会话持久性

此分支的差异

这是从https://github.com/cyrilletuzi/angular-quickstart-lib分支出来的https://github.com/filipesilva/angular-quickstart-lib的分支/实现。继续阅读他们的工作，它很棒！

需要注意的问题

经过很长时间，在库中使用@angular/router和/或RouterModule相当复杂...我决定移除它，并将机制暴露给消费者应用。

需求

请确保已安装至少Node 6.9和NPM 3.0。

安装

npm install spotify-auth

用法

• 继承http拦截器spotify-auth.interceptor.ts

  import { Injectable } from  '@angular/core';
  import  'rxjs/add/operator/do'; //Required, yes!
  import { TokenService, SpotifyAuthInterceptor } from  'spotify-auth';
  
  @Injectable()
  export  class  SpotifyAuthInterceptor2  extends  SpotifyAuthInterceptor {
  	
  	doOnError(err:  any):  void {}
  	
  	constructor(tokenSvc:  TokenService) {
  		super(tokenSvc);
  	}
  }

• 监听authService.authorizedStream并根据相应路由。当登录完成时，流将发出一个true值，这意味着一切正常（它访问了正确的authorized URL，你现在应该转到你在路由器模块中定义的路由。

  app.component.ts

  import { Component, OnInit } from  '@angular/core';
  import { AuthService, ScopesBuilder, AuthConfig, TokenService } from  'spotify-auth';
  ...
  constructor(
  	private  infoSvc:  InfoService,
  	private  tokenSvc:  TokenService,
  	private  authService:  AuthService,
  	private  router:  Router
  ) {}
  
  ngOnInit():  void {
  	this.authService.authorizedStream.pipe(filter(x  =>  x)).subscribe(() => {
  		this.router.navigate(['user']);	
  	});
  }
  ...

• 创建一个使用模块的authorize/login方法：login.component.ts

  	import { Component, OnInit } from  '@angular/core';
  	import { AuthService, ScopesBuilder, AuthConfig } from 'spotify-auth';
  	...
  	@Component({...});
  	export class SomeClass(){
  		constructor(
  			private  authService:  AuthService,
  			private  tokenSvc:  TokenService,
  			private  router:  Router) { }
  		...
  		public  login():  void {
  			const scopes = new ScopesBuilder()/* .withScopes(ScopesBuilder.LIBRARY) */.build();
  				const ac:  AuthConfig  = {
  					// WebPortal App Id. Your application id from spotify
  					client_id:  "3af5f43840144db2a5ef883b56c5fb7e", 
  					response_type:  "token",
  					// Whitelisted URL, must end with the authozed path for the magic to happen.
  					//i.e:(http://your-domain/yourapp/authorized Or http://localhost:4200/authorized)
  					redirect_uri:  "http://7jpsan.github.io/spotify-auth-demo/authorized", 
  					state:  "",
  					show_dialog:  true,
  					scope:  scopes
  				};
  				this.authService.configure(ac).authorize(); // Magic happens here
  		}
  	}

• app.module.ts和/或app-routing.module.ts

  	import { NgModule, Injectable } from  '@angular/core';
  	...
  	import { SpotifyAuthModule } from  'spotify-auth';
  	import { SpotifyAuthInterceptor2 } from  './spotify-auth.interceptor';
  
      const  routes:  Routes  = [
  
  {
  	path:  '',
  	redirectTo:  'user',
  	pathMatch:  'full'
  },
  {
  	path:  'user',
  	component:  UserComponent
  },
  ...,
  	SpotifyAuthModule.authRoutes()[0] //(Static guarded route with component)
  ];
  NgModule({
  	imports: [
  	BrowserModule,
  	HttpClientModule,
  	HttpModule,
  	SpotifyAuthModule.forRoot(),  //forRoot!!!!
  	RouterModule.forRoot(routes),
  	],
  	declarations: [ AppComponent, UserComponent, LoginComponent, AlbumsComponent ],
  	bootstrap: [ AppComponent ],
  	exports: [],
  	providers: [
  			InfoService,
  			{
  				provide:  HTTP_INTERCEPTORS,
  				//Force interception to use your new shiny headers!
  				useClass:  SpotifyAuthInterceptor2,
  				multi:  true
  			}
  		]
  	})
  export  class  AppModule {}

就是这样！代码将为您处理剩余部分。享受！这里有一个演示应用程序https://github.com/7jpsan/spotify-auth-demo。忽略此存储库中现有的一个。它已拆分，但从未删除。自我待办事项：）

如果出现问题，请提交问题！