如何使用 Amplify Auth Class 添加“记住我”功能？

Posted 2023-02-19

【中文标题】如何使用 Amplify Auth Class 添加“记住我”功能？

【英文标题】：How to use Amplify Auth Class to add "remember me" functionality?

【发布时间】：2021-06-25 01:49:56

【问题描述】：

我正在使用 Vue 和 AWS Amplify 为应用程序创建自定义身份验证组件。我正在尝试创建一个复选框以在登录时记住设备，这将允许用户选择在成功登录后不必使用 mfa 代码登录。查看 Auth Class 文档，它似乎没有包含“记住我”或“记住此设备”选项。

有没有办法存储用户会话，以便他们在登录后不会在设备上使用 mfa 或任何其他方式？

另外，我已经将我的 cognito 用户池配置为能够在用户选择加入时记住设备，并在他们选择加入时抑制 mfa。似乎他们没有任何当前的方法来运行该选项...

【参考方案1】：

以下内容均基于此处对该问题的讨论：https://github.com/aws-amplify/amplify-js/issues/2552

有一种方法可以根据您在问题中提出的内容，通过 Amplify 轻松添加“记住我”功能。但是，请记住，我提出的方法使用 localStorage 与 sessionStorage，OWASP 不鼓励这种方法（在此处讨论：Can local storage ever be considered secure?，并在此处记录：https://cheatsheetseries.owasp.org/cheatsheets/Session_Management_Cheat_Sheet.html）。

但是，它是一个简单的解决方案，用于测试并让某些东西快速运行（只是不要忘记在上线之前对其进行保护——著名的遗言哈哈哈）。

步骤如下：

使用您要设置的所有配置创建一个 awsConfig 对象，如放大文档中所述：https://docs.amplify.aws/lib/auth/start/q/platform/js/#re-use-existing-authentication-resource

// awsConfig.tsx module:
const awsConfig = 
    // REQUIRED only for Federated Authentication - Amazon Cognito Identity Pool ID
    identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab',
    
    // REQUIRED - Amazon Cognito Region
    region: 'XX-XXXX-X',
    
    //...etc...

    //storage: window.sessionStorage OR .localStorage <--- LEAVE THIS OUT OF THIS CONFIG


export default awsConfig

进入您的 App.tsx 或 App.js，在 App 函数内部，调用 Auth.configure()，并将 awsConfig 对象从上面的 #1 传递给它：

// App.tsx module:
import  Auth  from '@aws-amplify/auth'
import awsConfig from './awsConfig'

//...etc...

const App: React.FC = () => 
  Auth.configure(awsConfig)

//...etc...

进入您的登录组件，检查是否勾选了“记住我”复选框，然后重新调用 Auth.configure() 函数，但这次也传递了首选存储参数：

//Login.tsx module
import  Auth  from '@aws-amplify/auth'
import awsConfig from './awsConfig'
//...etc...

rememberLogin
     ? Auth.configure( ...awsConfig, storage: localStorage )
     : Auth.configure( ...awsConfig, storage: sessionStorage );

//...etc...

try 
     const awsUser = await Auth.signIn(username, password);

//...etc...

没有第 4 步……就是这样……你已经完成了……