如何将 aws cognito 与网络联合和 javascript 结合使用

Question

我正在尝试将 AWS Cognito 与身份提供商（使用亚马逊登录）一起使用，为我的 javascript 应用程序提供登录功能。经过大量搜索，我不得不问你们：你们能给我指一个描述步骤的好教程吗？我知道那里有很多文档，但要么文档不完整，要么是没有使用 cognito 的文档。我到目前为止是：

我已注册申请
我已经使用从 (1) 获得的应用程序 ID 创建了一个身份池

我尝试了以下方法来创建具有功能的登录按钮，但这不起作用：

<!DOCTYPE html>
<html>
    <head>
        <script src="aws-sdk.js" type="text/javascript"></script>
        <script>
            // Initialize the Amazon Cognito credentials provider
            AWS.config.region = 'eu-west-1'; // Region
            AWS.config.credentials = new AWS.CognitoIdentityCredentials({
                IdentityPoolId: 'xxx',
            });

        </script>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>TODO write content</div>
        <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>
document.getElementById('LoginWithAmazon').onclick = function() {
    options = { scope : 'profile' };
    amazon.Login.authorize(options, 'MY_REDIRECT_URL');
    return false;
  };
</script>
    </body>
</html>

我没有收到重定向，也没有看到登录弹出窗口。提前致谢。

Answer 1

您在问题中提到您希望使用 Amazon Cognito 为您的应用程序提供登录功能。

Amazon Cognito 支持两个实体，这两个实体本质上是高度解耦的：

用户池
身份池

用户池允许您向 Web 或移动应用程序添加身份验证，而身份池允许 verified/unverified 用户访问身份池设置中 IAM 角色中指定的一组 AWS 资源。 Cognito Identity Pools 不充当身份验证器，但它充当授权器，它在后端运行 get-credentials-for-identity API 调用后出售临时 AWS 凭证。

根据我从您的用例中了解到的情况，您希望在您的 JavaScript Web 应用程序中有一个 "Login with Amazon" 按钮，它会在成功验证 JWT 后将您带到一个网页[1]. 要实现此用例，应使用 Amazon Cognito 用户池。首先，您需要将 Amazon 作为身份提供商集成到您创建的用户池中 [2]。之后，您需要通过为您的用户池启动一个身份验证对象来在您的代码中提及相同的内容：

 function initCognitoSDK() {
        var authData = {
            ClientId : '<TODO: your app client ID here>', // Your client id here
            AppWebDomain : '<TODO: your app web domain here>', // Exclude the "https://" part. 
            TokenScopesArray : <TODO: your scope array here>, // like ['openid','email','phone']...
            RedirectUriSignIn : '<TODO: your redirect url when signed in here>',
            RedirectUriSignOut : '<TODO: your redirect url when signed out here>',
            IdentityProvider : '<TODO: your identity provider you want to specify here>', 
                    UserPoolId : '<TODO: your user pool id here>', 
                    AdvancedSecurityDataCollectionFlag : <TODO: boolean value indicating whether you want to enable advanced security data collection>
        };

在开发您的应用程序时，您可以参考此示例应用程序[3]，因为它具有相同的用例。

希望这个回答对您有所帮助。

参考资料

[1]。 https://docs.aws.amazon.com/cognito/latest/developerguide/amazon-cognito-user-pools-using-tokens-verifying-a-jwt.html

[2]。 https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-social-idp.html

[3]。 https://github.com/aws/amazon-cognito-auth-js/tree/master/sample

如何将 aws cognito 与网络联合和 javascript 结合使用

How to use aws cognito with web federation and javascript

javascript

amazon-web-services

amazon-cognito

login-with-amazon

参考资料