Merged PR 8: タスク 1360: 画面実装（TOPページ）

[Task1360](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/OMDSDictation/_sprints/taskboard/OMDSDictation%20%E3%83%81%E3%83%BC%E3%83%A0/OMDSDictation/%E3%82%B9%E3%83%97%E3%83%AA%E3%83%B3%E3%83%88%203-1?workitem=1360)
- Azure AD B2Cのログインを行う実装
- B2Cへの接続設定
- ログイン後のリダイレクト先設定

## レビューポイント
- B2Cへの接続設定で過不足はないか

## UIの変更
- https://ndstokyo.sharepoint.com/:f:/r/sites/Piranha/Shared%20Documents/General/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88/Task1360?csf=1&web=1&e=8bzmdc

## 動作確認状況
- 型チェックだけしています。

## 補足

dictation_client/package-lock.json

@@ -8,6 +8,8 @@
       "name": "client",
       "version": "0.1.0",
       "dependencies": {
+        "@azure/msal-browser": "^2.33.0",
+        "@azure/msal-react": "^1.5.3",
         "@reduxjs/toolkit": "^1.8.3",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
@@ -77,6 +79,37 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@azure/msal-browser": {
+      "version": "2.33.0",
+      "resolved": "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-2.33.0.tgz",
+      "integrity": "sha512-c7CVh1tfUfxiWkEIhoIb11hL4PGo4hz0M+gMy34ATagAKdLK7qyEu/5AXJWAf5lz5eE+vQhm7+LKiuETrcXXGw==",
+      "dependencies": {
+        "@azure/msal-common": "^10.0.0"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@azure/msal-common": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@azure/msal-common/-/msal-common-10.0.0.tgz",
+      "integrity": "sha512-/LghpT93jsZLy55QzTsRZWMx6R1Mjc1Aktwps8sKSGE3WbrGwbSsh2uhDlpl6FMcKChYjJ0ochThWwwOodrQNg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@azure/msal-react": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@azure/msal-react/-/msal-react-1.5.3.tgz",
+      "integrity": "sha512-PIbksHzNDzEA8iV9BGiKTdxNZVryvJ4CZ/sFhuqX87I5xbCbcxF/oz6iv1qWqtHAeovUigARBZPw7lQOUVsQmg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@azure/msal-browser": "^2.33.0",
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.18.6",
       "license": "MIT",
@@ -6188,6 +6221,25 @@
         "@jridgewell/trace-mapping": "^0.3.9"
       }
     },
