23

Just need an example of how to call AWS Lambda from JavaScript running in a browser and display function result in JavaScript console. Incredibly, I cannot find any examples on Google or from AWS documentation.

My use case is that I have an HTML form. When the form is submitted, I want to use Lambda to process the form inputs. Assuming that the Lambda function finishes with no errors, I then want to take the user to a thank you page.

Please include a complete HTML example, not just a code snippet.

Improve this question
7
  • 1
    Part of my confusion is I don't know whether to do 'invoke' or 'Invoke' (with a capital 'i'). Documentation shows lower case but JavaScript library shows capital I. I've tried both ways and getting inconsistent results. Commented Aug 16, 2015 at 18:05
  • Do you mean from the client or from the server? Browser or Node.js? Commented Aug 17, 2015 at 2:14
  • 1
    From a browser. I'll edit the question to clarify. Commented Aug 17, 2015 at 13:37
  • 1
    I didn't mark that as accepted because I had asked for a self-contained example, not a conceptual outline. Commented Oct 11, 2015 at 1:05
  • @JesseBarnum Did you resolve this ? If yes, how.. can you post that as an answer? Commented May 1, 2016 at 5:39

5 Answers 5

Reset to default
12

Since you need to run Lambda from the browser, you have two options you can achieve it.

  1. Use AWS Javascript SDK, set it up with user via static configuration or Cognito with IAM Permissions to your Lambda. You can also consider subscribing your Lambda functions to SNS Topic and run the Lambda by sending a message to the topic. This SNS approach would also require you to store and retrieve the submission state via separate call.

  2. Use AWS API Gateway to create RESTful endpoint with proper CORS configuration that you can ping from the browser using AJAX.

Both options have their pros and cons. More information about your use-case would be necessary to properly evaluate which one suits you best.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

I'm trying to do #1 with IAM permissions. I'm not calling SNS, I'm trying to call Lambda directly (using the invoke function in RequestResponse mode), but it's not working. And when I say 'not working', I mean that I click the submit button in my form and nothing happens, there is nothing in the Java error console, so I was hoping to see a working example from somebody.
What do you mean by "direct" way? This? docs.aws.amazon.com/lambda/latest/dg/…
No, this: docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/…
Yes, that's also possible. I updated my answer with that.
I did option #2 and this page really helped me with the CORS errors I got: crashtest-security.com/…. Pay particular attention to the Access-Control-Allow-Origin.
|
10

I see people have used AWS SDK for Javascript but it is not required specially since you need to create Amazon Cognito identity pool with access enabled for unauthenticated identities (Atleast for beginners like me). Below code works fine for me -

<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>

Above is sample index.html that I have added to my S3 bucket and made a static site. Couple of points to note -

  1. Make your index.html open from outside if you are using S3 for static site hosting.
  2. Make sure you turn on CORS for your API gateway if your website domain is not same as API gateway domain. Else you might get -

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).

Improve this answer

2 Comments

API gateway charges extra, $3.5 per million requests
This approach is similar to the one demonstrated in Amazon's walkthrough here: webapp.serverlessworkshops.io
5

For people who see this after 2017, you can check out AWS Amplify API class. The sample code is taken from Amplify API document.

Note that
1) You have to use POST method to invoke lambda functions.
2) Make sure to add policy to invoke lambda permission for your unauthenticated(if needed) and authenticated roles.
3) User doesn't need to sign in to invoke the lambda if a permission policy is granted. 

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"
            }
        ]
    }
});

This is how you call your lambda function

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
});
Improve this answer

1 Comment

Can we use the AWS Amplify to invoke the step functions?
3

Invoke AWS Lambda Using No API Gateway || Using no AWS SDK

Assumption is that you've made your function url and made the necessary cross-origin settings. Both can be done on the configuration tab of the lambda function Assumption is that the lambda is written in python, but called from javascript

1. Write the function

The payload is retrieved from the event variable The format for the event variable is given by aws

def lambda_handler(event, context):
    payload = event["rawQueryString"]
    return {
       "payload": payload
    }

2. Use a simple fetch to your function URL

In the example, you want to send a name and password to the function

fetch('https://aws-lambda-function-url?name=jason&password=1234')
  .then((response) => response.json())
  .then((data) => console.log(data));

3. Result

{payload: 'name=jason&password=1234'}

Improve this answer

Comments

-1

I would use AWS SDK for Javascript, below the steps

  1. Reference the js file

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

  2. Initialize/Configure the SDK

    AWS.config.update({region: 'REGION'}); AWS.config.credentials = new AWS.CognitoIdentityCredentials({IdentityPoolId: 'IdentityPool'});

  3. Create the service lambda Object and so on...

you can see the next steps in this link

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.