Вызов функции azure из клиентского приложения в браузере от имени авторизованного пользователя

Question

Моя цель - иметь Angular 8 SPA с серверным бэкэндом, представленным несколькими azure приложениями функций, использующими OAuth от Facebook, Google ...

У меня проблема с вызовом azure функций от имени авторизованных пользователей. Функция видит эти вызовы как анонимные пользователи.

Из браузера функция возвращает имя авторизованного пользователя, из вызова приложения браузера возвращает «нет имени», что означает, что пользователь не авторизован.

Я предполагаю, что сеанс с myapp.azurewebsites. net не виден в моем приложении, которое находится на localhost (это может быть любой другой домен). Кроме того, я не могу предоставить сеанс в запросе к конечной точке функции.

Итак, как можно авторизовать пользователей и вызывать функции azure из клиентского приложения в другом домене? Или это возможно только при ручной реализации токенов JWT с расширенной логикой c для всех функций? Кроме того, я не хочу платить сторонним службам, таким как Auth0 или даже AAD.

Джим Сюй предложил способ, который работает, но не для моего случая. Недостатки, которые я вижу:

• При таком подходе я не вижу имени пользователя и адреса электронной почты в основной записи претензий. Также не уверен, что я могу использовать в качестве идентификатора пользователя.
• Логины входа c будут распространяться на все приложения, использующие API.
• Потребуется хранить токен FB для аутентификации всех функций. apps

Я ищу ответы на следующие вопросы:

1. Есть ли в моем случае аутентификация на основе бэкэнда?
2. Есть ли возможность настроить post_login_redirect_url для получения токена также для обслуживания?
3. Может быть, можно настроить через https://resources.azure.com/?
4. Можно ли совместно использовать токен доступа для нескольких функциональных приложений? (Таким образом, логика пользовательского интерфейса c будет упрощена, чтобы получить доступ к 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 config:

Конфигурация Fasebook:

Answer 1

Согласно моему тесту, мы можем использовать следующие шаги для вызова функции Azure, спроектированной Facebook

1. Интеграция Facebook в ваше приложение angular. После этого мы можем войти в Facebook и получить accessToken. Подробнее о том, как это реализовать, см. статью .

   Например

   a. добавьте URL приложения в Valid OAuth Redirect URIs

   b. добавьте следующий код в app.component.ts

   
   export class AppComponent {
     title = 'web';
     fbLibrary() {
   
       (window as any).fbAsyncInit = function() {
         window['FB'].init({
           appId      : '<app id you use to project azure function>',
           cookie     : true,
           xfbml      : true,
           version    : 'v3.1'
         });
         window['FB'].AppEvents.logPageView();
       };
   
       (function(d, s, id){
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) {return;}
          js = d.createElement(s); js.id = id;
          js.src = "https://connect.facebook.net/en_US/sdk.js";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
   
   }
   ngOnInit() {
     this.fbLibrary();
   }
     login() {
   
       window['FB'].login((response) => {
   
   
           if (response.authResponse) {
            //get access token
             var accessToken=response.authResponse.accessToken;
             console.log('login response',accessToken);
             window['FB'].api('/me', {
               fields: 'last_name, first_name, email'
             }, (userInfo) => {
   
               console.log("user information");
               console.log(userInfo);
             });
   
           } else {
             console.log('User login failed');
           }
       }, {scope: 'email'});
   }
   }
   
   
   

   c. добавить кнопку входа в систему html

2. Позвоните в следующем запросе, чтобы обменять этот accessToken на токен службы приложений

Запрос

   POST https://<appname>.azurewebsites.net/.auth/login/aad HTTP/1.1
  Content-Type: application/json

  {"access_token":"<token>"}

Ответ

{
    "authenticationToken": "...",
    "user": {
        "userId": "sid:..."
    }
}

вызовите функцию azure

Get https://myapp.azurewebsites.net/Function1
X-ZUMO-AUTH: <authenticationToken_value>

Для получения дополнительной информации, пожалуйста, обратитесь к https://docs.microsoft.com/en-us/azure/app-service/app-service-authentication-how-to.