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

Question

我的目标是让 Angular 8 SPA 具有无服务器后端，由使用 Facebook、Google 的 OAuth 的多个 azure 函数应用程序表示......

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

从浏览器中，函数返回授权的用户名，从浏览器应用程序调用中，它返回“无名称”，这意味着用户未获得授权。

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

那么，如何从其他域的客户端应用程序授权用户并调用azure函数呢？或者只能通过手动实现 JWT token 并将逻辑分布到所有功能来实现？另外，我不想向 Auth0 甚至 AAD 等第三方服务付费。

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

• 通过这种方法，我无法在 claim 本金。也不确定我可以使用什么作为用户 ID。
• 登录逻辑将分布在使用该 API 的所有应用中。
• 需要存储 FB token 来验证所有功能应用

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

1. 我的案例有后端驱动的身份验证吗？
2. 是否可以设置 post_login_redirect_url 来接收 token 还提供服务吗？
3. 也许可以通过以下方式设置 https://resources.azure.com/ ？
4. 是否可以为多个共享访问 token 功能应用程序？(这样，UI逻辑就会是简化为获取 app/.auth/login/provider 然后保存服务 token 。)

我的代码示例和配置:

这是我用来调用的客户端应用程序的主要部分:

<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 配置:

Answer 1

根据我的测试，我们可以使用以下步骤来调用facebook转换的Azure功能

1. 将 Facebook 集成到您的 Angular 应用程序中。完成此操作后，我们可以登录 facebook 并获取 accessToken。更详细的实现方法请引用article .

   例如

   a.将应用程序 URL 添加到有效的 OAuth 重定向 URI

   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 交换为“应用服务 token ”

请求

   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://learn.microsoft.com/en-us/azure/app-service/app-service-authentication-how-to 。