1

我正在尝试为网站（非移动设备）启用登录和使用电话号码 + 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 builder：

  • AWS.CognitoIdentity
  • AWS.CognitoIdentityServiceProvider
  • AWS.CognitoSync

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

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

4

2 回答 2

2

AWS Amplify只是核心 AWS 服务的封装。目标是提供一个样板来处理常见的访问模式。如果您不想使用框架，则不必使用框架，并且可以直接使用核心服务。

在我向您介绍这些低级 API 之前，值得注意的是 Amplify 确实也有 vanilla JS API。请参阅此处的官方文档。您可以仅使用 JS 处理身份验证，而不必担心任何框架。

认证模块的文档可以在这里找到。

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

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);
    }
}
于 2020-07-15T13:49:08.337 回答
2

Cotter联合创始人在这里。

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

指南： 使用 HTML + Vanilla JS 发送 OTP。

工作示例： 在 CodeSandbox 中（您需要添加您的API_KEY_ID，您可以从仪表板获得）。

1.导入库

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

2.制作一个div包含id="cotter-form-container"表格

<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用于您的会话，这是验证 JWT 令牌的方法。

5.自定义表格

要显示通过 SMS 和 WhatsApp 发送 OTP 的按钮，请转到仪表板> 品牌。

于 2020-07-19T03:58:18.963 回答