How to Login and Authenticate Microsoft Graph B2C User across ASP Net Core2, VueJS, Xamarin.Forms and Azure Functions C# precompiled (v1 and v2)? - azure

Question

I am developing a portal, and have this scenario:
The user enters the ASP.Net Core 2 Razor Pages Web portal, signup or sign-in with Facebook
On the main page, index.cshtml, there is HTML and a simple VueJS with a property {{ Account.Total }}
The VueJS brings this Account.Total value from an Azure Function using Axios Javascript library. https://myfunctionapp.azurewebsites.net/api/GetAccountTotal?AccountId=ABC
User also logs in UWP and Mobile Xamarin.Forms App
The Mobile App, made in Xamarin.Forms also calls this Azure Function to get the Account.Total
The UWP App also calls this Azure Function to get the Account.Total
The idea is that the ASP.Net Core would be just a Client, like the UWP, and Xamarin App. The Azure Functions would be the backend, like the Web API; The Microsoft Graph Facebook Authentication would secure all this and identify the User.
The Azure Function need to use the same Graph/Azure AD B2C Authentication. The user will login just one time at the ASP.Net Razor Page, and all related services and calls must read these credentials.
How to configure, and what code is needed to do this Login and Authenticate Microsoft Graph B2C Facebook User Account across ASP Net Core2, VueJS and Azure Functions C# precompiled (v1 and v2)?

Answer 1

All this look obvious, but after some days trying, I will post here the steps.
(WIll edit this answer to put more details)
But the most important difficult to find part (in order) are:
1) It worked after I added the additionalLoginParams
"additionalLoginParams": ["response_type=code id_token", "resource=<app_id>"]
on https://resources.azure.com/
At the top of the page, select Read/Write.
In the left browser, navigate to subscriptions > resourceGroups > > providers > Microsoft.Web > sites > > config > authsettings.
Click Edit.
Modify the following property. Replace with the Azure Active Directory application ID of the service you want to access.
2) On ASP.Net Core 2 you put Login and Logout:
LOGIN<br />
LOGOUT<br />
and you can request
string UserName = (string)Request.Headers["X-MS-CLIENT-PRINCIPAL-NAME"];
string UserId = (string)Request.Headers["X-MS-CLIENT-PRINCIPAL-ID"];
string Token = Request.Headers["X-MS-TOKEN-AAD-ID-TOKEN"];
3) Then on the JavaScript, you must Call the Azure Function sending the Authorization Header Bearer Token
function WhoAmI() {
var Token = "#ViewData["Token"]";
var url = "https://MyFUNCTION.azurewebsites.net/api/WhoAmI";
var headers = { headers: { "Authorization": `Bearer ${Token}` } };
//if (Token == "") headers = null;
axios.get(url,
headers
).then(response => {
console.log("WhoAmI()");
console.log(response.data);
});
}
Sources:
https://learn.microsoft.com/en-us/azure/app-service/app-service-authentication-how-to#refresh-access-tokens
Maybe I will also need to use
0) ADAL.NET (Microsoft.IdentityModel.Clients.ActiveDirectory)