用Vue3放大对AWS认知用户进行身份验证

Question

我正在使用vue3，并设置了一个AWS用户池(amazoncognito.com)。其目标是使用用户名和密码对认知用户进行身份验证，并接收OAuth2令牌来验证在AWS网关上发出的API请求。

挑战：似乎没有使用最新的vue3版本。它只显示用户没有登录，但没有显示配置的任何登录或注销按钮-regardless。

我感兴趣的势解(优先次序)

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. 有谁能用vue3来使用AWS放大认证模块吗？
2. 如何使用OAuth访问认知vue3 2.0授权服务器并获取(通过提交用户放置的凭据来验证和接收令牌)？

Answer 1

Vue3现在是由扩容所支持的，但它还处于早期阶段。最大的改变是您不再使用ui-vue包。您需要使用ui组件：

yarn add aws-amplify @aws-amplify/ui-components

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

Answer 2

事实证明，vue3只是在发布几个月后就不支持了。请参阅：https://github.com/aws-amplify/amplify-js/issues/6756