Question

我的目标是让Angular 8 SPA的无服务器后端使用Facebook，Google ...

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

该功能从浏览器返回授权用户名，从浏览器应用调用此函数返回“ no name”（无用户名），表示该用户未被授权。

我的猜测是，来自 myapp.azurewebsites.net 的会话在 localhost （可以是任何其他域）中的我的应用中不可见。另外，我无法在功能终结点的请求中提供会话。

那么，如何通过其他域的客户端应用程序授权用户并调用Azure函数？还是只有手动实现JWT令牌并在所有功能中扩展逻辑，才有可能？ 另外，我不想支付Auth0甚至AAD等第三方服务的费用。

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

通过这种方法，我无法在索赔本金。同样不确定我可以用作用户ID。
登录逻辑将散布在所有使用该API的应用中。
需要存储FB令牌来验证所有功能应用

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

我的案例有后端驱动的身份验证吗？
是否可以设置post_login_redirect_url来接收令牌还服务吗？
也许可以通过设置 https://resources.azure.com/？
是否可以共享多个访问令牌功能应用程序？（通过这种方式，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配置：

Answer 1

根据我的测试，我们可以使用以下步骤调用facebook投影的Azure函数

将Facebook集成到您的角度应用程序中。之后，我们可以登录facebook并获得accessToken。有关如何实施的更多详细信息，请参阅article。

例如

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

调用以下请求，以将该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:..."
    }
}

调用天蓝色函数

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。

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

1 个答案: