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 ## 動作確認状況 - 型チェックだけしています。 ## 補足
This commit is contained in:
斎藤 快斗
parent
c82d0363ac
commit
bfe91c64c9
52
dictation_client/package-lock.json
generated
52
dictation_client/package-lock.json
generated
@ -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": {
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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 => (
|
||||
<>
|
||||
<GlobalStyle />
|
||||
<BrowserRouter>
|
||||
<AppRouter />
|
||||
</BrowserRouter>
|
||||
</>
|
||||
);
|
||||
const App = (): JSX.Element => {
|
||||
const pca = new PublicClientApplication(msalConfig);
|
||||
return (
|
||||
<>
|
||||
<GlobalStyle />
|
||||
<MsalProvider instance={pca}>
|
||||
<BrowserRouter>
|
||||
<AppRouter />
|
||||
</BrowserRouter>
|
||||
</MsalProvider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
17
dictation_client/src/common/auth/msalConfig.ts
Normal file
17
dictation_client/src/common/auth/msalConfig.ts
Normal file
@ -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"],
|
||||
};
|
||||
28
dictation_client/src/pages/LoginPage/index.tsx
Normal file
28
dictation_client/src/pages/LoginPage/index.tsx
Normal file
@ -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;
|
||||
@ -2,7 +2,7 @@ import React from "react";
|
||||
|
||||
const SamplePage: React.FC = () => (
|
||||
<div>
|
||||
hello whorld!
|
||||
hello world!
|
||||
<br />
|
||||
Dictation App Service Site
|
||||
</div>
|
||||
|
||||
20
dictation_client/src/pages/TopPage/index.tsx
Normal file
20
dictation_client/src/pages/TopPage/index.tsx
Normal file
@ -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;
|
||||
Loading…
x
Reference in New Issue
Block a user