1

Angular で oidc-client を使用して ID サーバーにログインしています。同じマシンで両方のアプリケーションを実行すると、すべてが完全に機能します。

しかし、Identity Server を Web Apps サーバーで実行し、Angular アプリケーションを Static Web App で実行すると、"invalid_grant" エラーが発生します。

問題の説明

  1. ユーザーが [ログイン] ボタンをクリックすると、Identity Server のログイン画面にリダイレクトされます

  2. ユーザーはパスワードとユーザー名を入力し、[ログイン] をクリックします

  3. Identity Server は「サインイン コールバック」リンクにリダイレクトし、サインイン コールバックは .ts スクリプトのみであるため、空白のサインイン コールバック ページが表示されます。

    This URL appears in the header: https://white-wave-0ca3e8803.azurestaticapps.net/signin-callback?code=l5-p3B5IGifAZ3ijIUgKmLl7aL2g45Fh5JLmluOj3NA&scope=openid%20profile&state=6503e1f5f176411a890ac50a4d0ecb84&session_state=aPnjQ5ZUiMCDKkAztm0O0K4quSkfSlWRZd--YuK73Oc.NVxBA5K6RH5_ptpDobxmxA

    ネットワークの下に赤い「トークン」エラーがあります。応答ヘッダーを含む
    HTTP/1.1 400 Bad Request
    Cache-Control: no-store、no-cache、max-age=0
    プラグマ: no-cache
    Content-Length: 25
    Content-Type: application/json; charset=UTF-8
    サーバー: Microsoft-IIS/10.0
    Strict-Transport-Security: max-age=2592000
    Access-Control-Allow-Origin: https://white-wave-0ca3e8803.azurestaticapps.net/dashboard X-Powered-作成者: ASP.NET
    セット Cookie: ARRAffinity=1fa22e5e18dd42b9d22d6c2c620b562f117da68736f4d32b741538a2d054d95c;Path=/;HttpOnly;Secure;Domain=hansecoreidp-staging.azurewebsites.net
    Set-Cookie: ARRAffinitySameSite=1fa22e5e18dd42b9d22d6c2c620b562f117da68736f4d32b741538a2d054d95c;Path=/;HttpOnly;SameSite=None;Secure;Domain=hansecoreidp-staging.azurewebsites.net
    日付: 2021 年 3 月 18 日 8:9 GMT:

    エラー メッセージ
    {"error":"invalid_grant"}

  4. 更新すると、エラーError: Uncaught (in promise): Error: No matching state found in storage the local storage, session storage and cookies are empty が表示されます。

  5. ベース URL https://white-wave-0ca3e8803.azurestaticapps.netの後のすべてを削除すると、ベース URLに移動してもう一度ログインをクリックすると、ログインが機能し、ストレージに突然 Cookie Storage A cookieができますAccess_token 、 id_token 、プロファイル、スコープなどがあります。 ローカルストレージ オーソリティ、client_id などがあります。

仮定 Angular アプリケーションは、 signin
-callback からの情報をアプリケーション storageに保存する際に問題があると思います。

ID サーバー構成コード

public static IEnumerable<Client> StagingClients (IConfiguration configuration) =>
        new Client[]
        {
            new Client
            {
                ClientName = "HAnsecore.Web",
                ClientId = "clientid",
                AllowedGrantTypes = GrantTypes.Code,
                AccessTokenType = AccessTokenType.Jwt,
                RedirectUris = new List<string>{ "https://white-wave-0ca3e8803.azurestaticapps.net/signin-callback" },
                RequirePkce = true,
                AllowAccessTokensViaBrowser = true,
                AllowedScopes =
                {
                    IdentityServerConstants.StandardScopes.OpenId,
                    IdentityServerConstants.StandardScopes.Profile,
                    "hansecoreCQRSApi",
                    IdentityServerConstants.StandardScopes.OfflineAccess
                },
                AllowedCorsOrigins = { "https://white-wave-0ca3e8803.azurestaticapps.net" },
                AllowOfflineAccess = true,
                RequireClientSecret = false,
                PostLogoutRedirectUris = new List<string> { "https://white-wave-0ca3e8803.azurestaticapps.net/signout-callback" },
                RequireConsent = false,
                AccessTokenLifetime = 600
            }
        };

Angular OIDC-CLIENT AUTH 構成コード

private get idpSettings() : UserManagerSettings {
return {
  authority: environment.idpAuthority,
  client_id: environment.clientId,
  redirect_uri: `${environment.clientRoot}/signin-callback`,
  scope: "openid profile hansecoreCQRSApi offline_access",
  response_type: "code",

  post_logout_redirect_uri: `${environment.clientRoot}/signout-callback`
}

}

SIGNIN REDIRECT CALLBACK CODE User Manager はoidc-clientから継承されたクラスです。コードをデバッグすると .then に入らず、これ以上デバッグできません。しかし、この後に何が起こっても、コードが失敗する場所だと思います。

public finishLogin = (): Promise<User> => {
return this._userManager.signinRedirectCallback()
.then(user => {
  this._loginChangedSubject.next(this.checkUser(user));
  return user;
})

}

サインイン コールバック コード

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '../../../core/services/auth.service';

@Component({
  selector: 'app-signin-redirect-callback',
  template: `<div></div>`
})
export class SigninRedirectCallbackComponent implements OnInit {

  constructor(private _authService: AuthService, private _router: Router) { }
  ngOnInit(): void {
    this._authService.finishLogin()
    .then(_ => {
      this._router.navigate(['/'], { replaceUrl: true });
    })
  }

}

ネットワーク画像 失敗時のネットワーク トラフィック

私の質問に欠けているものがあれば、私に知らせてください。

環境ファイル

export const environment = {
  environmentName: 'STAGE',
  production: false,
  apiRoot: 'https://hansecoreapi-staging.azurewebsites.net/api/',
  clientRoot: 'https://white-wave-0ca3e8803.azurestaticapps.net',
  idpAuthority: 'https://hansecoreidp-staging.azurewebsites.net',
  clientId: '54212148-15C1-40F9-BA07-E3CE748A7C7F'
};
4

0 に答える 0