使用Vue3 amplify根据AWS cognito对用户进行身份验证

Question

我正在使用vue3，并且已经建立了一个AWS用户池（amazoncognito.com）。目标是根据Cognito使用用户名和密码对用户进行身份验证，并接收OAuth2令牌以验证针对AWSAPI网关发出的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>

1. 是否有人能够将AWS amplify身份验证模块与vue3一起使用？
2. 如何使用vue3访问Cognito OAuth 2.0授权服务器并获取（通过发布用户放置的凭据来验证和接收令牌）

Answer 1

Vue3现在由放大器支持，但仍处于早期阶段。最大的变化是您不再使用ui-vue包。您需要使用ui组件：

纱线添加aws amplify@aws amplify/ui组件

AWS有一个认证示例供您在他们的网站上使用。确保在示例中选择了Vue3选项卡。我也可以确认这在离子应用程序中对我也有效。

Answer 2

事实证明，vue3甚至在发布几个月后都不受支持。见：https://github.com/aws-amplify/amplify-js/issues/6756