代表授权用户从浏览器中的客户端应用程序调用 azure 函数

Calling azure function from client app in browser on behalf authorized user

我的目标是拥有 Angular 8 个 SPA,其无服务器后端由多个使用来自 Facebook 的 OAuth 的 azure 函数应用程序代表,Google...

我在代表授权用户调用 azure 函数时遇到问题。函数将这些调用视为匿名用户。

从浏览器,功能returns授权用户名,从浏览器应用程序调用它returns 'no name',意味着用户未被授权。

我的猜测是来自 myapp.azurewebsites.net 的会话在我位于 localhost 的应用程序中不可见(它可以是任何其他域)。另外,我无法在函数端点的请求中提供会话。

那么,如何授权用户并从其他域的客户端应用程序调用azure函数?或者只有手动实现 JWT 令牌并在所有函数中传播逻辑才有可能? 另外,我不想向 Auth0 甚至 AAD 等第三方服务付费。

Jim Xu 提出了一种可行的方法,但不适用于我的情况。 我看到的缺点:

我正在寻找此类问题的答案:

  1. 我的案例有后端驱动的身份验证吗?
  2. 是否可以设置 post_login_redirect_url 接收令牌 服务也好?
  3. 也许可以通过 https://resources.azure.com/
  4. 是否可以为多个人共享访问令牌 功能应用程序? (这样,UI逻辑就会 简化到 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 配置:

根据我的测试,我们可以通过以下步骤调用facebook投射的Azure功能

  1. 将 Facebook 集成到您的 angular 应用程序中。这样做之后,我们可以登录 facebook 并获得 accessToken。具体实现方法请参考article.

    例如

    一个。将应用程序 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 交换为 'App Service Token'

请求

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

  {"access_token":"<token>"}

回应

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

  1. 调用 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