+    "@azure/msal-browser": {
+      "version": "2.33.0",
+      "resolved": "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-2.33.0.tgz",
+      "integrity": "sha512-c7CVh1tfUfxiWkEIhoIb11hL4PGo4hz0M+gMy34ATagAKdLK7qyEu/5AXJWAf5lz5eE+vQhm7+LKiuETrcXXGw==",
+      "requires": {
+        "@azure/msal-common": "^10.0.0"
+      }
+    },
+    "@azure/msal-common": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@azure/msal-common/-/msal-common-10.0.0.tgz",
+      "integrity": "sha512-/LghpT93jsZLy55QzTsRZWMx6R1Mjc1Aktwps8sKSGE3WbrGwbSsh2uhDlpl6FMcKChYjJ0ochThWwwOodrQNg=="
+    },
+    "@azure/msal-react": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@azure/msal-react/-/msal-react-1.5.3.tgz",
+      "integrity": "sha512-PIbksHzNDzEA8iV9BGiKTdxNZVryvJ4CZ/sFhuqX87I5xbCbcxF/oz6iv1qWqtHAeovUigARBZPw7lQOUVsQmg==",
+      "requires": {}
+    },
     "@babel/code-frame": {
       "version": "7.18.6",
       "requires": {

dictation_client/package.json

@@ -13,6 +13,8 @@
     "lint:fix": "npm run lint -- --fix"
   },
   "dependencies": {
+    "@azure/msal-browser": "^2.33.0",
+    "@azure/msal-react": "^1.5.3",
     "@reduxjs/toolkit": "^1.8.3",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",

dictation_client/src/App.tsx

@@ -1,16 +1,22 @@
 import AppRouter from "AppRouter";
-import { useEffect } from "react";
-import { useDispatch, useSelector } from "react-redux";
 import { BrowserRouter } from "react-router-dom";
 import { GlobalStyle } from "styles/GlobalStyle";
+import { PublicClientApplication } from "@azure/msal-browser";
+import { MsalProvider } from "@azure/msal-react";
+import { msalConfig } from "common/auth/msalConfig";
 
-const App = (): JSX.Element => (
+const App = (): JSX.Element => {
-  <>
+  const pca = new PublicClientApplication(msalConfig);
-    <GlobalStyle />
+  return (
-    <BrowserRouter>
+    <>
-      <AppRouter />
+      <GlobalStyle />
-    </BrowserRouter>
+      <MsalProvider instance={pca}>
-  </>
+        <BrowserRouter>
-);
+          <AppRouter />
+        </BrowserRouter>
+      </MsalProvider>
+    </>
+  );
+};
 
 export default App;

dictation_client/src/AppRouter.tsx

@@ -1,11 +1,15 @@
 import { Route, Routes } from "react-router-dom";
 import styled from "styled-components";
+import TopPage from "pages/TopPage";
+import LoginPage from "pages/LoginPage";
 import SamplePage from "pages/SamplePage";
 
 const AppRouter: React.FC = () => (
   <BaseDiv>
     <Routes>
-      <Route path="/" element={<SamplePage />} />
+      <Route path="/" element={<TopPage />} />
+      <Route path="/login" element={<LoginPage />} />
+      <Route path="/XXX" element={<SamplePage />} />
     </Routes>
   </BaseDiv>
 );

dictation_client/src/common/auth/msalConfig.ts

@@ -0,0 +1,17 @@
+import { Configuration, RedirectRequest } from "@azure/msal-browser";
+
+export const msalConfig: Configuration = {
+  auth: {
+    clientId: "5eb34cba-84b6-46f9-a0ea-bc5c41157d63",
+    authority:
+      "https://adb2codmsdev.b2clogin.com/adb2codmsdev.onmicrosoft.com/b2c_1_signin_dev",
+    knownAuthorities: ["adb2codmsdev.b2clogin.com"],
+    redirectUri: `${globalThis.location.origin}/login`,
+    postLogoutRedirectUri: "/",
+    navigateToLoginRequestUrl: false,
+  },
+};
+
+export const loginRequest: RedirectRequest = {
+  scopes: ["openid", "offline_access"],
+};

dictation_client/src/pages/LoginPage/index.tsx

@@ -0,0 +1,28 @@
+import { SilentRequest } from "@azure/msal-browser";
+import { useMsal } from "@azure/msal-react";
+import React, { useState } from "react";
+
+const LoginPage: React.FC = () => {
+  const { accounts, instance } = useMsal();
+  const [idToken, setIdToken] = useState<String | null>(null);
+
+  const request: SilentRequest = {
+    scopes: ["openid"],
+    account: accounts[0],
+  };
+  // TODO store側でこの処理を行うべきなので、Task1361で移植する
+  instance.acquireTokenSilent(request).then((response) => {
+    setIdToken(response.idToken);
+  });
+  return (
+    <>
+      <div>{idToken}</div>
+      <br />
+      <button type="button" onClick={() => instance.logout()}>
+        sign out
+      </button>
+    </>
+  );
+};
+
+export default LoginPage;

dictation_client/src/pages/SamplePage/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 const SamplePage: React.FC = () => (
   <div>
-    hello whorld!
+    hello world!
     <br />
     Dictation App Service Site
   </div>

dictation_client/src/pages/TopPage/index.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { useMsal } from "@azure/msal-react";
+import { loginRequest } from "common/auth/msalConfig";
+
+const TopPage: React.FC = () => {
+  const { instance } = useMsal();
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => instance.loginRedirect(loginRequest)}
+      >
+        sign in
+      </button>
+    </div>
+  );
+};
+
+export default TopPage;