Моя цель - иметь Angular 8 SPA с бессерверным бэкэндом, представленным несколькими приложениями с функциями Azure, использующими OAuth из Facebook, Google ...
У меня проблема с вызовом функций Azure от имени авторизованных пользователей. Функция видит эти вызовы как анонимных пользователей.
В браузере функция возвращает имя авторизованного пользователя, а при вызове приложения в браузере возвращает «без имени», что означает, что пользователь не авторизован.
Я предполагаю, что сеанс с myapp.azurewebsites.net не отображается в моем приложении, которое находится на localhost (это может быть любой другой домен). Кроме того, я не могу указать сеанс в запросе на функционирование конечной точки.
Итак, как можно авторизовать пользователей и вызывать функции Azure из клиентского приложения в другом домене? Или это возможно только с ручной реализацией токенов JWT с распределенной логикой по всем функциям? Кроме того, я не хочу платить сторонним сервисам, таким как Auth0 или даже AAD.
Джим Сюй предложил способ, который работает, но не в моем случае. Недостатки вижу:
- При таком подходе я не могу видеть имя пользователя и адрес электронной почты в субъекте претензий. Также не уверен, что я могу использовать в качестве идентификатора пользователя.
- Логика входа будет распространена на все приложения, использующие API.
- Потребуется хранить токен FB для аутентификации всех функциональных приложений.
Ищу ответы на такие вопросы:
- Есть ли в моем случае аутентификация, управляемая сервером?
- Есть ли возможность настроить post_login_redirect_url для получения токена для обслуживания?
- Может быть, это можно настроить через https://resources.azure.com/?
- Можно ли поделиться токеном доступа для приложений с несколькими функциями? (Таким образом, логика пользовательского интерфейса будет упрощена, чтобы получить доступ к app / .auth / login / provider, а затем сохранить токен службы.)
Мой пример кода и конфигурации:
Вот основные части клиентского приложения, которые я использую для вызова:
<button (click)="call('https://myapp.azurewebsites.net/Function1')">CallWithoutAuth</button>
<button (click)="call('https://myapp.azurewebsites.net/Function2')">CallWithAuth</button>
<a href="https://myapp.azurewebsites.net/.auth/login/facebook?post_login_redirect_url=http%3A%2F%2Flocalhost%3A5000" target="_blank">Log in with Facebook</a>
Тело функции вызова:
var url = 'my azure func url with auth via facebook';
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
}
};
xhttp.onerror = function(e){console.log(e, this)};
xhttp.open("GET", url, true);
xhttp.send();
Код функции:
public static async Task<IActionResult> Run(
[HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = "Func2")] HttpRequest req,
ClaimsPrincipal claimsPrincipal)
{
var name = claimsPrincipal?.Identity?.Name;
return (ActionResult)new OkObjectResult($"Hello, {name ?? "no name"}");
}
Вот конфигурации приложений функций:
Конфигурация CORS:
Конфигурация Fasebook:
