amazon-cognito - 使用 Vue3 amplify 针对 AWS cognito 对用户进行身份验证
问题描述
我正在使用 vue3 并设置了一个 AWS 用户池(amazoncognito.com)。目标是针对 Cognito 使用用户名和密码对用户进行身份验证,并接收 OAuth2 令牌以验证针对 AWS API 网关发出的 API 请求。
挑战: AWS amplify 似乎不适用于最新的 vue3 版本。它只向我显示用户未登录但未显示任何登录或注销按钮 - 无论配置如何。
我感兴趣的潜在解决方案(优先顺序)
main.js
import { createApp } from 'vue'
import App from './App.vue'
import Amplify from 'aws-amplify';
import Auth from '@aws-amplify/auth';
Amplify.configure({
Auth: {
identityPoolId: 'eu-central-1_REST-OF-ID',
region: 'eu-central-1',
userPoolWebClientId: '4t49u0pu0skkREST-OF-ID',
mandatorySignIn: false,
cookieStorage: {
domain: 'PREFIX.auth.eu-central-1.amazoncognito.com',
path: '/',
expires: 365,
sameSite: "lax",
secure: true
},
authenticationFlowType: 'USER_PASSWORD_AUTH',
oauth: {
domain: 'PREFIX.auth.eu-central-1.amazoncognito.com',
scope: ['phone', 'email', 'profile', 'openid', 'aws.cognito.signin.user.admin'],
redirectSignIn: 'http://localhost:3000/',
redirectSignOut: 'http://localhost:3000/',
responseType: 'code' // or 'token', note that REFRESH token will only be generated when the responseType is code
}
}
});
import { createStore } from 'vuex'
const store = createStore({
state() {
return {
entries: []
};
},
mutations: {
addTime(state, item) {
state.entries.push(item);
}
}
});
createApp(App).use(store, Amplify, Auth).mount("#app");
在 App.vue 里面
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<AddTime/>
<amplify-authenticator>
<div>
Inside Authenticator
<amplify-sign-in></amplify-sign-in>
<amplify-sign-out></amplify-sign-out>
</div>
</amplify-authenticator>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';
import AddTime from './components/AddTime.vue';
export default {
name: 'App',
components: {
HelloWorld,
AddTime,
}
}
</script>
- 有没有人能够将 AWS 放大身份验证模块与 vue3 一起使用?
- 如何使用 vue3 访问 Cognito OAuth 2.0 授权服务器并获取(通过发布用户放置的凭据来验证和接收令牌?
解决方案
Amplify 现在支持 Vue3,但仍处于早期阶段。最大的变化是您不再使用 ui-vue 包。您需要使用 ui 组件:
yarn add aws-amplify @aws-amplify/ui-components
AWS 有一个身份验证示例供您在他们的网站上使用。确保在示例中选择了 Vue3 选项卡。我还可以确认这在离子应用程序中也对我有用。
推荐阅读
- python - python中的亚马逊类别子类别URL提取
- c - 如何释放结构中的字符数组
- java - RecyclerView 正在复制项目可能的解决方案是什么?
- c++ - 为什么 `read()` 中的数据越多,`read()` 延迟越低?
- php - 使用php mysql在Flutter中重新打开后如何记住Like Button的状态
- c++ - 正在替换第一次出现的字符串,如何替换所有出现?
- regex - 如何使用正则表达式删除 Notepad++ 中未排序的重复行
- firebase - Firebase 分析 UI 更改?
- mysql - 使用gorm将一条数据插入mysql
- r - 将选择列向右移动一并用行号替换空格 - 1