OIDC 認可コードフロー x SPA の処理フローと state, PKCE, nonce

OIDC として Azure AD B2C を利用して、SPA(Single Page Application)で認可コードフローを利用する場合のフローについて。

とくに state, PKCE, nonce の目的が理解できていなかったため、それについて。

事前にアプリ/SPA を Azure AD B2C へ登録し、クライアント ID を発番する必要がある。
以降、d6c711cf-0622-41f9-8af5-c2a18968ef80が発番されたものとして記載。
登録時にリダイレクト URI/リダイレクションエンドポイントを指定する必要がある。
以降、https://rp/callbackを指定したものとして記載。

2000文字超過で表示できないようなので、エクスポートした画像。