使用 Vue3 amplify 针对 AWS cognito 对用户进行身份验证答案

【问题标题】：Authenticate users against AWS cognito with Vue3 amplify使用 Vue3 amplify 针对 AWS cognito 对用户进行身份验证
【发布时间】：2021-04-08 09:15:54
【问题描述】：

我正在使用 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>

有没有人能够在 vue3 中只使用 AWS 放大身份验证模块？
如何使用 vue3 访问 Cognito OAuth 2.0 授权服务器并获取（通过发布用户放置的凭据来验证和接收令牌？

【问题讨论】：

您尝试过 Amplify CLI 吗？这样您就不必担心 Amplify 配置 (aws-exports.js) 的内容，它可能与 Vue3 一起使用 docs.amplify.aws/cli
嘿，问题是连组件都没有显示。无论配置如何。没有登录按钮，什么都没有。我关注了docs.amplify.aws/lib/auth/start/q/platform/…
我明白了。你有没有发现任何错误？可能在createApp(App).use(Amplify, Auth).mount("#app"); 附近尝试/捕获并捕获一些抛出的错误？
没有错误 :( 应用程序正在渲染，显示 vue 默认应用程序和“Inside Authenticator”，但没有其他内容，没有登录 - 没有注销。在我之前的尝试中，去年使用 vue2（使用cli) 一切正常。

标签： amazon-cognito aws-amplify vuejs3

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

AWS has an auth example for you to use on their website. 确保在示例中选择了 Vue3 选项卡。我还可以确认这在 ionic 应用程序中也适用于我。

【讨论】：