# Stripe Apps のサインインテンプレート

アプリで SignInView コンポーネントを使用する方法をご紹介します。

アプリでユーザーがサインインする必要がある場合は、ユーザーが Stripe に接続していることを明確に把握できるように、`SignInView` コンポーネントが必要です。

## Before you begin

[アプリを作成します](https://docs.stripe.com/stripe-apps/create-app.md)。

## 推奨される使用法

- ユーザーのパスワードの漏洩を防ぐために、一連の認証情報はすべて、Stripe との共有をユーザーに依頼しないでください。
- コンテンツは、簡略で的を絞ったものにします。ユーザーがアカウント登録フローから移動するようなリンクは使用しないでください。以下に例を示します。
![](https://b.stripecdn.com/docs-statics-srv/assets/sign-in-01.fea0b34449e5808d68c542be4a4301dc.png)
![](https://b.stripecdn.com/docs-statics-srv/assets/sign-in-02.65d673b4703531cf35dd1847941c7eff.png)

- 既存のアカウントにサインインするか、新しいアカウントを登録するオプションをユーザーに提供します。
- Stripe の外部の独自のアカウント登録フローと一貫性のある行動喚起ラベルを使用します。以下に例を示します。
![](https://b.stripecdn.com/docs-statics-srv/assets/sign-in-03.b3bce56fcedbe430099ebe2155a86537.png)

## 例

コンポーネントをアプリに追加するには、以下のようにします。

```jsx
import {SignInView} from '@stripe/ui-extension-sdk/ui';
```

次の例は、`SignInView` コンポーネントを示しています。

```jsx
<SignInView
  description="Connect your SuperTodo account with Stripe."
  primaryAction={{label: 'Sign in', href: 'https://example.com'}}
  footerContent={
    <>
      Don't have an account? <Link href="https://example.com">Sign up</Link>
    </>
  }
  brandColor="#635bff"
  brandIcon={appIcon}
/>
```