Почему мой логин не разрешает получать данные через API в моем базовом приложении React ASP.NET? - PullRequest
Новая
       34

Почему мой логин не разрешает получать данные через API в моем базовом приложении React ASP.NET?

0 голосов
/ 24 апреля 2019

Я работаю над ASP.NET Core React с приложением Redux, которое находится в Azure webapp. Недавно я хотел интегрировать Azure Active Directory или AAD в свое приложение, чтобы использовать единый вход для моих пользователей.

Чтобы достичь этого, я решил использовать реагирующий адал от github . Интеграция которого очень легка и, кажется, работает хорошо.

После добавления react-adal я обнаружил, что моему приложению не удается получить данные через любой из моих API, даже после того, как я вошел в систему. Глядя на сетевые вызовы в консоли, я вижу состояние 302, сообщаемое любым ПОЛУЧИТЕ запрос, который отправлен в API.

Глядя на предоставленную информацию, я вижу заголовок ответа 

Location https://login.microsoftonline...

Итак, я вижу, что когда он запрашивает данные, он все еще пытается аутентифицироваться, даже если я уже вошел в систему. Я передал свой API через Postman и, как и ожидалось, он просит меня войти в систему, поэтому я знаю, что это проблема аутентификации.

У меня вопрос: почему после входа в систему все равно не регистрируется, что я прошел аутентификацию или я сделал что-то не так с моей интеграцией react-adal?

Здесь приведены мои настройки своего реактивного приложения, а также приложения Azure Active Directory.

ClientApp / SRC / adalConfig 

import { AuthenticationContext, adalFetch, withAdalLogin } from 'react-adal';

export const adalConfig = {
    tenant: 'xxxxxxxxxxxxxxxxxxxx',
    clientId: 'xxxxxxxxxxxxxxxxxxxxxxxx',
    endpoints: {
        api: 'xxxxxxxxxxxxxxxxxxxx',
    },
    cacheLocation: 'localStorage',
};

export const authContext = new AuthenticationContext(adalConfig);

export const adalApiFetch = (fetch, url, options) =>
    adalFetch(authContext, adalConfig.endpoints.api, fetch, url, options);

export const withAdalLoginApi = withAdalLogin(authContext, adalConfig.endpoints.api);

ClientApp / ЦСИ / index.js 

import { runWithAdal } from 'react-adal';
import { authContext } from './adalConfig';

const DO_NOT_LOGIN = false;

runWithAdal(authContext, () => {
    // eslint-disable-next-line
    require('./indexApp.js')
}, DO_NOT_LOGIN)

ClientApp / ЦСИ / indexApp.js 

import "bootstrap/dist/css/bootstrap.css";
import "./assets/css/site.css";
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { ConnectedRouter } from "react-router-redux";
import { createBrowserHistory } from "history";
import configureStore from "./store/configureStore";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";

// Create browser history to use in the Redux store
const baseUrl = document.getElementsByTagName("base")[0].getAttribute("href");
const history = createBrowserHistory({ basename: baseUrl });

// Get the application-wide store instance, prepopulating with state from the server where available.
const initialState = window.initialReduxState;
const store = configureStore(history, initialState);
const rootElement = document.getElementById("root");

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <App />
        </ConnectedRouter>
    </Provider>,
    rootElement
);
registerServiceWorker();

ClientApp / appsettings.json 

"AzureAd": {
    "ClientId": "xxxxxxxxxxxxxxxxx",
    "Domain": "mycompany.onmicrosoft.com",
    "Instance": "https://login.microsoftonline.com/",
    "TenantId": "xxxxxxxxxxxxxxxxxxx",
    "CallbackPath": "/signin-oidc",
    "ClientSecret": "xxxxxxxxxxxxxxxx",
    "AppIDURL": "https://mycompany.onmicrosoft.com/myappname",
    "ConfigView": "MVC"
  }

Azure / Регистрация приложения / Манифест 

{
  "appId": "6239a5f3-bf08-4935-9140-2ed0a8f2dad9",
  "appRoles": [],
  "availableToOtherTenants": false,
  "displayName": "Hagland Broker",
  "errorUrl": null,
  "groupMembershipClaims": null,
  "optionalClaims": null,
  "acceptMappedClaims": null,
  "homepage": "https://mywebsite.azurewebsites.net/",
  "informationalUrls": {
    "privacy": null,
    "termsOfService": null
  },
  "identifierUris": [
    "https://mycompany.onmicrosoft.com/MyApplication"
  ],
  "keyCredentials": [],
  "knownClientApplications": [],
  "logoutUrl": null,
  "oauth2AllowImplicitFlow": false,
  "oauth2AllowUrlPathMatching": false,
  "oauth2Permissions": [
    {
      "adminConsentDescription": "Allow the application to access MyApplication on behalf of the signed-in user.",
      "adminConsentDisplayName": "Access MyApplication",
      "id": "xxx",
      "isEnabled": true,
      "type": "User",
      "userConsentDescription": "Allow the application to access MyApplication on your behalf.",
      "userConsentDisplayName": "Access MyApplication",
      "value": "user_impersonation"
    }
  ],
  "oauth2RequirePostResponse": false,
  "objectId": "xxxx",
  "parentalControlSettings": {
    "countriesBlockedForMinors": [],
    "legalAgeGroupRule": "Allow"
  },
  "passwordCredentials": [
    {
      "customKeyIdentifier": null,
      "endDate": "2020-04-23T14:50:19.7214445Z",
      "keyId": "xxx",
      "startDate": "2019-04-23T14:50:19.7544684Z",
      "value": null
    }
  ],
  "publicClient": false,
  "replyUrls": [
    "https://mywebsite.azurewebsites.net/"
  ],
  "requiredResourceAccess": [
    {
      "resourceAppId": "xxxx",
      "resourceAccess": [
        {
          "id": "xxxx",
          "type": "Scope"
        },
        {
          "id": "xxxx",
          "type": "Scope"
        }
      ]
    }
  ],
  "samlMetadataUrl": null
}

1 Ответ

0 голосов
/ 26 апреля 2019

На самом деле ADAL js использует скрытый Iframe для отправки запроса токена в Azure AD. Он предназначен для возврата идентификатора токена, когда ресурс, для которого запрашивается токен, совпадает с клиентским приложением. Когда ID-токен возвращается, он кэшируется библиотекой. Поэтому, когда мы используем authenticationContext.acquireToken (resource, callback) , это позволяет приложению получать токены без вывода сообщений без повторного запроса пользователя.

В вашем случае код выглядит нормально. Если бы вы проверили значение adalConfig.endpoints.api, оно должно совпадать с идентификатором AppID uri участника службы, в соответствии с приведенным выше файлом манифеста значение adalConfig.endpoints.api должно быть "https://mycompany.onmicrosoft.com/MyApplication".

...