マイクロフロントエンドのログイン状態や認証の管理について＆前回の記事においてAngular側とReact側を個別に開発するときはどうするのか

「前回の記事においてAngular側とReact側を個別に開発するときはどうするのか」については、自分の考えが含まれます。

ログイン状態や認証の管理について

管理する用のWeb Appを別で用意する方法

OpenID Connectを利用して、別のドメインで実行されている認証の処理を担当するアプリケーションを導入する。
下の図で考えると、my.app.comがクライアントが利用するアプリ、id.my.app.comが認証の処理をするアプリとなる。
my.app.comでログインすると、id.my.app.comで認証プロセスが実行される。認証プロセスが完了されると、アクセストークン、IDトークン、リフレッシュトークンを使用して my.app.com にリダイレクトされる。

実装においては標準であり、実装がシンプルでライブラリのサポートが充実しているなどの理由から、JWT（JSON Web Token)を使用することが推奨されている。

このリダイレクトの前に、id.my.app.comではCookieを使用する。そうすることで、画面をリフレッシュしたり、my.app.com内のほかのマイクロフロントエンドの部分にアクセスする際に、id.my.app.comではCookieをチェックして、ユーザーが認証済みかどうかを確認し、再び認証することを防ぐことができる。

参考 :
How do you share authentication in micro-frontends
JWT

SSOを使う方法

マイクロフロントエンドごとにSSOサービスとやり取りをしてユーザーがログインしているのか、また、どのユーザーなのかといった情報を受け取って認証を行う。

サービスごとにSSOサービスと通信した場合、個々のサービスとSSOサービスがそれぞれで通信を行うことになるので、通信トラフィックがかなり大きくなってしまう。

参考：どうする？マイクロサービスでの認可と認証 後編

前回の記事においてAngular側とReact側を個別に開発するときはどうするのか

前回の記事では、AngularとReactでWeb Componentsを使ってMicrofrontEndsを実装した例を紹介した。

この例の場合、

AngularコンポーネントをWeb Componentsとしてhttp://localhost:5001/main.jsのサーバーにアップし、Reactコンポーネントを同じくWeb Componentsとしてhttp://localhost:5002/main.jsのサーバーにアップする。
Wrapperコンポーネントをhttp://localhost:5000のサーバーに立ち上げて、２つのコンポーネントをサーバー上から読み込むという方法。

index.html(wrapper-component)

  <script src="http://localhost:5001/main.js"></script>
  <script src="http://localhost:5002/main.js"></script>

前回は１つのコンピューター上で開発していたので開発環境用にserve - npmを利用してlocalhost上に各コンポーネントをアップしていたが、個別で開発する際は外部からアクセスできるサーバー上にアップする必要がある。ここでも認証が必要になりそう。