代表授权用户从浏览器中的客户端应用程序调用 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 提出了一种可行的方法,但不适用于我的情况。
我看到的缺点:
- 使用这种方法,我无法在
索赔本金。也不确定我可以使用什么作为用户 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 配置:
根据我的测试,我们可以通过以下步骤调用facebook投射的Azure功能
将 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
调用以下请求将此 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:..."
}
}
- 调用 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。
我的目标是拥有 Angular 8 个 SPA,其无服务器后端由多个使用来自 Facebook 的 OAuth 的 azure 函数应用程序代表,Google...
我在代表授权用户调用 azure 函数时遇到问题。函数将这些调用视为匿名用户。
从浏览器,功能returns授权用户名,从浏览器应用程序调用它returns '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 配置:
根据我的测试,我们可以通过以下步骤调用facebook投射的Azure功能
将 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
调用以下请求将此 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:..."
}
}
- 调用 azure 函数
Get https://myapp.azurewebsites.net/Function1
X-ZUMO-AUTH: <authenticationToken_value>