时间戳

首页 > 解决方案 > 在 Angular 中启用哈希位置时，Okta 重定向 URL 不起作用

angular - 在 Angular 中启用哈希位置时，Okta 重定向 URL 不起作用

问题描述

在我的 Angular 6 应用程序中，我配置了 oktaConfig 对象，如下所示，这可以正常工作，没有任何问题

//okataConfig.ts

export const oktaConfig = {
  url: 'https://dev-501039.oktapreview.com',
  clientId: 'xxxxxxxxxxxxxxxxxxxxxx',
  issuer: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
  redirectUri: 'http://localhost:4200/implicit/callback',
};

//routing.ts

{path: '',component: DefaultLayoutComponent, canActivate: [AuthGuard]},
{path: 'implicit/callback',component: CallbackComponent},

但是当我启用哈希位置时，重定向不起作用，


// app.module.ts

providers: [
  {
    provide: LocationStrategy,
    useClass: HashLocationStrategy,
  },
  AuthGuard, OktaAuthService
],

我应该如何配置路由？

标签： angularokta

解决方案

将response_mode更改为在您的身份验证请求中查询而不是片段（在 url 中添加另一个 #）。这将起作用，您将获得代码和状态作为查询参数，例如-

http://{your.domain}/#/app/?code=xyz&state=pqr

createRequest(code_challengeBuffer, response) {
  const code_challenge =
 this._ssoUtilityService.bufferToBase64UrlEncoded(code_challengeBuffer);
  const state = this._ssoUtilityService.createRandomString();
  const nonce = this._ssoUtilityService.createRandomString();
  this.appendParam('client_id', response.clientId, true);
  this.appendParam('nonce', nonce, true);
  this.appendParam('state', state, true);
  this.appendParam('code_challenge', code_challenge, true);
  this.appendParam('code_challenge_method', 'S256', true);
  this.appendParam('scope', 'openid profile email offline_access', true);
  this.appendParam('response_type', 'code', true);
  this.appendParam('response_mode', 'query', true);
  this.appendParam('redirect_uri', response.redirectUrl);
  window.location.href = this.url;
}
    
    // Added this function as IE11 does not support URL api
appendParam(key: string, value: string, addSeparator?: boolean) {
  this.url += key + '=' + encodeURIComponent(value);
  if (addSeparator) { this.url += '&'; }
}

推荐阅读