{"id":44,"date":"2026-08-02T22:07:59","date_gmt":"2026-08-02T13:07:59","guid":{"rendered":"https:\/\/www.ysharada.com\/?p=44"},"modified":"2026-08-02T22:07:59","modified_gmt":"2026-08-02T13:07:59","slug":"m365%e3%81%a7oauth2%ef%bc%8foidc%e8%aa%8d%e5%8f%af%e3%82%b3%e3%83%bc%e3%83%89%e3%83%95%e3%83%ad%e3%83%bc%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%e3%82%92%e4%bd%9c%e6%88%90","status":"publish","type":"post","link":"https:\/\/www.ysharada.com\/?p=44","title":{"rendered":"M365\u3067OAUTH2\uff0fOIDC\u8a8d\u53ef\u30b3\u30fc\u30c9\u30d5\u30ed\u30fc\u30b5\u30f3\u30d7\u30eb\u3092\u4f5c\u6210"},"content":{"rendered":"\n

\u69cb\u6210\u30a4\u30e1\u30fc\u30b8
React SPA
\u3000\u3000\u2193
\u3000\u3000\u2193 \u8a8d\u53ef\u30b3\u30fc\u30c9\u30d5\u30ed\u30fc(PKCE)
\u3000\u3000\u2193
Microsoft Entra ID
\u3000\u3000\u2193
\u3000\u3000\u2193 Access Token
\u3000\u3000\u2193
Microsoft Graph<\/p>\n\n\n\n

\u4f5c\u6210\u624b\u9806<\/h4>\n\n\n\n

1.Entra ID \u5074\u8a2d\u5b9a<\/strong>
\u30a2\u30d7\u30ea\u306e\u767b\u9332
\u540d\u524d : spa-demo
Supported account types : Accounts in this organizational directory only
Redirect URI :
\u3000\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0 : Single-page application (SPA)
\u3000URI : http:\/\/localhost:5173
\u3000\u203bCRA\u306e\u5834\u5408\u3000URI : http:\/\/localhost:3000
API Permissions\u3000\u59d4\u4efb\uff08\u30e6\u30fc\u30b6\u30fc\u540c\u610f\uff09
\u3000Microsoft Graph – User.Read<\/p>\n\n\n\n

2.\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210<\/strong>
npm create vite@latest spa-demo — –template react
cd spa-demo
npm install
npm install @azure\/msal-browser @azure\/msal-react
\u203bCRA\u306e\u5834\u5408
npx create-react-app spa-demo
cd spa-demo
npm install @azure\/msal-browser @azure\/msal-react<\/p>\n\n\n\n

3.\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u6210<\/strong>
\u3000\u3000src\/
\u3000\u3000\u251c\u2500 main.jsx
\u3000\u3000\u251c\u2500 App.jsx
\u3000\u3000\u2514\u2500 authConfig.js<\/p>\n\n\n\n

    <\/ol>\n\n\n\n
      <\/ol>\n\n\n\n
        <\/ol>\n\n\n\n
        \n

        4.authConfig.js<\/strong><\/p>\n\n\n\n

        export const msalConfig = {\n  auth: {\n    clientId: import.meta.env.VITE_CLIENT_ID,\n    authority: `https:\/\/login.microsoftonline.com\/${import.meta.env.VITE_TENANT_ID}`,\n    redirectUri: \"http:\/\/localhost:5173\"\n  }\n};\n\nexport const loginRequest = {\n  scopes: [\"User.Read\"]\n};<\/code><\/pre>\n\n\n\n
        5.main.jsx<\/strong><\/p>\n\n\n\n
        import React from \"react\";\nimport ReactDOM from \"react-dom\/client\";\n\nimport { PublicClientApplication } from \"@azure\/msal-browser\";\nimport { MsalProvider } from \"@azure\/msal-react\";\n\nimport App from \".\/App\";\nimport { msalConfig } from \".\/authConfig\";\n\nconst msalInstance =\n  new PublicClientApplication(msalConfig);\n\nReactDOM.createRoot(document.getElementById(\"root\")).render(\n  <React.StrictMode>\n    <MsalProvider instance={msalInstance}>\n      <App \/>\n    <\/MsalProvider>\n  <\/React.StrictMode>\n);<\/code><\/pre>\n<\/div><\/div>\n\n\n\n
        6.App.js<\/strong><\/p>\n\n\n\n
        import React, { useState } from \"react\";\n\nimport { useMsal } from \"@azure\/msal-react\";\nimport { loginRequest } from \".\/authConfig\";\n\nfunction App() {\n  const { instance, accounts } = useMsal();\n\n  const [userInfo, setUserInfo] = useState(null);\n\n  const signIn = async () => {\n    try {\n      await instance.loginPopup(loginRequest);\n    } catch (error) {\n      console.error(error);\n    }\n  };\n\n  const getProfile = async () => {\n    try {\n      const response =\n        await instance.acquireTokenSilent({\n          ...loginRequest,\n          account: accounts[0]\n        });\n\n      const graphResponse = await fetch(\n        \"https:\/\/graph.microsoft.com\/v1.0\/me\",\n        {\n          headers: {\n            Authorization: `Bearer ${response.accessToken}`\n          }\n        }\n      );\n\n      const data = await graphResponse.json();\n\n      setUserInfo(data);\n    } catch (error) {\n      console.error(error);\n    }\n  };\n\n  return (\n    <div style={{ padding: \"20px\" }}>\n      <h1>MSAL React Demo<\/h1>\n\n      <button onClick={signIn}>\n        Sign In\n      <\/button>\n\n      <button onClick={getProfile}>\n        Get Profile\n      <\/button>\n\n      {userInfo && (\n        <div>\n          <h3>User Info<\/h3>\n\n          <p>Name: {userInfo.displayName}<\/p>\n\n          <p>Mail: {userInfo.mail}<\/p>\n\n          <p>UPN: {userInfo.userPrincipalName}<\/p>\n        <\/div>\n      )}\n    <\/div>\n  );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n
        7.\u5b9f\u884c<\/strong>
        \u3000vite\u306e\u5834\u5408
        \u3000\u3000npm run dev
        \u3000\u3000\u30a2\u30af\u30bb\u30b9: http:\/\/localhost:5173
        \u3000CRA\u306e\u5834\u5408
        \u3000\u3000npm start
        \u3000\u3000\u30a2\u30af\u30bb\u30b9: http:\/\/localhost:3000<\/p>\n\n\n\n
        8.\u5b9f\u969b\u306e\u8a8d\u53ef\u30b3\u30fc\u30c9\u30d5\u30ed\u30fc<\/strong>
        \u8a8d\u53ef\u8981\u6c42
        GET
        \u3000\/oauth2\/v2.0\/authorize
        \u3000\u2193
        code\u53d6\u5f97
        \u3000?code=xxxxxxxxxxxxx
        \u3000\u2193
        \u30c8\u30fc\u30af\u30f3\u53d6\u5f97
        \u3000{
        \u3000”access_token”: “\u2026”,
        \u3000”id_token”: “\u2026”,
        \u3000”refresh_token”: “\u2026”
        \u3000}
        \u203bSPA\u3067\u306f\u5185\u90e8\u7684\u306bPKCE\u4ed8\u304d\u8a8d\u53ef\u30b3\u30fc\u30c9\u30d5\u30ed\u30fc\u304c\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
          <\/ol>\n\n\n\n
            <\/ol>\n\n\n\n
            <\/p>\n","protected":false},"excerpt":{"rendered":"
            \u69cb\u6210\u30a4\u30e1\u30fc\u30b8React SPA\u3000\u3000\u2193\u3000\u3000\u2193 \u8a8d\u53ef\u30b3\u30fc\u30c9\u30d5\u30ed\u30fc(PKCE)\u3000\u3000\u2193Microsoft Entra ID\u3000\u3000\u2193\u3000\u3000\u2193 Access Token\u3000\u3000\u2193Microsoft Graph \u4f5c\u6210\u624b\u9806 1.Entra ID… \u7d9a\u304d\u3092\u8aad\u3080 M365\u3067OAUTH2\uff0fOIDC\u8a8d\u53ef\u30b3\u30fc\u30c9\u30d5\u30ed\u30fc\u30b5\u30f3\u30d7\u30eb\u3092\u4f5c\u6210<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-44","post","type-post","status-publish","format-standard","hentry","category-m365","entry"],"_links":{"self":[{"href":"https:\/\/www.ysharada.com\/index.php?rest_route=\/wp\/v2\/posts\/44","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ysharada.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ysharada.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ysharada.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ysharada.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=44"}],"version-history":[{"count":2,"href":"https:\/\/www.ysharada.com\/index.php?rest_route=\/wp\/v2\/posts\/44\/revisions"}],"predecessor-version":[{"id":47,"href":"https:\/\/www.ysharada.com\/index.php?rest_route=\/wp\/v2\/posts\/44\/revisions\/47"}],"wp:attachment":[{"href":"https:\/\/www.ysharada.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=44"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ysharada.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=44"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ysharada.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=44"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}