Laura  Fox

Laura Fox

1661578080

Nestjs Hasura: NestJS integrations for Working with Hasura

@golevelup/nestjs-hasura

Leverage NestJS to make incorporating business logic and event processing easier with Hasura

Features

🎉 Exposes an API endpoint from your NestJS application at to be used for event processing from Hasura. Defaults to /hasura/events/ but can be easily configured

🔒 Automatically validates that the event payload was actually sent from Hasura using configurable secrets

🕵️ Discovers methods from your application and automatically turns them into Hasura event handlers. Supports insert, update and delete events from your tables as well as scheduled events based on a CRON schedule

🧭 Routes incoming webhook payloads to the correct event handler based on configuration so you can maintain a single webhook endpoint for Hasura

🔌 Optionally supports automatic management of your Hasura metadata files which means that your application code can be the source of truth for configuration of events. This reduces a ton of boilerplate and developer overhead

Usage

Install

npm install ---save @golevelup/nestjs-hasura

or

yarn add @golevelup/nestjs-hasura

Import

Import and add HasuraModule to the imports section of the consuming module (most likely AppModule). In order to ensure that your Hasura events webhook endpoint is secure, the module requires configuration for an HTTP header name and value that will be used to verify that the event actually came from Hasura.

Configuration

The Hasura Module supports both the forRoot and forRootAsync patterns for configuration, so you can easily retrieve the necessary config values from a ConfigService or other provider.

Usage

Integrating with your NestJS app

The HasuraModule makes it easy to reuse the same events API endpoint for all events that you create in Hasura. The internal routing mechanism on the NestJS side ensures that the all events coming in through the endpoint will be sent to the correct handler. The endpoint provided defaults to /hasura/events. This can be overriden with the module by specifying an alternative controllerPrefix so for example you could set this to webhooks and the resulting endpoint would be available at /webhooks/events.

Automatically Synchronize Hasura Metadata

One of the more powerful features of this Module is the ability to automatically generate the necessary Hasura metadata for your event handlers instead of having to worry about configuring each handler individually. Under the hood, this uses the @hasura/metadata to generate and merge changes to your tables.yaml and cron_triggers.yaml files.

If you decide to opt into this functionality, you should include the optional managedMetaDataConfig object when importing the HasuraModule into your application.

import { HasuraModule } from '@golevelup/nestjs-hasura';

@Module({
  imports: [
    HasuraModule.forRoot(HasuraModule, {
      webhookConfig: {
        secretFactory: secret,
        secretHeader: secretHeader,
      },
      managedMetaDataConfig: {
        dirPath: join(process.cwd(), 'hasura/metadata'),
        secretHeaderEnvName: 'HASURA_NESTJS_WEBHOOK_SECRET_HEADER_VALUE',
        nestEndpointEnvName: 'NESTJS_EVENT_WEBHOOK_ENDPOINT',
        defaultEventRetryConfig: {
          intervalInSeconds: 15,
          numRetries: 3,
          timeoutInSeconds: 100,
          toleranceSeconds: 21600,
        },
      },
    }),
  ],
})
export class AppModule {
  // ...
}

It is recommended that you conditionally add this configuration based on the Node Environment as this should only be used in development environments to track the necessary changes to your metadata yaml files so that they can be tracked in source control.

After generating changes to these files you should make sure they are applied against your Hasura instance using the CLI command:

hasura metadata apply

Opting Out

If you decide to opt out of automatic metadata synchronization it is up to you to ensure that the secret header name and values match. When creating the event in the Hasura console, you should set these values such that they match the configuration provided to the HasuraModule configuration in your NestJS application. This ensures that only Hasura can trigger events in your system.

Registering Table Event Handlers

Decorate methods in your NestJS providers in order to have them be automatically attached as event handlers for incoming Hasura events. The event payload will be analyzed and routed to your provider methods based on the configuration provided in the decorator.

import {
  TrackedHasuraEventHandler,
  HasuraUpdateEvent,
  HasuraInsertEvent,
} from '@golevelup/nestjs-hasura';

@Injectable()
class UsersService {
  @TrackedHasuraEventHandler({
    triggerName: 'user-created',
    tableName: 'user',
    definition: { type: 'insert' },
  })
  handleUserCreated(evt: HasuraInsertEvent<User>) {}

  @TrackedHasuraEventHandler({
    triggerName: 'user-updated',
    tableName: 'user',
    definition: { type: 'update', columns: ['avatarUrl'] },
  })
  handleUserUpdated(evt: HasuraUpdateEvent<User>) {}
}

Registering Scheduled Event Handlers

import { TrackedHasuraScheduledEventHandler } from '@golevelup/nestjs-hasura';

@Injectable()
class RecurringJobService {
  @TrackedHasuraScheduledEventHandler({
    cronSchedule: CommonCronSchedules.EveryMinute,
    name: 'every-minute',
    payload: {},
    comment: 'this is my comment',
  })
  public async cronTask(evt: any) {
    this.logger.log(evt);
  }
}

Retry Configuration

Retry configuration for both Table Event handlers as well as Scheduled Event handlers can be configured on the individual decorator or you can provide a default retry configuration at the module level that will be used for any event handler that does not explicitly provide its own retry settings.

Configuring Hasura Environment Variables

You should provide ENV variables to your Hasura instance that map the webhook endpoint and secret header values for communication to your NestJS application.

In the examples above, HASURA_NESTJS_WEBHOOK_SECRET_HEADER_VALUE and NESTJS_EVENT_WEBHOOK_ENDPOINT were used. The webhook endpoint should point to the automatically scaffolded events endpoint eg: https://my-nest-app.com/api/hasura/events

Usage with Interceptors, Guards and Filters

This library is built using an underlying NestJS concept called External Contexts which allows for methods to be included in the NestJS lifecycle. This means that Guards, Interceptors and Filters (collectively known as "enhancers") can be used in conjunction with Hasura event handlers. However, this can have unwanted/unintended consequences if you are using Global enhancers in your application as these will also apply to all Hasura event handlers. If you were previously expecting all contexts to be regular HTTP contexts, you may need to add conditional logic to prevent your enhancers from applying to Hasura event handlers.

You can identify Hasura event contexts by their context type, 'hasura_event':

@Injectable()
class ExampleInterceptor implements NestInterceptor {
  intercept(context: ExecutionContext, next: CallHandler<any>) {
    const contextType = context.getType<'http' | 'hasura_event'>();

    // Do nothing if this is a Hasura event
    if (contextType === 'hasura_event') {
      return next.handle();
    }

    // Execute custom interceptor logic for HTTP request/response
    return next.handle();
  }
}

Related Hasura Documentation

Concepts

https://hasura.io/docs/1.0/graphql/manual/event-triggers/index.html#event-triggers

Tutorials

https://hasura.io/docs/1.0/graphql/manual/getting-started/first-event-trigger.html https://hasura.io/event-triggers

Contribute

Contributions welcome! Read the contribution guidelines first.

Link: https://github.com/golevelup/nestjs/tree/master/packages/hasura 

Link: https://github.com/golevelup/nestjs/tree/master/packages/hasura 

#nest #nestjs #node #graphql #hasura

Nestjs Hasura: NestJS integrations for Working with Hasura
Léon  Peltier

Léon Peltier

1658648340

Des Fournisseurs D'authentification Pour La Création D'applications

Un « fournisseur de services d'authentification » fait référence à une entité qui fournit des services d'authentification. Le fournisseur d'authentification élimine la complexité de la mise en œuvre manuelle du système d'authentification à partir de zéro afin que vous puissiez vous concentrer sur des tâches plus importantes.

Cet article présente les avantages et les inconvénients de l'utilisation d'un fournisseur d'authentification et compare ceux existants qui prennent en charge l'intégration JWT.

Avantages et inconvénients des fournisseurs d'authentification

Avant de choisir un fournisseur de services d'authentification, il est essentiel d'évaluer les avantages et les inconvénients de son utilisation.

Pour : Complexité des résumés

L'utilisation d'un fournisseur de services d'authentification élimine la complexité de la mise en œuvre du système d'authentification vous-même. La construction d'un tel système est un processus long et complexe nécessitant de nombreuses ressources.

Vous pouvez utiliser une solution existante qui libère ces ressources pour d'autres tâches plus critiques.

Pour : Aucun stockage des informations utilisateur

Stocker des informations confidentielles sur des personnes n'est pas quelque chose à prendre à la légère. Choisir d'utiliser un fournisseur signifie que vous n'avez pas à vous soucier du stockage des détails des utilisateurs sur vos serveurs.

Pro : Tirez parti des connexions sociales

Vous pouvez activer les connexions sociales avec un minimum d'effort lorsque vous utilisez un fournisseur de services d'authentification. La connexion sociale fait référence à la connexion à l'aide d'un compte de réseau social existant tel que Twitter, GitHub, Google, etc.

La mise en œuvre de chaque fournisseur social individuellement nécessite des efforts et des ressources. Lorsque vous utilisez un fournisseur d'authentification, l'ajout de connexions sociales devient plus facile et plus rapide.

Pour : une meilleure sécurité

Choisir d'utiliser un fournisseur d'authentification signifie une meilleure sécurité. Un fournisseur d'authentification se concentre entièrement sur l'authentification et l'autorisation. Cela signifie qu'ils sont mieux formés et équipés pour assurer la sécurité des informations des utilisateurs.

Inconvénients : Difficile à migrer

Une fois que vous avez choisi un fournisseur de services d'authentification, il peut être difficile de migrer. Passer à un autre fournisseur ou lancer un système propriétaire peut être difficile.

Il est essentiel de décider s'il est judicieux d'utiliser un fournisseur d'authentification ou non. Si vous choisissez de le faire, assurez-vous de choisir le fournisseur qui correspond à vos besoins et exigences.

Inconvénients : verrouillage du fournisseur

Un autre inconvénient est que vous pourriez devenir trop dépendant du fournisseur que vous utilisez. Les raisons peuvent être que votre implémentation est trop spécifique à ce fournisseur ou qu'il est presque impossible d'exporter vos données utilisateur actuelles.

La migration vers un autre fournisseur peut devenir trop coûteuse et prendre trop de temps, vous êtes donc bloqué avec le fournisseur actuel.

Inconvénients : Coûts

Au début, les coûts pourraient ne pas être un problème. Cependant, une fois que l'application grandit et compte plus d'utilisateurs, les coûts peuvent devenir un problème.

De nombreux fournisseurs d'authentification facturent en fonction du nombre d'utilisateurs actifs mensuels. Plus vous avez d'utilisateurs, plus la facture augmente.

Conclusion

Devriez-vous utiliser un fournisseur de services d'authentification ou implémenter un système propriétaire ? Il n'y a pas de réponse définitive.

La décision d'utiliser ou non un fournisseur dépend de nombreux facteurs. Pour certains, l'utilisation d'un fournisseur d'authentification est la solution appropriée, alors que pour d'autres, ce n'est pas le cas.

Si vous décidez d'en utiliser un, continuez à lire pour en savoir plus sur les différents fournisseurs de services d'authentification disponibles.

Choisir un fournisseur d'authentification

L'article compare les fournisseurs de services d'authentification suivants :

  • Auth0
  • Authentification Firebase
  • Employé de bureau
  • CléManteau
  • Cognito
  • SuperTokens
  • Nhôte

Ces fournisseurs d'authentification sont évalués sur la base de six critères d'évaluation.

1. Source ouverte

Un projet open source présente une poignée d'avantages. Un avantage serait les économies de coûts. Comme ils sont open source, ils ne nécessitent ni licence ni frais d'utilisation.

Un autre avantage est la flexibilité. Si les besoins de l'entreprise changent ou si vous avez besoin de fonctionnalités supplémentaires, vous pouvez modifier et étendre le code vous-même. Vous n'avez pas à demander au fournisseur des modifications ou à le modifier complètement.

Il est également important de mentionner la transparence. Le code est accessible à tous. Étant donné que de nombreux professionnels ont accès au code, ils peuvent améliorer le logiciel et le rendre plus sûr.

L'utilisation d'un fournisseur d'authentification open source présente également d'autres avantages, mais ces avantages enfoncent le clou.

2. Revendications JWT personnalisées

Lors de l'intégration d'un fournisseur de services d'authentification à Hasura, il est important de s'assurer qu'il prend en charge les revendications JWT personnalisées.

Hasura vérifie les revendications JWT personnalisées pour en savoir plus sur le rôle de l'utilisateur à l'origine de la demande. Par conséquent, Hasura peut appliquer les règles d'autorisation appropriées.

{
    'x-hasura-default-role': 'user',
    'x-hasura-allowed-roles': ['user'],
    'x-hasura-user-id': user.user_id
};

L'extrait ci-dessus montre un exemple de revendications JWT personnalisées. Il contient des informations essentielles sur la demande.

3. Prise en charge de l'authentification unique (SSO)

Dans les termes les plus simples, SSO fait référence au type d'authentification où l'utilisateur se connecte à plusieurs plates-formes avec un ensemble d'informations d'identification.

Un exemple est le Social SSO, où l'utilisateur utilise un compte de réseau social tel que le compte Google pour se connecter à une application.

4. Authentification machine à machine

Ce ne sont pas toujours les utilisateurs qui font les demandes. Il existe des scénarios où deux machines communiquent entre elles. Il n'y a pas d'utilisateur pour saisir les informations d'identification, de sorte que le client (une autre machine) doit être authentifié d'une autre manière.

L'authentification machine à machine (M2M) fait référence à l'authentification des machines sans intervention de l'utilisateur. Cela est possible en utilisant le flux d'informations d'identification client OAuth 2.0. Les informations d'identification incluent a client_idet client_secret, qui sont utilisées pour authentifier le client.

5. Niveaux gratuits

Tous les fournisseurs d'authentification de cet article ont un niveau gratuit. La différence réside dans ce qu'ils offrent dans ce niveau.

Ils mesurent les utilisateurs actifs mensuels (MAU) et facturent en fonction de cela. En conséquence, certains fournisseurs proposent un niveau gratuit avec des milliers de MAU, tandis que d'autres n'offrent que quelques centaines de MAU.

6. Facilité d'intégration

L'intégration d'un fournisseur de services d'authentification dépend de nombreux facteurs. Il est difficile de présenter à quel point il est facile ou difficile d'intégrer un fournisseur.

Cependant, certains points peuvent indiquer le niveau de difficulté de la mise en œuvre, tels que :

  • la qualité des documents
  • SDK disponibles
  • la quantité de configuration requise
  • le matériel disponible

Comparaison des fournisseurs

L'image illustre une comparaison entre les fournisseurs d'authentification présentés dans cet article.

Comparaison des fournisseurs d'authentification

Auth0

Auth0 est une solution bien établie et populaire pour les services d'authentification. Il est livré avec un niveau gratuit généreux et prend en charge la plupart des choses dont vous avez besoin.

OPEN SOURCENON
SaaSOui
Prise en charge de l'authentification uniqueOui
Revendications personnalisées JWTOui
Authentification machine à machineOui
Forfait gratuitOui - jusqu'à 7000 MAU

En ce qui concerne la facilité d'intégration, Auth0 n'est ni facile ni difficile à intégrer. Comme il s'agit d'une solution bien établie et largement répandue, de nombreux documents sont disponibles pour vous aider dans l'intégration. La quantité de configuration que vous devez effectuer dépend du type et de la complexité de votre application.

Authentification Firebase

Firebase Authentication est un autre service d'authentification populaire qui vous permet d'ajouter une authentification à vos applications.

Firebase vous permet d'ajouter des méthodes de connexion telles que :

  • fournisseurs d'identité tels que Google, Facebook et autres
  • email et mot de passe
  • téléphoner
OPEN SOURCENON
SaaSNon
Prise en charge de l'authentification uniqueOui
Revendications personnalisées JWTOui
Authentification machine à machineOui
Forfait gratuitGratuit sauf pour l'authentification par téléphone

La quantité de ressources disponibles rend le processus d'intégration plus simple. La communauté Firebase crée de nombreuses ressources open source que vous pouvez utiliser. C'est aussi un fournisseur bien établi, ce qui signifie que vous êtes susceptible de trouver une solution à presque tous les problèmes.

Enfin, il contient une documentation détaillée expliquant comment implémenter Firebase Auth dans les applications Web et mobiles.

Employé de bureau

Comparé aux autres fournisseurs, Clerk est le plus récent. Clerk vous permet d'implémenter des profils d'inscription, de connexion et d'utilisateur dans vos applications. Selon leur site Web, il s'agit d'une "plate-forme d'identité client complète".

Clerk est également livré avec le support Hasura. Ils ont une section de documentation spéciale qui montre comment intégrer Clerk à Hasura.

OPEN SOURCENON
SaaSOui
Prise en charge de l'authentification uniqueSSO sociale
Revendications personnalisées JWTOui
Authentification machine à machineNon
Forfait gratuitOui - jusqu'à 500 MAU

Comme il est relativement nouveau, vous pourriez rencontrer des problèmes qui ne sont pas encore documentés/résolus. En dehors de cela, Clerk dispose d'une documentation complète et approfondie.

La configuration nécessaire pour intégrer Clerk à votre application est minime. Vous avez besoin d'un compte Clerk, puis vous pouvez utiliser les SDK et les composants fournis par eux.

Cape de clé

Keycloak est un fournisseur de services d'authentification open source populaire. Puisqu'il est open source, vous pouvez l'auto-héberger, ce qui signifie qu'il est gratuit quel que soit le nombre d'utilisateurs actifs mensuels.

Même s'il est open source et ouvert à tous pour contribuer, le projet est maintenu par Red Hat. Cela signifie que vous pouvez faire confiance au projet.

Keycloak prend en charge la plupart des cas d'utilisation de l'authentification, et il est également gratuit, il peut donc être un excellent choix.

OPEN SOURCEOUI
SaaSNon
Prise en charge de l'authentification uniqueOui
Revendications personnalisées JWTOui
Authentification machine à machineOui
Forfait gratuitGratuit pour un nombre illimité d'utilisateurs

Keycloak a un niveau modéré de difficulté de mise en œuvre. Outre l'intégration de Keycloak dans vos applications, vous devez également vous occuper du déploiement et de la maintenance.

Même si cela peut sembler compliqué à première vue, vous pouvez vous habituer rapidement à Keycloak. Il s'agit également d'un produit établi, ce qui signifie que vous êtes susceptible de trouver des solutions à la plupart de vos problèmes. Enfin, il a une bonne documentation.

Cognito

Cognito est le produit d'Amazon pour gérer l'authentification. Il vous permet d'implémenter l'authentification dans vos applications Web et mobiles.

Cognito est l'un des fournisseurs d'authentification les plus généreux, vous offrant un forfait gratuit avec jusqu'à 50 000 utilisateurs actifs par mois. Si les coûts sont une préoccupation et que vous souhaitez une solution gérée, Cognito est un excellent choix.

OPEN SOURCENON
SaaSNon
Prise en charge de l'authentification uniqueOui
Revendications personnalisées JWTOui
Authentification machine à machineOui
Forfait gratuitGratuit jusqu'à 50 000 utilisateurs actifs mensuels (qui se connectent directement aux groupes d'utilisateurs Cognito)

En ce qui concerne la facilité d'intégration, Amazon Cognito peut être assez difficile à mettre en œuvre par rapport à d'autres fournisseurs. Cognito nécessite une configuration complexe, même pour les applications de base.

Cependant, il existe de nombreux documents officiels et communautaires pour vous aider à intégrer Cognito à votre application. Une poignée de SDK et d'exemples d'applications sont également disponibles pour vous aider et vous inspirer.

Découvrez comment intégrer Cognito à Hasura

SuperTokens

SuperTokens est un service relativement nouveau. Il prend en charge presque tout ce dont vous avez besoin, et il est également open source. Cela signifie que vous pouvez l'héberger vous-même et éviter des frais supplémentaires. Si vous choisissez de vous auto-héberger, c'est gratuit pour toujours pour un nombre illimité d'utilisateurs.

SuperTokens est livré avec le support Hasura, avec une section spéciale sur la façon d'intégrer SuperTokens avec Hasura.

OPEN SOURCEOUI
SaaSOui
Prise en charge de l'authentification uniqueOui
Revendications personnalisées JWTOui
Authentification machine à machineOui
Forfait gratuitLibérez pour un nombre illimité d'utilisateurs (Self Hosted) et jusqu'à 5000 MAU (SaaS)

En ce qui concerne la facilité d'intégration, vous pouvez rencontrer des difficultés lorsque vous essayez de l'intégrer à votre application. La raison en est qu'il s'agit d'un nouveau service et qu'il n'y a pas beaucoup de matériel disponible sur Internet pour le moment.

En ce qui concerne la configuration, il est relativement facile de démarrer avec SuperTokens puisque la documentation fournit tous les paramètres et informations dont vous avez besoin.

SuperTokens propose également des guides sur l'intégration de SuperTokens à Hasura et des exemples d'applications de démonstration SuperTokens + Hasura.

Authentification Nhost

Nhost Authentication est un service d'authentification open source pour Hasura. Avec l'authentification Nhost, les utilisateurs peuvent se connecter avec :

  • E-mail et mot de passe
  • Fournisseurs OAuth tels que GitHub, Google, Apple, Facebook, Twitter, LinkedIn et autres
  • Liens magiques
  • SMS

Comme il s'agit d'un projet open source, vous pouvez l'auto-héberger et éviter les frais supplémentaires que vous paieriez lors de l'utilisation d'un service géré.

OPEN SOURCEOUI
SaaSNon
Prise en charge de l'authentification uniqueOui
Revendications personnalisées JWTOui
Authentification machine à machineNon
Forfait gratuitGratuit pour un nombre illimité d'utilisateurs

En ce qui concerne la facilité d'intégration, l'authentification Nhost est assez simple à intégrer aux applications Hasura. Vous pouvez soit créer une application via Nhost, ce qui vous donne un backend prêt à l'emploi avec Hasura, Hasura Auth et Postgres, soit utiliser l'image Nhost Authentication Docker pour l'auto-héberger.

Vous pouvez vérifier l'authentification Nhost ici .

Une note sur l'évolutivité

L'évolutivité fait référence à la capacité du service d'authentification à gérer la croissance de vos applications et l'évolution des besoins de l'entreprise. Le service d'authentification doit suivre la croissance de vos utilisateurs et l'évolution des exigences sans affecter votre application.

Si vous décidez d'utiliser une solution auto-hébergée, vous avez l'entière responsabilité en matière de mise à l'échelle. Vous devez gérer la base de données, les serveurs et toute l'infrastructure. Il est de votre responsabilité de vous assurer que tout fonctionne correctement.

Lorsque vous utilisez une solution gérée, le fournisseur d'authentification s'occupe de l'évolution vers le haut et vers le bas. Le fournisseur d'authentification a des limites de débit et des quotas prédéfinis, qu'il utilise pour la mise à l'échelle.

Conclusion

Tous les fournisseurs présentés dans cet article sont d'excellents choix, mais il n'y a pas de réponse universelle. Le choix d'un fournisseur de services d'authentification dépend de ses besoins et de ses exigences.

SuperTokens et Clerk sont deux fournisseurs notables qui prennent officiellement en charge Hasura. "Support" signifie qu'ils ont une section spéciale dans leur documentation illustrant comment les intégrer à Hasura. C'est un plus, et cela aide beaucoup lors de l'intégration de l'un d'entre eux à Hasura.

Il est important de noter qu'il ne s'agit pas d'une liste exhaustive. Il existe d'autres fournisseurs disponibles qui ne sont pas présents dans l'article. Cependant, l'article sera mis à jour occasionnellement et de nouveaux fournisseurs seront ajoutés.

Source : https://hasura.io/blog/top-authentication-providers-building-apps-jwt/

  #jwt #authentication #hasura 

Des Fournisseurs D'authentification Pour La Création D'applications

Os 7 Principais Provedores De Autenticação Para Criar Aplicativos

Um “Provedor de Serviços de Autenticação” refere-se a uma entidade que fornece serviços de autenticação. O Provedor de Autenticação abstrai a complexidade de implementar o sistema de autenticação manualmente do zero para que você possa se concentrar em tarefas mais importantes.

Este artigo apresenta as vantagens e desvantagens de usar um Provedor de Autenticação e compara os existentes que suportam a integração JWT.

Prós e contras dos provedores de autenticação

Antes de escolher um provedor de serviços de autenticação, é essencial avaliar as vantagens e desvantagens de usar um.

Pró: Complexidade de Resumos

O uso de um provedor de serviços de autenticação abstrai a complexidade de implementar o sistema de autenticação por conta própria. Construir tal sistema é um processo complexo e demorado que requer muitos recursos.

Você pode usar uma solução existente que libera esses recursos para outras tarefas mais críticas.

Pro: Sem armazenamento de informações do usuário

Armazenar informações confidenciais sobre as pessoas não é algo que deve ser tomado de ânimo leve. Optar por usar um provedor significa que você não precisa se preocupar em armazenar os detalhes dos usuários em seus servidores.

Pró: aproveite os logins sociais

Você pode habilitar logins sociais com esforço mínimo ao usar um provedor de serviços de autenticação. O login social refere-se ao login usando uma conta de rede social existente, como Twitter, GitHub, Google e assim por diante.

A implementação de cada provedor social individualmente requer esforço e recursos. Ao usar um provedor de autenticação, adicionar logins sociais fica mais fácil e rápido.

Pró: melhor segurança

Optar por usar um provedor de autenticação significa melhor segurança. Todo o foco de um Auth Provider está na autenticação e autorização. Isso significa que eles estão mais bem treinados e equipados para manter as informações dos usuários seguras.

Contras: Difícil de migrar

Depois de escolher um provedor de serviços de autenticação, pode ser difícil migrar. Mudar para outro provedor ou rolar um sistema proprietário pode ser difícil.

É essencial decidir se faz sentido usar um provedor de autenticação ou não. Se você optar por fazê-lo, certifique-se de escolher o provedor que atende às suas necessidades e requisitos.

Contras: Bloqueio do provedor

Outra desvantagem é que você pode se tornar muito dependente do provedor que está usando. Os motivos podem ser que sua implementação é muito específica para esse fornecedor ou é quase impossível exportar seus dados de usuário atuais.

Migrar para outro provedor pode se tornar muito caro e demorado, então você fica bloqueado com o atual.

Contras: Custos

No início, os custos podem não ser um problema. No entanto, depois que o aplicativo cresce e tem mais usuários, os custos podem se tornar um problema.

Muitos dos provedores de autenticação cobram com base no número de usuários ativos mensais. Quanto mais usuários você tiver, maior será a conta.

Conclusão

Você deve usar um provedor de serviços de autenticação ou implementar um sistema proprietário? Não há uma resposta definitiva.

A decisão de usar ou não um Provedor depende de muitos fatores. Para alguns, usar um Auth Provider é a solução apropriada, enquanto para outros não é.

Caso você decida usar um, continue lendo para conhecer os vários Provedores de Serviços de Autenticação disponíveis.

Escolhendo um provedor de autenticação

O artigo compara os seguintes provedores de serviços de autenticação:

  • Aut0
  • Autenticação do Firebase
  • Atendente
  • KeyCloak
  • Cognito
  • SuperTokens
  • Nhost

Esses provedores de autenticação são avaliados com base em seis critérios de avaliação.

1. Código Aberto

Um projeto de código aberto vem com um punhado de benefícios. Um benefício seria a redução de custos. Por serem de código aberto, não exigem licenciamento ou taxas de uso.

Outro benefício é a flexibilidade. Se os requisitos de negócios mudarem ou você precisar de recursos adicionais, você mesmo poderá modificar e estender o código. Você não precisa pedir alterações ao fornecedor ou alterá-lo completamente.

É importante mencionar a transparência também. O código está disponível para todos verem. Como muitos profissionais têm acesso ao código, eles podem tornar o software melhor e mais seguro.

Há outros benefícios de usar um provedor de autenticação de código aberto também, mas esses benefícios levam o ponto principal.

2. Reivindicações de JWT personalizadas

Ao integrar qualquer provedor de serviços de autenticação ao Hasura, é importante garantir que eles ofereçam suporte a declarações JWT personalizadas.

Hasura verifica as declarações JWT personalizadas para saber mais sobre a função do usuário que faz a solicitação. Como resultado, a Hasura pode aplicar as regras de autorização apropriadas.

{
    'x-hasura-default-role': 'user',
    'x-hasura-allowed-roles': ['user'],
    'x-hasura-user-id': user.user_id
};

O snippet acima mostra um exemplo de declarações JWT personalizadas. Ele contém informações essenciais sobre a solicitação.

3. Suporte de Logon Único (SSO)

Em termos mais simples, SSO se refere ao tipo de autenticação em que o usuário faz login em várias plataformas com um conjunto de credenciais.

Um exemplo é o SSO Social, onde o usuário usa uma conta de rede social, como a conta do Google, para fazer login em um aplicativo.

4. Autenticação máquina a máquina

Nem sempre são os usuários que fazem as solicitações. Existem cenários em que duas máquinas se comunicam entre si. Não há usuário para inserir as credenciais, portanto, o cliente (outra máquina) precisa ser autenticado de outra maneira.

A autenticação máquina a máquina (M2M) refere-se à autenticação de máquinas sem entrada do usuário. Isso é possível usando o fluxo de credenciais do cliente OAuth 2.0. As credenciais incluem um client_ide client_secret, que são usados ​​para autenticar o cliente.

5. Níveis Gratuitos

Todos os provedores de autenticação deste artigo têm um nível gratuito. A diferença está no que eles oferecem nesse nível.

Eles medem os usuários ativos mensais (MAUs) e cobram com base nisso. Como resultado, alguns provedores oferecem um nível gratuito com milhares de MAUs, enquanto alguns oferecem apenas algumas centenas de MAUs.

6. Facilidade de Integração

A integração de um provedor de serviços de autenticação depende de muitos fatores. É desafiador apresentar como é fácil ou difícil integrar um provedor.

No entanto, existem alguns pontos que podem indicar o nível de dificuldade da implementação, como:

  • a qualidade da documentação
  • SDKs disponíveis
  • a quantidade de configuração necessária
  • o material disponível

Comparação de provedores

A imagem ilustra uma comparação entre os provedores de autenticação apresentados neste artigo.

Comparação de provedores de autenticação

Aut0

Auth0 é uma solução bem estabelecida e popular para serviços de autenticação. Ele vem com um nível gratuito generoso e tem suporte para a maioria das coisas que você precisa.

CÓDIGO ABERTONÃO
SaaSSim
Suporte SSOSim
Reivindicações personalizadas de JWTSim
Autenticação máquina a máquinaSim
Plano gratuitoSim - até 7000 MAU

Quando se trata da facilidade de integração, Auth0 não é fácil nem difícil de integrar. Por se tratar de uma solução bem estabelecida e difundida, uma grande quantidade de material está disponível para ajudá-lo na integração. A quantidade de configuração que você precisa fazer depende do tipo e da complexidade do seu aplicativo.

Autenticação do Firebase

O Firebase Authentication é outro serviço de autenticação popular que permite adicionar autenticação aos seus aplicativos.

O Firebase permite adicionar métodos de login, como:

  • provedores de identidade, como Google, Facebook e outros
  • e-mail e senha
  • telefone
CÓDIGO ABERTONÃO
SaaSNão
Suporte SSOSim
Reivindicações personalizadas de JWTSim
Autenticação máquina a máquinaSim
Plano gratuitoGratuito, exceto para autenticação por telefone

