問題タブ [msal-angular]

API の認証に Azure MSAL を使用していますが、サーバー側のページネーションに DevExtreme カスタム ストアを使用していることに問題があります。

Msal Interceptor は機能し、HttpClient の自動トークンを生成しますが、この場合、http 経由でリクエストを送信していません。

ログイン後に取得したアクセス トークンを使用している場合、無効な署名というエラーが発生し、IdToken を使用した場合、この問題を解決する方法として 401 が表示されます。

MSALInterceptorConfigFactory:

accessToken と IdToken を取得しているログイン応答

結果として accessToken と IdTOken の両方を取得していますが、Bearer の要求でそれらを送信すると、これらは機能しません

私は角度のあるアプリケーションを構築し、@azure/msal-angular および @azure/msal-browser パッケージを使用して、ユーザーが Microsoft アカウント経由でのみ接続できるようにしたいと考えていました。

login という接続を処理するコンポーネントを作成しました

これは login.component.ts です

login.component.html

app.module.ts

app.component.html

そして最後に私の app-routing.module.ts

そのボタンをクリックすると

ログインしても、何も起こりません。ログイン関数 (login.component.ts) で loginPopup() を使用して実行しようとすると、ポップアップが表示された直後に消えてしまいます。portal.azure.com の登録アプリケーションの問題だと思ったので、以前のアプリ登録を削除して新しいアプリ登録を作成し、id を app.module に入れましたが、まだ何もありません。

どんな助けでも大歓迎です。

どうもありがとう ！

Azure の AD B2C は、登録されている SPA アプリのマニフェストで v2 トークンが構成されていても、v1 トークンを発行し続けます。

クライアントは @azure/msal-angular v2.0.5 (@azure/msal-browser v2.19.0 と共に) を使用して、プレーンな MSAL インターセプター経由でトークンを要求します。

これは、特に"accessTokenAcceptedVersion": 2.

トークンがまだ v1 のままである根本的な原因は何ですか?

ポインタをいただければ幸いです。

目的 - @azure/msal-angularおよびmsalライブラリを使用して、angular 8 で azureAD 認証を実装しています。

問題 - pathlocationstrategy を使用するとすべて正常に動作しますが、hashlocationstrategy を使用すると、@azure/msal-angular ライブラリのコールバックが呼び出されません。

コード フロー - ユーザーが HomeComponent のログイン ボタンをクリックする -> ユーザーが Microsoft のログイン ページにリダイレクトされる -> ユーザーが資格情報を入力する -> ログインに成功すると、ユーザーは msalLandingComponent ホーム コンポーネント (appcomponent の routeroutlet でレンダリングされる) にリダイレクトされ、そこでコールバック (this._msalService .handleRedirectCallback) を実行する必要があります。

コード

環境.ts

http://localhost:4200/ として redirectUrl も試しました

app-routing.module.ts

{ パス: 'msal-landing'、コンポーネント: MsalLandingComponent }

HomeComponent - ユーザーが onButtonClick() を呼び出すログイン ボタンをクリックします。

home.component.html

home.component.ts

問題の説明

ユーザーを Microsoft のログイン ページにリダイレクトするため

が呼び出され、ログイン ユーザーがリダイレクト URL にリダイレクトされた後、ngOnInit で以下のコードを実行する必要があります

しかし、hashlocationstrategy を使用している場合、このコールバックは呼び出されません。

追加情報 アプリの登録時に、azure で # を使用して redirectUrl を設定することはできないと思います。

したがって、リダイレクト URL を "http://localhost:4200/#/msal-landing" として設定する代わりに、"http://localhost:4200/" に設定します。ホームコンポーネントが呼び出されるように。

msal-landing.component.ts の ngOnInIt を home.component.ts に移動して上記のコードを更新し、MsalLandingComponent を削除しました。

ただし、この場合も handleRedirectCallback は呼び出されません。このコードが app.compnent.ts の ngOnInIt() に配置された場合にのみ呼び出されます。appComponent であるが homeComponent ではなくルート コンポーネントで呼び出される理由を理解できません。

を呼び出すときにトークンを API に渡したいと思いますhttp.post('http://localhost/api/spaceships')。ただし、除外したいhttp.get('http://localhost/api/spaceships')。私はasp.net-coreを使用し[AllowAnonymous]ており、[Authorize]属性が存在します。ただし、投稿中に authorize 属性を通過させるには、に追加.../api/spaceshipsする必要があります。protectedResourceMapを除外するにはどうすればよいhttp.getですか? msal-angular v2 を使用しています。アンギュラー v11.