AWS Cognito Auth with Phone Number OTP 就像 firebase，没有 Amplify

Question

我正在尝试使用 Phone 号码 + OTP 为网站（不是移动设备）启用登录和注册，就像 Firebase Auth 提供的那样。

我查阅了无数教程，几乎所有教程都需要 AWS Amplify，然后需要了解 React/Angular/Vue（我不是前端开发人员）。我遵循了像这样的教程 (https://techinscribed.com/passwordless-phone-number-authentication-using-aws-amplify-cognito/)，并创建了教程中所述的所有 Lambda 函数、Cognito UserPools。我的障碍是它需要 Amplify，而我只想使用 vanilla JavaScript.

所以我下载了 AWS SDK 构建器：

• AWS.CognitoIdentity
• AWS.CognitoIdentity服务提供商
• AWS.CognitoSync

我正在使用 Zappa 和 Flask（无服务器）向用户呈现 HTML + JS。我为后端配置了 API 网关。我需要做的就是对用户进行身份验证并为经过身份验证的用户生成会话令牌，允许访问他们的个人数据（如保存的信息、收藏夹等）。

我祈祷有人能帮助我弄清楚如何验证我的用户并为我的用户生成 session/JWT 令牌。任何指导将不胜感激。

Answer 1

AWS Amplify 只是核心 AWS 服务的包装器。目标是提供一个处理常见访问模式的样板。不想用framework可以不用，直接用核心服务即可。

在我向您指出这些低级 API 之前，值得注意的是 Amplify 也有普通的 JS API。参考官方文档here。只用JS就可以搞定认证，不用担心任何框架。

可以找到身份验证模块的文档 here。

作为参考，以下是注册和登录的脚本：

import { Auth } from 'aws-amplify';

async function signUp() {
    try {
        const user = await Auth.signUp({
            username,
            password,
            attributes: {
                email,          // optional
                phone_number,   // optional - E.164 number convention
                // other custom attributes 
            }
        });
        console.log({ user });
    } catch (error) {
        console.log('error signing up:', error);
    }
}


async function SignIn() {
    try {
        const user = await Auth.signIn(username, password);
    } catch (error) {
        console.log('error signing in', error);
    }
}

Answer 2

Cotter 联合创始人。

我们有一个简单的库，允许您通过 SMS/WhatsApp 使用 Vanilla Javascript 向用户发送 OTP 验证。

指南： Sending OTP with HTML + Vanilla JS.

工作示例： in CodeSandbox (you need to add your API_KEY_ID, which you can get from the dashboard).

1。导入库

<!-- 1️⃣ Get Cotter SDK -->
<script
  src="https://js.cotter.app/lib/cotter.js"
  type="text/javascript"
></script>

2。用 id="cotter-form-container" 创建一个 div 来包含表单

<div
  id="cotter-form-container"
  style="width: 300px; height: 300px;"
></div>

3。显示表格

<!-- 3️⃣ Initialize Cotter with some config -->
<script>
  var cotter = new Cotter("<YOUR_API_KEY_ID>"); //  Specify your API KEY ID here

  cotter
    .signInWithOTP()
    .showPhoneForm()  // to send OTP to using email use .showEmailForm()
    .then(payload => console.log(payload))
    .catch(err => console.log(err));
</script>

4。获取 JWT 令牌

检查你的控制台日志，你应该得到这样的响应：

{
    "token": {...},
    "phone": "+12345678910",
    "oauth_token": {
        "access_token": "eyJhbGciOiJFUzI1NiIsImtpZCI6I...", // use this
        "id_token": "eyJhbGciOiJFUzI1NiIsImtpZCI6IlN...",
        "refresh_token": "27322:UYO4pcA17i4sCIYD...",
        "expires_in": 3600,
        "token_type": "Bearer",
        "auth_method": "OTP"
    },
    "user": {
        "ID": "abcdefgh-abcd-abcd-abcd-f17786ed499e", // Cotter User ID
        ... // more user info
    }
}

为您的会话使用 oauth_token.access_token，here's how you can validate the JWT token。

5。自定义表单

要显示通过短信和 WhatsApp 发送 OTP 的按钮，请转到 Dashboard > 品牌。