A quantidade de recursos disponíveis torna o processo de integração mais simples. A comunidade do Firebase cria muitos recursos de código aberto que você pode usar. Também é um provedor bem estabelecido, o que significa que você provavelmente encontrará uma solução para quase qualquer problema.

Por fim, há uma documentação detalhada sobre como implementar o Firebase Auth em aplicativos da Web e de dispositivos móveis.

Atendente

Comparado aos outros provedores, o Clerk é o mais novo. O Clerk permite que você implemente perfis de inscrição, entrada e usuário em seus aplicativos. De acordo com seu site, eles são uma “Plataforma de Identidade do Cliente completa”.

Clerk também vem com suporte Hasura. Eles têm uma seção de documentação especial que mostra como integrar Clerk com Hasura.

CÓDIGO ABERTONÃO
SaaSSim
Suporte SSOSSO Social
Reivindicações personalizadas de JWTSim
Autenticação máquina a máquinaNão
Plano gratuitoSim - até 500 MAU

Como é relativamente novo, você pode encontrar problemas que ainda não foram documentados/resolvidos. Fora isso, o Clerk possui uma documentação extensa e detalhada.

A configuração necessária para integrar o Clerk ao seu aplicativo é mínima. Você precisa de uma conta de funcionário e, em seguida, pode usar os SDKs e os componentes fornecidos por eles.

Manto-chave

Keycloak é um provedor de serviços de autenticação de código aberto popular. Como é de código aberto, você pode hospedá-lo automaticamente, o que significa que é gratuito, independentemente do número de usuários ativos mensais.

Mesmo sendo de código aberto e aberto a todos para contribuir, o projeto é mantido pela Red Hat. Isso significa que você pode confiar no projeto.

O Keycloak é compatível com a maioria dos casos de uso de autenticação e também é gratuito, por isso pode ser uma ótima opção.

CÓDIGO ABERTOSIM
SaaSNão
Suporte SSOSim
Reivindicações personalizadas de JWTSim
Autenticação máquina a máquinaSim
Plano gratuitoGratuito para usuários ilimitados

Keycloak tem um nível moderado de dificuldade de implementação. Além de integrar o Keycloak em seus aplicativos, você também precisa cuidar da implantação e manutenção.

Mesmo que possa parecer complicado à primeira vista, você pode se acostumar com o Keycloak rapidamente. Também é um produto estabelecido, o que significa que você provavelmente encontrará soluções para a maioria dos seus problemas. Por último, tem uma boa documentação.

Cognito

Cognito é o produto da Amazon para lidar com autenticação. Ele permite que você implemente a autenticação em seus aplicativos da Web e móveis.

O Cognito é um dos provedores de autenticação mais generosos, oferecendo um plano gratuito com até 50.000 usuários ativos mensais. Se os custos são uma preocupação e você deseja uma solução gerenciada, o Cognito é uma excelente escolha.

CÓDIGO ABERTONÃO
SaaSNão
Suporte SSOSim
Reivindicações personalizadas de JWTSim
Autenticação máquina a máquinaSim
Plano gratuitoLibere até 50.000 usuários ativos mensais (que fazem login diretamente nos grupos de usuários do Cognito)

Com relação à facilidade de integração, o Amazon Cognito pode ser bastante desafiador para implementar em comparação com outros provedores. O Cognito requer uma configuração complexa, mesmo para aplicativos básicos.

No entanto, existem muitos materiais oficiais e comunitários para ajudá-lo a integrar o Cognito ao seu aplicativo. Um punhado de SDKs e aplicativos de amostra também estão disponíveis para ajudar e inspirar você.

Saiba como integrar o Cognito ao Hasura

SuperTokens

SuperTokens é um serviço relativamente novo. Ele vem com suporte para quase tudo que você precisa e também é de código aberto. Isso significa que você pode auto-hospedá-lo e evitar custos extras. Se você optar por auto-hospedar, é grátis para sempre para usuários ilimitados.

SuperTokens vem com suporte Hasura, tendo uma seção especial sobre como integrar SuperTokens com Hasura.

CÓDIGO ABERTOSIM
SaaSSim
Suporte SSOSim
Reivindicações personalizadas de JWTSim
Autenticação máquina a máquinaSim
Plano gratuitoGratuito para usuários ilimitados (auto-hospedado) e até 5000 MAUs (SaaS)

Quando se trata da facilidade de integração, você pode encontrar algumas dificuldades ao tentar integrá-lo ao seu aplicativo. O motivo é que é um serviço novo e não há muito material disponível na internet no momento.

Com relação à configuração, é razoavelmente fácil começar com os SuperTokens, pois a documentação fornece todas as configurações e informações necessárias.

O SuperTokens também possui guias sobre a integração de SuperTokens com Hasura e aplicativos de demonstração SuperTokens + Hasura de amostra.

Autenticação Nhost

Nhost Authentication é um serviço de autenticação de código aberto para Hasura. Com Nhost Authentication, as pessoas podem entrar com:

  • E-mail e senha
  • Provedores OAuth como GitHub, Google, Apple, Facebook, Twitter, LinkedIn e outros
  • Links mágicos
  • SMS

Como é um projeto de código aberto, você pode hospedá-lo por conta própria e evitar as cobranças extras que pagaria ao usar um serviço gerenciado.

CÓDIGO ABERTOSIM
SaaSNão
Suporte SSOSim
Reivindicações personalizadas de JWTSim
Autenticação máquina a máquinaNão
Plano gratuitoGratuito para usuários ilimitados

Quando se trata da facilidade de integração, o Nhost Authentication é bastante simples de integrar com aplicativos Hasura. Você pode criar um aplicativo por meio do Nhost, que oferece um back-end pronto para uso com Hasura, Hasura Auth e Postgres, ou pode usar a imagem do Nhost Authentication Docker para hospedá-lo.

Você pode verificar a autenticação Nhost aqui .

Uma nota sobre escalabilidade

A escalabilidade refere-se à capacidade do serviço de autenticação de lidar com o crescimento do aplicativo e as mudanças nos requisitos de negócios. O serviço de autenticação deve acompanhar o crescimento do usuário e a mudança de requisitos sem afetar seu aplicativo.

Se você decidir usar uma solução auto-hospedada, terá total responsabilidade no que diz respeito ao dimensionamento. Você precisa gerenciar o banco de dados, os servidores e toda a infraestrutura. É sua responsabilidade garantir que tudo funcione bem.

Quando você usa uma solução gerenciada, o provedor de autenticação se encarrega de aumentar e diminuir a escala. O provedor de autenticação tem cotas e limites de taxa predefinidos, que eles usam para dimensionamento.

Conclusão

Todos os provedores apresentados neste artigo são excelentes opções, mas não há uma resposta universal. A escolha de um provedor de serviços de autenticação depende das necessidades e requisitos de cada um.

SuperTokens e Clerk são dois provedores notáveis ​​que suportam oficialmente o Hasura. "Suporte" significa que eles têm uma seção especial em sua documentação ilustrando como integrá-los ao Hasura. Isso é uma vantagem e ajuda muito ao integrar qualquer um deles com o Hasura.

É importante notar que esta não é uma lista exaustiva. Existem outros provedores disponíveis que não estão presentes no artigo. No entanto, o artigo será atualizado ocasionalmente e novos fornecedores serão adicionados.

Fonte: https://hasura.io/blog/top-authentication-providers-building-apps-jwt/

#jwt #authentication #hasura 

Os 7 Principais Provedores De Autenticação Para Criar Aplicativos
渚  直樹

渚 直樹

1658644500

JWTを使用してアプリを構築するための上位7つの認証プロバイダー(2022)

「認証サービスプロバイダー」とは、認証サービスを提供するエンティティを指します。認証プロバイダーは、認証システムを最初から手動で実装する複雑さを抽象化するため、より重要なタスクに集中できます。

この記事では、認証プロバイダーを使用することのメリットとデメリットを紹介し、JWT統合をサポートする既存のプロバイダーを比較します。

認証プロバイダーの長所と短所

認証サービスプロバイダーを選択する前に、それを使用することの利点と欠点を評価することが不可欠です。

プロ:複雑さを抽象化

認証サービスプロバイダーを使用すると、認証システムを自分で実装する複雑さが抽象化されます。このようなシステムの構築は、多くのリソースを必要とする複雑で時間のかかるプロセスです。

これらのリソースを他のより重要なタスクのために解放する既存のソリューションを使用できます。

プロ:ユーザー情報の保存なし

人に関する機密情報を保存することは、軽視することではありません。プロバイダーの使用を選択すると、サーバーにユーザーの詳細を保存することを心配する必要がなくなります。

プロ:ソーシャルログインを活用する

Auth Service Providerを使用すると、最小限の労力でソーシャルログインを有効にできます。ソーシャルログインとは、Twitter、GitHub、Googleなどの既存のソーシャルネットワークアカウントを使用してログインすることです。

各ソーシャルプロバイダーを個別に実装するには、労力とリソースが必要です。認証プロバイダーを使用すると、ソーシャルログインの追加がより簡単かつ迅速になります。

プロ:セキュリティの向上

認証プロバイダーの使用を選択すると、セキュリティが向上します。認証プロバイダーの全体的な焦点は、認証と承認にあります。つまり、ユーザーの情報を安全に保つためのトレーニングと設備が整っているということです。

短所:移行が難しい

認証サービスプロバイダーを選択すると、移行が困難になる可能性があります。別のプロバイダーに変更したり、独自のシステムをローリングしたりするのは難しい場合があります。

認証プロバイダーを使用することが理にかなっているかどうかを判断することが重要です。それを行うことを選択した場合は、ニーズと要件に合ったプロバイダーを選択してください。

短所:プロバイダーのロックイン

もう1つの欠点は、使用しているプロバイダーに依存しすぎる可能性があることです。その理由は、実装がそのベンダーに固有であるか、現在のユーザーデータをエクスポートすることがほぼ不可能であることが原因である可能性があります。

別のプロバイダーへの移行は、コストと時間がかかりすぎる可能性があるため、現在のプロバイダーでロックされます。

短所:コスト

最初は、コストは問題ではないかもしれません。ただし、アプリケーションが大きくなり、ユーザー数が増えると、コストが問題になる可能性があります。

認証プロバイダーの多くは、月間アクティブユーザー数に基づいて課金されます。ユーザーが多いほど、請求額は大きくなります。

結論

認証サービスプロバイダーを使用する必要がありますか、それとも独自のシステムを実装する必要がありますか?決定的な答えはありません。

プロバイダーを使用するかどうかの決定は、多くの要因に依存します。一部の人にとっては、認証プロバイダーを使用することが適切なソリューションですが、他の人にとってはそうではありません。

使用する場合は、読み続けて、利用可能なさまざまな認証サービスプロバイダーについて学習してください。

認証プロバイダーの選択

この記事では、次の認証サービスプロバイダーを比較しています。

  • auth0
  • FirebaseAuth
  • 店員
  • KeyCloak
  • 学んだこと
  • スーパートークン
  • Nhost

これらの認証プロバイダーは、6つの評価基準に基づいて評価されます。

1.オープンソース

オープンソースプロジェクトには、いくつかの利点があります。1つの利点は、コスト削減です。オープンソースであるため、ライセンス料や使用料は必要ありません。

もう1つの利点は柔軟性です。ビジネス要件が変更された場合、または追加機能が必要な場合は、コードを自分で変更および拡張できます。ベンダーに変更を依頼したり、完全に変更したりする必要はありません。

透明性についても言及することが重要です。コードは誰でも見ることができます。非常に多くの専門家がコードにアクセスできるため、ソフトウェアをより良く、より安全にすることができます。

オープンソースの認証プロバイダーを使用することには他にも利点がありますが、これらの利点がポイントを押し上げます。

2.カスタムJWTクレーム

認証サービスプロバイダーをHasuraと統合するときは、それらがカスタムJWTクレームをサポートしていることを確認することが重要です。

Hasuraは、カスタムJWTクレームをチェックして、リクエストを行うユーザーの役割について学習します。その結果、Hasuraは適切な承認ルールを適用できます。

{    'x-hasura-default-role': 'user',    'x-hasura-allowed-roles': ['user'],    'x-hasura-user-id': user.user_id};

上記のスニペットは、カスタムJWTクレームの例を示しています。リクエストに関する重要な情報が含まれています。

3.シングルサインオン(SSO)のサポート

簡単に言うと、SSOは、ユーザーが1セットの資格情報を使用して複数のプラットフォームにログインする認証の種類を指します。

一例として、ユーザーがGoogleアカウントなどのソーシャルネットワークアカウントを使用してアプリケーションにログインするソーシャルSSOがあります。

4.マシン間認証

リクエストを行うのは必ずしもユーザーではありません。2台のマシンがそれらの間で通信するシナリオがあります。資格情報を入力するユーザーがいないため、クライアント(別のマシン)を別の方法で認証する必要があります。

マシンツーマシン(M2M)認証とは、ユーザー入力なしでマシンを認証することを指します。これは、OAuth2.0クライアント資格情報フローを使用することで可能になります。資格情報には、クライアントの認証に使用されるとがclient_id含まれます。client_secret

5.無料利用枠

この記事のすべての認証プロバイダーには無料枠があります。違いは、その層で提供されるものにあります。

毎月のアクティブユーザー(MAU)を測定し、それに基づいて課金します。その結果、一部のプロバイダーは数千のMAUを備えた無料枠を提供していますが、一部のプロバイダーは数百のMAUしか提供していません。

6.統合のしやすさ

認証サービスプロバイダーの統合は、多くの要因に依存します。プロバイダーの統合がいかに簡単か困難かを提示するのは困難です。

ただし、次のように、実装の難易度を示す可能性のあるポイントがいくつかあります。

  • ドキュメントの品質
  • 利用可能なSDK
  • 必要な構成の量
  • 利用可能な資料

プロバイダーの比較

この画像は、この記事で紹介した認証プロバイダー間の比較を示しています。

認証プロバイダーの比較

auth0

Auth0は、認証サービスのための定評のある人気のあるソリューションです。それは寛大な無料利用枠が付属しており、あなたが必要とするほとんどのものをサポートしています。

オープンソースいいえ
SaaSはい
SSOサポートはい
JWTカスタムクレームはい
マシンツーマシン認証はい
無料プランはい-最大7000MAU

統合のしやすさに関して言えば、Auth0は統合が簡単でも難しいものでもありません。これは確立された広範なソリューションであるため、統合に役立つ大量の資料を利用できます。実行する必要のある構成の量は、アプリケーションのタイプと複雑さによって異なります。

Firebase認証

Firebase Authenticationは、アプリケーションに認証を追加できるもう1つの人気のある認証サービスです。

Firebaseでは、次のようなサインインメソッドを追加できます。

  • Google、FacebookなどのIDプロバイダー
  • メールアドレスとパスワード
  • 電話
オープンソースいいえ
SaaSいいえ
SSOサポートはい
JWTカスタムクレームはい
マシンツーマシン認証はい
無料プラン電話認証以外は無料

利用可能なリソースの量により、統合プロセスがより簡単になります。Firebaseコミュニティは、使用できる多くのオープンソースリソースを作成します。また、定評のあるプロバイダーでもあります。つまり、ほとんどすべての問題の解決策を見つける可能性があります。

最後に、FirebaseAuthをウェブアプリケーションとモバイルアプリケーションの両方に実装する方法をカバーする詳細なドキュメントがあります。

店員

他のプロバイダーと比較して、店員は最新のものです。Clerkを使用すると、サインアップ、サインイン、およびユーザープロファイルをアプリケーションに実装できます。彼らのウェブサイトによると、彼らは「完全な顧客アイデンティティプラットフォーム」です。

店員さんにはハスラのサポートも付いています。彼らには、ClerkをHasuraと統合する方法を紹介する特別なドキュメントセクションがあります。

オープンソースいいえ
SaaSはい
SSOサポートソーシャルSSO
JWTカスタムクレームはい
マシンツーマシン認証いいえ
無料プランはい-最大500MAU

比較的新しいため、まだ文書化/解決されていない問題が発生する可能性があります。それ以外に、店員は広範囲にわたる詳細なドキュメントを持っています。

Clerkをアプリケーションと統合するために必要な構成は最小限です。Clerkアカウントが必要です。そうすれば、SDKとそれらが提供するコンポーネントを使用できます。

キークローク

Keycloakは、人気のあるオープンソースの認証サービスプロバイダーです。オープンソースなので、セルフホストできます。つまり、月間アクティブユーザー数に関係なく無料です。

オープンソースであり、誰もが貢献できるようになっていますが、プロジェクトはRedHatによって管理されています。つまり、プロジェクトを信頼できるということです。

Keycloakはほとんどの認証のユースケースをサポートしており、無料でもあるため、優れた選択肢となる可能性があります。

オープンソースはい
SaaSいいえ
SSOサポートはい
JWTカスタムクレームはい
マシンツーマシン認証はい
無料プラン無制限のユーザーは無料

Keycloakには、中程度の実装の難しさがあります。Keycloakをアプリケーションに統合するだけでなく、デプロイメントとメンテナンスにも注意を払う必要があります。

一見複雑に見えるかもしれませんが、Keycloakにすぐに慣れることができます。また、確立された製品であるため、ほとんどの問題の解決策が見つかる可能性があります。最後に、優れたドキュメントがあります。

学んだこと

Cognitoは、認証を処理するためのAmazonの製品です。これにより、Webおよびモバイルアプリケーションに認証を実装できます。

Cognitoは最も寛大な認証プロバイダーの1つであり、月間最大50,000人のアクティブユーザーがいる無料プランを提供します。コストが懸念され、マネージドソリューションが必要な場合は、Cognitoが最適です。

オープンソースいいえ
SaaSいいえ
SSOサポートはい
JWTカスタムクレームはい
マシンツーマシン認証はい
無料プラン最大50000の月間アクティブユーザー(Cognitoユーザープールに直接サインインする)を無料で利用できます

統合の容易さに関して、Amazon Cognitoは、他のプロバイダーと比較して実装が非常に困難になる可能性があります。Cognitoは、基本的なアプリケーションであっても、複雑なセットアップを必要とします。

ただし、Cognitoをアプリケーションに統合するのに役立つ公式およびコミュニティの資料はたくさんあります。いくつかのSDKとサンプルアプリも利用可能で、あなたを助け、刺激を与えます。

CognitoをHasuraと統合する方法を学ぶ

スーパートークン

SuperTokensは比較的新しいサービスです。必要なほとんどすべてのサポートが付属しており、オープンソースでもあります。つまり、セルフホストして追加料金を回避できます。セルフホストを選択した場合、無制限のユーザーは永久に無料です。

SuperTokensにはHasuraのサポートが付属しており、SuperTokensをHasuraと統合する方法に関する特別なセクションがあります。

オープンソースはい
SaaSはい
SSOサポートはい
JWTカスタムクレームはい
マシンツーマシン認証はい
無料プラン無制限のユーザー(セルフホスト)と最大5000 MAU(SaaS)を無料で利用できます

統合のしやすさに関しては、アプリケーションと統合しようとすると、いくつかの問題が発生する可能性があります。その理由は、これは新しいサービスであり、現在インターネット上で利用できる資料があまりないためです。

構成に関しては、ドキュメントに必要なすべての設定と情報が記載されているため、SuperTokenの使用を開始するのはかなり簡単です。

SuperTokensには、SuperTokensをHasuraと統合するためのガイド、およびサンプルのSuperTokens+Hasuraデモアプリケーションもあります。

Nhost認証

Nhost Authenticationは、Hasuraのオープンソース認証サービスです。Nhost認証を使用すると、次の方法でサインインできます。

  • メールアドレスとパスワード
  • GitHub、Google、Apple、Facebook、Twitter、LinkedInなどのOAuthプロバイダー
  • マジックリンク
  • SMS

これはオープンソースプロジェクトであるため、セルフホストして、マネージドサービスを使用するときに支払う追加料金を回避できます。

オープンソースはい
SaaSいいえ
SSOサポートはい
JWTカスタムクレームはい
マシンツーマシン認証いいえ
無料プラン無制限のユーザーは無料

統合の容易さに関して言えば、Nhost認証はHasuraアプリケーションと統合するのがかなり簡単です。Hasura、Hasura Auth、Postgresを備えたすぐに使えるバックエンドを提供するNhostを介してアプリケーションを作成するか、NhostAuthenticationDockerイメージを使用してアプリケーションをセルフホストすることができます。

ここでNhost認証を確認できます。

スケーラビリティに関する注記

スケーラビリティとは、アプリケーションの成長とビジネス要件の変化を処理する認証サービスの機能を指します。認証サービスは、アプリケーションに影響を与えることなく、ユーザーの成長と要件の変化に対応する必要があります。

セルフホストソリューションを使用する場合は、スケーリングに関して全責任を負います。データベース、サーバー、およびインフラストラクチャ全体を管理する必要があります。すべてがスムーズに機能することを確認するのはあなたの責任です。

マネージドソリューションを使用する場合、認証プロバイダーがスケールアップとスケールダウンを処理します。認証プロバイダーには、スケーリングに使用する事前定義されたレート制限とクォータがあります。

結論

この記事で紹介するすべてのプロバイダーは優れた選択肢ですが、普遍的な答えは1つではありません。認証サービスプロバイダーの選択は、ニーズと要件によって異なります。

SuperTokensとClerkは、Hasuraを公式にサポートする2つの注目すべきプロバイダーです。「サポート」とは、ドキュメントにHasuraとの統合方法を示す特別なセクションがあることを意味します。これはプラスであり、Hasuraと統合するときに非常に役立ちます。

これは完全なリストではないことに注意することが重要です。記事に存在しない利用可能な他のプロバイダーがあります。ただし、記事は随時更新され、新しいプロバイダーが追加されます。

ソース:https ://hasura.io/blog/top-authentication-providers-building-apps-jwt/

#jwt #authentication #hasura 

JWTを使用してアプリを構築するための上位7つの認証プロバイダー(2022)

Los 7 Principales Proveedores De Autenticación Para Crear Aplicaciones

Un "Proveedor de servicios de autenticación" se refiere a una entidad que brinda servicios de autenticación. El proveedor de autenticación abstrae la complejidad de implementar el sistema de autenticación manualmente desde cero para que pueda concentrarse en tareas más importantes.

Este artículo presenta las ventajas y desventajas de usar un proveedor de autenticación y compara los existentes que admiten la integración de JWT.

Pros y contras de los proveedores de autenticación

Antes de elegir un proveedor de servicios de autenticación, es fundamental evaluar las ventajas y desventajas de utilizar uno.

Pro: Complejidad de los resúmenes

El uso de un proveedor de servicios de autenticación abstrae la complejidad de implementar el sistema de autenticación usted mismo. La construcción de un sistema de este tipo es un proceso largo y complejo que requiere muchos recursos.

Puede usar una solución existente que libera esos recursos para otras tareas más críticas.

Pro: Sin almacenamiento de información de usuario

Almacenar información confidencial sobre personas no es algo que deba tomarse a la ligera. Optar por usar un proveedor significa que no tiene que preocuparse por almacenar los detalles de los usuarios en sus servidores.

Pro: Aproveche los inicios de sesión sociales

Puede habilitar los inicios de sesión sociales con un esfuerzo mínimo cuando utiliza un proveedor de servicios de autenticación. El inicio de sesión social se refiere a iniciar sesión utilizando una cuenta de red social existente, como Twitter, GitHub, Google, etc.

Implementar cada proveedor social individualmente requiere esfuerzo y recursos. Al usar un proveedor de autenticación, agregar inicios de sesión sociales se vuelve más fácil y rápido.

Ventaja: mejor seguridad

Optar por utilizar un proveedor de autenticación significa una mayor seguridad. Todo el enfoque de un proveedor de autenticación está en la autenticación y la autorización. Eso significa que están mejor capacitados y equipados para mantener segura la información de los usuarios.

Desventajas: Difícil de migrar

Una vez que elige un proveedor de servicios de autenticación, puede ser difícil migrar. Cambiar a otro proveedor o implementar un sistema propietario puede ser difícil.

Es esencial decidir si tiene sentido usar un proveedor de autenticación o no. Si decide hacerlo, asegúrese de elegir el proveedor que se ajuste a sus necesidades y requisitos.

Desventajas: Bloqueo de proveedor

Otro inconveniente es que puede volverse demasiado dependiente del proveedor que está utilizando. Los motivos pueden ser que su implementación sea demasiado específica para ese proveedor o que sea casi imposible exportar sus datos de usuario actuales.

La migración a otro proveedor puede volverse demasiado costosa y llevar mucho tiempo, por lo que está bloqueado con el actual.

Desventajas: Costos

Al principio, los costos podrían no ser un problema. Sin embargo, una vez que la aplicación crece y tiene más usuarios, los costos pueden convertirse en un problema.

Muchos de los proveedores de autenticación cobran según la cantidad de usuarios activos mensuales. Cuantos más usuarios tenga, mayor será la factura.

Conclusión

¿Debe utilizar un proveedor de servicios de autenticación o implementar un sistema propietario? No hay una respuesta definitiva.

La decisión de usar un Proveedor o no depende de muchos factores. Para algunos, usar un proveedor de autenticación es la solución adecuada, mientras que para otros no lo es.

En caso de que decida usar uno, siga leyendo para conocer los distintos proveedores de servicios de autenticación disponibles.

Elegir un proveedor de autenticación

El artículo compara los siguientes proveedores de servicios de autenticación:

  • Autor0
  • Autenticación de base de fuego
  • Empleado
  • capa clave
  • cognito
  • supertokens
  • anfitrión

Estos proveedores de autenticación se evalúan en función de seis criterios de evaluación.

1. Código abierto

Un proyecto de código abierto viene con un puñado de beneficios. Un beneficio sería el ahorro de costos. Dado que son de código abierto, no requieren licencias ni tarifas de uso.

Otro beneficio es la flexibilidad. Si los requisitos comerciales cambian o necesita funciones adicionales, puede modificar y ampliar el código usted mismo. No tiene que pedir cambios al proveedor o cambiarlo por completo.

Es importante mencionar la transparencia también. El código está disponible para que todos lo vean. Dado que tantos profesionales tienen acceso al código, pueden mejorar el software y hacerlo más seguro.

También hay otros beneficios de usar un proveedor de autenticación de código abierto, pero estos beneficios llevan el punto a casa.

2. Reclamaciones JWT personalizadas

Al integrar cualquier proveedor de servicios de autenticación con Hasura, es importante asegurarse de que admitan notificaciones JWT personalizadas.

Hasura comprueba las reclamaciones JWT personalizadas para conocer la función del usuario que realiza la solicitud. Como resultado, Hasura puede aplicar las reglas de autorización apropiadas.

{
    'x-hasura-default-role': 'user',
    'x-hasura-allowed-roles': ['user'],
    'x-hasura-user-id': user.user_id
};

El fragmento anterior muestra un ejemplo de reclamaciones JWT personalizadas. Contiene información esencial sobre la solicitud.

3. Soporte de inicio de sesión único (SSO)

En los términos más simples, SSO se refiere al tipo de autenticación donde el usuario inicia sesión en múltiples plataformas con un conjunto de credenciales.

Un ejemplo es el SSO social, donde el usuario utiliza una cuenta de red social como la cuenta de Google para iniciar sesión en una aplicación.

4. Autenticación de máquina a máquina

No siempre son los usuarios quienes realizan las solicitudes. Hay escenarios donde dos máquinas se comunican entre ellas. No hay ningún usuario que ingrese las credenciales, por lo que el cliente (otra máquina) debe autenticarse de otra manera.

La autenticación de máquina a máquina (M2M) se refiere a la autenticación de máquinas sin intervención del usuario. Eso es posible mediante el flujo de credenciales de cliente de OAuth 2.0. Las credenciales incluyen un client_idy client_secret, que se utilizan para autenticar al cliente.

5. Niveles gratuitos

Todos los proveedores de autenticación de este artículo tienen un nivel gratuito. La diferencia radica en lo que ofrecen en ese nivel.

Miden los usuarios activos mensuales (MAU) y cobran en función de eso. Como resultado, algunos proveedores ofrecen un nivel gratuito con miles de MAU, mientras que otros ofrecen solo un par de cientos de MAU.

6. Facilidad de integración

La integración de un proveedor de servicios de autenticación depende de muchos factores. Es desafiante presentar cuán fácil o difícil es integrar un proveedor.

Sin embargo, hay algunos puntos que pueden indicar el nivel de dificultad de la implementación, tales como:

  • la calidad de la documentacion
  • SDK disponibles
  • la cantidad de configuración requerida
  • el material disponible

Comparación de proveedores

La imagen ilustra una comparación entre los proveedores de autenticación presentados en este artículo.

Comparación de proveedores de autenticación

Autor0

Auth0 es una solución bien establecida y popular para los servicios de autenticación. Viene con un generoso nivel gratuito y tiene soporte para la mayoría de las cosas que necesita.

FUENTE ABIERTANO
SaaS
Soporte de inicio de sesión único
Reclamaciones personalizadas de JWT
Autenticación de máquina a máquina
Plan GratisSí - hasta 7000 MAU

Cuando se trata de la facilidad de integración, Auth0 no es ni fácil ni difícil de integrar. Dado que es una solución bien establecida y extendida, hay una gran cantidad de material disponible para ayudarlo con la integración. La cantidad de configuración que necesita hacer depende del tipo y la complejidad de su aplicación.

Autenticación de base de fuego

Firebase Authentication es otro servicio de autenticación popular que le permite agregar autenticación a sus aplicaciones.

Firebase le permite agregar métodos de inicio de sesión como:

  • proveedores de identidad como Google, Facebook y otros
  • correo electrónico y contraseña
  • teléfono
FUENTE ABIERTANO
SaaSNo
Soporte de inicio de sesión único
Reclamaciones personalizadas de JWT
Autenticación de máquina a máquina
Plan GratisGratis excepto para la autenticación telefónica

La cantidad de recursos disponibles hace que el proceso de integración sea más sencillo. La comunidad de Firebase crea muchos recursos de código abierto que puede usar. También es un proveedor bien establecido, lo que significa que es probable que encuentre una solución a casi cualquier problema.

Por último, tiene documentación detallada que cubre cómo implementar Firebase Auth en aplicaciones web y móviles.

Empleado

Comparado con los otros proveedores, Clerk es el más nuevo. Clerk le permite implementar registros, inicios de sesión y perfiles de usuario en sus aplicaciones. Según su sitio web, son una "Plataforma de identidad del cliente completa".

Clerk también viene con el soporte de Hasura. Tienen una sección de documentación especial que muestra cómo integrar Clerk con Hasura.

FUENTE ABIERTANO
SaaS
Soporte de inicio de sesión únicoInicio de sesión único social
Reclamaciones personalizadas de JWT
Autenticación de máquina a máquinaNo
Plan GratisSí, hasta 500 MAU

Dado que es relativamente nuevo, es posible que se encuentre con problemas que aún no están documentados o resueltos. Aparte de eso, Clerk tiene una documentación extensa y detallada.

La configuración necesaria para integrar Clerk con su aplicación es mínima. Necesita una cuenta de Clerk y luego puede usar los SDK y los componentes proporcionados por ellos.

Capa de llaves

Keycloak es un popular proveedor de servicios de autenticación de código abierto. Dado que es de código abierto, puede alojarlo usted mismo, lo que significa que es gratuito independientemente de la cantidad de usuarios activos mensuales.

Aunque es de código abierto y está abierto a que todos contribuyan, Red Hat mantiene el proyecto. Eso significa que puedes confiar en el proyecto.

