Yojaka (SmartConnect) Connectors
Yojaka (SmartConnect) Connectors Authorization Sample LWA Pages
prev | next

Sample LWA Pages

This page gives you some guidelines and sample HTML/Javascript code to build your own Login-With-Amazon (LWA) pages for sellers to authorize your application. This assumes that you have already completed the LWA on-boarding steps documented in the Authorization section.

Note

You will need the Client ID and Client Secret values of your Security Profile in the LWA pages.

Login Page

Below is a sample login page for a seller to authorize your connector application. You need to host the Login page at a location where a seller can access it. Customize the page according to your connector’s requirements.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Use any name of your choice</title>
    </head>
    <body>
        <div id="amazon-root"></div>
        <script type="text/javascript">
            window.onAmazonLoginReady = function() {
                // Use the Client ID of your security profile
                amazon.Login.setClientId('amzn1.application-oa2-client.123123');
            };
            (function(d) {
                var a = d.createElement('script'); a.type = 'text/javascript';
                a.async = true; a.id = 'amazon-login-sdk';
                a.src = 'https://assets.loginwithamazon.com/sdk/na/login1.js';
                d.getElementById('amazon-root').appendChild(a);
            })(document);
        </script>
        <!-- Include any HTML that you wish -->
        <p>
            <a href id="LoginWithAmazon">
                <img border="0" alt="Login with Amazon"
                     src="https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_156x32.png"
                     width="156" height="32" />
            </a>
            <script type="text/javascript">
                document.getElementById('LoginWithAmazon').onclick = function() {
                    options = {}
                    options.scope = ['smartconnect::inventories',
                                     'smartconnect::orders',
                                     'smartconnect::pricing',
                                     'smartconnect::events',
                                     'smartconnect::returns',
                                     'smartconnect::sku'];
                    options.scope_data = {
                        'smartconnect::inventories' : {'essential': true},
                        'smartconnect::orders' : {'essential': true},
                        'smartconnect::pricing' : {'essential': true},
                        'smartconnect::events' : {'essential': true},
                        'smartconnect::returns' : {'essential': true},
                        'smartconnect::sku' : {'essential': true}
                    };
                    options.response_type='code';
                    amazon.Login.authorize(options,
                        'https://<Hostname and path for browser redirect to post-signin.html>/post-signin.html');
                    return false;
                };
            </script>
        </p>
    </body>
</html>

Customization

  • Modify line 12 to use the Client ID of the LWA security profile that you created for your connector.

  • Include any HTML of your choice in the body of the page (line 21).

  • On line 43, provide the complete host/domain name and path to access the post-signin.html page (given below).

Post-Login Page

Once a seller clicks the Login With Amazon button on the login page, authenticates with Amazon and authorizes your connector, the seller will be redirected to a post-login page. This page will receive the LWA authorization code as a query parameter in the URL.

This page should pass the authorization code to a backend server which then exchanges the authorization code with LWA for a refresh token and an access token. Your connector should store both those values in a data-store and use that to authorize API calls to Amazon Yojaka.

The page below is provided as a sample and should be used only for testing. It exchanges the authorization code with LWA and displays the refresh token and access token. It also provides a mechanism to obtain a new access token upon expiry of a previous access token.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Post sign-in</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    </head>
    <body>
        <div id="amazon-root"></div>
        <script type="text/javascript">
            window.onAmazonLoginReady = function() {
                // Use the Client ID of your security profile
                amazon.Login.setClientId('amzn1.application-oa2-client.123123');
            };
            (function(d) {
                var a = d.createElement('script'); a.type = 'text/javascript';
                a.async = true; a.id = 'amazon-login-sdk';
                a.src = 'https://assets.loginwithamazon.com/sdk/na/login1.js';
                d.getElementById('amazon-root').appendChild(a);
            })(document);

            function selectAndCopy(id) {
                var text = $("#" + id).select();
                document.execCommand("copy");
            }
        </script>
        <div id="content">
            <table>
                <tbody>
                    <tr>
                        <td style="font-weight: bold;">Authorization Code</td>
                        <td id="authorizationCode"></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="font-weight: bold;">Refresh Token</td>
                        <td><textarea id="refreshToken" readonly="readonly" cols="100" rows="6"></textarea></td>
                        <td><button onclick="selectAndCopy('refreshToken'); return false;">Copy</button></td>
                    </tr>
                    <tr>
                        <td style="font-weight: bold;">Access Token</td>
                        <td><textarea id="accessToken" readonly="readonly" cols="100" rows="6"></textarea></td>
                        <td><button onclick="selectAndCopy('accessToken'); return false;">Copy</button></td>
                    </tr>
                    <tr>
                        <td style="font-weight: bold;">Access Token Expiry</td>
                        <td id="expiry"></td>
                    </tr>
                </tbody>
            </table>
            <button id="refresh" type="button">Refresh Access Token</button>
        </div>
        <script type="text/javascript">
            function parseQueryString () {
                var parsedParameters = {},
                uriParameters = location.search.substr(1).split('&');

                for (var i = 0; i < uriParameters.length; i++) {
                    var parameter = uriParameters[i].split('=');
                    parsedParameters[parameter[0]] = decodeURIComponent(parameter[1]);
                }

                return parsedParameters;
            }

            $(document).ready(function() {
                var params = parseQueryString();
                $("#authorizationCode").text(params.code);

                $.ajax({
                    type: 'POST',
                    url: 'https://api.amazon.com/auth/o2/token',
                    data: {
                        grant_type: 'authorization_code',
                        // Replace with your security profile's Client ID
                        client_id: 'amzn1.application-oa2-client.123123',
                        // Replace with your security profile's Client Secret
                        client_secret: 'f477....',
                        code: params.code
                    },
                    success: function(data) {
                        $("#refreshToken").text(data.refresh_token);
                        $("#accessToken").text(data.access_token);

                        var expireDate = new Date(Date.now() + data.expires_in * 1000);
                        $("#expiry").text(expireDate);
                    }
                });
            });

            $("#refresh").click(function(event) {
                if ($("#refreshToken").text().length > 0) {
                    $.ajax({
                        type: 'POST',
                        url: 'https://api.amazon.com/auth/o2/token',
                        data: {
                            grant_type: 'refresh_token',
                            // Replace with your security profile's Client ID
                            client_id: 'amzn1.application-oa2-client.123123',
                            // Replace with your security profile's Client Secret
                            client_secret: 'f477....',
                            refresh_token: $("#refreshToken").text()
                        },
                        success: function(data) {
                            $("#refreshToken").text(data.refresh_token);
                            $("#accessToken").text(data.access_token);

                            var expireDate = new Date(Date.now() + data.expires_in * 1000);
                            $("#expiry").text(expireDate);
                        }
                    });
                }
            });
        </script>
    </body>
</html>

Customization

  • Modify lines 13, 76 and 99 to use the Client ID of the LWA security profile that you created for your connector.

  • Modify lines 78 and 101 to use the Client Secret of the LWA security profile that you created for your connector.

No feedback URL or SIM folder provided | Edit in Code Browser

On this page