Inscription des utilisateurs

L’inscription est le processus que suivent vos utilisateurs pour configurer votre application après l’installation. Il s’agit de leur première interaction avec votre application. Le processus doit donc être intuitif, précis, et permettre à vos utilisateurs de commencer à utiliser votre application avec le moins de friction possible.

Les étapes d’inscription requises sont différentes pour chaque application, mais nous vous proposons des outils et bonnes pratiques pour vous aider.

Design patterns

Consultez nos modèles de conception pour l’inscription des utilisateurs, parmi lesquels vous trouverez des scénarios courants, comme l’activation, la connexion, la redirection, etc.

Display your onboarding view

Lorsqu’un utilisateur installe votre application et affiche le Dashboard, il est important que le flux d’inscription soit la première chose qu’il voit. Assurez-vous d’effectuer les actions suivantes :

• Créez un composant d’inscription (à l’aide de SignInView, si un flux de connexion est nécessaire).
• Vérifiez, dans toutes vos vues de page spécifiques, que l’utilisateur a bien terminé son inscription au premier chargement de la vue et affichez le composant d’inscription approprié. Par exemple :
  import {SignInView, ContextView} from '@stripe/ui-extension-sdk/ui';
  import appIcon from './icon.svg';
  
  // This component can be defined in a separate file for reuse between views
  const Onboarding = () => (
    <SignInView
      description="Connect your SuperTodo account to Stripe."
      primaryAction={{label: 'Sign in', href: 'https://supertodo.example.com'}}
      brandColor="#635bff"
      brandIcon={appIcon}
    />
  );
  
  const CustomerDetailView = () => {
    // The definition of "isSignedIn" is dependent upon your app's sign in method
    if (!isSignedIn) {
      return <Onboarding />
    }
  
    return (
      <ContextView title="SuperTodo customer view">
        // your signed-in content here
      </ContextView>
    );
  };

• Faites de même dans la vue par défaut du Dashboard. Si vous ne disposez pas d’une vue par défaut, créez-en une de manière à ce que quel que soit l’endroit où se trouve l’utilisateur dans le Dashboard, il arrive dans le flux approprié lorsqu’il ouvre votre application. Si vous n’avez pas besoin d’une vue par défaut en dehors du flux d’inscription, vous pouvez renvoyer null à partir de la vue si l’utilisateur a déjà terminé l’inscription, et si le Dashboard affiche le volet par défaut du Dashboard Stripe, qui guide les utilisateurs vers une vue de page spécifique. Par exemple :
  import {SignInView} from '@stripe/ui-extension-sdk/ui';
  import appIcon from './icon.svg';
  
  // This component can be defined in a separate file for reuse between views
  const Onboarding = () => (
    <SignInView
      description="Connect your SuperTodo account to Stripe."
      primaryAction={{label: 'Sign in', href: 'https://supertodo.example.com'}}
      brandColor="#635bff"
      brandIcon={appIcon}
    />
  );
  
  const DashboardDefaultView = () => {
    // The definition of "isSignedIn" is dependent upon your app's sign in method
    if (!isSignedIn) {
      return <Onboarding />
    }
  
    return null;
  };

Rely on Stripe authentication for zero-touch user onboarding

Si vous développez une application qui stocke les données dans un back-end externe mais n’a pas besoin de son propre concept de comptes utilisateur, vous pouvez vous appuyer sur l’authentification de Stripe pour offrir une inscription centralisée. Avec cette méthode, votre application ne nécessite aucune inscription et est utilisable immédiatement après l’installation.

Commencez par configurer votre back-end de manière à authentifier les requêtes depuis l’interface utilisateur de votre application. Vous pouvez ensuite stocker des informations dans votre base de données en ajoutant une colonne pour l’ID utilisateur ou l’ID de compte fourni par Stripe. Les utilisateurs étant déjà connectés au Dashboard Stripe lorsqu’ils utilisent votre application, aucune authentification supplémentaire n’est nécessaire.