Keycloak es compatible con la mayoría de los casos de uso de autenticación y también es gratuito, por lo que puede ser una excelente opción.

FUENTE ABIERTA
SaaSNo
Soporte de inicio de sesión único
Reclamaciones personalizadas de JWT
Autenticación de máquina a máquina
Plan GratisGratis para usuarios ilimitados

Keycloak tiene un nivel moderado de dificultad de implementación. Además de integrar Keycloak en sus aplicaciones, también debe encargarse de la implementación y el mantenimiento.

Aunque a primera vista pueda parecer complicado, puedes acostumbrarte a Keycloak rápidamente. También es un producto establecido, lo que significa que es probable que encuentre soluciones a la mayoría de sus problemas. Por último, tiene buena documentación.

cognito

Cognito es el producto de Amazon para gestionar la autenticación. Le permite implementar la autenticación en sus aplicaciones web y móviles.

Cognito es uno de los proveedores de autenticación más generosos y le brinda un plan gratuito con hasta 50 000 usuarios activos mensuales. Si los costos son una preocupación y desea una solución administrada, Cognito es una excelente opción.

FUENTE ABIERTANO
SaaSNo
Soporte de inicio de sesión único
Reclamaciones personalizadas de JWT
Autenticación de máquina a máquina
Plan GratisLibere hasta 50 000 usuarios activos mensuales (que inician sesión directamente en los grupos de usuarios de Cognito)

En cuanto a la facilidad de integración, Amazon Cognito puede resultar bastante complicado de implementar en comparación con otros proveedores. Cognito requiere una configuración compleja, incluso para aplicaciones básicas.

Sin embargo, hay muchos materiales oficiales y de la comunidad para ayudarlo a integrar Cognito con su aplicación. Un puñado de SDK y aplicaciones de muestra también están disponibles para ayudarlo e inspirarlo.

Aprende a integrar Cognito con Hasura

supertokens

SuperTokens es un servicio relativamente nuevo. Viene con soporte para casi todo lo que necesitas, y también es de código abierto. Eso significa que puede alojarlo usted mismo y evitar cargos adicionales. Si elige autohospedarse, es gratis para siempre para usuarios ilimitados.

SuperTokens viene con soporte Hasura, con una sección especial sobre cómo integrar SuperTokens con Hasura.

FUENTE ABIERTA
SaaS
Soporte de inicio de sesión único
Reclamaciones personalizadas de JWT
Autenticación de máquina a máquina
Plan GratisLibere para usuarios ilimitados (autohospedados) y hasta 5000 MAU (SaaS)

Cuando se trata de la facilidad de integración, es posible que encuentre algunas dificultades al intentar integrarlo con su aplicación. La razón es que es un servicio nuevo y no hay mucho material disponible en Internet en este momento.

Con respecto a la configuración, es razonablemente fácil comenzar con SuperTokens ya que la documentación proporciona todas las configuraciones y la información que necesita.

SuperTokens también tiene guías sobre la integración de SuperTokens con Hasura y muestras de aplicaciones de demostración de SuperTokens + Hasura.

Autenticación Nhost

Nhost Authentication es un servicio de autenticación de código abierto para Hasura. Con la autenticación Nhost, las personas pueden iniciar sesión con:

  • Correo electrónico y contraseña
  • Proveedores de OAuth como GitHub, Google, Apple, Facebook, Twitter, LinkedIn y otros
  • Enlaces mágicos
  • SMS

Dado que es un proyecto de código abierto, puede alojarlo usted mismo y evitar los cargos adicionales que pagaría al usar un servicio administrado.

FUENTE ABIERTA
SaaSNo
Soporte de inicio de sesión único
Reclamaciones personalizadas de JWT
Autenticación de máquina a máquinaNo
Plan GratisGratis para usuarios ilimitados

Cuando se trata de la facilidad de integración, Nhost Authentication es bastante sencillo de integrar con las aplicaciones de Hasura. Puede crear una aplicación a través de Nhost, que le brinda un back-end listo para usar con Hasura, Hasura Auth y Postgres, o puede usar la imagen de Docker de autenticación de Nhost para autoalojarla.

Puede comprobar la autenticación de Nhost aquí .

Una nota sobre la escalabilidad

La escalabilidad se refiere a la capacidad del servicio de autenticación para manejar el crecimiento de su aplicación y los cambios en los requisitos comerciales. El servicio de autenticación debe mantenerse al día con el crecimiento de sus usuarios y los cambios en los requisitos sin afectar su aplicación.

Si decide utilizar una solución autohospedada, tiene toda la responsabilidad cuando se trata de escalar. Debe administrar la base de datos, los servidores y toda la infraestructura. Es su responsabilidad asegurarse de que todo funcione sin problemas.

Cuando usa una solución administrada, el proveedor de autenticación se encarga de escalar hacia arriba y hacia abajo. El proveedor de autenticación tiene límites de velocidad y cuotas predefinidos, que utilizan para escalar.

Conclusión

Todos los proveedores presentados en este artículo son excelentes opciones, pero no existe una respuesta universal. La elección de un proveedor de servicios de autenticación depende de las necesidades y requisitos de cada uno.

SuperTokens y Clerk son dos proveedores notables que admiten oficialmente a Hasura. "Soporte" significa que tienen una sección especial en su documentación que ilustra cómo integrarlos con Hasura. Eso es una ventaja y ayuda mucho al integrar cualquiera de ellos con Hasura.

Es importante tener en cuenta que esta no es una lista exhaustiva. Hay otros proveedores disponibles que no están presentes en el artículo. Sin embargo, el artículo se actualizará ocasionalmente y se agregarán nuevos proveedores.

Fuente: https://hasura.io/blog/top-authentication-providers-building-apps-jwt/

  #jwt #authentication #hasura 

Los 7 Principales Proveedores De Autenticación Para Crear Aplicaciones
Trung  Nguyen

Trung Nguyen

1658640600

7 Nhà Cung Cấp Xác Thực Hàng Đầu Để Xây Dựng ứng Dụng Với JWT (2022)

“Nhà cung cấp dịch vụ xác thực” đề cập đến một tổ chức cung cấp dịch vụ xác thực. Nhà cung cấp xác thực tóm tắt sự phức tạp của việc triển khai hệ thống xác thực theo cách thủ công từ đầu để bạn có thể tập trung vào các tác vụ quan trọng hơn.

Bài viết này trình bày những lợi ích và hạn chế của việc sử dụng Nhà cung cấp xác thực và so sánh những nhà cung cấp hiện có hỗ trợ tích hợp JWT.

Ưu và nhược điểm của nhà cung cấp xác thực

Trước khi chọn Nhà cung cấp dịch vụ xác thực, điều cần thiết là phải đánh giá những lợi ích và hạn chế của việc sử dụng một Nhà cung cấp dịch vụ xác thực.

Chuyên nghiệp: Độ phức tạp trừu tượng

Việc sử dụng Nhà cung cấp dịch vụ xác thực sẽ tóm tắt sự phức tạp của việc tự triển khai hệ thống xác thực. Xây dựng một hệ thống như vậy là một quá trình phức tạp, kéo dài, đòi hỏi nhiều nguồn lực.

Bạn có thể sử dụng một giải pháp hiện có để giải phóng các tài nguyên đó cho các nhiệm vụ khác, quan trọng hơn.

Chuyên nghiệp: Không có bộ nhớ thông tin người dùng

Lưu trữ thông tin bí mật về mọi người không phải là điều gì đó xem nhẹ. Chọn sử dụng một nhà cung cấp có nghĩa là bạn không phải lo lắng về việc lưu trữ thông tin chi tiết của người dùng trên máy chủ của mình.

Pro: Tận dụng Đăng nhập xã hội

Bạn có thể kích hoạt đăng nhập xã hội với nỗ lực tối thiểu khi sử dụng Nhà cung cấp dịch vụ xác thực. Đăng nhập mạng xã hội đề cập đến việc đăng nhập bằng tài khoản mạng xã hội hiện có như Twitter, GitHub, Google, v.v.

Việc thực hiện từng nhà cung cấp xã hội riêng lẻ đòi hỏi nỗ lực và nguồn lực. Khi sử dụng Nhà cung cấp xác thực, việc thêm thông tin đăng nhập trên mạng xã hội trở nên dễ dàng và nhanh chóng hơn.

Pro: Bảo mật tốt hơn

Chọn sử dụng Nhà cung cấp xác thực có nghĩa là bảo mật tốt hơn. Toàn bộ trọng tâm của Nhà cung cấp xác thực là xác thực và ủy quyền. Điều đó có nghĩa là họ được đào tạo và trang bị tốt hơn để bảo mật thông tin của người dùng.

Nhược điểm: Khó di chuyển

Sau khi bạn chọn Nhà cung cấp dịch vụ xác thực, có thể khó di chuyển. Việc thay đổi sang nhà cung cấp khác hoặc chuyển sang sử dụng một hệ thống độc quyền có thể khó khăn.

Điều cần thiết là phải quyết định xem việc sử dụng Nhà cung cấp xác thực có hợp lý hay không. Nếu bạn chọn làm điều đó, hãy chắc chắn rằng bạn chọn nhà cung cấp phù hợp với nhu cầu và yêu cầu của bạn.

Nhược điểm: Khóa nhà cung cấp

Một nhược điểm khác là bạn có thể trở nên quá phụ thuộc vào nhà cung cấp bạn đang sử dụng. Lý do có thể là việc triển khai của bạn quá cụ thể đối với nhà cung cấp đó hoặc gần như không thể xuất dữ liệu người dùng hiện tại của bạn.

Việc di chuyển sang nhà cung cấp khác có thể trở nên quá tốn kém và mất thời gian, vì vậy bạn bị khóa với nhà cung cấp hiện tại.

Nhược điểm: Chi phí

Ban đầu, chi phí có thể không phải là vấn đề. Tuy nhiên, sau khi ứng dụng phát triển lớn hơn và có nhiều người dùng hơn, chi phí có thể trở thành một vấn đề.

Nhiều Nhà cung cấp xác thực tính phí dựa trên số lượng người dùng hoạt động hàng tháng. Bạn càng có nhiều người dùng, hóa đơn càng lớn.

Sự kết luận

Bạn nên sử dụng Nhà cung cấp dịch vụ xác thực hay triển khai hệ thống độc quyền? Không có câu trả lời dứt khoát.

Quyết định sử dụng Nhà cung cấp hay không phụ thuộc vào nhiều yếu tố. Đối với một số người, sử dụng Nhà cung cấp xác thực là giải pháp thích hợp, trong khi đối với những người khác thì không.

Trong trường hợp bạn quyết định sử dụng, hãy tiếp tục đọc để tìm hiểu về các Nhà cung cấp Dịch vụ Xác thực khác nhau hiện có.

Chọn nhà cung cấp xác thực

Bài viết so sánh các Nhà cung cấp Dịch vụ Xác thực sau:

  • auth0
  • Xác thực Firebase
  • Nhân viên văn phòng
  • KeyCloak
  • Đã học
  • SuperTokens
  • Nhost

Các nhà cung cấp xác thực này được đánh giá dựa trên sáu tiêu chí đánh giá.

1. Nguồn mở

Một dự án mã nguồn mở đi kèm với một số lợi ích. Một lợi ích sẽ là tiết kiệm chi phí. Vì chúng là mã nguồn mở nên chúng không yêu cầu phí cấp phép hoặc phí sử dụng.

Một lợi ích khác là tính linh hoạt. Nếu các yêu cầu kinh doanh thay đổi hoặc bạn cần các tính năng bổ sung, bạn có thể tự sửa đổi và mở rộng mã. Bạn không cần phải yêu cầu nhà cung cấp thay đổi hoặc thay đổi hoàn toàn.

Điều quan trọng là phải đề cập đến tính minh bạch. Mã có sẵn cho mọi người xem. Vì rất nhiều chuyên gia có quyền truy cập vào mã, họ có thể làm cho phần mềm tốt hơn và an toàn hơn.

Có những lợi ích khác của việc sử dụng nhà cung cấp xác thực nguồn mở, nhưng những lợi ích này thúc đẩy điểm về nhà.

2. Tuyên bố JWT tùy chỉnh

Khi tích hợp bất kỳ Nhà cung cấp dịch vụ xác thực nào với Hasura, điều quan trọng là phải đảm bảo họ hỗ trợ các xác nhận quyền sở hữu JWT tùy chỉnh.

Hasura kiểm tra các tuyên bố JWT tùy chỉnh để tìm hiểu về vai trò của người dùng đưa ra yêu cầu. Do đó, Hasura có thể áp dụng các quy tắc ủy quyền phù hợp.

{
    'x-hasura-default-role': 'user',
    'x-hasura-allowed-roles': ['user'],
    'x-hasura-user-id': user.user_id
};

Đoạn mã trên cho thấy một ví dụ về xác nhận quyền sở hữu JWT tùy chỉnh. Nó chứa thông tin cần thiết về yêu cầu.

3. Hỗ trợ Đăng nhập Một lần (SSO)

Theo thuật ngữ đơn giản nhất, SSO đề cập đến loại xác thực trong đó người dùng đăng nhập vào nhiều nền tảng bằng một bộ thông tin xác thực.

Một ví dụ là SSO xã hội, trong đó người dùng sử dụng tài khoản mạng xã hội như tài khoản Google để đăng nhập vào ứng dụng.

4. Xác thực máy với máy

Không phải lúc nào người dùng cũng đưa ra yêu cầu. Có những tình huống mà hai máy giao tiếp giữa chúng. Không có người dùng để nhập thông tin đăng nhập, vì vậy máy khách (máy khác) cần được xác thực theo cách khác.

Xác thực máy với máy (M2M) đề cập đến việc xác thực máy mà không cần người dùng nhập. Điều đó có thể thực hiện được bằng cách sử dụng Luồng thông tin xác thực ứng dụng khách OAuth 2.0. Thông tin xác thực bao gồm dấu client_idclient_secret, được sử dụng để xác thực khách hàng.

5. Bậc miễn phí

Tất cả các nhà cung cấp xác thực từ bài viết này đều có một cấp miễn phí. Sự khác biệt nằm ở những gì họ cung cấp trong cấp đó.

Họ đo lường người dùng hoạt động hàng tháng (MAU) và tính phí dựa trên đó. Do đó, một số nhà cung cấp cung cấp cấp miễn phí với hàng nghìn MAU, trong khi một số nhà cung cấp chỉ cung cấp vài trăm MAU.

6. Dễ dàng hội nhập

Việc tích hợp nhà cung cấp dịch vụ xác thực phụ thuộc vào nhiều yếu tố. Thật khó để trình bày mức độ dễ dàng hay khó khăn khi tích hợp một nhà cung cấp.

Tuy nhiên, có một số điểm có thể chỉ ra mức độ khó khăn của việc triển khai, chẳng hạn như:

  • chất lượng của tài liệu
  • SDK có sẵn
  • số lượng cấu hình yêu cầu
  • vật liệu có sẵn

So sánh nhà cung cấp

Hình ảnh minh họa sự so sánh giữa các Nhà cung cấp xác thực được trình bày trong bài viết này.

So sánh nhà cung cấp dịch vụ xác thực

auth0

Auth0 là một giải pháp được thiết lập tốt và phổ biến cho các dịch vụ xác thực. Nó đi kèm với một cấp miễn phí phong phú và có hỗ trợ cho hầu hết những thứ bạn cần.

MÃ NGUỒN MỞKHÔNG
SaaSĐúng
Hỗ trợ SSOĐúng
Tuyên bố tùy chỉnh JWTĐúng
Xác thực máy với máyĐúng
Gói miễn phíCó - lên đến 7000 MAU

Khi nói đến sự dễ dàng tích hợp, Auth0 không dễ cũng không khó để tích hợp. Vì đây là một giải pháp được thiết lập tốt và phổ biến, nên rất nhiều tài liệu có sẵn để giúp bạn tích hợp. Số lượng cấu hình bạn cần thực hiện tùy thuộc vào loại và độ phức tạp của ứng dụng của bạn.

Xác thực Firebase

Xác thực Firebase là một dịch vụ xác thực phổ biến khác cho phép bạn thêm xác thực vào các ứng dụng của mình.

Firebase cho phép bạn thêm các phương thức đăng nhập như:

  • các nhà cung cấp danh tính như Google, Facebook và các nhà cung cấp khác
  • email và mật khẩu
  • điện thoại
MÃ NGUỒN MỞKHÔNG
SaaSKhông
Hỗ trợ SSOĐúng
Tuyên bố tùy chỉnh JWTĐúng
Xác thực máy với máyĐúng
Gói miễn phíMiễn phí ngoại trừ Xác thực Điện thoại

Số lượng tài nguyên có sẵn làm cho quá trình tích hợp trở nên đơn giản hơn. Cộng đồng Firebase tạo ra nhiều tài nguyên mã nguồn mở mà bạn có thể sử dụng. Đây cũng là một nhà cung cấp có uy tín lâu năm, có nghĩa là bạn có khả năng tìm ra giải pháp cho hầu hết mọi vấn đề.

Cuối cùng, nó có tài liệu chuyên sâu về cách triển khai Firebase Auth trong cả ứng dụng web và ứng dụng di động.

Nhân viên văn phòng

So với các nhà cung cấp khác, Clerk là nhà cung cấp mới nhất. Thư ký cho phép bạn triển khai đăng ký, đăng nhập và hồ sơ người dùng vào các ứng dụng của mình. Theo trang web của họ, họ là một "nền tảng nhận dạng khách hàng hoàn chỉnh".

Thư ký cũng đi kèm với sự hỗ trợ của Hasura. Họ có một phần tài liệu đặc biệt giới thiệu cách tích hợp Clerk với Hasura.

MÃ NGUỒN MỞKHÔNG
SaaSĐúng
Hỗ trợ SSOSSO xã hội
Tuyên bố tùy chỉnh JWTĐúng
Xác thực máy với máyKhông
Gói miễn phíCó - lên đến 500 MAU

Vì nó tương đối mới, bạn có thể gặp phải các vấn đề chưa được ghi chép / giải quyết. Ngoài ra, Clerk có tài liệu chuyên sâu, phong phú.

Cấu hình cần thiết để tích hợp Clerk với ứng dụng của bạn là tối thiểu. Bạn cần có tài khoản Thư ký và sau đó bạn có thể sử dụng SDK và các thành phần do họ cung cấp.

Móc khóa

Keycloak là một nhà cung cấp dịch vụ xác thực mã nguồn mở phổ biến. Vì nó là mã nguồn mở, bạn có thể tự lưu trữ nó, có nghĩa là nó miễn phí bất kể số lượng người dùng hoạt động hàng tháng.

Mặc dù nó là mã nguồn mở và mở cho tất cả mọi người đóng góp, dự án vẫn được duy trì bởi Red Hat. Điều đó có nghĩa là bạn có thể tin tưởng vào dự án.

Keycloak hỗ trợ hầu hết các trường hợp sử dụng xác thực và nó cũng miễn phí, vì vậy nó có thể là một lựa chọn tuyệt vời.

MÃ NGUỒN MỞVÂNG
SaaSKhông
Hỗ trợ SSOĐúng
Tuyên bố tùy chỉnh JWTĐúng
Xác thực máy với máyĐúng
Gói miễn phíMiễn phí cho người dùng không giới hạn

Keycloak có mức độ khó triển khai vừa phải. Bên cạnh việc tích hợp Keycloak vào các ứng dụng của bạn, bạn cũng phải quan tâm đến việc triển khai và bảo trì.

Mặc dù nó có thể trông phức tạp ngay từ cái nhìn đầu tiên, nhưng bạn có thể nhanh chóng làm quen với Keycloak. Nó cũng là một sản phẩm đã được thành lập, có nghĩa là bạn có khả năng tìm ra giải pháp cho hầu hết các vấn đề của mình. Cuối cùng, nó có tài liệu tốt.

Đã học

Cognito là sản phẩm của Amazon để xử lý xác thực. Nó cho phép bạn triển khai xác thực vào các ứng dụng web và di động của mình.

Cognito là một trong những nhà cung cấp xác thực hào phóng nhất, cung cấp cho bạn gói miễn phí với tối đa 50.000 người dùng hoạt động hàng tháng. Nếu chi phí là một mối quan tâm và bạn muốn một giải pháp được quản lý, Cognito là một lựa chọn tuyệt vời.

MÃ NGUỒN MỞKHÔNG
SaaSKhông
Hỗ trợ SSOĐúng
Tuyên bố tùy chỉnh JWTĐúng
Xác thực máy với máyĐúng
Gói miễn phíMiễn phí tới 50000 người dùng hoạt động hàng tháng (những người đăng nhập trực tiếp vào Cognito User Pools)

Về tính dễ dàng tích hợp, Amazon Cognito có thể gặp khá nhiều khó khăn để triển khai so với các nhà cung cấp khác. Cognito yêu cầu một thiết lập phức tạp, ngay cả đối với các ứng dụng cơ bản.

Tuy nhiên, có nhiều tài liệu chính thức và cộng đồng để giúp bạn tích hợp Cognito với ứng dụng của mình. Một số SDK và ứng dụng mẫu cũng có sẵn để trợ giúp và truyền cảm hứng cho bạn.

Tìm hiểu cách tích hợp Cognito với Hasura

SuperTokens

SuperTokens là một dịch vụ tương đối mới. Nó đi kèm với sự hỗ trợ cho hầu hết mọi thứ bạn cần và nó cũng là mã nguồn mở. Điều đó có nghĩa là bạn có thể tự lưu trữ nó và tránh phải trả thêm phí. Nếu bạn chọn tự lưu trữ, nó miễn phí vĩnh viễn cho người dùng không giới hạn.

SuperTokens đi kèm với hỗ trợ Hasura, có một phần đặc biệt về cách tích hợp SuperTokens với Hasura.

MÃ NGUỒN MỞVÂNG
SaaSĐúng
Hỗ trợ SSOĐúng
Tuyên bố tùy chỉnh JWTĐúng
Xác thực máy với máyĐúng
Gói miễn phíGiải phóng cho người dùng không giới hạn (Tự lưu trữ) và lên đến 5000 MAU (SaaS)

Khi nói đến sự dễ dàng tích hợp, bạn có thể gặp một số khó khăn khi cố gắng tích hợp nó với ứng dụng của mình. Lý do là vì đó là một dịch vụ mới và không có nhiều tài liệu có sẵn trên internet vào lúc này.

Về cấu hình, thật dễ dàng để bắt đầu với SuperTokens vì tài liệu cung cấp tất cả các cài đặt và thông tin bạn cần.

SuperTokens cũng có hướng dẫn về việc tích hợp SuperTokens với Hasura và các ứng dụng demo SuperTokens + Hasura mẫu.

Xác thực nhỏ

Nhost Authentication là một dịch vụ xác thực mã nguồn mở cho Hasura. Với Xác thực Nhỏ, mọi người có thể đăng nhập bằng:

  • Email và mật khẩu
  • Các nhà cung cấp OAuth như GitHub, Google, Apple, Facebook, Twitter, LinkedIn và các nhà cung cấp khác
  • Liên kết ma thuật
  • tin nhắn

Vì đây là một dự án mã nguồn mở, bạn có thể tự lưu trữ nó và tránh phải trả thêm phí khi sử dụng dịch vụ được quản lý.

MÃ NGUỒN MỞVÂNG
SaaSKhông
Hỗ trợ SSOĐúng
Tuyên bố tùy chỉnh JWTĐúng
Xác thực máy với máyKhông
Gói miễn phíMiễn phí cho người dùng không giới hạn

Khi nói đến sự dễ dàng tích hợp, Nhost Authentication khá dễ dàng để tích hợp với các ứng dụng Hasura. Bạn có thể tạo một ứng dụng thông qua Nhost, ứng dụng này cung cấp cho bạn một chương trình phụ trợ độc lập với Hasura, Hasura Auth và Postgres hoặc bạn có thể sử dụng hình ảnh Nhost Authentication Docker để tự lưu trữ nó.

Bạn có thể kiểm tra Xác thực Nhost tại đây .

Lưu ý về khả năng mở rộng

Khả năng mở rộng đề cập đến khả năng của dịch vụ xác thực trong việc xử lý sự phát triển ứng dụng của bạn và những thay đổi trong yêu cầu kinh doanh. Dịch vụ xác thực phải theo kịp với sự phát triển của người dùng và các yêu cầu thay đổi mà không ảnh hưởng đến ứng dụng của bạn.

Nếu bạn quyết định sử dụng giải pháp tự lưu trữ, bạn có toàn bộ trách nhiệm khi nói đến việc mở rộng quy mô. Bạn cần quản lý cơ sở dữ liệu, máy chủ và toàn bộ cơ sở hạ tầng. Bạn có trách nhiệm đảm bảo mọi thứ hoạt động trơn tru.

Khi bạn sử dụng giải pháp được quản lý, nhà cung cấp xác thực sẽ quan tâm đến việc tăng và giảm quy mô. Nhà cung cấp xác thực có các giới hạn và hạn ngạch tỷ lệ được xác định trước, họ sử dụng để mở rộng quy mô.

Sự kết luận

Tất cả các nhà cung cấp được trình bày trong bài viết này đều là những lựa chọn tuyệt vời, nhưng không có một câu trả lời chung nào. Việc chọn Nhà cung cấp dịch vụ xác thực phụ thuộc vào nhu cầu và yêu cầu của mỗi người.

SuperTokens và Clerk là hai nhà cung cấp đáng chú ý hỗ trợ Hasura chính thức. “Hỗ trợ” có nghĩa là họ có một phần đặc biệt trong tài liệu minh họa cách tích hợp chúng với Hasura. Đó là một điểm cộng và nó sẽ giúp ích rất nhiều khi tích hợp bất kỳ mục nào trong số chúng với Hasura.

Điều quan trọng cần lưu ý là đây không phải là một danh sách đầy đủ. Có những nhà cung cấp khác có sẵn mà không có trong bài viết. Tuy nhiên, bài báo sẽ được cập nhật đôi khi và các nhà cung cấp mới sẽ được thêm vào.

Nguồn: https://hasura.io/blog/top-authentication-providers-building-apps-jwt/

  #jwt #authentication #hasura 

7 Nhà Cung Cấp Xác Thực Hàng Đầu Để Xây Dựng ứng Dụng Với JWT (2022)
许 志强

许 志强

1658639820

使用 JWT 构建应用程序的 7 大身份验证提供商(2022 年)

“认证服务提供者”是指提供认证服务的实体。身份验证提供程序从头开始抽象了手动实现身份验证系统的复杂性,因此您可以专注于更重要的任务。

本文介绍了使用身份验证提供程序的优点和缺点,并比较了支持 JWT 集成的现有提供程序。

身份验证提供者的优缺点

在选择身份验证服务提供商之前,有必要评估使用一个身份验证服务提供商的优缺点。

优点:抽象复杂性

使用身份验证服务提供者抽象了自己实现身份验证系统的复杂性。构建这样一个系统是一个复杂而漫长的过程,需要很多资源。

您可以使用现有的解决方案来释放这些资源用于其他更关键的任务。

Pro:没有用户信息存储

存储有关人员的机密信息并非易事。选择使用提供商意味着您不必担心将用户的详细信息存储在您的服务器上。

优点:利用社交登录

使用 Auth Service Provider 时,您可以轻松启用社交登录。社交登录是指使用现有的社交网络帐户登录,例如 Twitter、GitHub、Google 等。

单独实施每个社会提供者需要努力和资源。使用 Auth Provider 时,添加社交登录变得更加容易和快捷。

优点:更好的安全性

选择使用 Auth Provider 意味着更好的安全性。Auth Provider 的全部重点是身份验证和授权。这意味着他们接受了更好的培训和装备,以确保用户信息的安全。

缺点:难以迁移

一旦您选择了身份验证服务提供商,就很难迁移出去。更改为其他提供商或滚动专有系统可能很困难。

必须决定使用 Auth Provider 是否有意义。如果您选择这样做,请确保选择适合您的需求和要求的提供商。

缺点:提供者锁定

另一个缺点是您可能过于依赖您正在使用的提供商。原因可能是您的实现过于特定于该供应商,或者几乎不可能导出您当前的用户数据。

迁移到另一个提供商可能会变得过于昂贵和耗时,因此您只能使用当前的提供商。

缺点:成本

一开始,成本可能不是问题。但是,当应用程序变得更大并拥有更多用户后,成本可能会成为问题。

许多身份验证提供商根据每月活跃用户的数量收费。您拥有的用户越多,账单就越大。

结论

您应该使用身份验证服务提供商还是实施专有系统?没有确定的答案。

是否使用提供者的决定取决于许多因素。对于某些人来说,使用 Auth Provider 是合适的解决方案,而对于其他人来说,则不是。

如果您决定使用其中之一,请继续阅读以了解各种可用的身份验证服务提供商。

选择身份验证提供者

本文比较了以下身份验证服务提供商:

  • 授权0
  • Firebase 身份验证
  • 文员
  • 钥匙斗篷
  • 认知
  • 超级代币
  • 主机

这些身份验证提供程序根据六个评估标准进行评估。

1. 开源

开源项目有很多好处。一个好处是节省成本。由于它们是开源的,因此不需要许可或使用费。

另一个好处是灵活性。如果业务需求发生变化或者您需要额外的功能,您可以自己修改和扩展代码。您不必要求供应商进行更改或完全更改。

提到透明度也很重要。代码可供所有人查看。由于有如此多的专业人员可以访问代码,他们可以使软件更好、更安全。

使用开源身份验证提供程序还有其他好处,但这些好处让我们明白了这一点。

2. 自定义 JWT 声明

在将任何身份验证服务提供者与 Hasura 集成时,确保它们支持自定义 JWT 声明非常重要。

Hasura 检查自定义 JWT 声明以了解发出请求的用户的角色。因此,Hasura 可以应用适当的授权规则。

{
    'x-hasura-default-role': 'user',
    'x-hasura-allowed-roles': ['user'],
    'x-hasura-user-id': user.user_id
};

上面的代码片段显示了自定义 JWT 声明的示例。它包含有关请求的基本信息。

3. 单点登录 (SSO) 支持

用最简单的术语来说,SSO 是指用户使用一组凭据登录多个平台的身份验证类型。

一个示例是社交 SSO,其中用户使用社交网络帐户(例如 Google 帐户)登录应用程序。

4. 机器对机器认证

提出请求的并不总是用户。在某些情况下,两台机器之间进行通信。没有用户输入凭据,因此客户端(另一台机器)需要以另一种方式进行身份验证。

机器对机器 (M2M) 身份验证是指在没有用户输入的情况下对机器进行身份验证。这可以通过使用 OAuth 2.0 客户端凭据流来实现。凭据包括client_idclient_secret,用于对客户端进行身份验证。

5. 免费套餐

本文中的所有身份验证提供程序都有免费套餐。不同之处在于它们在该层中提供的内容。

他们衡量每月活跃用户 (MAU) 并据此收费。因此,一些供应商提供包含数千个 MAU 的免费套餐,而一些供应商只提供几百个 MAU。

6. 易于集成

身份验证服务提供商的集成取决于许多因素。很难展示集成供应商的难易程度。

但是,有一些点可能表明实施的难度级别,例如:

  • 文件质量
  • 可用的 SDK
  • 所需的配置量
  • 可用的材料

供应商比较

该图说明了本文中介绍的 Auth Providers 之间的比较。

身份验证提供程序比较

授权0

Auth0 是一种成熟且流行的身份验证服务解决方案。它提供慷慨的免费套餐,并支持您需要的大部分内容。

