Personnalisation des étiquettes des champs de connexion gérés AWS Cognito

Personnalisation des étiquettes des champs de connexion gérés AWS Cognito à l'aide de JavaScript

Cette approche se concentre sur l'utilisation de JavaScript pour modifier dynamiquement les étiquettes de champ sur la page de connexion gérée en ciblant les éléments DOM rendus par AWS Cognito.

// Wait for the Cognito UI to load completely
document.addEventListener('DOMContentLoaded', function() {
    // Identify the DOM elements for the field labels
    const givenNameLabel = document.querySelector('label[for="given_name"]');
    const familyNameLabel = document.querySelector('label[for="family_name"]');

    // Update the text content of the labels
    if (givenNameLabel) {
        givenNameLabel.textContent = 'First Name';
    }

    if (familyNameLabel) {
        familyNameLabel.textContent = 'Last Name';
    }

    // Optionally, add input validation or styling here
});

Personnalisation des étiquettes dans AWS Cognito avec AWS Lambda

Cette solution utilise AWS Lambda et Cognito Triggers pour appliquer les conventions de dénomination des champs pendant le processus d'inscription.

const AWS = require('aws-sdk');

exports.handler = async (event) => {
    // Access user attributes from the event
    const { given_name, family_name } = event.request.userAttributes;

    // Modify the attributes to use "First Name" and "Last Name"
    event.request.userAttributes['custom:first_name'] = given_name || '';
    event.request.userAttributes['custom:last_name'] = family_name || '';

    // Remove original attributes if necessary
    delete event.request.userAttributes['given_name'];
    delete event.request.userAttributes['family_name'];

    // Return the modified event object
    return event;
};

Tests unitaires pour la solution de champ personnalisé AWS Lambda

Tests unitaires écrits en Jest pour valider le comportement de la fonction AWS Lambda.

const handler = require('./index');

test('should replace given_name and family_name with custom fields', async () => {
    const event = {
        request: {
            userAttributes: {
                given_name: 'John',
                family_name: 'Doe'
            }
        }
    };

    const result = await handler(event);
    expect(result.request.userAttributes['custom:first_name']).toBe('John');
    expect(result.request.userAttributes['custom:last_name']).toBe('Doe');
    expect(result.request.userAttributes['given_name']).toBeUndefined();
    expect(result.request.userAttributes['family_name']).toBeUndefined();
});

Personnalisation des champs Cognito avec React et Amplify

Une solution basée sur React utilisant AWS Amplify pour remplacer dynamiquement les étiquettes de champ Cognito par défaut sur un formulaire d'inscription.

import React from 'react';
import { withAuthenticator } from '@aws-amplify/ui-react';

function App() {
    return (
        <div>
            <h1>Custom Cognito Form</h1>
            <form>
                <label htmlFor="first_name">First Name</label>
                <input id="first_name" name="first_name" type="text" required />
                <label htmlFor="last_name">Last Name</label>
                <input id="last_name" name="last_name" type="text" required />
            </form>
        </div>
    );
}

export default withAuthenticator(App);

Personnalisation des étiquettes de champ AWS Cognito à l'aide de la personnalisation frontale

Approche : Utilisation de JavaScript pour modifier dynamiquement les étiquettes sur l'interface utilisateur de connexion gérée

// Wait for the AWS Cognito UI to load
document.addEventListener('DOMContentLoaded', () => {
  // Identify the Given Name field and modify its label
  const givenNameLabel = document.querySelector('label[for="given_name"]');
  if (givenNameLabel) givenNameLabel.textContent = 'First Name';
  // Identify the Family Name field and modify its label
  const familyNameLabel = document.querySelector('label[for="family_name"]');
  if (familyNameLabel) familyNameLabel.textContent = 'Last Name';
});

Personnalisation d'AWS Cognito à l'aide de déclencheurs Lambda backend

Approche : Utilisation d'AWS Lambda pour prétraiter les attributs personnalisés

exports.handler = async (event) => {
  // Modify attributes before user creation
  if (event.triggerSource === 'PreSignUp_SignUp') {
    event.request.userAttributes['custom:first_name'] = event.request.userAttributes['given_name'];
    event.request.userAttributes['custom:last_name'] = event.request.userAttributes['family_name'];
  }
  return event;
};

Questions courantes sur la personnalisation de l'inscription à AWS Cognito

1. Comment puis-je rendre les attributs personnalisés requis dans Cognito ?
2. Les attributs personnalisés peuvent être marqués comme requis en modifiant le schéma du groupe d'utilisateurs via l'AWS CLI à l'aide de aws cognito-idp update-user-pool.
3. Puis-je modifier les étiquettes de champ directement dans l'interface utilisateur d'AWS Cognito ?
4. Malheureusement, l'interface utilisateur AWS ne propose pas d'option pour renommer les étiquettes. Utiliser des scripts frontend avec querySelector ou des solutions backend comme les déclencheurs Lambda.
5. Comment télécharger un fichier CSS personnalisé sur Cognito ?
6. Vous pouvez utiliser AWS Management Console pour télécharger un fichier CSS dans la section « Personnalisation de l'interface utilisateur » des paramètres du groupe d'utilisateurs.
7. Est-il possible de valider la saisie de l'utilisateur lors de l'inscription ?
8. Oui, vous pouvez ajouter une validation côté client à l'aide de JavaScript ou utiliser des déclencheurs Lambda back-end avec PreSignUp événements pour les vérifications côté serveur.
9. Quelle est la meilleure façon de déboguer les problèmes d’inscription dans Cognito ?
10. Activez la journalisation via AWS CloudWatch pour suivre et résoudre les problèmes liés aux flux d'inscription des utilisateurs.

Affiner vos pages de connexion AWS Cognito

La personnalisation de la connexion gérée d'AWS Cognito nécessite des approches créatives lorsque l'interface utilisateur ne propose pas d'options directes. En combinant des ajustements front-end et des déclencheurs Lambda back-end, les développeurs peuvent renommer les champs et valider efficacement les entrées des utilisateurs tout en garantissant la cohérence de la marque.

Que vous travailliez sur la validation des données utilisateur ou que vous amélioriez la convivialité de l'inscription, ces stratégies vous fournissent les outils nécessaires pour surmonter les limitations. Appliquez ces méthodes pour garantir que votre application offre une expérience transparente et professionnelle. ✨