アカウント登録

アカウント登録は、アプリのインストール後にユーザーが設定を実行するためのプロセスです。これは、アプリでの最初の操作であるため、直観的で洗練されていて、アプリを使用可能にするまでの負担をできる限り減らす必要があります。

必要になるアカウント登録の手順はアプリごとに異なりますが、Stripe は、ツールとベストプラクティスを提供しています。

設計パターン

有効化、サインイン、リダイレクトなど、一般的なシナリオに関してはアカウント登録の設計パターンをご覧ください。

アカウント登録ビューを表示する

ユーザーがアプリをインストールして、ダッシュボードに移動してアプリを表示する際に重要なことは、アカウント登録フローが最初に表示されるようにすることです。必ず、以下を行ってください。

• アカウント登録コンポーネントを作成します (サインインフローが必要な場合は、SignInView を使用します)。
• ページ固有のビューのすべてで、ビューが最初に読み込まれるときにユーザーがアカウント登録を完了しているかどうかを確認し、アカウント登録コンポーネントを適切に表示します。以下に例を示します。
  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>
    );
  };

• ダッシュボードのデフォルトビューでも同じ処理を行います。デフォルトビューがない場合は作成して、ユーザーがダッシュボードを使用するすべての場所で、アプリを開いたときに、適切なフローが表示されるようにします。アカウント登録以外の目的ではデフォルトビューが必要ない場合は、ユーザーがすでにアカウント登録を完了していれば、ビューから null を返すことができます。ダッシュボードには、Stripe ダッシュボードのデフォルトドロワーが表示され、ユーザーをページ固有のビューに移動できます。以下に例を示します。
  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;
  };

ゼロタッチのユーザーアカウント登録に Stripe 認証を利用する

外部のバックエンドにデータを保存し、独自のユーザーアカウントの概念を必要としないアプリを構築する場合、Stripe の認証を利用して、ゼロタッチのアカウント登録機能を提供することができます。この方法を使用すると、アプリは、アカウント登録を必要とせずにインストールの直後から使用できるようになります。

まず、アプリの UI からのリクエストを認証するバックエンドを設定します。設定したら、Stripe から提供されるユーザー ID またはアカウント ID の列を追加してデータベースに情報を保存できます。ユーザーは、アプリを使用する時点ですでに Stripe ダッシュボードにサインインしているため、それ以上の認証は不要です。