开源
软件即服务是的
SSO 支持是的
JWT 自定义声明是的
机器对机器身份验证是的
免费计划是 - 高达 7000 MAU

就集成的难易程度而言,Auth0 的集成既不容易也不难。由于它是一种成熟且广泛使用的解决方案,因此可以使用大量材料来帮助您进行集成。您需要执行的配置量取决于应用程序的类型和复杂性。

Firebase 身份验证

Firebase 身份验证是另一种流行的身份验证服务,可让您向应用程序添加身份验证。

Firebase 允许您添加登录方法,例如:

  • 身份提供商,例如 Google、Facebook 等
  • 电子邮件和密码
  • 电话
开源
软件即服务
SSO 支持是的
JWT 自定义声明是的
机器对机器身份验证是的
免费计划免费,电话认证除外

可用资源的数量使集成过程更加直接。Firebase 社区创建了许多可供您使用的开源资源。它也是一个成熟的提供商,这意味着您可能会找到几乎所有问题的解决方案。

最后,它有深入的文档,涵盖了如何在 Web 和移动应用程序中实现 Firebase 身份验证。

文员

与其他供应商相比,Clerk 是最新的供应商。Clerk 使您能够在应用程序中实施注册、登录和用户配置文件。根据他们的网站,他们是一个“完整的客户身份平台”。

Clerk 还附带 Hasura 支持。他们有一个特殊的文档部分,展示了如何将 Clerk 与 Hasura 集成。

开源
软件即服务是的
SSO 支持社交单点登录
JWT 自定义声明是的
机器对机器身份验证
免费计划是 - 高达 500 MAU

由于它相对较新,您可能会遇到尚未记录/解决的问题。除此之外,Clerk 还拥有广泛而深入的文档。

将 Clerk 与您的应用程序集成所需的配置非常少。你需要一个 Clerk 账号,然后你就可以使用他们提供的 SDK 和组件了。

钥匙斗篷

Keycloak 是一个流行的开源 Auth Service Provider。由于它是开源的,您可以自行托管它,这意味着无论每月活跃用户的数量如何,它都是免费的。

尽管它是开源的并且对所有人都开放贡献,但该项目由 Red Hat 维护。这意味着您可以信任该项目。

Keycloak 支持大多数身份验证用例,而且它也是免费的,因此它是一个不错的选择。

开源是的
软件即服务
SSO 支持是的
JWT 自定义声明是的
机器对机器身份验证是的
免费计划无限用户免费

Keycloak 的实现难度适中。除了将 Keycloak 集成到您的应用程序中之外,您还必须注意部署和维护。

尽管乍一看可能看起来很复杂,但您可以很快习惯 Keycloak。它也是一个成熟的产品,这意味着您可能会找到解决大多数问题的方法。最后,它有很好的文档。

认知

Cognito 是亚马逊用于处理身份验证的产品。它允许您在 Web 和移动应用程序中实施身份验证。

Cognito 是最慷慨的身份验证提供商之一,为您提供每月最多 50,000 名活跃用户的免费计划。如果成本是一个问题并且您想要一个托管解决方案,那么 Cognito 是一个很好的选择。

开源
软件即服务
SSO 支持是的
JWT 自定义声明是的
机器对机器身份验证是的
免费计划释放多达 50000 名每月活跃用户(直接登录到 Cognito 用户池)

关于集成的便利性,与其他提供商相比,Amazon Cognito 的实施可能会非常具有挑战性。Cognito 需要复杂的设置,即使对于基本应用程序也是如此。

但是,有许多官方和社区材料可以帮助您将 Cognito 与您的应用程序集成。还提供了一些 SDK 和示例应用程序来帮助和启发您。

了解如何将 Cognito 与 Hasura 集成

超级代币

SuperTokens 是一项相对较新的服务。它支持几乎所有你需要的东西,而且它也是开源的。这意味着您可以自行托管它并避免额外费用。如果您选择自托管,则无限用户永远免费。

SuperTokens 带有 Hasura 支持,有一个关于如何将 SuperTokens 与 Hasura 集成的特殊部分。

开源是的
软件即服务是的
SSO 支持是的
JWT 自定义声明是的
机器对机器身份验证是的
免费计划为无限用户(自托管)和多达 5000 个 MAU (SaaS) 释放

谈到集成的难易程度,您在尝试将其与您的应用程序集成时可能会遇到一些困难。原因是它是一项新服务,目前互联网上没有很多可用的材料。

关于配置,开始使用 SuperTokens 相当容易,因为文档提供了您需要的所有设置和信息。

SuperTokens 还提供了将 SuperTokens 与 Hasura 集成的指南以及示例 SuperTokens + Hasura 演示应用程序。

主机身份验证

Nhost Authentication 是 Hasura 的开源身份验证服务。使用 Nhost 身份验证,人们可以使用以下方式登录:

  • 电子邮件和密码
  • OAuth 提供商,例如 GitHub、Google、Apple、Facebook、Twitter、LinkedIn 等
  • 魔术链接
  • 短信

由于它是一个开源项目,您可以自行托管它并避免使用托管服务时支付的额外费用。

开源是的
软件即服务
SSO 支持是的
JWT 自定义声明是的
机器对机器身份验证
免费计划无限用户免费

谈到集成的便利性,Nhost 身份验证与 Hasura 应用程序集成相当简单。您可以通过 Nhost 创建一个应用程序,它为您提供了一个带有 Hasura、Hasura Auth 和 Postgres 的开箱即用的后端,或者您可以使用 Nhost Authentication Docker 映像来自行托管它。

您可以在此处检查 Nhost 身份验证。

关于可扩展性的说明

可扩展性是指身份验证服务处理应用程序增长和业务需求变化的能力。auth 服务应该跟上您的用户增长和需求变化,而不会影响您的应用程序。

如果您决定使用自托管解决方案,则在扩展方面您负有全部责任。您需要管理数据库、服务器和整个基础架构。确保一切顺利进行是您的责任。

当您使用托管解决方案时,身份验证提供程序负责扩大和缩小规模。身份验证提供程序具有预定义的速率限制和配额,它们用于扩展。

结论

本文中介绍的所有提供商都是很好的选择,但没有一个通用的答案。选择身份验证服务提供商取决于个人的需要和要求。

SuperTokens 和 Clerk 是官方支持 Hasura 的两个著名提供商。“支持”意味着他们在文档中有一个特殊部分来说明如何将它们与 Hasura 集成。这是一个优点,并且在将它们中的任何一个与 Hasura 集成时有很大帮助。

需要注意的是,这不是一个详尽的列表。还有其他可用的提供程序,但本文中没有。但是,文章会不定期更新,并且会添加新的提供者。

来源:https ://hasura.io/blog/top-authentication-providers-building-apps-jwt/

 #jwt #authentication #hasura 

使用 JWT 构建应用程序的 7 大身份验证提供商(2022 年)

Top 7 Authentication Providers for Building Apps With JWT (2022)

An “Authentication Service Provider” refers to an entity that provides authentication services. The Authentication Provider abstracts the complexity of implementing the authentication system manually from scratch so you can focus on more important tasks.

This article presents the benefits and drawbacks of using an Authentication Provider and compares the existing ones that support JWT integration.

See more at: https://hasura.io/blog/top-authentication-providers-building-apps-jwt/

#jwt #authentication #hasura 

Top 7 Authentication Providers for Building Apps With JWT (2022)
Laura  Fox

Laura Fox

1658379960

How To Combine Business Logic & Event Handling Using Nestjs & Hasura

nestjs hasura

Leverage NestJS to make incorporating business logic and event processing easier with Hasura

Features

🎉 Exposes an API endpoint from your NestJS application at to be used for event processing from Hasura. Defaults to /hasura/events/ but can be easily configured

🔒 Automatically validates that the event payload was actually sent from Hasura using configurable secrets

🕵️ Discovers methods from your application and automatically turns them into Hasura event handlers. Supports insert, update and delete events from your tables as well as scheduled events based on a CRON schedule

🧭 Routes incoming webhook payloads to the correct event handler based on configuration so you can maintain a single webhook endpoint for Hasura

🔌 Optionally supports automatic management of your Hasura metadata files which means that your application code can be the source of truth for configuration of events. This reduces a ton of boilerplate and developer overhead

Usage

Install

npm install ---save @golevelup/nestjs-hasura

or

yarn add @golevelup/nestjs-hasura

Import

Import and add HasuraModule to the imports section of the consuming module (most likely AppModule). In order to ensure that your Hasura events webhook endpoint is secure, the module requires configuration for an HTTP header name and value that will be used to verify that the event actually came from Hasura.

Configuration

The Hasura Module supports both the forRoot and forRootAsync patterns for configuration, so you can easily retrieve the necessary config values from a ConfigService or other provider.

Usage

Integrating with your NestJS app

The HasuraModule makes it easy to reuse the same events API endpoint for all events that you create in Hasura. The internal routing mechanism on the NestJS side ensures that the all events coming in through the endpoint will be sent to the correct handler. The endpoint provided defaults to /hasura/events. This can be overriden with the module by specifying an alternative controllerPrefix so for example you could set this to webhooks and the resulting endpoint would be available at /webhooks/events.

Automatically Synchronize Hasura Metadata

One of the more powerful features of this Module is the ability to automatically generate the necessary Hasura metadata for your event handlers instead of having to worry about configuring each handler individually. Under the hood, this uses the @hasura/metadata to generate and merge changes to your tables.yaml and cron_triggers.yaml files.

If you decide to opt into this functionality, you should include the optional managedMetaDataConfig object when importing the HasuraModule into your application.

import { HasuraModule } from '@golevelup/nestjs-hasura';

@Module({
  imports: [
    HasuraModule.forRoot(HasuraModule, {
      webhookConfig: {
        secretFactory: secret,
        secretHeader: secretHeader,
      },
      managedMetaDataConfig: {
        dirPath: join(process.cwd(), 'hasura/metadata'),
        secretHeaderEnvName: 'HASURA_NESTJS_WEBHOOK_SECRET_HEADER_VALUE',
        nestEndpointEnvName: 'NESTJS_EVENT_WEBHOOK_ENDPOINT',
        defaultEventRetryConfig: {
          intervalInSeconds: 15,
          numRetries: 3,
          timeoutInSeconds: 100,
          toleranceSeconds: 21600,
        },
      },
    }),
  ],
})
export class AppModule {
  // ...
}

It is recommended that you conditionally add this configuration based on the Node Environment as this should only be used in development environments to track the necessary changes to your metadata yaml files so that they can be tracked in source control.

After generating changes to these files you should make sure they are applied against your Hasura instance using the CLI command:

hasura metadata apply

Opting Out

If you decide to opt out of automatic metadata synchronization it is up to you to ensure that the secret header name and values match. When creating the event in the Hasura console, you should set these values such that they match the configuration provided to the HasuraModule configuration in your NestJS application. This ensures that only Hasura can trigger events in your system.

Registering Table Event Handlers

Decorate methods in your NestJS providers in order to have them be automatically attached as event handlers for incoming Hasura events. The event payload will be analyzed and routed to your provider methods based on the configuration provided in the decorator.

import {
  TrackedHasuraEventHandler,
  HasuraUpdateEvent,
  HasuraInsertEvent,
} from '@golevelup/nestjs-hasura';

@Injectable()
class UsersService {
  @TrackedHasuraEventHandler({
    triggerName: 'user-created',
    tableName: 'user',
    definition: { type: 'insert' },
  })
  handleUserCreated(evt: HasuraInsertEvent<User>) {}

  @TrackedHasuraEventHandler({
    triggerName: 'user-updated',
    tableName: 'user',
    definition: { type: 'update', columns: ['avatarUrl'] },
  })
  handleUserUpdated(evt: HasuraUpdateEvent<User>) {}
}

Registering Scheduled Event Handlers

import { TrackedHasuraScheduledEventHandler } from '@golevelup/nestjs-hasura';

@Injectable()
class RecurringJobService {
  @TrackedHasuraScheduledEventHandler({
    cronSchedule: CommonCronSchedules.EveryMinute,
    name: 'every-minute',
    payload: {},
    comment: 'this is my comment',
  })
  public async cronTask(evt: any) {
    this.logger.log(evt);
  }
}

Retry Configuration

Retry configuration for both Table Event handlers as well as Scheduled Event handlers can be configured on the individual decorator or you can provide a default retry configuration at the module level that will be used for any event handler that does not explicitly provide its own retry settings.

Configuring Hasura Environment Variables

You should provide ENV variables to your Hasura instance that map the webhook endpoint and secret header values for communication to your NestJS application.

In the examples above, HASURA_NESTJS_WEBHOOK_SECRET_HEADER_VALUE and NESTJS_EVENT_WEBHOOK_ENDPOINT were used. The webhook endpoint should point to the automatically scaffolded events endpoint eg: https://my-nest-app.com/api/hasura/events

Usage with Interceptors, Guards and Filters

This library is built using an underlying NestJS concept called External Contexts which allows for methods to be included in the NestJS lifecycle. This means that Guards, Interceptors and Filters (collectively known as "enhancers") can be used in conjunction with Hasura event handlers. However, this can have unwanted/unintended consequences if you are using Global enhancers in your application as these will also apply to all Hasura event handlers. If you were previously expecting all contexts to be regular HTTP contexts, you may need to add conditional logic to prevent your enhancers from applying to Hasura event handlers.

You can identify Hasura event contexts by their context type, 'hasura_event':

@Injectable()
class ExampleInterceptor implements NestInterceptor {
  intercept(context: ExecutionContext, next: CallHandler<any>) {
    const contextType = context.getType<'http' | 'hasura_event'>();

    // Do nothing if this is a Hasura event
    if (contextType === 'hasura_event') {
      return next.handle();
    }

    // Execute custom interceptor logic for HTTP request/response
    return next.handle();
  }
}

Related Hasura Documentation

Concepts

https://hasura.io/docs/1.0/graphql/manual/event-triggers/index.html#event-triggers

Tutorials

https://hasura.io/docs/1.0/graphql/manual/getting-started/first-event-trigger.html https://hasura.io/event-triggers

Contribute

Contributions welcome! Read the contribution guidelines first.

Link: https://github.com/golevelup/nestjs/tree/master/packages/hasura

#hasura #graphql #nest #nestjs #node #javascript

How To Combine Business Logic & Event Handling Using Nestjs & Hasura
Awesome  Rust

Awesome Rust

1649140200

Rust Hasura: Rust Server That Functions As A Remote Schema for Hasura

Rust + Hasura

This is an example of a Rust server that functions as a remote schema for Hasura.

It demonstrates:

You can learn more about this stack from this talk.

Package Manager

Cargo

Setup

  • Your Hasura schema must have a table user, with a id column of type uuid, and also a username column of type text.
  • Set an ADMIN_SECRET and a JWT_SECRET on the graphql engine, and share these with the Rust server as environment variables.
  • Use graphqurl to generate schema.json
  • gq $HASURA_ENDPOINT -H "x-hasura-admin-secret: $ADMIN_SECRET" --introspect --format json > ./graphql/schema.json

Start

  • cargo run

Environment Variables

KeyExample
PORT8000
HASURA_ENDPOINThttp://127.0.0.1:8080/v1/graphql
ADMIN_SECRETfoo
JWT_SECRET{"type":"HS256","key":"3QQ6FD+o0+c7tzQQVfjpMkNDi2yARAAKzQQk8O2IKoxQQ4nF7EdAh8s3TwpHwrdQQ6R"}

Download Details:
Author: 
Source Code: 
License:

#rust  #webserver #hasura #graphql 

Rust Hasura: Rust Server That Functions As A Remote Schema for Hasura

HasuraとReactを使用してフルスタックのリアルタイム投票アプリを構築する

この記事では、投票結果をリアルタイムで表示する投票アプリケーションを作成する方法について説明します。誰かが投票するたびに、アプリケーションは自動的に更新され、新しい結果が表示されます。

フルスタックアプリケーションを構築する場合でも、Hasuraのおかげでバックエンドコードを作成することはありません。

HasuraとReactで構築されたリアルタイム投票アプリケーションのスクリーンショット

アプリケーションは以下を使用します:

  • バックエンド用のHasuraGraphQLエンジン
  • フロントエンド用のReactとApollo

ライブデモ| バックエンドエクスプローラー| GitHubリポジトリ

なぜこれらのテクノロジーなのか?

先に進む前に、アプリケーションスタックに使用するテクノロジーについて説明しましょう。

HasuraGraphQLエンジン

HasuraはオープンソースのGraphQLエンジンであり、バックエンドコードをまったく記述せずに、インスタントのリアルタイムGraphQLAPIを作成できます。

あなたはそれがどのように機能するのか不思議に思うかもしれません。Hasuraはデータベースに接続し、データベースのテーブルとビューに基づいてAPIを自動的に生成します。GraphQLスキーマやリゾルバーなどをすぐに利用できます。

したがって、Hasuraを選択する理由は、リアルタイムのGraphQLAPIを構築するプロセスをスピードアップするためです。Hasuraはすべての面倒な作業を行うので、他のことに集中できます。

ReactとApolloクライアント

Reactは、優れたコミュニティを持つ最も人気のあるJavaScriptフレームワークの1つです。また、用途が広く、Webアプリケーションとモバイルアプリケーションの両方を構築できます。

Apollo Clientは、フル機能のGraphQLクライアントであり、ユーザーインターフェイスコンポーネントを構築し、GraphQLを介してシームレスにデータをフェッチできます。Apolloクライアントは、最も人気のあるGraphQLクライアントの1つでもあります。

ReactとApolloClientは一緒になって、リアルタイム投票アプリケーションの要件に適合する強力な組み合わせを形成します。

データモデリング

