Azure-Samples/ms-identity-javascript-angular-spa-aspnetcore-webapi

How to make this example code works for AnyOrg + Personal Accounts

franva opened this issue · 3 comments

My project has

  1. Reactjs

  2. Asp.Net Core Web Api

to access user's emails from Hotmail. The Reactjs app and WebApi live on different servers.

The example is almost what I need, but it only accepts accounts within same organization, not accepts Personal accounts.

I thought I only need to change the Tenant ID from a specific ID to "common" in related configurations and it will work. I also registered the Supported account types on Azure for both Web Api and Reactjs to use the

AnyOrg + Personal Account
image

here is the config for Angular

{
  "auth": {
    "clientId": "28xxx12",
    "authority": "https://login.microsoftonline.com/common",
    "validateAuthority": true,
    "redirectUri": "http://localhost:4200",
    "postLogoutRedirectUri": "https://localhost:44321/signout-oidc",
    "navigateToLoginRequestUrl": true
  },
    "cache": {
        "cacheLocation": "localStorage"
    },
  "scopes": {
    "loginRequest": [ "openid", "profile", "Mail.Read", "offline_access", "user.read"]
  },
    "resources": {
      "todoListApi": {
        "resourceUri": "https://localhost:44351/api/todolist/",
        "resourceScope": "https://papayee008.onmicrosoft.com/papayee008/access_as_user"
      }
    }     
}

here is the config for Web Api:

{
"AzureAd": {
"Instance": "https://login.microsoftonline.com/",
"Domain": "papayee008.onmicrosoft.com",
"TenantId": "common",
"ClientId": "28xxx12"
},
"https_port": 44351,
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft": "Warning",
"Microsoft.Hosting.Lifetime": "Information"
}
},
"AllowedHosts": "*"
}

But when I was trying to log in with my personal account, it throws me this error:
image

The simplest solution would be the use the same app/client id for both the SPA and the API. That is, instead of making separate app registrations for each component (as is suggested in the readme), simply make one app registration where you combine the steps for Register the service app (TodoListAPI) and Register the client app (TodoListSPA) in the readme of this repository.

In the meantime, we will make a new sample to explain how to enable multi-tenancy for apps with separate app registrations.

Let us know if that solves your issue.

@franva were you able to solve your issue? There are some updates with the project and readme, please check them out as well.

thanks @derisen I have solved this issue by using "consumers" instead of "common".
It should not matter, but it works. After this I changed it back to "common" and also works.

I have no idea why.....