带有电话号码 OTP 的 AWS Cognito 身份验证，就像 firebase，没有 Amplify

Posted 2023-03-27

【中文标题】带有电话号码 OTP 的 AWS Cognito 身份验证，就像 firebase，没有 Amplify

【英文标题】：AWS Cognito Auth with Phone Number OTP just like firebase, without Amplify

【发布时间】：2020-11-05 00:37:00

【问题描述】：

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

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

所以我下载了 AWS 开发工具包构建器：

AWS.CognitoIdentity AWS.CognitoIdentityServiceProvider AWS.CognitoSync

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

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

【问题讨论】：

你用 otp in cognito 手机实现了吗

是的。使用 Amplify Cognito 库实现。查看所选答案

【参考方案1】：

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

在我向您介绍这些低级 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);
    

【讨论】：

@JohnSnow，如果答案确实解决了您的问题，您介意接受吗。这样，其他偶然发现此问题的人可以轻松找到解决方案。干杯。

我很抱歉@Mayank Raj，我是 Amplify 的新手，所以我需要一些时间阅读您指导我阅读的 Amplify 文档，以便我可以正确应用您建议的解决方案。我衷心感谢您的回复，并将您的答案标记为正确，并旨在进一步编辑我的原始问题，了解我如何在能够应用您的建议后解决问题。抱歉有点慢，我现在可能是你所说的“菜鸟”。感谢您的耐心 Mayank

【参考方案2】：

Cotter这里是联合创始人。

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

指南： Sending OTP with HTML + Vanilla JS.

工作示例： in CodeSandbox（你需要添加你的API_KEY_ID，你可以得到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": "[phone]",
    "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_tokenhere's how you can validate the JWT token。

5。自定义表单

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

【讨论】：

嗨，不错的产品。您的答案中标题为指南的链接（靠近顶部）不起作用，所以也许更新它。我发现这是在寻找 Firebase 的替代品，这给我带来了一些困难（在我切换项目/应用程序后，我的两个真实数字现在无法用于 Firebase 平台上的身份验证）。无论我最终是否使用 Cotter，它看起来都不错。坚持下去，必须有更好的替代方案来替代谷歌/亚马逊半途而废的服务。