最初のステップは、データベースの構造を決定することです。データベースには、次のテーブルが含まれます。

  • ユーザー–ユーザーは投票に投票する人です
  • 世論調査–世論調査は質問を表します(たとえば、お気に入りのフレームワークは何ですか?
  • オプション–オプションは、人々が選択できる投票オプションです。
  • 投票–投票は、ユーザーと投票オプションの間のリンクです。これは、ユーザーの投票を表します。

drawSQL-export-2022-03-04_10_53.png

上の図は、データベーステーブルと関係を示しています。

との間にはone-to-many関係がuserありvoteます。ユーザーは複数回投票できますが、1つの投票は1人のユーザーにのみ属することができます。

polloptionには関係があります。one-to-manyつまり、投票には複数のオプションを含めることができますが、オプションは1つの投票にのみ属します。

最後に、とテーブルone-to-manyの間には関係があります。つまり、選択できるオプションは1つだけです。1票は1つのオプションを表します。optionvote

データベースには、との2つのビューもありonline_usersますpoll_results。オンラインユーザーの数と投票の結果が表示されます。

Hasuraを使用したバックエンドの実装

Hasuraは次の2つの方法で使用できます。

Hasura Cloudは、高度なパフォーマンス、セキュリティ、および監視機能も提供します。それが提供するもののいくつかは次のとおりです。

  • アプリケーションを自動的に拡大または縮小します
  • 監視とトレース
  • レート制限

これらは3つのメリットにすぎませんが、さらに多くのメリットがあります。それらをチェックしたい場合は、ここで行うことができます。

このチュートリアルではクラウド版を使用していますが、Hasuraをローカルで使用している場合でもチュートリアルに従うことができます。それが邪魔にならないように、バックエンドの構築を始めましょう。

データベースの設定

アカウントを設定したら、プロジェクトのダッシュボードに移動し、[データ]タブをクリックします。

スクリーンショット2022-03-03(15.04.47.png)

[データ]タブでは、既存のデータベースに接続するか、Herokuで新しいデータベースを作成できます。新しいデータベースを作成するので、[Herokuデータベースの作成]オプションをクリックします。

その後、「データベースの作成」をクリックすると、PostgreSQLデータベースが数秒以内に稼働するはずです。

データベーステーブル

次のステップでは、データベーステーブルを作成します。新しく作成したデータベースに移動し、[テーブルの作成]ボタンをクリックします。

スクリーンショット2022-03-04at14.21.48.png

ボタンをクリックすると、新しいテーブルを作成できる新しいページが開きます。

ユーザーテーブル

「ユーザー」テーブルには、次の列があります。

  • id(主キー)– UUID 、、gen_random_uuid()一意
  • created_at –タイムスタンプ、now()
  • online_ping –ブール値、Nullable
  • last_seen_at-タイムスタンプ、Nullable

この図は、テーブルの列、タイプ、およびその他の構成を示しています。

スクリーンショット2022-03-04(14.27.36.png)

id上図に示すように、テーブルを保存する前に、列を主キーとして設定します。

その後、下にスクロールして[テーブルの追加]ボタンを押して保存します。同じプロセスに従って、他のテーブルを作成できます。

ポーリングテーブル

「poll」テーブルには次の列があります。

  • id(主キー)– UUID 、、gen_random_uuid()一意
  • created_at –タイムスタンプ、now()
  • created_by – UUID、null許容
  • 質問–テキスト

オプションテーブル

「オプション」テーブルには、次の列があります。

  • id(主キー)– UUID 、、gen_random_uuid()一意
  • poll_id – UUID
  • テキスト–テキスト

投票表

「投票」テーブルには、次の列があります。

  • id(主キー)– UUID 、、gen_random_uuid()一意
  • created_by_user_id – UUID
  • option_id – UUID
  • created_at –タイムスタンプ、now()

データベースビュー

複雑なクエリを再利用できるため、投票結果とオンラインユーザーのビューを使用します。ビューは、1つ以上のテーブルをクエリした結果です。

ビューは、複雑なクエリを保存し、名前を付けて再利用できるようにすることと考えることができます。ビューは「仮想テーブル」と呼ばれ、通常のテーブルと同じようにクエリできます。

投票結果

ポーリング結果を表示するには、、、およびテーブルでデータベース結合を実行する必要がpollありoptionますvote

最初のデータベース結合は、テーブルからすべてのレコードを返し、voteテーブルから一致するレコードを返しoptionます。つまり、各投票とそれに関連する投票オプションを返します。

2番目の結合は、テーブルからすべてのレコードを返し、optionテーブルから一致するレコードを返しpollます。つまり、すべてのオプションとそれらが属するポーリングを返します。

その後、ビューは返されたすべてのレコードをカウントし、それらを「投票」として返します。

CREATE
OR REPLACE VIEW "public"."poll_results" AS
SELECT
  poll.id AS poll_id,
  o.option_id,
  count(*) AS votes
FROM
  (
    (
      SELECT
        vote.option_id,
        option.poll_id,
        option.text
      FROM
        (
          vote
          LEFT JOIN option ON ((option.id = vote.option_id))
        )
    ) o
    LEFT JOIN poll ON ((poll.id = o.poll_id))
  )
GROUP BY
  poll.question,
  o.option_id,
  poll.id;

「投票結果」ビューのSQLコード

これらのデータベースビューをどこに追加しますか?

データベースビューを追加するには、[データ]タブに移動し、[SQL]オプションをクリックします。「SQL」ページでは、データベースで直接SQLステートメントを実行できます。

スクリーンショット2022-03-10(14.08.23.png)

その後、SQLコードを追加し、「実行」をクリックします。ボタン。エラーがない場合は、新しく作成されたビューにアクセスして使用できるはずです。

オンラインユーザー

オンラインユーザーの数については、ビューを使用することもできます。

このusersテーブルにはlast_seen_at、ユーザーの最後のログインを追跡するプロパティがあります。このプロパティを使用して、ログインしているユーザーの数を判別できます(オンライン)。

CREATE
OR REPLACE VIEW "public"."online_users" AS
SELECT
  count(*) AS count
FROM
  "user"
WHERE
  (
    "user".last_seen_at > (now() - '00:00:15' :: interval)
  );

「オンラインユーザー」ビューのSQLコード

上記のビューは、過去15秒間に表示されたユーザーの数をカウントします。過去15秒間にログインした場合は、オンラインユーザーとしてカウントされます。

関係

バックエンドを実装する最後のステップは、テーブル間の関係を構成することです。Hasuraを使用すると、次の2つの方法でテーブル間の関係を作成できます。

  1. 外部キー制約の使用
  2. 手動(外部キー制約を使用できない場合)

さらに、外部キー制約を追加して関係を作成します。リレーションシップについて詳しく知りたい場合は、ドキュメントにテーブルリレーションシップに関する包括的なセクションがあります。

ユーザー–投票

表の「変更」にvote移動し、「外部キーを追加」というボタンをクリックします。

スクリーンショット2022-03-10(16.05.35.png)

テーブル内の列created_by_user_idの外部キーとして列を構成しましょう。idusers

この画像は、外部キーを追加するプロセスを示しています。

スクリーンショット2022-03-10at16.07.09.png

同じプロセスに従って、テーブル内の列option_idの外部キーとして列を追加します。idoption

「参照テーブル」フィールドの値は。である必要がありますoption。「From」の値は。である必要がありoption_id、「To」の値は。である必要がありますid

外部キーを追加したので、Hasuraは潜在的な関係を自動的に提案します。[関係]タブに移動すると、提案された関係が表示されます。

「追加」ボタンをクリックすると、あなたの関係に名前を付ける機会があります。デフォルト名のままにすることも、カスタム名を使用することもできます。

スクリーンショット2022-03-10(16.15.49.png)

「追加」ボタンを押して関係を保存すれば完了です!

投票–オプション

テーブルに移動し、テーブルの列の外部キーとしてoptionを追加します。poll_ididpoll

  • 参照表–ポーリング
  • 差出人– poll_id
  • To – id

保存後、[関係]タブに移動し、提案された[オブジェクト関係]のみを受け入れます。

オプション–投票

以前に「ユーザー-投票」関係の外部キーを構成したときに、テーブルの列option_idの外部キーとして列を追加しました。idoption

つまり、あとは、pollテーブルの[Relationships]タブに移動して、提案された[ArrayRelationship]を受け入れるだけです。

投票結果ビュー

ビューの場合、テーブルpoll_resultsとの関係を手動で設定する必要があります。ビューを見ると、外部キーとがあります。optionpollpoll_idoption_id

の[関係]タブに移動してpoll_results、関係を手動で追加します。そこに着いたら、「設定」というボタンをクリックします。

poll_resultsとテーブル間の関係optionpollオブジェクト関係です。

次の図に示すように、poll_resultsとの間の関係を構成します。option

スクリーンショット2022-03-16at14.05.57.png

poll_resultsとの間の関係pollも同様に構成されます。次の情報を追加します。

  • 関係タイプ–オブジェクト関係
  • 関係名–投票
  • 参照スキーマ–パブリック
  • 参照表–ポーリング
  • 差出人– poll_id
  • To – id

それらを保存すれば、関係は完了です!

GraphQLAPIの準備ができました

これで、コードを何行も記述せずに、完全に機能するGraphQLAPIができました。HasuraコンソールのAPIExplorerにアクセスすると、データを挿入、変更、および削除できます。

同じアプリケーションを手動で作成することを想像してみてください。これは非常に面倒で時間がかかります。

スクリーンショット2022-03-10at16.57.1​​3.png

次のステップは、フロントエンド部分を実装することです。

フロントエンドの実装

フロントエンド実装の最初のステップは、プロジェクトを作成して初期化することです。好みのフォルダに移動して、以下を実行します。

npx create-react-app realtime-poll

インストールが完了したら、realtime-pollフォルダーに移動して、必要な依存関係をインストールします。

npm i react-bootstrap react-google-charts @apollo/client graphql graphql-ws

このreact-bootstrapパッケージを使用すると、Bootstrapを使用してアプリケーションインターフェイスを構築できますがreact-google-charts、ポーリング結果をグラフとして表示するのに役立ちます。他のパッケージを使用すると、以前に構築したGraphQLAPIを使用できるようになります。

先に進む前に、フォルダからsetupTests.jsreportWebVitals.jsを削除してください。その後、およびからそれらのファイルへのすべての参照を削除します。logo.svgsrcindex.jsApp.js

Apolloを使用してGraphQLクライアントをセットアップする

投票アプリケーションは、GraphQLサブスクリプションを使用して、投票結果をリアルタイムで表示します。投票すると、投票結果が自動的に更新されるため、ページの更新を強制せずに結果を表示する必要があります。

GraphQLサブスクリプションは、サーバーイベントをサブスクライブすることでそれを実行できるようにする操作です。データ(投票結果)が更新されると(誰かが投票すると)、リアルタイムで更新を受け取ります。

更新があるたびにデータがクライアントにプッシュされるため、特別な接続が必要です。GraphQLサブスクリプションはWebSocketを使用します。これにより、サーバーとクライアント間の接続を開いたままにすることができます。

注:この記事では、サブスクリプションについて簡単に触れます。詳細については、ドキュメントを確認してGraphQLサブスクリプションについて学習してください

Apolloを使用したGraphQLクライアントの実装を始めましょう。src最初のステップは、フォルダに新しいファイルを作成することです。

📂 realtime-poll
 └ 📁 node_modules
   📁 package-lock.json
   📁 package.json
   📁 public
   📁 README.md
   📂 src
    └ apollo.js

新しく作成したファイル、を開きapollo.js、次のパッケージをインポートします。

import { ApolloClient, HttpLink, InMemoryCache, split } from "@apollo/client";
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { createClient } from "graphql-ws";
import { getMainDefinition } from "@apollo/client/utilities";

その後、アプリケーションエンドポイントを別の変数に保存します。値「realtime-poll-example.hasura.app」をアプリケーションのURLに置き換えます。

前述したように、GraphQLサブスクリプションはWebSocketプロトコルを使用するため、2つのリンクが必要です。1つのリンクhttpURLをクエリとミューテーションに使用し、もう1つのリンクwsURIをサブスクリプションに使用します。

const GRAPHQL_ENDPOINT = "realtime-poll-example.hasura.app";

const scheme = (proto) =>
  window.location.protocol === "https:" ? `${proto}s` : proto;

const wsURI = `${scheme("ws")}://${GRAPHQL_ENDPOINT}/v1/graphql`;
const httpURL = `${scheme("https")}://${GRAPHQL_ENDPOINT}/v1/graphql`;

また、使用するリンクを決定する関数(スプリッター)もあります。操作がクエリまたはミューテーションの場合、HTTPリンクを使用します。それ以外の場合は、WebSocketリンクを使用します。

const splitter = ({ query }) => {
  const { kind, operation } = getMainDefinition(query) || {};
  const isSubscription =
    kind === "OperationDefinition" && operation === "subscription";
  return isSubscription;
};

GraphQLWsLinkサブスクリプションを実行できるようにします。createClientコンストラクターは、WebSocketリンクと追加の接続オプションをパラメーターとして受け取ります。次に、によって返された値をcreateClientコンストラクGraphQLWsLinkターに渡します。

const cache = new InMemoryCache();
const options = { reconnect: true };

const wsLink = new GraphQLWsLink(createClient({ url: wsURI, connectionParams: { options } }));

私たちは残されています:

  • クエリとミューテーション用のHTTPリンクの設定
  • スプリッター機能を使用する
  • ApolloClientの作成

このsplit関数は、前に作成したスプリッター関数と2つのリンクを引数として取ります。「split」関数によって返されたリンクを引数としてApolloClientコンストラクターに渡します。

const httpLink = new HttpLink({ uri: httpURL });
const link = split(splitter, wsLink, httpLink);
const client = new ApolloClient({ link, cache });

最後に、クライアントをエクスポートして、クエリ、ミューテーション、サブスクリプションに使用できるようにします。

export default client;

この要点で完全なコードを見ることができます。

GraphQL操作

アプリケーションでは、いくつかのGraphQLクエリミューテーション、サブスクリプションを使用します。それらは、アプリケーションのホームページにも表示されます。

スクリーンショット2022-03-15at14.39.13.png

その結果、それらを別のファイルに保存し、必要に応じてインポートします。

フォルダに移動し、srcという名前の新しいファイルを作成しますGraphQL.jsx

📂 realtime-poll
 └ 📁 node_modules
   📁 package-lock.json
   📁 package.json
   📁 public
   📁 README.md
   📂 src
    └ GraphQL.jsx

GraphQL.jsx次のインポートを開いて追加します。

import gql from "graphql-tag";
import React from "react";
import { Card } from "react-bootstrap";

gqlGraphQLクエリ、ミューテーション、サブスクリプションを標準のGraphQLASTに解析できるようにする必要があります。ページにGraphQLクエリ、ミューテーション、サブスクリプション文字列をレンダリングするため、ReactとCardコンポーネントも必要です。

投票を取得する

アプリケーションには、データベースからすべてのポーリングをフェッチするためのクエリが必要です。

const QUERY_GET_POLL = gql`
  query {
    poll(limit: 10) {
      id
      question
      options(order_by: { id: desc }) {
        id
        text
      }
    }
  }
`;

上記のクエリは、ID、質問、オプション(回答)とともに10個の投票を返します。オプションは、IDの降順で並べられています。

投票

投票なので、答えを選んで投票する方法があるはずです。

const MUTATION_VOTE = gql`
  mutation vote($optionId: uuid!, $userId: uuid!) {
    insert_vote(
      objects: [{ option_id: $optionId, created_by_user_id: $userId }]
    ) {
      returning {
        id
      }
    }
  }
`;

上記のミューテーションは、データベースに新しい投票を挿入します。

リアルタイムの投票結果

投票アプリケーションは、このサブスクリプションの助けを借りて、リアルタイムで結果を表示します。

const SUBSCRIPTION_RESULT = gql`
  subscription getResult($pollId: uuid!) {
    poll_results(
      order_by: { option_id: desc }
      where: { poll_id: { _eq: $pollId } }
    ) {
      option_id
      option {
        id
        text
      }
      votes
    }
  }
`;

これらは、アプリケーションが投票を表示し、ユーザーが投票して結果をリアルタイムで表示できるようにするために使用されるGraphQL操作です。

このファイルには次のものも含まれています。

  • 新しいユーザーを作成し、ユーザーをオンラインでマークするための2つのミューテーション
  • オンラインユーザーの数をリアルタイムで表示する1つのサブスクリプション

の完全なコードはGraphQL.jsx、この要点にあります。

投票の実装

次のステップは、ポーリングを実装することです。フォルダに新しいファイルPoll.jsxを作成しsrcます。

📂 realtime-poll
 └ 📁 node_modules
   📁 package-lock.json
   📁 package.json
   📁 public
   📁 README.md
   📂 src
    └ Poll.jsx

このPoll.jsxファイルには、次の2つのコンポーネントが含まれます。

  • PollQuestionこれは投票自体を表し、投票を処理します
  • Poll投票の質問と回答をレンダリングします

新しく作成したファイルを開き、次のインポートを追加します。

import { useMutation, useQuery } from "@apollo/client";
import React, { useEffect, useState } from "react";
import { Button, Form } from "react-bootstrap";
import { Error, Loading } from "./Components";
import { MUTATION_VOTE, QUERY_GET_POLL } from "./GraphQL";
import { Result } from "./Result";

最初の行は、クエリとミューテーションを実行できるようにする2つのフックをApolloクライアントからインポートします。2行目にReactとその2つのデフォルトフックをインポートし、3行目に2つのBootstrapコンポーネントをインポートします。

最後の3行は、カスタムReactコンポーネント、GraphQLクエリ、およびミューテーションをインポートします。それらはまだ存在していませんが、後で実装します。

投票質問コンポーネント

次のステップは、投票質問のコンポーネントを実装することです。「PollQuestion」コンポーネントは投票プロセスを処理します。インポート後、次のコードを記述します。

const PollQuestion = ({ poll, userId }) => {
    const defaultState = {
      optionId: "",
      pollId: poll.id,
      voteBtnText: "🗳 Vote",
      voteBtnStyle: "primary",
    };
    const [state, setState] = useState(defaultState);
    const [vote, { data, loading, error }] = useMutation(MUTATION_VOTE);
};

上記のコードでは、ポーリングのデフォルト状態を設定しています。誰かが初めて投票にアクセスするときは、回答が選択されていないはずです。また、ボタンには「🗳投票」と表示されているはずです。

この画像は、デフォルトの状態での投票がどのように見えるかを示しています。

スクリーンショット2022-03-15at09.48.04.png

useMutationまた、人々が投票できるようにフックを使用しています。フックは、2つの要素を含む配列を返します。最初の要素(vote)は、ミューテーションを実行するために呼び出すことができる関数です。2つ目は、さらに分解できるオブジェクトです。

optionIdユーザーが回答を選択するたびに更新する必要があります。たとえば、ユーザーがこの投票で「Vue」を選択した場合、optionIdそのオプションのIDにを設定します。

const handleOptionChange = (e) => {
    const optionId = e.currentTarget.value;
    setState((prev) => ({ ...prev, optionId }));
};

投票の提出を処理するためのロジックの作成に移りましょう。まず、ユーザーが空のフォームを送信できないようにする必要があります。ユーザーが回答を選択しなかった場合、ボタンは黄色になり、ユーザーに回答を選択して再試行するように求めます。

スクリーンショット2022-03-15at10.34.43.png

答えが選択された場合、フックvoteによって返された関数を呼び出します。useMutation選択した回答のIDと投票したユーザーのIDを渡します。

const handlesubmitVote = (e) => {
    e.preventDefault();

    if (!state.optionId) {
      setState({
        voteBtnText: "✋ Select an option and try again",
        voteBtnStyle: "warning",
      });
      return;
    }

    setState({
      voteBtnText: "🗳️ Submitting",
      voteBtnStyle: "info",
    });

    vote({
      variables: {
        optionId: state.optionId,
        userId,
      },
    });
};

投票が成功すると、それに応じてボタンの状態が更新されます。5秒後、ボタンの状態をリセットして、ユーザーが再度投票できるようにします。エラーがある場合、ボタンはそれを強調表示します。

useEffectフックは、dataまたはの値が変更されるたびに実行されerrorます。

useEffect(() => {
    if (data) {
      setState({
        voteBtnText: "👍 Done",
        voteBtnStyle: "success",
      });

      //  Re-authorize to vote after 5 seconds
      let timer = setTimeout(() => {
        setState({
          voteBtnText: "🗳️ Vote",
          voteBtnStyle: "primary",
        });
      }, 5000);

      return () => clearTimeout(timer);
    }

    if (error) {
      setState({
        voteBtnText: "Error 😞 Try again",
        voteBtnStyle: "danger",
      });
    }
}, [data, error]);

最後に、フォーム、投票オプション、および投票ボタンをレンダリングします。

return (
    <div className="textLeft">
      <h3>{poll.question}</h3>
      <Form
        className="pollForm textLeft"
        onSubmit={(e) => {
          handlesubmitVote(e);
        }}
      >
        {poll.options.map(({ id, text }) => (
          <Form.Check
            custom
            type="radio"
            name="voteCandidate"
            id={id}
            key={id}
            value={id}
            label={text}
            onChange={handleOptionChange}
          />
        ))}
        <Button
          className="voteBtn info"
          variant={state.voteBtnStyle}
          type="submit"
        >
          {state.voteBtnText}
        </Button>
      </Form>
    </div>
);

PollQuestionコンポーネントが完成しました。の完全なコードはPollQuestion、この要点にあります。

ポーリングコンポーネント

Pollコンポーネントは、投票の質問と結果をレンダリングします。useQueryすべてのポーリングを返すGraphQLクエリ文字列を使用してフックを呼び出すことから始めましょう。

export const Poll = ({ userId }) => {
    const { data, loading, error } = useQuery(QUERY_GET_POLL);
  
    if (loading) return <Loading />;
    if (error) return <Error message={error.message} />;
};

クエリが成功した場合、dataプロパティにはポーリングを含む配列が含まれます。配列を取得したら、それをマップして、投票とそれに対応する回答をレンダリングします。

return (
    <div className="container">
      {data?.poll.map((poll) => (
        <div key={poll.id} className="pollWrapper wd100">
          <div className="displayFlex">
            <div className="col-md-4 pollSlider">
              <PollQuestion poll={poll} userId={userId} />
            </div>
            <div className="col-md-8 pollresult">
              <Result pollId={poll.id} />
            </div>
          </div>
        </div>
      ))}
    </div>
);

上記のコードを見ると、Resultまだ存在していないコンポーネントを使用していることがわかります。次のステップでは、まさにそれを行います!

この要点Pollでファイルの完全なコードを見つけることができます。

結果コンポーネント

フォルダにを作成Result.jsxすることから始めましょう。src

📂 realtime-poll
 └ 📁 node_modules
   📁 package-lock.json
   📁 package.json
   📁 public
   📁 README.md
   📂 src
    └ Result.jsx

ファイルを開き、次のインポートを追加します。

import { useSubscription } from "@apollo/client";
import React from "react";
import { Chart } from "react-google-charts";
import { Error, Loading } from "./Components";
import { SUBSCRIPTION_RESULT } from "./GraphQL";

最初の行はフックをインポートしuseSubscriptionます。これを使用して、投票結果をリアルタイムで表示します。2行目でReactをインポートし、3行目でChartコンポーネントをインポートします。最後の2行は、2つのカスタムコンポーネントとGraphQLサブスクリプション文字列をインポートします。

インポート後に次のコードを記述します。

export const Result = ({ pollId }) => {
    const { data, loading, error } = useSubscription(SUBSCRIPTION_RESULT, {
      variables: { pollId },
    });
  
    const hasResults = data?.poll_results.length > 0;
    
    if (loading) return <Loading />;
    if (error) return <Error message={error.message} />;
  
    return (
      <div>
        {hasResults ? <PollChart data={data?.poll_results} /> : <p>No result</p>}
      </div>
    );
};

「結果」コンポーネントは、投票IDを小道具として受け取るため、その特定の投票の結果を表示できます。

useSubscription最初の行では、ポーリングIDを使用してフックを呼び出します。呼び出しが成功すると、dataプロパティにはポーリング結果を含む配列が含まれます。また、すべての新しい投票はdataプロパティに反映されます。投票結果の配列は、新しい投票が送信されるたびに更新されます。

投票結果を表示する前に、結果があるかどうかを確認します。ある場合は、結果を表示します。そうでない場合は、「結果なし」の文字列を表示します。

コードを見ると、PollChartコンポーネントを使用していることがわかります。のコードPollChartとの完全なコードはResult.jsx、この要点にあります。

この記事では、フロントエンド実装の重要な部分に焦点を当てています。トリッキーなビットを実装する方法を強調しています。このGitHubリポジトリで完全なアプリケーションコードを参照できます。

結論

この時点で、バックエンドコードを記述せずにフルスタックアプリケーションを作成できます。Hasuraは、APIの構築に使用できる便利なユーザーインターフェイスを提供します。その結果、GraphQLAPIを構築するプロセスが簡素化および短縮されます。 

ソース:https ://www.freecodecamp.org/news/build-a-full-stack-real-time-voting-app-with-hasura-and-react/

#hasura  #react 

HasuraとReactを使用してフルスタックのリアルタイム投票アプリを構築する

Crear Una Aplicación De Votación En Tiempo Real De Pila Completa

Este artículo le enseñará cómo crear una aplicación de votación que muestre los resultados de la encuesta en tiempo real. Cada vez que alguien vota, la aplicación se actualiza automáticamente y muestra los nuevos resultados.

¡Aunque creará una aplicación de pila completa, no escribirá ningún código de back-end gracias a Hasura!

Captura de pantalla de la aplicación de encuestas en tiempo real creada con Hasura y React

La aplicación utilizará:

  • Hasura GraphQL Engine para el backend
  • React y Apollo para la interfaz

Demostración en vivo | Explorador de back-end | Repositorio GitHub

¿Por qué estas tecnologías?

Antes de continuar, hablemos de las tecnologías que usaremos para la pila de aplicaciones.

Motor Hasura GraphQL

Hasura es un motor GraphQL de código abierto que le permite crear una API GraphQL instantánea y en tiempo real sin escribir ningún código de back-end.

Usted podría preguntarse cómo funciona eso. Hasura se conecta a su base de datos y genera automáticamente la API en función de las tablas y vistas de su base de datos. Obtiene cosas como GraphQL Schema y Resolvers listas para usar.

Por lo tanto, la razón para elegir Hasura es acelerar el proceso de creación de la API GraphQL en tiempo real. Hasura hace todo el trabajo pesado, así que podemos concentrarnos en otras cosas.

Cliente de React y Apollo

React es uno de los marcos de JavaScript más populares con una gran comunidad. También es versátil, lo que le permite crear aplicaciones web y móviles.

Apollo Client es un cliente GraphQL con todas las funciones que le permite crear componentes de interfaz de usuario y obtener datos a través de GraphQL sin problemas. El cliente Apollo es también uno de los clientes GraphQL más populares.

Juntos, React y Apollo Client forman una poderosa combinación que se ajusta a los requisitos de la aplicación de votación en tiempo real.

Modelado de datos

El primer paso es determinar la estructura de la base de datos. La base de datos contendrá las siguientes tablas:

  • usuario: un usuario es una persona que vota en la encuesta
  • encuesta: la encuesta representa la pregunta ( por ejemplo, ¿cuál es su marco favorito? )
  • opción: una opción es una opción de encuesta que las personas pueden elegir
  • voto: un voto es el enlace entre un usuario y una opción de encuesta. Representa el voto del usuario.

drawSQL-exportación-2022-03-04_10_53.png

La figura anterior ilustra las tablas y relaciones de la base de datos.

Hay una one-to-manyrelación entre el usery vote. Un usuario puede votar varias veces, pero un voto puede pertenecer a un solo usuario.

Los polly optiontienen una one-to-manyrelación, lo que significa que una encuesta puede tener múltiples opciones, pero una opción pertenece a una sola encuesta.

Por último, existe una one-to-manyrelación entre las tablas optiony . voteLo que eso significa es que solo puede elegir una opción. Un voto representa una opción.

La base de datos también tiene dos vistas: online_usersy poll_results. Muestran el número de usuarios en línea y los resultados de la encuesta.

Implementación backend con Hasura

Puedes usar Hasura de dos maneras:

  • localmente con la ayuda de Docker ( ver guía )
  • en la nube con la ayuda de Hasura Cloud ( ver guía )

Vale la pena mencionar que Hasura Cloud también ofrece funciones avanzadas de rendimiento, seguridad y monitoreo. Algunas de las cosas que ofrece son las siguientes:

  • escalar automáticamente su aplicación hacia arriba o hacia abajo
  • seguimiento y rastreo
  • limitación de velocidad

Estos son solo tres beneficios, pero hay más. Si quieres consultarlos, puedes hacerlo aquí .

Este tutorial usa la versión en la nube, pero puede seguir el tutorial incluso si usa Hasura localmente. Con eso fuera del camino, comencemos a construir el backend.

Configuración de la base de datos

Después de configurar la cuenta, vaya al panel del proyecto y haga clic en la pestaña "DATOS".

Captura de pantalla 2022-03-03 a las 15.04.47.png

En la pestaña "DATOS", puede conectarse a una base de datos existente o crear una nueva en Heroku. Crearemos una nueva base de datos, así que haga clic en la opción "Crear base de datos de Heroku".

Después de eso, haga clic en "Crear base de datos" y debería tener una base de datos PostgreSQL en funcionamiento en segundos.

Tablas de base de datos

El siguiente paso consiste en crear las tablas de la base de datos. Vaya a su base de datos recién creada y haga clic en el botón "Crear tabla".

Captura de pantalla 2022-03-04 a las 14.21.48.png

Al hacer clic en el botón, se abre una nueva página donde puede crear una nueva tabla.

Tabla de usuarios

La tabla "usuario" tiene las siguientes columnas:

  • id (clave principal) – UUID, gen_random_uuid(), Único
  • created_at - Marca de tiempo,now()
  • online_ping: booleano, anulable
  • last_seen_at --–Marca de tiempo, anulable

La figura ilustra las columnas de la tabla, los tipos y otras configuraciones.

Captura de pantalla 2022-03-04 en 14.27.36.png

Antes de guardar la tabla, establezca la idcolumna como clave principal, como se muestra en la figura anterior.

Después de eso, desplácese hacia abajo y presione el botón "Agregar tabla" para guardarlo. Puede seguir el mismo proceso para crear las otras tablas.

Mesa de encuesta

La tabla "encuesta" tiene las siguientes columnas:

  • id (clave principal) – UUID, gen_random_uuid(), Único
  • created_at - Marca de tiempo,now()
  • created_by – UUID, anulable
  • pregunta – texto

Tabla de opciones

La tabla "opción" tiene las siguientes columnas:

  • id (clave principal) – UUID, gen_random_uuid(), Único
  • encuesta_id – UUID
  • texto – texto

Mesa de votación

La tabla "voto" tiene las siguientes columnas:

  • id (clave principal) – UUID, gen_random_uuid(), Único
  • creado_por_id_usuario – UUID
  • option_id – UUID
  • created_at - Marca de tiempo,now()

Vistas de base de datos

Usaremos vistas para los resultados de la encuesta y los usuarios en línea porque nos permiten reutilizar consultas complejas. Una vista es el resultado de consultar una o más tablas.

Puede pensar en una vista como guardar una consulta compleja y darle un nombre para poder reutilizarla. Una vista se denomina "tabla virtual" y puede consultarla como consultaría una tabla normal.

Resultados de la Encuesta

Mostrar los resultados de la encuesta requiere que realicemos uniones de bases de datos en las tablas poll, optiony .vote

La primera combinación de base de datos devuelve todos los registros de la votetabla y los registros coincidentes de la optiontabla. Es decir, devuelve cada voto y su opción de encuesta asociada.

La segunda combinación devuelve todos los registros de la optiontabla y los registros coincidentes de la polltabla. Es decir, devuelve todas las opciones y la encuesta a la que pertenecen.

Después de eso, la vista cuenta todos los registros devueltos y los devuelve como "votos".

CREATE
OR REPLACE VIEW "public"."poll_results" AS
SELECT
  poll.id AS poll_id,
  o.option_id,
  count(*) AS votes
FROM
  (
    (
      SELECT
        vote.option_id,
        option.poll_id,
        option.text
      FROM
        (
          vote
          LEFT JOIN option ON ((option.id = vote.option_id))
        )
    ) o
    LEFT JOIN poll ON ((poll.id = o.poll_id))
  )
GROUP BY
  poll.question,
  o.option_id,
  poll.id;

Código SQL para la vista "Resultados de la encuesta"

¿Dónde se agregan estas vistas de base de datos?

Para agregar las vistas de la base de datos, vaya a la pestaña "DATOS" y haga clic en la opción "SQL". La página "SQL" le permite ejecutar sentencias SQL directamente en la base de datos.

Captura de pantalla 2022-03-10 en 14.08.23.png

Después de eso, agregue el código SQL y haga clic en "¡Ejecutar!" botón. Si no hay errores, debería poder acceder y utilizar la vista recién creada.

Usuarios en línea

Para el número de usuarios en línea, también podemos usar una vista.

La userstabla tiene una propiedad last_seen_atque realiza un seguimiento del último inicio de sesión de los usuarios. Podemos usar esta propiedad para determinar el número de usuarios registrados (en línea).

CREATE
OR REPLACE VIEW "public"."online_users" AS
SELECT
  count(*) AS count
FROM
  "user"
WHERE
  (
    "user".last_seen_at > (now() - '00:00:15' :: interval)
  );

Código SQL para la vista "Usuarios en línea"

La vista anterior cuenta el número de usuarios vistos en los últimos 15 segundos. Si iniciaron sesión durante los últimos 15 segundos, los contamos como usuarios en línea.

Relaciones

El último paso para implementar el backend es configurar las relaciones entre las tablas. Con Hasura, puede crear relaciones entre tablas de dos maneras:

  1. usando restricciones de clave externa
  2. manualmente (cuando no es posible usar restricciones de clave externa)

Yendo más allá, crearemos relaciones agregando restricciones de clave externa. Si desea leer más sobre las relaciones, la documentación tiene una sección completa sobre relaciones de tablas .

Usuario – Votar

Navegue hasta "Modificar" en la votetabla y haga clic en el botón que dice "Agregar una clave externa".

Captura de pantalla 2022-03-10 a las 16.05.35.png

Configuremos la created_by_user_idcolumna como clave externa para la idcolumna de la userstabla.

La imagen ilustra el proceso de agregar claves foráneas.

Captura de pantalla 2022-03-10 a las 16.07.09.png

Siguiendo el mismo proceso, agregue la option_idcolumna como clave externa para la idcolumna en la optiontabla.

El valor del campo "Tabla de referencia" debe ser option. El valor de "Desde" debe ser option_id, mientras que el valor de "Hasta" debe ser id.

Desde que agregó las claves externas, Hasura sugiere relaciones potenciales automáticamente. Si va a la pestaña "Relaciones", debería ver las relaciones sugeridas.

Cuando hace clic en el botón "Agregar", tiene la oportunidad de nombrar su relación. Puede dejar el nombre predeterminado o usar uno personalizado.

Captura de pantalla 2022-03-10 a las 16.15.49.png

Guarde las relaciones presionando el botón "Agregar" y ¡listo!

Encuesta – Opción

Vaya a la optiontabla y agregue poll_idcomo clave externa para la idcolumna de la polltabla.

  • Tabla de referencia – encuesta
  • De – poll_id
  • Para – identificación

Después de guardarlo, vaya a la pestaña "Relaciones" y acepte solo la "Relación de objeto" sugerida.

Opción – Votar

Cuando configuró las claves externas para la relación "Usuario - Voto" anteriormente, agregó la option_idcolumna como clave externa para la idcolumna en la optiontabla.

Eso significa que lo único que queda por hacer es ir a la pestaña "Relaciones" en la polltabla y aceptar la "Relación de matriz" sugerida.

Vista de resultados de la encuesta

Para la poll_resultsVista, necesitamos establecer manualmente las relaciones con las tablas optiony . pollMirando la vista, puede ver que tenemos las claves foráneas poll_idy option_id.

Vaya a la pestaña "Relaciones" poll_resultspara agregar las relaciones manualmente. Una vez que esté allí, haga clic en el botón que dice "Configurar".

Las relaciones entre poll_resultslas tablas optiony son relaciones de objetos.poll

Configure la relación entre poll_resultsy optioncomo se muestra en la siguiente figura.

Captura de pantalla 2022-03-16 a las 14.05.57.png

La relación entre poll_resultsy pollse configura de manera similar. Agregue la siguiente información:

  • Tipo de relación : relación de objeto
  • Nombre de la relación - encuesta
  • Esquema de referencia : público
  • Tabla de referencia – encuesta
  • De – poll_id
  • Para – identificación

¡Guárdalos y habrás terminado con las relaciones!

La API de GraphQL está lista

Ahora tiene una API de GraphQL completamente funcional sin escribir ninguna línea de código. Si va a API Explorer en Hasura Console, puede insertar, modificar y eliminar datos.

Imagine crear la misma aplicación manualmente: sería bastante tedioso y llevaría mucho tiempo.

Captura de pantalla 2022-03-10 en 16.57.13.png

El siguiente paso es implementar la parte frontend.

Implementación Frontend

El primer paso de la implementación de la interfaz es crear e inicializar el proyecto. Vaya a su carpeta preferida y ejecute:

npx create-react-app realtime-poll

Una vez finalizada la instalación, vaya a la realtime-pollcarpeta e instale las dependencias requeridas:

npm i react-bootstrap react-google-charts @apollo/client graphql graphql-ws

El react-bootstrappaquete nos permitirá construir la interfaz de la aplicación con Bootstrap, mientras react-google-chartsque nos ayudará a mostrar los resultados de la encuesta en forma de gráfico. Los otros paquetes nos permitirán usar la API de GraphQL que creamos anteriormente.

setupTests.jsAntes de continuar , elimine reportWebVitals.jsy logo.svgde la srccarpeta. Después de eso, elimine todas las referencias a esos archivos de index.jsy App.js.

Configurar el cliente GraphQL con Apollo

La aplicación de votación utiliza suscripciones de GraphQL para mostrar los resultados de la encuesta en tiempo real. Cuando las personas votan, los resultados de la encuesta se actualizan automáticamente, por lo que debemos mostrarlos sin obligar a las personas a actualizar la página.

Una suscripción de GraphQL es una operación que nos permite hacer eso suscribiéndonos a los eventos del servidor. Cuando los datos ( resultados de la encuesta ) se actualizan ( alguien vota ), recibimos las actualizaciones en tiempo real.

Dado que los datos se envían al cliente cada vez que hay una actualización, necesitamos una conexión especial. Las suscripciones de GraphQL usan WebSockets, lo que nos permite mantener una conexión abierta entre el servidor y el cliente.

Nota: este artículo trata brevemente sobre las suscripciones. Para obtener más información, consulte la documentación para obtener información sobre GraphQL Subscription .

Comencemos a implementar GraphQL Client con Apollo. El primer paso es crear un nuevo archivo en la srccarpeta:

📂 realtime-poll
 └ 📁 node_modules
   📁 package-lock.json
   📁 package.json
   📁 public
   📁 README.md
   📂 src
    └ apollo.js

Abra el archivo recién creado apollo.jse importe los siguientes paquetes:

import { ApolloClient, HttpLink, InMemoryCache, split } from "@apollo/client";
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { createClient } from "graphql-ws";
import { getMainDefinition } from "@apollo/client/utilities";

Después de eso, almacene el punto final de su aplicación en una variable separada. Reemplace el valor "realtime-poll-example.hasura.app" con la URL de su aplicación.

Como mencionamos anteriormente, las suscripciones de GraphQL usan el protocolo WebSocket, por lo que necesitamos dos enlaces. Usaremos un enlace, httpURL, para consultas y mutaciones y el otro, wsURI, para suscripciones.

const GRAPHQL_ENDPOINT = "realtime-poll-example.hasura.app";

const scheme = (proto) =>
  window.location.protocol === "https:" ? `${proto}s` : proto;

const wsURI = `${scheme("ws")}://${GRAPHQL_ENDPOINT}/v1/graphql`;
const httpURL = `${scheme("https")}://${GRAPHQL_ENDPOINT}/v1/graphql`;

También tenemos una función (divisor) que determina qué enlace usar. Si la operación es una consulta o mutación, utiliza el enlace HTTP. De lo contrario, utiliza el enlace WebSocket.

const splitter = ({ query }) => {
  const { kind, operation } = getMainDefinition(query) || {};
  const isSubscription =
    kind === "OperationDefinition" && operation === "subscription";
  return isSubscription;
};

GraphQLWsLinknos permite ejecutar las suscripciones. El createClientconstructor recibe el enlace WebSocket y opciones de conexión adicionales como parámetros. Luego, pasamos el valor devuelto por createCliental GraphQLWsLinkconstructor.

const cache = new InMemoryCache();
const options = { reconnect: true };

const wsLink = new GraphQLWsLink(createClient({ url: wsURI, connectionParams: { options } }));

Nos quedamos con:

  • configurar el enlace HTTP para consultas y mutación
  • usando la función divisora
  • creando el ApolloClient

La splitfunción toma la función divisora ​​que escribimos anteriormente y los dos enlaces como argumentos. Pasamos el enlace devuelto por la función "dividir" como argumento al ApolloClientconstructor.

const httpLink = new HttpLink({ uri: httpURL });
const link = split(splitter, wsLink, httpLink);
const client = new ApolloClient({ link, cache });

Por último, exportamos el cliente para poder utilizarlo para consultas, mutaciones y suscripciones.

export default client;

Puedes ver el código completo en este gist .

Operaciones de GraphQL

Usaremos un par de consultas GraphQL , mutaciones y suscripciones en la aplicación. También se mostrarán en la página de inicio de la aplicación.

Captura de pantalla 2022-03-15 a las 14.39.13.png

Como resultado, los almacenaremos en un archivo separado y los importaremos cuando sea necesario.

Vaya a la srccarpeta y cree un nuevo archivo llamado GraphQL.jsx.

📂 realtime-poll
 └ 📁 node_modules
   📁 package-lock.json
   📁 package.json
   📁 public
   📁 README.md
   📂 src
    └ GraphQL.jsx

Abra GraphQL.jsxy agregue las siguientes importaciones:

import gql from "graphql-tag";
import React from "react";
import { Card } from "react-bootstrap";

Necesitamos gqlque las consultas, mutaciones y suscripciones de GraphQL se puedan analizar en el GraphQL AST estándar. También necesitamos React y el componente Card porque representaremos las cadenas de consulta, mutación y suscripción de GraphQL en la página.

Obtener encuestas

La aplicación necesita una consulta para obtener todas las encuestas de la base de datos.

const QUERY_GET_POLL = gql`
  query {
    poll(limit: 10) {
      id
      question
      options(order_by: { id: desc }) {
        id
        text
      }
    }
  }
`;

La consulta anterior devuelve 10 encuestas junto con su identificación, pregunta y opciones (respuestas). Las opciones están ordenadas en orden descendente por el id.

Votar

Dado que es una encuesta, debería haber una forma de elegir una respuesta y votar.

const MUTATION_VOTE = gql`
  mutation vote($optionId: uuid!, $userId: uuid!) {
    insert_vote(
      objects: [{ option_id: $optionId, created_by_user_id: $userId }]
    ) {
      returning {
        id
      }
    }
  }
`;

La mutación anterior inserta un nuevo voto en la base de datos.

Resultados de la encuesta en tiempo real

La aplicación de votación muestra los resultados en tiempo real con la ayuda de esta suscripción:

const SUBSCRIPTION_RESULT = gql`
  subscription getResult($pollId: uuid!) {
    poll_results(
      order_by: { option_id: desc }
      where: { poll_id: { _eq: $pollId } }
    ) {
      option_id
      option {
        id
        text
      }
      votes
    }
  }
`;

Estas son las operaciones de GraphQL que utiliza la aplicación para mostrar las encuestas, permitir que los usuarios voten y mostrar los resultados en tiempo real.

El archivo también contiene:

  • dos mutaciones para crear un nuevo usuario y marcar al usuario en línea
  • una suscripción para mostrar el número de usuarios en línea en tiempo real

Puede encontrar el código completo GraphQL.jsxen este gist .

Implementación de encuestas

El siguiente paso es implementar la Encuesta. Cree un nuevo archivo Poll.jsxen la srccarpeta.

📂 realtime-poll
 └ 📁 node_modules
   📁 package-lock.json
   📁 package.json
   📁 public
   📁 README.md
   📂 src
    └ Poll.jsx

El Poll.jsxarchivo contendrá dos componentes:

  • PollQuestionque representa la encuesta en sí y maneja la votación
  • Pollque hace que la pregunta y las respuestas de la encuesta

Abra el archivo recién creado y agregue las siguientes importaciones:

import { useMutation, useQuery } from "@apollo/client";
import React, { useEffect, useState } from "react";
import { Button, Form } from "react-bootstrap";
import { Error, Loading } from "./Components";
import { MUTATION_VOTE, QUERY_GET_POLL } from "./GraphQL";
import { Result } from "./Result";

La primera línea importa los dos ganchos del Cliente Apollo que le permiten ejecutar consultas y mutaciones. Importamos React y sus dos ganchos predeterminados en la segunda línea, mientras que en la tercera línea importamos dos componentes de Bootstrap.

Las últimas tres líneas importan componentes React personalizados, Consultas GraphQL y Mutaciones. Todavía no existen, pero los implementaremos más adelante.

Componente de pregunta de encuesta

El siguiente paso es implementar el componente para la pregunta de la encuesta. El componente "PollQuestion" maneja el proceso de votación. Después de sus importaciones, escriba el siguiente código:

const PollQuestion = ({ poll, userId }) => {
    const defaultState = {
      optionId: "",
      pollId: poll.id,
      voteBtnText: "🗳 Vote",
      voteBtnStyle: "primary",
    };
    const [state, setState] = useState(defaultState);
    const [vote, { data, loading, error }] = useMutation(MUTATION_VOTE);
};

En el código anterior, establecemos el estado predeterminado para la encuesta. Cuando alguien visita la encuesta por primera vez, no debe haber ninguna respuesta seleccionada. Además, el botón debe mostrar "🗳 Votar".

La imagen ilustra cómo se ve la encuesta con el estado predeterminado.

Captura de pantalla 2022-03-15 en 09.48.04.png

También usamos el useMutationgancho para que la gente pueda votar. El gancho devuelve una matriz que contiene dos elementos. El primer elemento ( vote) es una función que podemos llamar para ejecutar la mutación. El segundo es un objeto que podemos desestructurar aún más.

Necesitamos actualizar optionIdcada vez que un usuario selecciona una respuesta. Por ejemplo, si el usuario selecciona "Vue" en esta encuesta, establecemos optionIdel id de esa opción.

const handleOptionChange = (e) => {
    const optionId = e.currentTarget.value;
    setState((prev) => ({ ...prev, optionId }));
};

Pasemos a escribir la lógica para manejar una presentación de voto. Primero, debemos asegurarnos de que los usuarios no puedan enviar un formulario vacío. Si el usuario no seleccionó una respuesta, el botón se vuelve amarillo y le pide al usuario que elija una respuesta y vuelva a intentarlo.

Captura de pantalla 2022-03-15 a las 10.34.43.png

Si se selecciona una respuesta, llamamos a la votefunción devuelta por el useMutationgancho. Pasamos el id de la respuesta seleccionada y el id del usuario que votó.

const handlesubmitVote = (e) => {
    e.preventDefault();

    if (!state.optionId) {
      setState({
        voteBtnText: "✋ Select an option and try again",
        voteBtnStyle: "warning",
      });
      return;
    }

    setState({
      voteBtnText: "🗳️ Submitting",
      voteBtnStyle: "info",
    });

    vote({
      variables: {
        optionId: state.optionId,
        userId,
      },
    });
};

Si la votación tiene éxito, actualizamos el estado del botón en consecuencia. Después de 5 segundos, restablecemos el estado del botón para que los usuarios puedan votar nuevamente. Si hay un error, el botón lo resaltará.

El useEffectgancho se ejecuta cada vez que cambia el valor de datao .error

useEffect(() => {
    if (data) {
      setState({
        voteBtnText: "👍 Done",
        voteBtnStyle: "success",
      });

      //  Re-authorize to vote after 5 seconds
      let timer = setTimeout(() => {
        setState({
          voteBtnText: "🗳️ Vote",
          voteBtnStyle: "primary",
        });
      }, 5000);

      return () => clearTimeout(timer);
    }

    if (error) {
      setState({
        voteBtnText: "Error 😞 Try again",
        voteBtnStyle: "danger",
      });
    }
}, [data, error]);

Por último, renderizamos el formulario, las opciones de encuesta y el botón de votación.

return (
    <div className="textLeft">
      <h3>{poll.question}</h3>
      <Form
        className="pollForm textLeft"
        onSubmit={(e) => {
          handlesubmitVote(e);
        }}
      >
        {poll.options.map(({ id, text }) => (
          <Form.Check
            custom
            type="radio"
            name="voteCandidate"
            id={id}
            key={id}
            value={id}
            label={text}
            onChange={handleOptionChange}
          />
        ))}
        <Button
          className="voteBtn info"
          variant={state.voteBtnStyle}
          type="submit"
        >
          {state.voteBtnText}
        </Button>
      </Form>
    </div>
);

Hemos terminado con el PollQuestioncomponente. Puede encontrar el código completo PollQuestionen este gist .

Componente de encuesta

El Pollcomponente representa la pregunta de la encuesta y los resultados. Comencemos llamando al useQuerygancho con la cadena GraphQL Query que devuelve todas las encuestas.

export const Poll = ({ userId }) => {
    const { data, loading, error } = useQuery(QUERY_GET_POLL);
  
    if (loading) return <Loading />;
    if (error) return <Error message={error.message} />;
};

La datapropiedad contendrá una matriz con encuestas si la consulta es exitosa. Una vez que tenemos la matriz, la mapeamos y representamos las encuestas y sus respuestas correspondientes.

return (
    <div className="container">
      {data?.poll.map((poll) => (
        <div key={poll.id} className="pollWrapper wd100">
          <div className="displayFlex">
            <div className="col-md-4 pollSlider">
              <PollQuestion poll={poll} userId={userId} />
            </div>
            <div className="col-md-8 pollresult">
              <Result pollId={poll.id} />
            </div>
          </div>
        </div>
      ))}
    </div>
);

Si observa el código anterior, puede observar que usamos el Resultcomponente, que aún no existe. ¡En el siguiente paso, haremos exactamente eso!

Puede encontrar el código completo para el Pollarchivo en este gist .

Componente de resultado

Empecemos creando el Result.jsxen la srccarpeta.

📂 realtime-poll
 └ 📁 node_modules
   📁 package-lock.json
   📁 package.json
   📁 public
   📁 README.md
   📂 src
    └ Result.jsx

Abra el archivo y agregue las siguientes importaciones:

import { useSubscription } from "@apollo/client";
import React from "react";
import { Chart } from "react-google-charts";
import { Error, Loading } from "./Components";
import { SUBSCRIPTION_RESULT } from "./GraphQL";

La primera línea importa el useSubscriptiongancho, que usaremos para mostrar los resultados de la encuesta en tiempo real. En la segunda línea, importamos React y en la tercera línea importamos el componente Chart. Las dos últimas líneas importan dos componentes personalizados y la cadena de suscripción de GraphQL.

Escriba el siguiente código después de las importaciones:

export const Result = ({ pollId }) => {
    const { data, loading, error } = useSubscription(SUBSCRIPTION_RESULT, {
      variables: { pollId },
    });
  
    const hasResults = data?.poll_results.length > 0;
    
    if (loading) return <Loading />;
    if (error) return <Error message={error.message} />;
  
    return (
      <div>
        {hasResults ? <PollChart data={data?.poll_results} /> : <p>No result</p>}
      </div>
    );
};

El componente "Resultado" toma una ID de encuesta como accesorio para que pueda mostrar los resultados de esa encuesta específica.

En la primera línea, llamamos al useSubscriptiongancho con el ID de la encuesta. Si la llamada tiene éxito, la datapropiedad contendrá una matriz con los resultados de la encuesta. Además, todos los nuevos votos se verán reflejados en la datapropiedad. La matriz con los resultados de la encuesta se actualiza cada vez que se envía un nuevo voto.

Antes de mostrar los resultados de la encuesta, verificamos si hay algún resultado. Si los hay, mostramos los resultados. Si no, mostramos una cadena "Sin resultado".

Si observa el código, puede ver que usamos un PollChartcomponente. Puede encontrar el código PollCharty el código completo Result.jsxen este gist .

El artículo se centra en las partes esenciales de la implementación de frontend. Destaca cómo implementar las partes más complicadas. Puede navegar por el código completo de la aplicación en este repositorio de GitHub .

Conclusión

En este punto, tiene una aplicación de pila completa sin escribir ningún código de back-end. Hasura proporciona una interfaz de usuario útil que puede usar para crear su API. Como resultado, simplifica y acorta el proceso de creación de una API de GraphQL. 

Fuente: https://www.freecodecamp.org/news/build-a-full-stack-real-time-voting-app-with-hasura-and-react/

#hasura  #react 

Crear Una Aplicación De Votación En Tiempo Real De Pila Completa
Thai  Son

Thai Son

1648614840

Ứng Dụng Bỏ Phiếu Theo Thời Gian Thực Full-Stack Với Hasura Và React

Bài viết này sẽ hướng dẫn bạn cách xây dựng một ứng dụng bỏ phiếu hiển thị kết quả cuộc thăm dò theo thời gian thực. Mỗi khi ai đó bình chọn, ứng dụng sẽ tự động cập nhật và hiển thị kết quả mới.

Mặc dù bạn sẽ xây dựng một ứng dụng toàn ngăn xếp, nhưng bạn sẽ không viết bất kỳ mã phụ trợ nào nhờ Hasura!

Ảnh chụp màn hình ứng dụng thăm dò thời gian thực được xây dựng bằng Hasura và React

Ứng dụng sẽ sử dụng:

  • Công cụ Hasura GraphQL cho phần phụ trợ
  • React và Apollo cho giao diện người dùng

Demo trực tiếp | Trình khám phá phụ trợ | Kho lưu trữ GitHub

Tại sao lại sử dụng công nghệ này?

Trước khi đi sâu hơn, hãy nói về các công nghệ chúng tôi sẽ sử dụng cho ngăn xếp ứng dụng.

Công cụ Hasura GraphQL

Hasura là một Công cụ GraphQL mã nguồn mở cho phép bạn tạo một API GraphQL thời gian thực, tức thì mà không cần viết mã phụ trợ.

Bạn có thể tự hỏi nó hoạt động như thế nào. Hasura kết nối với cơ sở dữ liệu của bạn và nó tự động tạo API dựa trên các bảng và chế độ xem cơ sở dữ liệu của bạn. Bạn nhận được những thứ như Lược đồ GraphQL và Bộ phân giải ra khỏi hộp.

Vì vậy, lý do chọn Hasura là để đẩy nhanh quá trình xây dựng API GraphQL thời gian thực. Hasura thực hiện tất cả các công việc nặng nhọc, vì vậy chúng tôi có thể tập trung vào những việc khác.

React và Apollo Client

React là một trong những framework JavaScript phổ biến nhất với một cộng đồng tuyệt vời. Nó cũng rất linh hoạt, cho phép bạn xây dựng cả ứng dụng web và ứng dụng di động.

Apollo Client là một ứng dụng GraphQL đầy đủ tính năng cho phép bạn xây dựng các thành phần giao diện người dùng và tìm nạp dữ liệu thông qua GraphQL một cách liền mạch. Apollo Client cũng là một trong những ứng dụng GraphQL phổ biến nhất.

Cùng với nhau, React và Apollo Client tạo thành một tổ hợp mạnh mẽ phù hợp với các yêu cầu đối với ứng dụng bỏ phiếu thời gian thực.

Mô hình hóa dữ liệu

Bước đầu tiên là xác định cấu trúc của cơ sở dữ liệu. Cơ sở dữ liệu sẽ chứa các bảng sau:

  • người dùng - người dùng là người bỏ phiếu trong cuộc thăm dò
  • thăm dò ý kiến ​​- cuộc thăm dò thể hiện câu hỏi ( ví dụ: khung yêu thích của bạn là gì? )
  • tùy chọn - một tùy chọn là một tùy chọn thăm dò ý kiến ​​mà mọi người có thể chọn
  • phiếu bầu - phiếu bầu là liên kết giữa người dùng và một tùy chọn thăm dò ý kiến. Nó đại diện cho phiếu bầu của người dùng.

drawSQL-export-2022-03-04_10_53.png

Hình trên minh họa các bảng cơ sở dữ liệu và các mối quan hệ.

Có một one-to-manymối quan hệ giữa uservote. Một người dùng có thể bỏ phiếu nhiều lần, nhưng một phiếu bầu chỉ có thể thuộc về một người dùng.

Mối quan hệ polloptionone-to-manynghĩa là một cuộc thăm dò có thể có nhiều lựa chọn, nhưng một lựa chọn chỉ thuộc về một cuộc thăm dò.

Cuối cùng, có một one-to-manymối quan hệ giữa các bảng optionvote. Điều đó có nghĩa là bạn chỉ có thể chọn một tùy chọn. Một phiếu bầu đại diện cho một lựa chọn.

Cơ sở dữ liệu cũng có hai dạng xem - online_userspoll_results. Chúng hiển thị số lượng người dùng trực tuyến và kết quả từ cuộc thăm dò.

Thực hiện phụ trợ với Hasura

Bạn có thể sử dụng Hasura theo hai cách:

Điều đáng nói là Hasura Cloud cũng cung cấp các tính năng giám sát, bảo mật và hiệu suất nâng cao. Một số điều nó cung cấp như sau:

  • tự động mở rộng ứng dụng của bạn lên hoặc xuống
  • giám sát và truy tìm
  • giới hạn tỷ lệ

Đây chỉ là ba lợi ích, nhưng còn nhiều hơn thế. Nếu bạn muốn kiểm tra chúng, bạn có thể làm điều đó tại đây .

Hướng dẫn này sử dụng phiên bản đám mây, nhưng bạn có thể làm theo hướng dẫn ngay cả khi bạn sử dụng Hasura cục bộ. Với điều đó, hãy bắt đầu xây dựng chương trình phụ trợ.

Thiết lập cơ sở dữ liệu

Sau khi thiết lập tài khoản, hãy chuyển đến trang tổng quan của dự án và nhấp vào tab "DỮ LIỆU".

Ảnh chụp màn hình 2022-03-03 lúc 15.04.47.png

Trong tab "DỮ LIỆU", bạn có thể kết nối với cơ sở dữ liệu hiện có hoặc tạo cơ sở dữ liệu mới trên Heroku. Chúng tôi sẽ tạo một cơ sở dữ liệu mới vì vậy hãy nhấp vào tùy chọn "Tạo cơ sở dữ liệu Heroku".

Sau đó, nhấp vào "Tạo cơ sở dữ liệu" và bạn sẽ có một cơ sở dữ liệu PostgreSQL và chạy trong vòng vài giây.

Bảng cơ sở dữ liệu

Bước tiếp theo liên quan đến việc tạo các bảng cơ sở dữ liệu. Đi tới cơ sở dữ liệu mới tạo của bạn và nhấp vào nút "Tạo Bảng".

Ảnh chụp màn hình 2022-03-04 lúc 14.21.48.png

Nhấp vào nút sẽ mở ra một trang mới, nơi bạn có thể tạo một bảng mới.

Bảng người dùng

Bảng "người dùng" có các cột sau:

  • id (khóa chính) - UUID gen_random_uuid(),, Unique
  • create_at - Dấu thời gian,now()
  • online_ping - Boolean, Nullable
  • last_seen_at -–Timestamp, Nullable

Hình minh họa các cột, kiểu và các cấu hình khác của bảng.

Ảnh chụp màn hình 2022-03-04 lúc 14.27.36.png

Trước khi lưu bảng, hãy đặt idcột làm Khóa chính, như thể hiện trong hình trên.

Sau đó, kéo xuống và nhấn nút "Thêm Bảng" để lưu lại. Bạn có thể làm theo quy trình tương tự để tạo các bảng khác.

Bảng thăm dò ý kiến

Bảng "thăm dò ý kiến" có các cột sau:

  • id (khóa chính) - UUID gen_random_uuid(),, Unique
  • create_at - Dấu thời gian,now()
  • create_by - UUID, nullable
  • câu hỏi - văn bản

Bảng tùy chọn

Bảng "tùy chọn" có các cột sau:

  • id (khóa chính) - UUID gen_random_uuid(),, Unique
  • thăm dò_id - UUID
  • text - văn bản

Bảng bình chọn

Bảng "phiếu bầu" có các cột sau:

  • id (khóa chính) - UUID gen_random_uuid(),, Unique
  • create_by_user_id - UUID
  • option_id - UUID
  • create_at - Dấu thời gian,now()

Chế độ xem cơ sở dữ liệu

Chúng tôi sẽ sử dụng lượt xem cho kết quả thăm dò và người dùng trực tuyến vì chúng cho phép chúng tôi sử dụng lại các truy vấn phức tạp. Một dạng xem là kết quả của việc truy vấn một hoặc nhiều bảng.

Bạn có thể coi một dạng xem là lưu một truy vấn phức tạp và đặt tên cho nó để bạn có thể sử dụng lại. Một dạng xem được gọi là "bảng ảo" và bạn có thể truy vấn nó như cách bạn truy vấn một bảng thông thường.

Kết quả thăm dò ý kiến

Việc hiển thị kết quả thăm dò yêu cầu chúng tôi thực hiện các phép nối cơ sở dữ liệu trên pollbảng optionvote.

Kết nối cơ sở dữ liệu đầu tiên trả về tất cả các bản ghi từ votebảng và các bản ghi phù hợp từ optionbảng. Đó là, nó trả về mỗi phiếu bầu và tùy chọn thăm dò liên quan của nó.

Phép nối thứ hai trả về tất cả các bản ghi từ optionbảng và các bản ghi phù hợp từ pollbảng. Có nghĩa là, nó trả về tất cả các tùy chọn và cuộc thăm dò mà họ thuộc về.

Sau đó, khung nhìn đếm tất cả các bản ghi được trả về và trả về chúng dưới dạng "phiếu bầu".

CREATE
OR REPLACE VIEW "public"."poll_results" AS
SELECT
  poll.id AS poll_id,
  o.option_id,
  count(*) AS votes
FROM
  (
    (
      SELECT
        vote.option_id,
        option.poll_id,
        option.text
      FROM
        (
          vote
          LEFT JOIN option ON ((option.id = vote.option_id))
        )
    ) o
    LEFT JOIN poll ON ((poll.id = o.poll_id))
  )
GROUP BY
  poll.question,
  o.option_id,
  poll.id;

Mã SQL cho chế độ xem "Kết quả thăm dò ý kiến"

Bạn thêm các dạng xem cơ sở dữ liệu này vào đâu?

Để thêm các dạng xem cơ sở dữ liệu, hãy chuyển đến tab "DỮ LIỆU" và nhấp vào tùy chọn "SQL". Trang "SQL" cho phép bạn chạy các câu lệnh SQL trực tiếp trên cơ sở dữ liệu.

Ảnh chụp màn hình 2022-03-10 lúc 14.08.23.png

Sau đó, thêm mã SQL và nhấp vào "Chạy!" khuy ao. Nếu không có lỗi, bạn sẽ có thể truy cập và sử dụng dạng xem mới được tạo.

Người dùng trực tuyến

Đối với số lượng người dùng trực tuyến, chúng tôi cũng có thể sử dụng một chế độ xem.

Bảng userscó thuộc tính last_seen_attheo dõi lần đăng nhập cuối cùng của người dùng. Chúng tôi có thể sử dụng thuộc tính này để xác định số lượng người dùng đã đăng nhập (trực tuyến).

CREATE
OR REPLACE VIEW "public"."online_users" AS
SELECT
  count(*) AS count
FROM
  "user"
WHERE
  (
    "user".last_seen_at > (now() - '00:00:15' :: interval)
  );

Mã SQL cho chế độ xem "Người dùng trực tuyến"

Chế độ xem trên đếm số lượng người dùng được xem trong 15 giây qua. Nếu họ đăng nhập trong 15 giây qua, chúng tôi tính họ là người dùng trực tuyến.

Các mối quan hệ

Bước cuối cùng trong việc triển khai chương trình phụ trợ là định cấu hình mối quan hệ giữa các bảng. Với Hasura, bạn có thể tạo mối quan hệ giữa các bảng theo hai cách:

  1. sử dụng các ràng buộc khóa ngoại
  2. theo cách thủ công (khi không thể sử dụng các ràng buộc khóa ngoại)

Đi xa hơn, chúng tôi sẽ tạo ra các mối quan hệ bằng cách thêm các ràng buộc khóa ngoại. Nếu bạn muốn đọc thêm về các mối quan hệ, tài liệu có một phần toàn diện về các mối quan hệ trong bảng .

Người dùng - Bình chọn

Điều hướng đến "Sửa đổi" trong votebảng và nhấp vào nút có nội dung "Thêm khóa ngoại".

Ảnh chụp màn hình 2022-03-10 lúc 16.05.35.png

Hãy cấu hình created_by_user_idcột làm khóa ngoại cho idcột trong usersbảng.

Hình ảnh minh họa quá trình thêm khóa ngoại.

Ảnh chụp màn hình 2022-03-10 lúc 16.07.09.png

Theo quy trình tương tự, hãy thêm option_idcột làm khóa ngoại cho idcột trong optionbảng.

Giá trị trường "Bảng tham chiếu" phải là option. Giá trị cho "Từ" phải là option_id, trong khi giá trị cho "Đến" phải là id.

Vì bạn đã thêm khóa ngoại, Hasura sẽ tự động gợi ý các mối quan hệ tiềm năng. Nếu bạn chuyển đến tab "Mối quan hệ", bạn sẽ thấy các mối quan hệ được đề xuất.

Khi bạn nhấp vào nút "Thêm", bạn sẽ có cơ hội đặt tên cho mối quan hệ của mình. Bạn có thể để tên mặc định hoặc sử dụng tên tùy chỉnh.

Ảnh chụp màn hình 2022-03-10 lúc 16.15.49.png

Lưu các mối quan hệ bằng cách nhấn nút "Thêm" và bạn đã hoàn tất!

Thăm dò ý kiến ​​- Tùy chọn

Đi tới optionbảng và thêm poll_idlàm khóa ngoại cho idcột trong pollbảng.

  • Bảng tham chiếu - cuộc thăm dò
  • Từ - thăm dò ý kiến
  • Tới - id

Sau khi lưu nó, hãy chuyển đến tab "Mối quan hệ" và chỉ chấp nhận "Mối quan hệ đối tượng" được đề xuất.

Tùy chọn - Bỏ phiếu

Khi bạn định cấu hình khóa ngoại cho mối quan hệ "Người dùng - Bỏ phiếu" trước đó, bạn đã thêm option_idcột làm khóa ngoại cho idcột trong optionbảng.

Điều đó có nghĩa là điều duy nhất cần làm là chuyển đến tab "Mối quan hệ" trong pollbảng và chấp nhận "Mối quan hệ mảng" được đề xuất.

Xem kết quả thăm dò ý kiến

Đối với poll_resultsChế độ xem, chúng ta cần thiết lập các mối quan hệ với bảng optionvà theo cách thủ công poll. Nhìn vào giao diện, bạn có thể thấy chúng tôi có các khóa ngoại poll_idoption_id.

Chuyển đến tab "Mối quan hệ" poll_resultsđể thêm các mối quan hệ theo cách thủ công. Khi bạn đã ở đó, hãy nhấp vào nút "Định cấu hình".

Mối quan hệ giữa poll_resultsvà và optionpollbảng là mối quan hệ đối tượng.

Định cấu hình mối quan hệ giữa poll_resultsoptionnhư trong hình bên dưới.

Ảnh chụp màn hình 2022-03-16 lúc 14.05.57.png

Mối quan hệ giữa poll_resultspollđược cấu hình theo cách tương tự. Thêm thông tin sau:

  • Loại mối quan hệ - Mối quan hệ Đối tượng
  • Tên mối quan hệ - cuộc thăm dò
  • Lược đồ tham chiếu - công khai
  • Bảng tham chiếu - cuộc thăm dò
  • Từ - thăm dò ý kiến
  • Tới - id

Lưu chúng và bạn đã hoàn tất các mối quan hệ!

API GraphQL đã sẵn sàng

Bây giờ bạn có một API GraphQL hoạt động đầy đủ mà không cần viết bất kỳ dòng mã nào. Nếu bạn truy cập API Explorer trong Hasura Console, bạn có thể chèn, sửa đổi và xóa dữ liệu.

Hãy tưởng tượng việc xây dựng cùng một ứng dụng theo cách thủ công - nó sẽ khá tẻ nhạt và tốn thời gian.

Ảnh chụp màn hình 2022-03-10 lúc 16.57.13.png

Bước tiếp theo là thực hiện phần giao diện người dùng.

Triển khai giao diện người dùng

Bước đầu tiên của việc triển khai frontend là tạo và khởi tạo dự án. Chuyển đến thư mục ưa thích của bạn và chạy:

npx create-react-app realtime-poll

Sau khi quá trình cài đặt kết thúc, hãy chuyển đến realtime-pollthư mục và cài đặt các phần phụ thuộc bắt buộc:

npm i react-bootstrap react-google-charts @apollo/client graphql graphql-ws

Gói react-bootstrapnày sẽ cho phép chúng ta xây dựng giao diện ứng dụng với Bootstrap, ngược lại react-google-chartssẽ giúp chúng ta hiển thị kết quả bình chọn dưới dạng biểu đồ. Các gói khác sẽ cho phép chúng tôi sử dụng API GraphQL mà chúng tôi đã xây dựng trước đó.

setupTests.jsTrước khi tiếp tục , hãy xóa reportWebVitals.jslogo.svgkhỏi srcthư mục. Sau đó, xóa tất cả các tham chiếu đến các tệp đó khỏi index.jsApp.js.

Thiết lập GraphQL Client với Apollo

Ứng dụng bỏ phiếu sử dụng Đăng ký GraphQL để hiển thị kết quả cuộc thăm dò theo thời gian thực. Khi mọi người bỏ phiếu, kết quả của cuộc thăm dò sẽ tự động cập nhật, vì vậy chúng tôi cần hiển thị chúng mà không buộc mọi người phải làm mới trang.

Đăng ký GraphQL là một hoạt động cho phép chúng tôi thực hiện điều đó bằng cách đăng ký các sự kiện máy chủ. Khi dữ liệu ( kết quả thăm dò ý kiến ) được cập nhật ( ai đó bình chọn ), chúng tôi sẽ nhận được thông tin cập nhật theo thời gian thực.

Vì dữ liệu được đẩy đến máy khách mỗi khi có bản cập nhật, chúng tôi cần một kết nối đặc biệt. Đăng ký GraphQL sử dụng WebSockets, cho phép chúng tôi giữ kết nối mở giữa máy chủ và máy khách.

Lưu ý: Bài viết này đề cập ngắn gọn đến Đăng ký. Để biết thêm thông tin, hãy kiểm tra tài liệu để tìm hiểu về Đăng ký GraphQL .

Hãy bắt đầu triển khai GraphQL Client với Apollo. Bước đầu tiên là tạo một tệp mới trong srcthư mục:

📂 realtime-poll
 └ 📁 node_modules
   📁 package-lock.json
   📁 package.json
   📁 public
   📁 README.md
   📂 src
    └ apollo.js

Mở tệp mới tạo apollo.jsvà nhập các gói sau:

import { ApolloClient, HttpLink, InMemoryCache, split } from "@apollo/client";
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { createClient } from "graphql-ws";
import { getMainDefinition } from "@apollo/client/utilities";

Sau đó, lưu trữ điểm cuối ứng dụng của bạn trong một biến riêng biệt. Thay thế giá trị "realtime-poll-example.hasura.app" bằng URL của ứng dụng của bạn.

Như chúng tôi đã đề cập trước đó, Đăng ký GraphQL sử dụng giao thức WebSocket, vì vậy chúng tôi cần hai liên kết. Chúng tôi sẽ sử dụng một liên kết, httpURLcho các truy vấn và đột biến và liên kết kia, wsURIcho các đăng ký.

const GRAPHQL_ENDPOINT = "realtime-poll-example.hasura.app";

const scheme = (proto) =>
  window.location.protocol === "https:" ? `${proto}s` : proto;

const wsURI = `${scheme("ws")}://${GRAPHQL_ENDPOINT}/v1/graphql`;
const httpURL = `${scheme("https")}://${GRAPHQL_ENDPOINT}/v1/graphql`;

Chúng tôi cũng có một chức năng (bộ chia) xác định liên kết nào để sử dụng. Nếu hoạt động là một truy vấn hoặc đột biến, nó sử dụng liên kết HTTP. Nếu không, nó sử dụng liên kết WebSocket.

const splitter = ({ query }) => {
  const { kind, operation } = getMainDefinition(query) || {};
  const isSubscription =
    kind === "OperationDefinition" && operation === "subscription";
  return isSubscription;
};

GraphQLWsLinkcho phép chúng tôi thực hiện các đăng ký. Hàm createClientkhởi tạo nhận liên kết WebSocket và các tùy chọn kết nối bổ sung làm tham số. Sau đó, chúng tôi chuyển giá trị được trả về bởi createClienthàm GraphQLWsLinktạo.

const cache = new InMemoryCache();
const options = { reconnect: true };

const wsLink = new GraphQLWsLink(createClient({ url: wsURI, connectionParams: { options } }));

Chúng tôi còn lại với:

  • thiết lập liên kết HTTP cho các truy vấn và đột biến
  • sử dụng chức năng bộ chia
  • tạo ApolloClient

Hàm splitlấy hàm bộ tách mà chúng ta đã viết trước đó và hai liên kết làm đối số. Chúng tôi chuyển liên kết được trả về bởi hàm "split" làm đối số cho hàm ApolloClienttạo.

const httpLink = new HttpLink({ uri: httpURL });
const link = split(splitter, wsLink, httpLink);
const client = new ApolloClient({ link, cache });

Cuối cùng, chúng tôi xuất ứng dụng khách để chúng tôi có thể sử dụng nó cho các truy vấn, đột biến và đăng ký.

export default client;

Bạn có thể xem mã hoàn chỉnh trong ý chính này .

Hoạt động GraphQL

Chúng tôi sẽ sử dụng một số truy vấn GraphQL , đột biếnđăng ký trong ứng dụng. Chúng cũng sẽ được hiển thị trên trang chủ của ứng dụng.

Ảnh chụp màn hình 2022-03-15 lúc 14.39.13.png

Do đó, chúng tôi sẽ lưu trữ chúng trong một tệp riêng biệt và nhập chúng khi cần thiết.

Đi tới srcthư mục và tạo một tệp mới có tên GraphQL.jsx.

📂 realtime-poll
 └ 📁 node_modules
   📁 package-lock.json
   📁 package.json
   📁 public
   📁 README.md
   📂 src
    └ GraphQL.jsx

Mở GraphQL.jsxvà thêm các lần nhập sau:

import gql from "graphql-tag";
import React from "react";
import { Card } from "react-bootstrap";

Chúng tôi cần gqlđể các truy vấn GraphQL, đột biến và đăng ký có thể được phân tích cú pháp thành GraphQL AST tiêu chuẩn. Chúng tôi cũng cần React và thành phần Thẻ vì chúng tôi sẽ hiển thị truy vấn GraphQL, đột biến và chuỗi đăng ký trên trang.

Nhận cuộc thăm dò ý kiến

Ứng dụng cần một truy vấn để tìm nạp tất cả các cuộc thăm dò từ cơ sở dữ liệu.

const QUERY_GET_POLL = gql`
  query {
    poll(limit: 10) {
      id
      question
      options(order_by: { id: desc }) {
        id
        text
      }
    }
  }
`;

Truy vấn trên trả về 10 cuộc thăm dò cùng với id, câu hỏi và các tùy chọn (câu trả lời) của họ. Các tùy chọn được sắp xếp theo thứ tự giảm dần theo id.

Bỏ phiếu

Vì đó là một cuộc thăm dò ý kiến, nên có một cách để chọn một câu trả lời và bỏ phiếu.

const MUTATION_VOTE = gql`
  mutation vote($optionId: uuid!, $userId: uuid!) {
    insert_vote(
      objects: [{ option_id: $optionId, created_by_user_id: $userId }]
    ) {
      returning {
        id
      }
    }
  }
`;

Đột biến trên sẽ chèn một phiếu bầu mới vào cơ sở dữ liệu.

Kết quả thăm dò ý kiến ​​theo thời gian thực

Ứng dụng bỏ phiếu hiển thị kết quả trong thời gian thực với sự trợ giúp của đăng ký này:

const SUBSCRIPTION_RESULT = gql`
  subscription getResult($pollId: uuid!) {
    poll_results(
      order_by: { option_id: desc }
      where: { poll_id: { _eq: $pollId } }
    ) {
      option_id
      option {
        id
        text
      }
      votes
    }
  }
`;

Đây là các hoạt động GraphQL được ứng dụng sử dụng để hiển thị các cuộc thăm dò, cho phép người dùng bỏ phiếu và hiển thị kết quả trong thời gian thực.

Tệp cũng chứa:

  • hai đột biến để tạo người dùng mới và đánh dấu người dùng trực tuyến
  • một đăng ký để hiển thị số lượng người dùng trực tuyến trong thời gian thực

Bạn có thể tìm thấy mã hoàn chỉnh GraphQL.jsxtrong ý chính này .

Triển khai cuộc thăm dò ý kiến

Bước tiếp theo là thực hiện Cuộc thăm dò ý kiến. Tạo một tệp mới Poll.jsxtrong srcthư mục.

📂 realtime-poll
 └ 📁 node_modules
   📁 package-lock.json
   📁 package.json
   📁 public
   📁 README.md
   📂 src
    └ Poll.jsx

Tệp Poll.jsxsẽ chứa hai thành phần:

  • PollQuestionnó đại diện cho chính cuộc thăm dò và nó xử lý cuộc bỏ phiếu
  • Pollđiều này hiển thị câu hỏi và câu trả lời của cuộc thăm dò

Mở tệp mới tạo và thêm các lần nhập sau:

import { useMutation, useQuery } from "@apollo/client";
import React, { useEffect, useState } from "react";
import { Button, Form } from "react-bootstrap";
import { Error, Loading } from "./Components";
import { MUTATION_VOTE, QUERY_GET_POLL } from "./GraphQL";
import { Result } from "./Result";

Dòng đầu tiên nhập hai hook từ Apollo Client cho phép bạn thực hiện các truy vấn và đột biến. Chúng tôi nhập React và hai hook mặc định của nó vào dòng thứ hai, trong khi trên dòng thứ ba, chúng tôi nhập hai thành phần Bootstrap.

Ba dòng cuối cùng nhập các thành phần React tùy chỉnh, Truy vấn GraphQL và Đột biến. Chúng chưa tồn tại, nhưng chúng tôi sẽ triển khai chúng sau.

Thành phần câu hỏi thăm dò ý kiến

Bước tiếp theo là triển khai thành phần cho câu hỏi thăm dò ý kiến. Thành phần "PollQuestion" xử lý quá trình bỏ phiếu. Sau khi nhập, hãy viết mã sau:

const PollQuestion = ({ poll, userId }) => {
    const defaultState = {
      optionId: "",
      pollId: poll.id,
      voteBtnText: "🗳 Vote",
      voteBtnStyle: "primary",
    };
    const [state, setState] = useState(defaultState);
    const [vote, { data, loading, error }] = useMutation(MUTATION_VOTE);
};

Trong đoạn mã trên, chúng tôi đặt trạng thái mặc định cho cuộc thăm dò. Khi ai đó truy cập cuộc thăm dò lần đầu tiên, không nên chọn bất kỳ câu trả lời nào. Ngoài ra, nút sẽ hiển thị "🗳 Bỏ phiếu".

Hình ảnh minh họa cuộc thăm dò trông như thế nào với trạng thái mặc định.

Ảnh chụp màn hình 2022-03-15 lúc 09.48.04.png

Chúng tôi cũng sử dụng useMutationmóc để mọi người có thể bỏ phiếu. Hook trả về một mảng có chứa hai phần tử. Phần tử đầu tiên ( vote) là một hàm mà chúng ta có thể gọi để chạy đột biến. Cái thứ hai là một đối tượng mà chúng ta có thể phá hủy thêm.

Chúng tôi cần cập nhật optionIdmỗi khi người dùng chọn một câu trả lời. Ví dụ: nếu người dùng chọn "Vue" trong cuộc thăm dò này, chúng tôi đặt thành optionIdid của tùy chọn đó.

const handleOptionChange = (e) => {
    const optionId = e.currentTarget.value;
    setState((prev) => ({ ...prev, optionId }));
};

Hãy chuyển sang viết logic để xử lý việc gửi phiếu bầu. Đầu tiên, chúng tôi cần đảm bảo người dùng không thể gửi một biểu mẫu trống. Nếu người dùng không chọn một câu trả lời, nút này sẽ chuyển sang màu vàng và nhắc người dùng chọn một câu trả lời và thử lại.

Ảnh chụp màn hình 2022-03-15 lúc 10.34.43.png

Nếu một câu trả lời được chọn, chúng tôi gọi votehàm được trả về bởi useMutationhook. Chúng tôi chuyển id của câu trả lời đã chọn và id của người dùng đã bình chọn.

const handlesubmitVote = (e) => {
    e.preventDefault();

    if (!state.optionId) {
      setState({
        voteBtnText: "✋ Select an option and try again",
        voteBtnStyle: "warning",
      });
      return;
    }

    setState({
      voteBtnText: "🗳️ Submitting",
      voteBtnStyle: "info",
    });

    vote({
      variables: {
        optionId: state.optionId,
        userId,
      },
    });
};

Nếu cuộc bỏ phiếu thành công, chúng tôi cập nhật trạng thái nút cho phù hợp. Sau 5 giây, chúng tôi đặt lại trạng thái của nút để người dùng có thể bình chọn lại. Nếu có lỗi, nút sẽ đánh dấu lỗi đó.

useEffectHook chạy mỗi khi giá trị của hoặc datathay errorđổi.

useEffect(() => {
    if (data) {
      setState({
        voteBtnText: "👍 Done",
        voteBtnStyle: "success",
      });

      //  Re-authorize to vote after 5 seconds
      let timer = setTimeout(() => {
        setState({
          voteBtnText: "🗳️ Vote",
          voteBtnStyle: "primary",
        });
      }, 5000);

      return () => clearTimeout(timer);
    }

    if (error) {
      setState({
        voteBtnText: "Error 😞 Try again",
        voteBtnStyle: "danger",
      });
    }
}, [data, error]);

Cuối cùng, chúng tôi hiển thị biểu mẫu, các tùy chọn thăm dò ý kiến ​​và nút biểu quyết.

return (
    <div className="textLeft">
      <h3>{poll.question}</h3>
      <Form
        className="pollForm textLeft"
        onSubmit={(e) => {
          handlesubmitVote(e);
        }}
      >
        {poll.options.map(({ id, text }) => (
          <Form.Check
            custom
            type="radio"
            name="voteCandidate"
            id={id}
            key={id}
            value={id}
            label={text}
            onChange={handleOptionChange}
          />
        ))}
        <Button
          className="voteBtn info"
          variant={state.voteBtnStyle}
          type="submit"
        >
          {state.voteBtnText}
        </Button>
      </Form>
    </div>
);

Chúng tôi đang thực hiện với các PollQuestionthành phần. Bạn có thể tìm thấy mã hoàn chỉnh PollQuestiontrong ý chính này .

Thành phần thăm dò ý kiến

Thành Pollphần hiển thị câu hỏi thăm dò và kết quả. Hãy bắt đầu bằng cách gọi useQueryhook với chuỗi GraphQL Query trả về tất cả các cuộc thăm dò.

export const Poll = ({ userId }) => {
    const { data, loading, error } = useQuery(QUERY_GET_POLL);
  
    if (loading) return <Loading />;
    if (error) return <Error message={error.message} />;
};

Thuộc datatính sẽ chứa một mảng với các cuộc thăm dò nếu truy vấn thành công. Khi chúng tôi có mảng, chúng tôi lập bản đồ thông qua nó và hiển thị các cuộc thăm dò và câu trả lời tương ứng của chúng.

return (
    <div className="container">
      {data?.poll.map((poll) => (
        <div key={poll.id} className="pollWrapper wd100">
          <div className="displayFlex">
            <div className="col-md-4 pollSlider">
              <PollQuestion poll={poll} userId={userId} />
            </div>
            <div className="col-md-8 pollresult">
              <Result pollId={poll.id} />
            </div>
          </div>
        </div>
      ))}
    </div>
);

Nếu bạn nhìn vào đoạn mã trên, bạn có thể thấy rằng chúng tôi sử dụng Resultthành phần, thành phần này chưa tồn tại. Trong bước tiếp theo, chúng tôi sẽ làm điều đó!

Bạn có thể tìm thấy mã hoàn chỉnh cho Polltệp trong ý chính này .

Thành phần kết quả

Hãy bắt đầu bằng cách tạo Result.jsxtrong srcthư mục.

📂 realtime-poll
 └ 📁 node_modules
   📁 package-lock.json
   📁 package.json
   📁 public
   📁 README.md
   📂 src
    └ Result.jsx

Mở tệp và thêm các lần nhập sau:

import { useSubscription } from "@apollo/client";
import React from "react";
import { Chart } from "react-google-charts";
import { Error, Loading } from "./Components";
import { SUBSCRIPTION_RESULT } from "./GraphQL";

Dòng đầu tiên nhập useSubscriptionhook, mà chúng tôi sẽ sử dụng để hiển thị kết quả thăm dò theo thời gian thực. Trên dòng thứ hai, chúng tôi nhập React và trên dòng thứ ba, chúng tôi nhập thành phần Biểu đồ. Hai dòng cuối cùng nhập hai thành phần tùy chỉnh và chuỗi Đăng ký GraphQL.

Viết mã sau sau khi nhập:

export const Result = ({ pollId }) => {
    const { data, loading, error } = useSubscription(SUBSCRIPTION_RESULT, {
      variables: { pollId },
    });
  
    const hasResults = data?.poll_results.length > 0;
    
    if (loading) return <Loading />;
    if (error) return <Error message={error.message} />;
  
    return (
      <div>
        {hasResults ? <PollChart data={data?.poll_results} /> : <p>No result</p>}
      </div>
    );
};

Thành phần "Kết quả" lấy ID cuộc thăm dò làm chỗ dựa để nó có thể hiển thị kết quả cho cuộc thăm dò cụ thể đó.

Trong dòng đầu tiên, chúng tôi gọi useSubscriptionhook với ID cuộc thăm dò. Nếu cuộc gọi thành công, thuộc datatính sẽ chứa một mảng với các kết quả thăm dò. Ngoài ra, tất cả các phiếu bầu mới sẽ được phản ánh trong datatài sản. Mảng với các kết quả thăm dò cập nhật mỗi khi một phiếu bầu mới được gửi.

Trước khi hiển thị kết quả bình chọn, chúng tôi kiểm tra xem có kết quả nào không. Nếu có, chúng tôi sẽ hiển thị kết quả. Nếu không, chúng tôi hiển thị chuỗi "Không có kết quả".

Nếu bạn nhìn vào mã, bạn có thể thấy rằng chúng tôi sử dụng một PollChartthành phần. Bạn có thể tìm thấy mã cho PollChartvà mã hoàn chỉnh cho Result.jsxtrong ý chính này .

Bài viết tập trung vào các phần thiết yếu của việc triển khai giao diện người dùng. Nó nêu bật cách triển khai các bit phức tạp hơn. Bạn có thể duyệt qua mã ứng dụng hoàn chỉnh trong Kho lưu trữ GitHub này .

Phần kết luận

Tại thời điểm này, bạn có một ứng dụng đầy đủ mà không cần viết bất kỳ mã phụ trợ nào. Hasura cung cấp một giao diện người dùng hữu ích mà bạn có thể sử dụng để xây dựng API của mình. Kết quả là, nó đơn giản hóa và rút ngắn quá trình xây dựng API GraphQL.

Nguồn: https://www.freecodecamp.org/news/build-a-full-stack-real-time-voting-app-with-hasura-and-react/

#fullstack #react #hasura 

Ứng Dụng Bỏ Phiếu Theo Thời Gian Thực Full-Stack Với Hasura Và React
伊藤  直子

伊藤 直子

1647765660

HasuraとPostgreSQLでバックエンドを構築する

Hasuraは、データベーススキーマを使用してGraphQLおよびRESTAPIエンドポイントを生成するオープンソースのGraphQLエンジンです。データモデリング、リアルタイムクエリ、イベントプログラミング、ロールベースの承認、およびGraphQL上でカスタムビジネスロジックを実行するためのアクションをサポートします。

PostgreSQLは、人気があり強力なオープンソースのオブジェクト指向のリレーショナルデータベースであり、OracleDatabaseやMicrosoftSQLServerと同様のレベルでエンタープライズクラスの機能を提供します。StackShareによると、PostgreSQLは、Netflix、Instagram、Uber、Spotifyなどの大規模な国際企業で使用されています。

この記事では、Hasuraが提供する、Webアプリケーションとモバイルアプリケーションの両方のスケーラブルなバックエンドの開発と起動に適した主な機能について説明します。また、PostgreSQLの機能を活用して、SQLだけを使用してさまざまな計算および分析タスクを実行し、カスタムコードを記述せずに適切なデータをフロントエンドに配信する方法についても説明します。

Hasuraは、Microsoft SQL Server、Amazon Aurora、GoogleBigQueryなどの他のデータベースもサポートしていることに注意してください。PostgreSQLは無料で、ほとんどの企業や組織がアクセスできるため、ここではPostgreSQLに焦点を当てます。興味のある方のために、 MySQLのサポートが間もなく開始されます。

GraphQLを初めて使用する場合は、チュートリアルで詳細を確認してください。PostgreSQLがプロジェクトに最適な選択である理由から始めましょう。

PostgreSQLが選ばれる理由

リレーショナルデータベースには、厳密なスキーマとテーブルの関係を使用してデータをモデル化できるという点で、他のタイプのデータベースに比べて多くの明確な利点があります。JOINを実行し、ACIDトランザクションを実行する機能は、ほとんどの業界の多くのアプリケーションの主要な要件です。これらの機能は、いつでもビジネスデータの整合性と一貫性を促進するために不可欠です。

PostgreSQLには、MySQLなどの他のリレーショナルデータベースに比べて、次のような追加の利点もあります。

  • テーブル継承を使用してデータをモデル化できます
  • マルチユーザー環境向けの同時実行制御が優れています(大量のデータをより効率的に書き込むことができます)
  • フォールトトレラントであり、データ破損の可能性が低くなります
  • JSONSpatialなどの多数の固有のデータ型をサポートしており、金融や研究関連のアプリケーションに役立ちます。

PostgreSQLは単なるデータストレージサービスではありません。また、カスタム関数とトリガーを実行してさまざまな計算および分析タスクを実行できるサーバーでもあります。PostgreSQLでロジックを実行すると、カスタムサーバーコードを作成する必要がなくなるため、より効率的です。以下を使用してPostgreSQLでロジックを定義できます。

  • ビュー、複雑なクエリを簡素化するのに役立つ保存されたクエリ
  • 日付の書式設定、パターンマッチング、算術演算などの関数と演算子
  • 拡張機能、PostgreSQLの機能を拡張するアドオン(PostGISなど)
  • 手続き型言語、ユーザー定義関数、ストアドプロシージャ、トリガーを記述し、標準SQL(PL / pgSQLなど)を拡張するためのプログラミング言語

PostgreSQLにロジックを実装すると、HasuraはGraphQLクエリとミューテーションを介してそれらをフロントエンドアプリケーションに公開できます。pgAdminインターフェースから見たPostgreSQLサーバーのトップレベルビューは次のとおりです。

pgAdminインターフェース

PostgreSQLの機能を利用する方法を学ぶことで、サーバーコードを記述せずに複雑な問題を簡単に解決できます。PostgreSQLでできることのいくつかの例を次に示します。

例1

ビューを使用して、現在アクティブなオンラインユーザーのリストを取得できます。

CREATE OR REPLACE VIEW "public"."online_users" AS SELECT users.id,    users.last_seen   FROM users  WHERE (users.last_seen >= (now() - '00:00:30'::interval));

例2

PostGIS機能を使用すると、半径1,000メートル以内にあるすべての店舗を一覧表示できます。詳細な説明については、次のジオロケーションチュートリアルを参照してください。

SELECT id, name, address, geomFROM Seattle_StarbucksWHERE ST_DWithin(geom, ST_MakePoint(-122.325959,47.625138)::geography, 1000);

次のセクションでは、Hasuraの機能に焦点を当てます。

ハスラとは?

Hasuraは、データベースのGraphQLおよびRESTAPIエンドポイントを生成するオープンソースのリアルタイムGraphQLエンジンです。次のことができるWebコンソールが付属しています。

  • データベーススキーマをモデル化する
  • データの表示、挿入、更新、削除
  • ロールベースのアクセス制御ポリシーを実装する
  • GraphQLクエリとミューテーションを実行する
  • RESTエンドポイントを作成する
  • SQLコードを実行する
  • アクションとトリガーを定義する

HasuraAPIダッシュボード

Hasuraはユーザー認証をサポートしていないため、Hasuraとフロントエンドアプリケーションを次のようなプロバイダーと統合する必要があります。

ファイルストレージサービスもありません。アプリをサードパーティのストレージプロバイダーと統合する必要があります。Hasuraとのよりすぐに使える統合エクスペリエンスが必要な場合は、NHostを確認できます。これについては、デプロイメントのセクションで後述します。

次のセクションでは、Hasuraをローカルおよびクラウドで実行する方法を見ていきます。

Hasuraの起動

Hasuraインスタンスをすばやく起動して実行する方法はいくつかあります。

1.Docker

Dockerを使用してローカルマシンでHasuraを実行することは、開発環境をセットアップするための推奨される方法です。この設定では、APIリクエストのレート制限はなく、HasuraのWebコンソールを操作するときにエクスペリエンスを制限するインターネット接続もありません。ローカルで行う作業はすべて、ステージング環境と本番環境に簡単に移行できます。これがどのように行われるかについては、後の「移行と環境」セクションで説明します。

DockerDockerComposeが既にマシンにインストールされていると仮定すると、このガイドの指示に従って、マシンでHasura実行できます。

# create new directory
mkdir my-hasura
cd my-hasura

# download docker-compose.yml
curl https://raw.githubusercontent.com/hasura/graphql-engine/stable/install-manifests/docker-compose/docker-compose.yaml -o docker-compose.yml

# start hasura and postgresql container instances
docker-compose up -d

コマンドを実行すると、HasuraおよびPostgreSQLコンテナインスタンスが実行されていることを確認できますdocker ps。のブラウザからローカルのHasuraインスタンスにアクセスできるはずですhttp://localhost:8080/console。セットアップを完了するには、Hasuraと一緒にコンテナとして実行されているPostgreSQLデータベースに接続する必要があります。

データベースが接続されると、Webコンソールを使用してテーブルを作成し、関係を定義し、データに対してCRUD操作を実行できるようになります。デフォルトのDockerセットアップを使用する場合、データは公開されていることに注意してください。ファイルで始まる行のコメントを解除し、Hasuraコンテナを再起動するだけで、セキュリティで保護できHASURA_GRAPHQL_ADMIN_SECRETます。docker-compose.yml

2.クラウド

始めるためのはるかに簡単な方法は、HasuraCloudを使用することです。
これは、スケーラビリティ、可用性、セキュリティ、およびグローバルな配布のために設計されたオープンソースのHasuraの再設計されたバージョンです。

HasuraCloudダッシュボード

Hasura Cloudには、オープンソースバージョンでは利用できないいくつかの新機能があります。

  • エラー、接続、サブスクリプション、低速クエリ、その他の操作についてダッシュボードを監視する
  • サーバーおよびクライアントのデータフェッチパフォーマンスを向上させるGraphQLキャッシング
  • 悪意のあるユーザーやDDoS攻撃によるAPIの侵害を防ぐためのレート制限
  • 開発インスタンスの変更を本番インスタンスと照合するなど、テストスイートを実行するための回帰テスト

Hasura Cloudを使い始めるには、無料のアカウントにサインアップする必要があります。無料アカウントには、1分あたり60リクエストのレート制限があることに注意してください。アカウントを作成したら、次のことを行う必要があります。

  • プロジェクト(Hasuraインスタンス)を作成します
  • PostgreSQLデータベースに接続します

便宜上、Hasura Cloudは、ワンクリックでインストールして、無料のHerokuCloudデータベースインスタンスに接続できます。インターネット経由でアクセス可能な他のPostgreSQLデータベースに接続することもできます。使用できるPostgreSQLプロバイダーはたくさんあります。これらには、次のようなクラウドサービスが含まれます。

  • AWS
  • Azure
  • デジタルオーシャン
  • TimescaleDBクラウド
  • YugabyteDB

上記の手順をより明確にする必要がある場合は、このガイドに従うことができます。デフォルトでは、Hasura Cloudは、管理者シークレットキーを使用してパブリックからのデータアクセスを制限します。これについては、次のセクションで詳しく説明します。

ハスラの特徴

このセクションでは、コードを記述せずにカスタムバックエンドを構築するためにHasuraが提供する機能の概要を説明します。

データ管理者

Hasuraには、データレイヤーをモデル化するためのビジュアルデザイナーが付属しています。これにより、次のことが可能になります。

  • テーブルを作成する
  • 関係を定義する(1対1、1対多、多対多)
  • CRUD操作を実行します
  • ビューを作成する
  • SQLステートメントを実行する
  • PostgreSQLのDDL制約を使用してデータ検証を実装する
  • トリガーを定義する

Hasuraはテーブルを作成します

列に関しては、Hasuraは次のような豊富なデータ型をサポートしています。

  • 整数、数値、および浮動小数点
  • シリアルとUUID
  • 文字とテキスト
  • 日時
  • ブール値
  • 幾何学的—線、ボックス、パス、ポリゴン、円など
  • JSON

CREATE TYPESQLコマンドを使用してカスタムタイプを追加することもできます。次に、Hasuraでデータがどのように承認されるかを見ていきます。

承認

Hasuraのアクセス制御は役割ベースです。デフォルトではadmin、データへの完全なCRUDアクセス権を持つという役割があります。user他のユーザーへのアクセスを制限するには、、、などの追加の役割を作成する必要がありpublicますaccountant

作成する役割ごとに、次のアクションのアクセスポリシーを定義する必要があります。

  • 入れる
  • 選択する
  • アップデート
  • 消去

定義できるポリシーには、次の3つのタイプがあります。

  • フルアクセス、制限なし
  • 条件付きの制限付きの部分アクセス
  • アクセスなし

次の例は、ロールのselect許可ポリシーを示しています。user以下に定義されているルールは、userが自分のレコードまたはパブリックとしてマークされているレコードのいずれかのみをクエリできるように設定されています。

Hasura認証例

クエリ

スキーマを設計し、権限を定義した後、HasuraのAPIダッシュボード内でGraphQLクエリをテストできます。追跡が有効になっている場合は、定義したすべてのテーブル、ビュー、および関係を照会できます。

実行できるクエリの種類は次のとおりです。

  • 単純なクエリ:1つ以上のオブジェクトを返すSELECTクエリ。
  • ネストされたクエリ:外部キーの関係に基づいてネストされた形式でオブジェクトを返すJOINクエリ。
  • 集計クエリ:結果に対して合計や平均などの算術演算が実行されたSELECTクエリ。ネストされたオブジェクトにも適用できます。
  • フィルタ/検索クエリ:1つ以上のフィールドで比較演算子を使用してデータをフィルタリングするWHEREクエリ。また、パターンまたはあいまい一致を使用して検索を実行するためにも使用できます。

HasuraGraphQLクエリ

GraphQLクエリの結果は、並べ替えグループ化ページ分けできます。カーソルベースのページネーションもサポートされています。基本的に、PostgreSQLで実行できるSQLステートメントは、GraphQLクエリを介して公開できます。次のセクションでは、突然変異について見ていきます。

突然変異

GraphQLミューテーションは、データを変更するために使用されるステートメントです。実行できるミューテーションのタイプは次のとおりです。

  • 挿入:1行以上のデータを作成します:
  mutation insert_single_article {
    insert_article_one(
      object: {
        title: "Article 1"
        content: "Sample article content"
        author_id: 3
      }
    ) {
      id
      title
    }
  }
  • アップサート:競合時に作成、更新します。以下の例では、列value一意の制約があります。
  mutation upsert_single_tag {
    insert_tags(
      objects: { value: "Java" }
      on_conflict: { constraint: tags_value_key, update_columns: value }
    ) {
      returning {
        id
        value
      }
    }
  }
  • 更新:1行以上のデータを更新します。データ型intを操作するための特別な演算子もあります。以下の例では、評価が2以下jsonbのすべての記事を更新します。ミューテーションは、影響を受ける行の数を返し、それらの行をオブジェクトの配列として一覧表示します。
  mutation update_article {
    update_article(
      where: { rating: { _lte: 2 } }
      _set: { rating: 1, is_published: false }
    ) {
      affected_rows
      returning {
        id
        title
        content
        rating
        is_published
      }
    }
  }
  • 削除:1行以上のデータを削除します。次の例では、主キーで記事を削除します。
  mutation delete_an_object {
    delete_article_by_pk(id: 1) {
      id
      title
      user_id
    }
  }
  • トランザクション:1つのミューテーションブロックで複数のミューテーションを実行します。それらの1つが失敗した場合、そのブロック内で以前に実行されたすべてのミューテーションがロールバックされます。次の例では、最初に著者に属するすべての記事を削除します。2番目のミューテーションでは、作成者の名前が更新されます。
  mutation reset_author {
    delete_article(where: { author_id: { _eq: 6 } }) {
      affected_rows
    }
    update_author(where: { id: { _eq: 6 } }, _set: { name: "Cory" }) {
      returning {
        id
        name
        articles {
          id
          title
        }
      }
    }
  }

サブスクリプション

Hasuraのサブスクリプションは、 WebSocketプロトコルを介して実行されるライブクエリです。これは、データベースからリアルタイムデータをフェッチするために使用されるプロトコルです。キーワードを。に置き換えるだけで、GraphQLクエリをサブスクリプションに変えることができます。デフォルトでは、このようなクエリは1秒ごとにSQLステートメントを実行します。これは、データベースの負荷と待機時間の適切なバランスを提供するように調整できる構成可能な設定です。基になるデータに変更がある場合、新しい値がクライアントにプッシュされます。querysubscription

次の例は、車両の位置を追跡するGraphQLサブスクリプションを示しています。

# $vehicleId = 3subscription getLocation($vehicleId: Int!) {  vehicle(where: { id: { _eq: $vehicleId } }) {    id    vehicle_number    locations(order_by: { timestamp: desc }, limit: 1) {      location      timestamp    }  }}

サブスクリプションを使用するその他のユースケースは次のとおりです。

  • 食品配達追跡
  • チャットメッセージング
  • オンライン投票

リモートスキーマ

多くの場合、最新のアプリケーションを構築するときは、次のようなサードパーティのAPIと統合する必要があります。

  • スポーツのライブスコアや株価など、データベースにないデータを提供する
  • 支払い処理やフライトの予約などのビジネスロジックを提供する

これらのサードパーティAPIは通常、クライアントアプリから直接アクセスされます。Hasuraを使用すると、これらのAPIをデータベースとマージして、統合されたGraphQLAPIを作成できます。これにより、承認を実装し、テーブル/ビューとリモートAPI間のリモート関係を定義できる新しい機会が生まれます。このタイプの関係に基づいて特定のタスクを実行するアクションを作成することもできます。

統合されたGraphQLAPIを使用すると、フロントエンド開発者がアプリを簡単に構築できるようになります。次のセクションでは、HasuraActionsとは何かを見ていきます。

行動

Hasuraのカスタムビジネスロジックは、マイクロサービスまたはサーバーレス機能でWebhookを介して外部で処理されます。つまり、Node.js、Python、Go、Ruby on Railsなど、好みの言語を使用してカスタムロジックを記述できます。Hasuraのアクションは、入力インターフェイスと出力インターフェイスが定義されているWebhookにマップする単なるカスタムGraphQLクエリまたはミューテーションです。

アクション定義は次のもので構成されます。

  • タイプ:クエリまたはミューテーション
  • アクション名
  • 入力と出力のカスタムタイプ
  • ヘッダー
  • ハンドラーURL

簡単な「Hello、World!」を見てみましょう。例。まず、アクションクエリを次のように定義します。

type Query {  hello(name: String!): HelloResponse}

上記のアクションは、入力としてhello呼び出される文字列変数を受け入れると呼ばれる関数を定義nameします。この関数は、HelloResponse次のように定義されたカスタムタイプであるオブジェクトを返します。

type HelloResponse {  message: String!}

インターフェースを定義すると、あとはWebhookサービスとHasuraインスタンスにアクセスできるURLを実装するだけです。HasuraのCodeGenアシスタントを使用して作成されたExpress.js用に作成された実装は次のとおりです。

// Request Handlerapp.post("/hello", async (req, res) => {  // get request input  const { name } = req.body.input;  // success  return res.json({    message: `Hello, ${name}!`,  });});

イベントトリガー

Hasuraでは、イベント駆動型プログラミングと呼ばれるソフトウェアアーキテクチャを使用してアプリを構築できます。これは、複雑な状態管理をモノリシックバックエンドから切り離し、ビジネスロジックを実行する個々のマイクロサービスまたはサーバーレス機能に委ねる設計パターンです。これにより、非常に堅牢でスケーラブルなアプリを構築できます。

イベントプログラミングを使用すると、次のような多くのユースケースを簡単に処理できます。

PostgreSQLでは、、などのイベントが発生したときにSQLステートメントまたはストアドプロシージャを実行するトリガーを作成できます。トリガーはテーブルまたはビューに関連付けられており、イベントの前後に起動できます。INSERTUPDATEDELETE

Hasuraでは、イベントトリガーも同様に定義され、イベントが発生したときにWebフックを呼び出すために使用されます。このコンテキストでのWebフックは、「アクション」セクションで説明したものと非常によく似ています。イベントトリガーは、コンソールまたはAPIを介して手動で呼び出すこともできます。

以下は、YAML形式のイベントトリガー定義の例です。

- table:    schema: public    name: author  event_triggers:    - name: author_trigger      definition:        enable_manual: false        insert:          columns: "*"        update:          columns: "*"      webhook: https://httpbin.org/post

イベントトリガーは(認証目的で)ヘッダーを使用して定義でき、通常、データ処理のためにWebhookサービスに送信されるペイロードが含まれます。予想される唯一の応答は200ステータスです。実際の結果は、必要に応じて、GraphQLミューテーションの投稿、電子メール通知の送信など、別のルートで投稿されます。

フロントエンドアプリは、GraphQLサブスクリプションを介してクエリを実行することで結果を受け取ることができます。このタイプのアーキテクチャにより、優れたユーザーエクスペリエンスを備えたノンブロッキングのインタラクティブなリアルタイムアプリを簡単に構築できます。コードベースは、開発者にとっても保守、テスト、スケーリングが簡単です。

スケジュールされたトリガー

スケジュールされたトリガーは、Webhookを介してカスタムビジネスロジックを実行する時間ベースのイベントです。定義できるタイプは2つあります。

  • CRONトリガー:定期的なイベントに定期的に使用されます
  • 1回限りのスケジュールされたイベント:1回限りの実行に使用されます

スケジュールされたトリガーは、WebコンソールまたはメタデータAPIを介して作成できます。以下のスクリーンショットは、Webコンソールの例を示しています。

Webコンソールのcronトリガー

メタデータAPIを使用すると、アプリケーションコードを使用してスケジュールされたイベントを作成できます。以下の例は、APIを使用して1回限りのイベントの作成を構成する方法を示しています。

{  "type": "create_scheduled_event",  "args": {    "webhook": "https://my-awesome-serverless-fn.com/send-email",    "schedule_at": "2022-07-20T12:45:00Z",    "payload": {      "email": "bob@ross.com"    }  }}

Hasuraは、スケジュールされたトリガーが正常に実行されることを保証する多数のフォールトトレランスメカニズムを提供します。たとえば、午後2時に予定されていたイベントが、ハスラが午後1時にダウンしたために処理されなかったとします。Hasuraがオンラインに戻ると、カスタマイズ可能な許容範囲の構成に基づいて、イベントが再水和され、スケジュールされていないトリガーが再実行されます。デフォルト設定は6時間です。

Hasuraは、HTTP障害が発生した場合の柔軟な再試行構成も提供します。再試行の回数と各再試行間のタイムアウトを構成できます。すべてのトリガー呼び出しがログに記録されます—後で検査のためにアクセスできます。

スケジュールされたトリガーのユースケースは次のとおりです。

  • リマインダーの送信
  • 一日の終わりのレポートを生成する
  • 過去90日以内にメールアドレスを確認していない非アクティブなユーザーを削除する

移行と環境

ソフトウェアプロジェクトの理想的な開発ワークフローは、開発、ステージング、および本番用に複数の環境をセットアップすることです。このワークフローはテストを簡素化し、開発者がソフトウェアの新しいバージョンを展開するときに本番データを誤って削除したり破損したりしないようにします。

開発環境の状態をステージングおよび本番環境に転送するには、移行ファイルが必要です。Hasuraでは、次のものが必要です。

  • データベース/SQL移行ファイル
  • Hasuraメタデータ

Hasuraメタデータは、以下を追跡する構成ファイルのスナップショットで構成されています。

  • 関係
  • 権限
  • トリガー
  • 行動
  • GraphQLスキーマ
  • リモートスキーマ

これらの移行ファイルを作成して別のHasuraインスタンスに適用できるようにするには、HasuraCLIをインストールする必要があります。これらの移行ファイルは、開発中にスキーマが変更されたときに、バージョン管理および更新を段階的に行うことができます。

SQL移行ファイルの作成と適用はhasura migrateコマンドを使用して実行され、メタデータ移行ファイルはhasura metadataコマンドを使用して処理されます。CLIコマンドを使用すると、次のこともできます。

  • 適用された移行をロールバックする
  • シードデータの移行を作成する
  • 移行ファイルをリセットする
  • スカッシュ移行ファイル—つまり、小さな増分更新を1つのメジャー更新に置き換えます

Hasuraには、サーバーの起動時に移行を自動的に適用する特別なDockercli -migrationイメージがあります。このイメージには、ワークフローでCI/CDスクリプトを実行するために使用できるHasuraCLIツールも含まれています。

展開

Hasuraを本番環境にデプロイする最も簡単な方法は、HasuraCloudを使用することです。オープンソースバージョンでは利用できないエンタープライズ機能を利用できるため、これが推奨されるオプションです。幸い、Hasuraは、ほとんどのサービスとしてのバックエンドプロバイダー(BaaS)とは異なり、プラットフォームに縛られることはありません。次のようなプラットフォームで利用できるワンクリックデプロイサービスプロバイダーがあります。

Hasuraは、GoogleCloudなどのKubernetesプラットフォームにデプロイすることできますAWSもサポートされていますが、AWSを機能させるにはいくつかの手順を実行する必要があります。外部でホストすることはあなたに自由とより多くの価格設定オプションを与えます。ただし、上記のすべてのオプションでは、次の追加サービスを設定する必要があります。

  • 認証
  • 保管所
  • カスタムビジネスロジック

次のセクションでは、NHostを使用してHasuraバックエンドアプリケーションの開発をさらに簡素化する方法について簡単に説明します。

NHostを使用したデプロイ

NHostは、 Firebaseなどのプラットフォームとの競争を目的としたオープンソースのBaaSプロバイダーです。それらのバックエンドスタックは次のもので構成されます。

  • PostgreSQLデータベース
  • HasuraGraphQLエンジン
  • 認証サービス
  • MinIO、S3互換のオブジェクトストレージサービス
  • サーバーレス機能(現在ベータ版)

nhost-js-sdkプラットフォームには、フロントエンド認証とファイル管理に使用されると呼ばれるクライアントライブラリが付属しています。ストレージサービスは画像の最適化をサポートしているため、画像用に別のサービスを統合する手間が省けます。

執筆時点で、NHostは現在そのサービスの14日間の試用版を提供しています。無料利用枠がまもなく開始されます。マシンにローカルにデプロイできるHasuraBackendPlusと呼ばれるDockerバージョンがあります。

概要

結論として、Hasura GraphQL EngineとPostgreSQLデータベースは、コード行を記述せずに、モバイルアプリケーションとWebアプリケーションの両方のバックエンドをどれだけ高速に構築できるかという点で非常に革新的です。ほとんどの計算および分析ロジックはPostgreSQLで処理できますが、残りのカスタムビジネスロジックはマイクロサービスまたはサーバーレス関数を使用して実装できます。

Hasuraを採用することで、より迅速に立ち上げ、パフォーマンスが高く、安全で、フォールトトレラントで、スケーラブルで、保守が容易な製品を構築できるようになります。インフラストラクチャの煩わしさがないため、運用コストも削減され、フロントエンド開発とアプリのユーザー向け部分に集中できます。

Hasuraは、Parseプラットフォームなどの他のオープンソースの代替手段ほど機能が豊富ではありませんが、CI/CD開発ワークフローの重要な要件であるバージョン管理と環境ステージングをサポートしています。オープンソースであるため、ベンダーロックインによって引き起こされるリスクから保護されます。

ソース:https ://www.sitepoint.com/hasura-postgresql-build-backend/

#postgresql  #hasura 

HasuraとPostgreSQLでバックエンドを構築する
Saul  Alaniz

Saul Alaniz

1647763200

Cómo Construir Su Backend Con Hasura Y PostgreSQL

Hasura es un motor GraphQL de código abierto que genera puntos finales de API REST y GraphQL utilizando su esquema de base de datos. Admite el modelado de datos, consultas en tiempo real, programación de eventos, autorización basada en roles y acciones para ejecutar lógica empresarial personalizada en GraphQL.

PostgreSQL es una popular y poderosa base de datos relacional orientada a objetos y de código abierto que ofrece características de clase empresarial en un nivel similar con Oracle Database y Microsoft SQL Server. PostgreSQL es utilizado por grandes empresas internacionales como Netflix, Instagram, Uber y Spotify, según StackShare .

En este artículo, repasaremos las características principales que proporciona Hasura que lo hacen adecuado para desarrollar y lanzar backends escalables, tanto para aplicaciones web como móviles. También veremos cómo puede aprovechar las características de PostgreSQL para realizar varias tareas analíticas y de cómputo usando solo SQL para entregar los datos correctos a su interfaz sin escribir código personalizado.

Tenga en cuenta que Hasura también es compatible con otras bases de datos, como Microsoft SQL Server, Amazon Aurora y Google BigQuery. Nos centraremos en PostgreSQL, ya que es gratuito y accesible para la mayoría de las empresas y organizaciones. El soporte para MySQL llegará pronto, en caso de que esté interesado.

Si es nuevo en GraphQL, consulte nuestro tutorial para obtener más información. Comencemos por qué PostgreSQL puede ser una opción perfecta para su proyecto.

¿Por qué PostgreSQL?

Las bases de datos relacionales tienen muchas ventajas distintas sobre otros tipos de bases de datos, ya que puede modelar sus datos utilizando esquemas estrictos y relaciones de tablas. La capacidad de realizar JOIN y ejecutar transacciones ACID es un requisito importante para muchas aplicaciones en la mayoría de las industrias. Estas características son esenciales para promover la integridad y la consistencia de los datos comerciales en cualquier momento.

PostgreSQL también tiene ventajas adicionales sobre otras bases de datos relacionales como MySQL, ya que:

  • puede modelar datos usando la herencia de tablas
  • tiene un mejor control de concurrencia para entornos multiusuario (puede escribir cantidades masivas de datos de manera más eficiente)
  • es tolerante a fallas y es menos propenso a la corrupción de datos
  • Admite varios tipos de datos únicos, como JSON y Spatial , lo que es útil para aplicaciones relacionadas con las finanzas y la investigación.

PostgreSQL no es solo un servicio de almacenamiento de datos. También es un servidor capaz de ejecutar funciones personalizadas y disparadores para realizar varias tareas analíticas y de cómputo. La ejecución de la lógica en PostgreSQL es más eficiente, ya que elimina la necesidad de escribir un código de servidor personalizado. Puede definir la lógica en PostgreSQL usando:

  • Views , una consulta almacenada que puede ayudar a simplificar consultas complejas
  • Funciones y operadores , como formato de fecha, coincidencia de patrones, operaciones aritméticas
  • Extensiones , complementos que amplían las capacidades de PostgreSQL (como PostGIS )
  • Lenguajes de procedimiento , lenguajes de programación para escribir funciones definidas por el usuario, procedimientos almacenados, activadores y extensión del SQL estándar (como PL/pgSQL )

Cuando implementa la lógica en PostgreSQL, Hasura puede exponerlos a aplicaciones frontend a través de consultas y mutaciones de GraphQL. Aquí hay una vista de nivel superior de un servidor PostgreSQL, como se ve a través de la interfaz pgAdmin :

La interfaz pgAdmin

Aprender a aprovechar las funciones de PostgreSQL puede ayudarlo a resolver problemas complejos fácilmente sin escribir código de servidor. Estos son algunos ejemplos de lo que puede hacer con PostgreSQL:

EJEMPLO 1

Puede recuperar una lista de usuarios en línea que están actualmente activos usando una vista :

CREATE OR REPLACE VIEW "public"."online_users" AS SELECT users.id,    users.last_seen   FROM users  WHERE (users.last_seen >= (now() - '00:00:30'::interval));

EJEMPLO 2

Usando una función de PostGIS , puede enumerar todas las tiendas que se encuentran dentro de un radio de 1,000 metros. Consulte este tutorial de geolocalización para obtener una explicación detallada:

SELECT id, name, address, geomFROM Seattle_StarbucksWHERE ST_DWithin(geom, ST_MakePoint(-122.325959,47.625138)::geography, 1000);

En la siguiente sección, nos centraremos en las características de Hasura.

¿Qué es Hasura?

Hasura es un motor GraphQL de código abierto y en tiempo real que genera puntos finales de API REST y GraphQL para su base de datos. Viene con una consola web que le permite:

  • modela el esquema de tu base de datos
  • ver, insertar, actualizar y eliminar datos
  • implementar políticas de control de acceso basadas en roles
  • ejecutar consultas y mutaciones de GraphQL
  • crear puntos finales REST
  • ejecutar código SQL
  • definir acciones y disparadores

Tablero de la API de Hasura

Hasura no admite la autenticación de usuarios, por lo que deberá integrar Hasura y su aplicación frontend con un proveedor como:

Tampoco hay un servicio de almacenamiento de archivos, deberá integrar su aplicación con un proveedor de almacenamiento de terceros . Si prefiere una experiencia integrada más lista para usar con Hasura, puede consultar NHost , que analizaremos más adelante en la sección de implementación.

En la siguiente sección, veremos cómo podemos ejecutar Hasura localmente y en la nube.

Lanzamiento de Hasura

Hay un par de formas de iniciar y ejecutar rápidamente una instancia de Hasura:

1. ventana acoplable

Usar Docker para ejecutar Hasura en su máquina local es la forma recomendada de configurar un entorno de desarrollo. Con esta configuración, no hay límite de velocidad para las solicitudes de API y no hay conexión a Internet que acelere su experiencia cuando interactúa con la consola web de Hasura. Cualquier trabajo que realice localmente se puede migrar fácilmente a entornos de ensayo y producción. Discutiremos cómo se hace esto más adelante en la sección "Migraciones y entornos".

Suponiendo que ya tiene Docker y Docker Compose instalados en su máquina, puede seguir las instrucciones proporcionadas por esta guía para ejecutar Hasura en su máquina:

# create new directory
mkdir my-hasura
cd my-hasura

# download docker-compose.yml
curl https://raw.githubusercontent.com/hasura/graphql-engine/stable/install-manifests/docker-compose/docker-compose.yaml -o docker-compose.yml

# start hasura and postgresql container instances
docker-compose up -d

Puede confirmar que sus instancias de contenedor de Hasura y PostgreSQL se están ejecutando ejecutando el comando docker ps. Debería poder acceder a su instancia local de Hasura a través de su navegador en http://localhost:8080/console. Para completar la configuración, deberá conectarse a la base de datos PostgreSQL, que se ejecuta como un contenedor junto con Hasura.

Con la base de datos conectada, podrá usar la consola web para crear tablas, definir relaciones y realizar operaciones CRUD en sus datos. Tenga en cuenta que sus datos son públicos cuando utiliza la configuración predeterminada de Docker. Puede asegurarlo simplemente descomentando la línea que comienza HASURA_GRAPHQL_ADMIN_SECRETen su docker-compose.ymlarchivo y reiniciando su contenedor Hasura.

2. Nube

Una forma mucho más fácil de comenzar es a través de Hasura Cloud . Esta es una versión rediseñada de Hasura de código abierto diseñada para escalabilidad, disponibilidad, seguridad
y distribución global.

El panel de Hasura Cloud

Hasura Cloud viene con varias características nuevas que no están disponibles en la versión de código abierto, que incluyen:

Para comenzar con Hasura Cloud, deberá registrarse para obtener una cuenta gratuita. Tenga en cuenta que la cuenta gratuita tiene un límite de velocidad de 60 solicitudes por minuto. Después de crear una cuenta, deberá:

  • Crear un proyecto (una instancia de Hasura)
  • Conectarse a una base de datos PostgreSQL

Para mayor comodidad, Hasura Cloud proporciona una instalación y conexión con un solo clic a una instancia de base de datos gratuita de Heroku Cloud. También puede conectarse a cualquier otra base de datos de PostgreSQL a la que se pueda acceder a través de Internet. Hay muchos proveedores de PostgreSQL que puede usar. Estos incluyen servicios en la nube como:

  • AWS
  • Azur
  • océano digital
  • Nube de DB de escala de tiempo
  • Yugabyte DB

Puede seguir esta guía si necesita más claridad con los pasos anteriores. De forma predeterminada, Hasura Cloud restringe el acceso público a los datos mediante la clave secreta de administrador. Discutiremos más sobre esto en las próximas secciones.

Características de Hasura

En esta sección, le daré una descripción general de alto nivel de las funciones que ofrece Hasura para crear un backend personalizado sin escribir código.

Administrador de datos

Hasura viene con un diseñador visual para modelar su capa de datos. Esto le permite:

  • crear tablas
  • definir relaciones (uno a uno, uno a muchos, muchos a muchos)
  • realizar operaciones CRUD
  • crear vistas
  • ejecutar cualquier instrucción SQL
  • implementar la validación de datos utilizando las restricciones DDL de PostgreSQL
  • definir disparadores

Hasura crear mesa

Cuando se trata de columnas, Hasura admite un amplio conjunto de tipos de datos que incluyen:

  • enteros, numéricos y flotantes
  • seriales y UUID
  • caracteres y texto
  • fecha y hora
  • booleano
  • geométrico: como línea, cuadro, ruta, polígono y círculo
  • JSON

También puede agregar tipos personalizados mediante el CREATE TYPEcomando SQL. A continuación, veremos cómo se autorizan los datos en Hasura.

Autorización

El control de acceso en Hasura se basa en funciones. De forma predeterminada, hay un rol llamado adminque tiene acceso CRUD completo a sus datos. Para restringir el acceso a otros usuarios, deberá crear funciones adicionales, como user, publico accountant.

Para cada rol que cree, debe definir una política de acceso para las siguientes acciones:

  • insertar
  • Seleccione
  • actualizar
  • Eliminar

Hay tres tipos de políticas que puede definir:

  • Acceso completo , sin restricciones
  • Acceso parcial , con restricciones basadas en condiciones
  • Sin acceso

El siguiente ejemplo muestra una selectpolítica de autorización para el userrol. Las reglas definidas a continuación se establecen para garantizar que un usersolo pueda consultar sus propios registros o los marcados como públicos:

Ejemplo de autorización de Hasura

Consultas

Después de diseñar su esquema y definir los permisos, puede probar sus consultas de GraphQL directamente en el panel de API de Hasura. Se pueden consultar todas las tablas, vistas y relaciones que haya definido, siempre que se haya habilitado el seguimiento.

Los tipos de consultas que puede ejecutar incluyen:

  • Consultas simples : consultas SELECT que devuelven uno o más objetos.
  • Consultas anidadas : consultas JOIN que devuelven objetos en un formato anidado basado en relaciones de clave externa.
  • Consultas de agregación : consultas SELECT en las que se ha realizado una operación aritmética como suma o promedio en los resultados. También se puede aplicar a objetos anidados.
  • Consultas de filtro/búsqueda : consultas WHERE que filtran datos utilizando operadores de comparación en uno o más campos. También se pueden utilizar para realizar búsquedas mediante coincidencias aproximadas o de patrones.

Hasura GraphQL query

Los resultados de las consultas de GraphQL se pueden ordenar , agrupar y paginar . También se admite la paginación basada en cursores . Básicamente, cualquier instrucción SQL que se pueda ejecutar en PostgreSQL se puede exponer a través de una consulta GraphQL. En la siguiente sección, veremos las mutaciones.

Mutaciones

Las mutaciones de GraphQL son declaraciones que se utilizan para modificar datos. A continuación se muestran los tipos de mutaciones que puede realizar:

  • Insertar : crea una o más filas de datos:
  mutation insert_single_article {
    insert_article_one(
      object: {
        title: "Article 1"
        content: "Sample article content"
        author_id: 3
      }
    ) {
      id
      title
    }
  }
  • Upsert : crear, actualizar en conflicto. En el siguiente ejemplo, la columna valuetiene una restricción única :
  mutation upsert_single_tag {
    insert_tags(
      objects: { value: "Java" }
      on_conflict: { constraint: tags_value_key, update_columns: value }
    ) {
      returning {
        id
        value
      }
    }
  }
  • Actualizar : actualiza una o más filas de datos. También hay operadores especiales para trabajar con inty jsonbtipos de datos. El siguiente ejemplo actualiza todos los artículos con una calificación menor o igual a 2. La mutación devolverá el número de filas afectadas y también enumerará esas filas como una matriz de objetos:
  mutation update_article {
    update_article(
      where: { rating: { _lte: 2 } }
      _set: { rating: 1, is_published: false }
    ) {
      affected_rows
      returning {
        id
        title
        content
        rating
        is_published
      }
    }
  }
  • Eliminar : eliminar una o más filas de datos. El siguiente ejemplo elimina un artículo por clave principal:
  mutation delete_an_object {
    delete_article_by_pk(id: 1) {
      id
      title
      user_id
    }
  }
  • Transacción : realizar múltiples mutaciones en un bloque de mutación. Si uno de ellos falla, todas las mutaciones ejecutadas previamente dentro de ese bloque se revertirán. El siguiente ejemplo primero elimina todos los artículos que pertenecen a un autor. En la segunda mutación, se actualiza el nombre del autor:
  mutation reset_author {
    delete_article(where: { author_id: { _eq: 6 } }) {
      affected_rows
    }
    update_author(where: { id: { _eq: 6 } }, _set: { name: "Cory" }) {
      returning {
        id
        name
        articles {
          id
          title
        }
      }
    }
  }

Suscripciones

Las suscripciones de Hasura son consultas en vivo que se ejecutan sobre un protocolo WebSocket . Este es un protocolo utilizado para obtener datos en tiempo real de una base de datos. Cualquier consulta de GraphQL se puede convertir en una suscripción simplemente reemplazando la palabra clave querycon subscription. De forma predeterminada, estas consultas ejecutan una instrucción SQL cada segundo. Esta es una configuración configurable que se puede ajustar para proporcionar un equilibrio adecuado entre la carga de la base de datos y la latencia. Si hay un cambio en los datos subyacentes, el nuevo valor se envía al cliente.

El siguiente ejemplo muestra una suscripción de GraphQL que rastrea la ubicación de un vehículo:

# $vehicleId = 3subscription getLocation($vehicleId: Int!) {  vehicle(where: { id: { _eq: $vehicleId } }) {    id    vehicle_number    locations(order_by: { timestamp: desc }, limit: 1) {      location      timestamp    }  }}

Otros casos de uso de suscripciones incluyen:

  • seguimiento de entrega de alimentos
  • mensajes de chat
  • encuestas en línea

Esquemas remotos

A menudo, al crear una aplicación moderna, deberá integrarse con API de terceros que:

  • proporcionar datos que no están en su base de datos, como resultados deportivos en vivo o precio de las acciones
  • proporcionar lógica comercial, como procesamiento de pagos o reserva de vuelos

Por lo general, se accede a estas API de terceros directamente desde las aplicaciones de los clientes. Con Hasura, puede fusionar estas API con su base de datos para crear una API GraphQL unificada. Esto crea nuevas oportunidades en las que puede implementar la autorización y definir relaciones remotas entre sus tablas/vistas y la API remota. También puede crear Acciones que realicen una determinada tarea en función de este tipo de relación.

Tener una API GraphQL unificada facilita a los desarrolladores frontend la creación de la aplicación. En la siguiente sección, veremos qué son las acciones de Hasura.

Comportamiento

La lógica comercial personalizada en Hasura se maneja externamente en microservicios o funciones sin servidor a través de webhooks. Esto significa que puede escribir una lógica personalizada con el lenguaje que prefiera, como Node.js, Python, Go o Ruby on Rails. Una acción en Hasura es simplemente una consulta o mutación GraphQL personalizada que se asigna a un webhook donde se definen las interfaces de entrada y salida.

Una definición de acción se compone de:

  • tipo: consulta o mutación
  • nombre de la acción
  • tipos personalizados para entradas y salidas
  • encabezados
  • URL del controlador

Veamos un simple "¡Hola, mundo!" ejemplo. Primero, definimos una consulta de acción de la siguiente manera:

type Query {  hello(name: String!): HelloResponse}

La acción anterior define una función llamada helloque acepta una variable de cadena llamada namecomo entrada. La función devuelve un HelloResponseobjeto, que es un tipo personalizado que se define de la siguiente manera:

type HelloResponse {  message: String!}

Con la interfaz definida, todo lo que queda es implementar el servicio de webhook y una URL a la que puede acceder su instancia de Hasura. Aquí hay una implementación escrita para Express.js que se creó con la ayuda del asistente CodeGen de Hasura:

// Request Handlerapp.post("/hello", async (req, res) => {  // get request input  const { name } = req.body.input;  // success  return res.json({    message: `Hello, ${name}!`,  });});

Activadores de eventos

En Hasura, puede crear aplicaciones utilizando una arquitectura de software conocida como programación basada en eventos . Este es un patrón de diseño que desacopla la gestión de estado compleja de un backend monolítico y la transfiere a microservicios individuales o funciones sin servidor que ejecutan la lógica empresarial. Esto permite la creación de aplicaciones que son altamente robustas y escalables.

Con la programación de eventos, puede manejar fácilmente muchos casos de uso, como:

En PostgreSQL, puede crear activadores que ejecuten instrucciones SQL o procedimientos almacenados cuando ocurra un evento como INSERT, UPDATEo . DELETEUn activador está asociado a una tabla o vista y puede activarse antes o después de un evento.

En Hasura, los activadores de eventos se definen de manera similar y se utilizan para invocar enlaces web cuando se activa un evento. Un web hook en este contexto es bastante similar a los que acabamos de discutir en la sección "Acciones". Los disparadores de eventos también se pueden invocar manualmente a través de la consola o la API.

A continuación se muestra un ejemplo de una definición de activación de evento en formato YAML:

- table:    schema: public    name: author  event_triggers:    - name: author_trigger      definition:        enable_manual: false        insert:          columns: "*"        update:          columns: "*"      webhook: https://httpbin.org/post

Un disparador de eventos se puede definir con encabezados (para fines de autenticación) y, por lo general, contiene una carga útil que se envía al servicio de webhook para el procesamiento de datos. La única respuesta esperada es el 200estado. Los resultados reales, si es necesario, se publican a través de una ruta diferente, como publicar una mutación de GraphQL o enviar una notificación por correo electrónico, etc.

Las aplicaciones frontend pueden recibir los resultados consultando a través de la suscripción a GraphQL. Este tipo de arquitectura facilita la creación de aplicaciones interactivas en tiempo real sin bloqueo que ofrecen una excelente experiencia de usuario. El código base también es más fácil de mantener, probar y escalar para los desarrolladores.

Desencadenadores programados

Los disparadores programados son eventos basados ​​en el tiempo que ejecutan una lógica comercial personalizada a través de webhooks. Hay dos tipos que puede definir:

  • Desencadenadores CRON : utilizados para eventos periódicos a intervalos regulares
  • Eventos programados únicos : utilizados para ejecuciones únicas

Los activadores programados se pueden crear a través de la consola web o a través de la API de metadatos. La siguiente captura de pantalla muestra el ejemplo de la consola web.

Disparador cron de la consola web

La API de metadatos permite la creación de eventos programados utilizando el código de la aplicación. El siguiente ejemplo muestra cómo estructuraría la creación de un evento único utilizando la API:

{  "type": "create_scheduled_event",  "args": {    "webhook": "https://my-awesome-serverless-fn.com/send-email",    "schedule_at": "2022-07-20T12:45:00Z",    "payload": {      "email": "bob@ross.com"    }  }}

Hasura proporciona una serie de mecanismos de tolerancia a fallas que garantizan que los activadores programados se ejecuten correctamente. Por ejemplo, supongamos que un evento que estaba programado para las 2:00 p. m. no se procesó porque Hasura estaba fuera de servicio a la 1:59 p. m. Cuando Hasura vuelva a estar en línea, rehidratará los eventos y volverá a ejecutar los desencadenantes programados perdidos en función de una configuración de tolerancia personalizable. La configuración predeterminada es de seis horas.

Hasura también proporciona una configuración de reintento flexible en caso de fallas de HTTP. Puede configurar el número de reintentos y el tiempo de espera entre cada reintento. Cada invocación de activación se registra, a la que puede acceder más tarde para su inspección.

Los casos de uso para activadores programados incluyen:

  • enviar recordatorios
  • generación de informes al final del día
  • eliminar usuarios inactivos que no han verificado su dirección de correo electrónico en los últimos 90 días

Migraciones y Entornos

El flujo de trabajo de desarrollo ideal para cualquier proyecto de software es configurar varios entornos para el desarrollo, la puesta en escena y la producción. Este flujo de trabajo simplifica las pruebas y garantiza que los desarrolladores no eliminen o corrompan accidentalmente los datos de producción al implementar nuevas versiones de su software.

Para transferir el estado de un entorno de desarrollo a ensayo y producción, se requieren archivos de migración . Con Hasura, necesitarás:

  • base de datos/archivos de migración SQL
  • metadatos de hasura

Los metadatos de Hasura se componen de una instantánea de los archivos de configuración que realiza un seguimiento de:

  • relaciones
  • permisos
  • disparadores
  • comportamiento
  • esquema GraphQL
  • esquema remoto

Deberá instalar Hasura CLI para poder crear y aplicar estos archivos de migración a una instancia diferente de Hasura. Estos archivos de migración se pueden versionar y actualizar de forma incremental a medida que cambia el esquema durante el desarrollo.

La creación y aplicación de archivos de migración de SQL se realiza con el hasura migratecomando, mientras que los archivos de migración de metadatos se manejan con hasura metadatael comando. El comando CLI también le permite:

  • revertir las migraciones aplicadas
  • crear migración de datos semilla
  • restablecer archivos de migración
  • aplaste los archivos de migración, es decir, reemplace las pequeñas actualizaciones incrementales con una actualización importante

Hasura tiene una imagen de migración climática especial de Docker que aplica automáticamente las migraciones cuando se inicia el servidor. Esta imagen también contiene la herramienta Hasura CLI , que se puede usar para ejecutar scripts de CI/CD en su flujo de trabajo.

Despliegue

La forma más fácil de implementar Hasura para producción es usando Hasura Cloud . Esta es la opción recomendada, ya que obtiene funciones empresariales que no están disponibles en la versión de código abierto. Afortunadamente, Hasura no lo encierra en su plataforma, a diferencia de la mayoría de los proveedores de back-end como servicio (BaaS). Hay proveedores de servicios de implementación con un solo clic que puede aprovechar en plataformas como:

También puede implementar Hasura en cualquier plataforma de Kubernetes , como Google Cloud . AWS también es compatible, pero debe realizar una serie de pasos para que funcione. El alojamiento externo le brinda libertad y más opciones de precios. Sin embargo, todas las opciones anteriores requieren que configure servicios adicionales para:

  • autenticación
  • almacenamiento
  • lógica empresarial personalizada

En la siguiente sección, veremos brevemente cómo puede usar NHost para simplificar aún más el desarrollo de aplicaciones back-end de Hasura.

Implementación con NHost

NHost es un proveedor de BaaS de código abierto que pretende competir con plataformas como Firebase . Su backend stack consiste en:

  • Base de datos PostgreSQL
  • Motor Hasura GraphQL
  • un servicio de autenticación
  • MinIO , un servicio de almacenamiento de objetos compatible con S3
  • Funciones sin servidor (actualmente en beta)

La plataforma viene con una biblioteca de cliente llamada nhost-js-sdkque se utiliza para la autenticación frontend y la gestión de archivos. El servicio de almacenamiento admite la optimización de imágenes , lo que nos ahorra la molestia de integrar otro servicio para imágenes.

En el momento de escribir este artículo, NHost actualmente ofrece una prueba de 14 días para su servicio. Próximamente se lanzará un nivel gratuito. Hay una versión de Docker llamada Hasura Backend Plus que puede implementar localmente en su máquina.

Resumen

Para concluir, Hasura GraphQL Engine y la base de datos PostgreSQL son bastante revolucionarias en términos de la rapidez con la que puede crear backends para aplicaciones móviles y web, sin escribir líneas de código. PostgreSQL puede manejar la mayor parte de la lógica analítica y de cómputo, mientras que el resto de la lógica comercial personalizada se puede implementar mediante microservicios o funciones sin servidor.

Adoptar Hasura significa que podrá realizar un lanzamiento más rápido y crear un producto de alto rendimiento, seguro, tolerante a fallas, escalable y fácil de mantener. No tener problemas de infraestructura también reducirá sus costos operativos y le permitirá concentrarse en el desarrollo frontend y la parte de su aplicación orientada al usuario.

Aunque Hasura no tiene tantas funciones como otras alternativas de código abierto como la plataforma Parse , es compatible con el control de versiones y la puesta en escena del entorno, que es un requisito crucial para los flujos de trabajo de desarrollo de CI/CD. Debido a que es de código abierto, está protegido de los riesgos que plantean los bloqueos de proveedores.

Fuente: https://www.sitepoint.com/hasura-postgresql-build-backend/

#postgresql  #hasura 

Cómo Construir Su Backend Con Hasura Y PostgreSQL