需要从 JavaScript 调用 AWS Lambda 的示例

Question

只需要一个示例，说明如何在浏览器中从 JavaScript 运行调用 AWS Lambda 并在 JavaScript 控制台中显示函数结果。令人难以置信的是，我无法在 Google 或 AWS 文档中找到任何示例。

我的用例是我有一个 HTML 表单。提交表单后，我想使用 Lambda 来处理表单输入。假设 Lambda 函数完成时没有错误，我想将用户带到感谢页面。

请提供完整的 HTML 示例，而不仅仅是代码片段。

Answer 1

由于您需要从浏览器运行 Lambda，您有两种选择可以实现它。

使用 AWS Javascript SDK，通过静态配置或 Cognito 使用 IAM Permissions 与用户一起设置到您的 Lambda。您还可以考虑通过向主题发送消息将 Lambda 函数订阅到 SNS Topic 和运行 Lambda 。这种 SNS 方法还需要您通过单独的调用来存储和检索提交状态。
使用 AWS API Gateway 创建具有正确 CORS 配置的 RESTful 端点，您可以使用 AJAX.
[=32 从浏览器 ping =]

两种选择各有利弊。需要有关您的用例的更多信息才能正确评估哪一个最适合您。

Answer 2

我会在 Javascript 中使用 AWS SDK，步骤如下

引用js文件

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.100.0.min.js"></script>
Initialize/Configure SDK

AWS.config.update({region: 'REGION'}); AWS.config.credentials = new AWS.CognitoIdentityCredentials({IdentityPoolId: 'IdentityPool'});
创建服务 lambda 对象等等...

您可以在此 link

中查看后续步骤

http://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/browser-invoke-lambda-function-example.html

Answer 3

我看到人们已经为 Javascript 使用了 AWS SDK，但这不是特别需要的，因为您需要创建 Amazon Cognito 身份池，并为未经身份验证的身份启用访问权限（至少适合像我这样的初学者）。下面的代码对我来说很好用-

<html>
    <head>
<script>
    function callAwsLambdaFunction() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("myDiv").innerHTML = this.responseText;
            }
        };
        xhttp.open("GET", "https://test123.ap-south-1.amazonaws.com/dev", true);
        xhttp.send();

    }
    </script>   
        <title>Hello World!</title>
    </head>
    <body>
        <h1>Hello world!</h1>
        <h1>Click below button to call API gatway and display result below!</h1>
        <h1><div id="myDiv"></div></h1>
        <button onclick="callAwsLambdaFunction()">Click me!</button><br>
        Regards,<br/>
        Aniket
    </body>
</html>

以上是我添加到我的 S3 存储桶并制作静态站点的示例 index.html。几点注意事项 -

如果您使用 S3 进行静态站点托管，请从外部打开您的 index.html。
如果您的网站域与 API 网关域不同，请确保为您的 API 网关启用 CORS。否则你可能会得到 -

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://test123.ap-south-1.amazonaws.com/dev. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Answer 4

2017 年之后看到这个的人，可以看看AWS Amplify API class。示例代码取自 Amplify API 文档。

注意
1) 您必须使用 POST 方法来调用 lambda 函数。
2) 确保添加策略以调用未经身份验证（如果需要）和经过身份验证的角色的 lambda 权限。
3) 如果授予权限策略，用户无需登录即可调用 lambda。

import Amplify, { API } from 'aws-amplify';

Amplify.configure({
    Auth: {
    // REQUIRED - Amazon Cognito Identity Pool ID
        identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab',
    // REQUIRED - Amazon Cognito Region
        region: 'XX-XXXX-X', 
    // OPTIONAL - Amazon Cognito User Pool ID
        userPoolId: 'XX-XXXX-X_abcd1234', 
    // OPTIONAL - Amazon Cognito Web Client ID
        userPoolWebClientId: 'XX-XXXX-X_abcd1234',
    },
    API: {
        endpoints: [ 
            {
                name: "MyCustomLambdaApi",
                endpoint: "https://lambda.us-east-1.amazonaws.com/2015-03-31/functions/yourFuncName/invocations",
                service: "lambda",
                region: "us-east-1"
            }
        ]
    }
});

这就是您调用 lambda 函数的方式

let apiName = 'MyApiName'; // replace this with your api name.
let path = '/path'; //replace this with the path you have configured on your API
let myInit = {
    body: {}, // replace this with attributes you need
    headers: {} // OPTIONAL
}

API.post(apiName, path, myInit).then(response => {
    // Add your code here
});

需要从 JavaScript 调用 AWS Lambda 的示例

Need example of calling AWS Lambda from JavaScript

javascript

aws-lambda