登錄界面：

實現Component：login-form.component.html:

上圖第1行，觸發submitForm函數：

用了promise技術：

/*** Authorize with ResourceOwnerPasswordFlow.** @param userId* @param password** @return token response from the lib*/authorizeWithPasswordFlow(userId: string,password: string): Promise<TokenResponse> {return this.oAuthService.fetchTokenUsingPasswordFlow(userId, password);}

使用user和password換取token：

/*** Uses password flow to exchange userName and password for an access_token.* @param userName* @param password* @param headers Optional additional http-headers.*/fetchTokenUsingPasswordFlow(userName, password, headers = new HttpHeaders()) {this.assertUrlNotNullAndCorrectProtocol(this.tokenEndpoint, 'tokenEndpoint');return new Promise((resolve, reject) => {/*** A `HttpParameterCodec` that uses `encodeURIComponent` and `decodeURIComponent` to* serialize and parse URL parameter keys and values.** @stable*/let params = new HttpParams({ encoder: new WebHttpUrlEncodingCodec() }).set('grant_type', 'password').set('scope', this.scope).set('username', userName).set('password', password);if (this.useHttpBasicAuth) {const header = btoa(`${this.clientId}:${this.dummyClientSecret}`);headers = headers.set('Authorization', 'Basic ' + header);}if (!this.useHttpBasicAuth) {params = params.set('client_id', this.clientId);}if (!this.useHttpBasicAuth && this.dummyClientSecret) {params = params.set('client_secret', this.dummyClientSecret);}if (this.customQueryParams) {for (const key of Object.getOwnPropertyNames(this.customQueryParams)) {params = params.set(key, this.customQueryParams[key]);}}headers = headers.set('Content-Type', 'application/x-www-form-urlencoded');this.http.post(this.tokenEndpoint, params, { headers }).subscribe(tokenResponse => {this.debug('tokenResponse', tokenResponse);this.storeAccessTokenResponse(tokenResponse.access_token, tokenResponse.refresh_token, tokenResponse.expires_in ||this.fallbackAccessTokenExpirationTimeInSec, tokenResponse.scope, this.extractRecognizedCustomParameters(tokenResponse));this.eventsSubject.next(new OAuthSuccessEvent('token_received'));resolve(tokenResponse);}, err => {this.logger.error('Error performing password flow', err);this.eventsSubject.next(new OAuthErrorEvent('token_error', err));reject(err);});});}

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的SAP Spartacus用户登录的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。