Проблема с окончательным URI перенаправления после успешной аутентификации AAD в статическом веб-приложении Azure React.js.

Я новичок в React.js. Только что создал простое приложение, в котором пользователю необходимо пройти аутентификацию с помощью Azure Active Directory (AAD) для доступа к заданной странице («карта аутентификации»). Я использую пользовательскую аутентификацию AAD для статических веб-приложений Azure (в частности, Azure Active Directory версии 1 ).

Как это работает:

  1. Я создал кнопку «Войти» в компоненте навигационной панели.
      import React, { useState } from 'react';
import { Link } from 'react-router-dom';

const Navigation = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <nav>
      <Link to="/">
        <img src="/logo.png" alt="logo" className="logo" onClick={() => setIsOpen(false)} />
      </Link>
      <button className="hamburger" onClick={() => setIsOpen(!isOpen)}>
        &#9776;
      </button>
      <ul className={`nav-links ${isOpen ? 'open' : ''}`}>
        <li><Link to="/" onClick={() => setIsOpen(false)}>Home</Link></li>
        <li><Link to="/blog" onClick={() => setIsOpen(false)}>Blog</Link></li>
        <li><Link to="/public-map" onClick={() => setIsOpen(false)}>Map</Link></li>
        <li><Link to="/login" onClick={() => setIsOpen(false)}>Login</Link></li>  //<--here
      </ul>
    </nav>
  );
};

export default Navigation;
  1. Затем я создалLoginPage. При нажатии ссылки на панели навигации пользователю отображается экран входа в Microsoft AAD.
      import React, { useEffect } from 'react';


const LoginPage = () => {
  useEffect(() => {
    window.location.href = "/.auth/login/aad?post_login_redirect_uri=https://<my-static-web-app>.azurestaticapps.net/authenticated-map";
  }, []);

  return <div>Redirecting to login...</div>;
};

export default LoginPage;
  1. Я создалstaticwebapp.config.jsonфайл сrouteиauthопределены разделы
      {
  "routes": [
    {
      "route": "/authenticated-map*",
      "allowedRoles": ["authenticated"]
    }
  ],

  "auth": {
    "identityProviders": {
      "azureActiveDirectory": {
        "userDetailsClaim": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
        "registration": {
          "openIdIssuer": "https://login.microsoftonline.com/<my-tenant-id>",
          "clientIdSettingName": "AZURE_CLIENT_ID",
          "clientSecretSettingName": "AZURE_CLIENT_SECRET"
        }
      }
    }
  }
}

  1. Затем я зарегистрировал нового субъекта-службы AAD (регистрация приложения).

    • Первоначально я установил тип , но это не удалось из-за ошибок ниже.
    • Установите URL-адрес перенаправления наhttps://<my-static-web-app>.azurestaticapps.net/authenticated-map

  2. Я создал новый, а затем сохранил обаclient_idи новыйclient_secretв настройки приложения статического веб-приложения (AZURE_CLIENT_IDиAZURE_CLIENT_SECRET)

Проблема:

я бегуnpm run buildзатем зафиксируйте приложение в GitHub, где его создаст действие GitHub. Когда я нажимаю кнопку «Войти» на отображаемом веб-сайте (в новом окне в режиме инкогнито): — Меня перенаправляют на экран входа в AAD — Я ввожу свой адрес электронной почты и пароль — Обработка MFA — Затем мне отображается эта ошибка:

      AADSTS50011: The redirect URI 'https://<my-static-app>.azurestaticapps.net/.auth/login/aad/callback' specified in the request does not match the redirect URIs configured for the application '24bb1069-01fc-443c-82e3-816d67a03655'. Make sure the redirect URI sent in the request matches one added to your application in the Azure portal. Navigate to https://aka.ms/redirectUriMismatchError to learn more about how to fix this.
  • Итак, я добавляю.../add/callbackперенаправьте URI на регистрацию приложения AAD, а затем повторите попытку входа в систему. На этот раз меня встречает другая ошибка:
      AADSTS9002325: Proof Key for Code Exchange is required for cross-origin authorization code redemption.

  • Есть вопрос StackOverflow об этой же ошибке.

    • Здесь я реализую предложенное изменение по изменению регистрации приложения сSingle Page ApplicationкWebsite

  • На данный момент вход в систему работает , но после завершения входа в систему я получаю сообщение 404 Not Found. Приложение указывает на правильную страницуhttps://<my-static-app>.azurestaticapps.net/authenticated-map. У меня есть компонент, созданный для этой страницы, но почему он не отображается?

Вот структура проекта:

      .
├── README.md
├── build
│   ├── asset-manifest.json
│   ├── favicon.svg
│   ├── index.html
│   ├── index1.html
│   ├── logo.png
│   ├── manifest.json
│   ├── me-ai.png
│   ├── robots.txt
│   ├── service-worker.js
│   └── static
│       ├── css
│       │   ├── main.233b8d40.css
│       │   └── main.233b8d40.css.map
│       └── js
│           ├── 496.6f2d4419.chunk.js
│           ├── 496.6f2d4419.chunk.js.map
│           ├── 781.8442ebaf.chunk.js
│           ├── 781.8442ebaf.chunk.js.map
│           ├── 829.f02c3826.chunk.js
│           ├── 829.f02c3826.chunk.js.map
│           ├── main.8fb141a5.js
│           ├── main.8fb141a5.js.LICENSE.txt
│           └── main.8fb141a5.js.map
├── package-lock.json
├── package.json
├── public
│   ├── favicon.svg
│   ├── index.html
│   ├── index1.html
│   ├── logo.png
│   ├── manifest.json
│   ├── me-ai.png
│   ├── robots.txt
│   └── service-worker.js
├── src
│   ├── auth
│   │   └── authConfig.js
│   ├── components
│   │   ├── forms
│   │   │   └── PinForm.js
│   │   ├── layout
│   │   │   ├── Footer.js
│   │   │   └── Navigation.js
│   │   ├── markers
│   │   │   └── DraggableMarker.js
│   │   ├── pages
│   │   │   ├── AuthenticatedMapPage.js //<--Should be rendered upon successful AAD login
│   │   │   ├── BlogPage.js
│   │   │   ├── HomePage.js
│   │   │   ├── LoginPage.js
│   │   │   ├── PostPage.js
│   │   │   └── PublicMapPage.js
│   │   ├── posts
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── posts.json
│   │   └── utils.js
│   ├── core
│   │   ├── App.js
│   │   └── reportWebVitals.js
│   ├── db
│   │   └── indexedDBHelper.js
│   ├── index.js
│   ├── router
│   │   └── AppRouter.js
│   ├── services
│   │   └── posts.js
│   ├── styles
│   │   ├── component
│   │   │   └── pages
│   │   │       ├── AuthenticatedMapPage.css
│   │   │       ├── BlogPage.css
│   │   │       ├── PostPage.css
│   │   │       └── PublicMap.css
│   │   └── global
│   │       ├── App.css
│   │       └── index.css
│   └── tests
│       ├── App.test.js
│       └── setupTests.js
├── staticwebapp.config.json
└── swa-db-connections
    └── staticwebapp.database.config.json

Источник

1 ответ

Разобрался с этим...

Пришлось добавить...

      "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
  },

...кstaticwebapp.config.json.

Хм... мне (новичку JS-разработчику) непонятно, почему мне нужно "переписать"/index.htmlвместо «перенаправления» (в моем случае)/authenticated-mapстраница после успешной аутентификации.

Важный справочный материал здесь

Источник
Другие вопросы по тегам