在 Vue.js 应用中用 AWS Cognito 和 AppSync 实现身份验证和订阅

2024-03-11 16:26:03

使用 AWS Cognito 和 AppSync 在 Vue.js 应用程序中进行身份验证和订阅

在现代 Web 应用程序中，实时功能和强大的用户身份验证至关重要。本文将引导您了解如何将 AWS Cognito 与 AWS AppSync 集成，从而在 Vue.js 应用程序中实现这两个关键功能。

问题

开发人员正在构建一个 Vue.js 应用程序，希望使用 AWS AppSync 订阅实时更新内容，并通过 AWS Cognito 进行用户身份验证。他们能够使用 AWS API 密钥连接到 AppSync API，但希望使用额外的授权提供程序来增强安全性。

解决方法

第 1 步：配置 Amplify

在 Vue.js 应用程序的 main.js 文件中，使用 Amplify 库配置 AWS AppSync。将 defaultAuthMode 设置为 'userPool'，并提供 Cognito 用户池 ID 和应用程序客户端 ID。

import { Amplify } from 'aws-amplify';

Amplify.configure({
  API: {
    endpoints: [
      {
        name: 'my-graphql-api',
        endpoint: 'https://appsync.example.com/graphql',
        region: 'eu-west-1',
        authMode: 'AMAZON_COGNITO_USER_POOLS',
        userPoolId: 'your-user-pool-id',
        userPoolWebClientId: 'your-user-pool-web-client-id',
      },
    ],
  },
});

第 2 步：使用 GraphQL 客户端

在 Vue.js 组件的 mounted() 生命周期钩子中，使用 generateClient() 方法创建 GraphQL 客户端。该客户端将用于与 AppSync API 进行交互。

import { generateClient } from 'aws-amplify/api';

const client = generateClient('my-graphql-api');

第 3 步：订阅 AppSync 订阅

使用 GraphQL 客户端的 graphql() 方法和订阅查询订阅 AppSync 订阅。

const updateSub = client
  .graphql({ query: subscriptions.onUpdateOrders })
  .subscribe({
    next: ({ data }) => console.log(data),
    error: (error) => console.warn(error),
  });