# Stripe Apps の SignInView コンポーネント SignInView を使用して、アプリがサインイン画面を表示できるようにします。 # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/signinview?app-sdk-version=8. `SignInView` コンポーネントを使用して、Stripe のアイコンの横にアプリのアイコンのグラフィック、サインインプロセスの簡単な説明、アクションボタンなどを表示します。アプリでユーザーがサインインする必要がある場合は、ユーザーが Stripe に接続していることを明確に把握するために、`SignInView` コンポーネントが必要です。 ![](https://b.stripecdn.com/docs-statics-srv/assets/sign-in-01.fea0b34449e5808d68c542be4a4301dc.png) ドロワーに表示される SignInView の例。 ![](https://b.stripecdn.com/docs-statics-srv/assets/settings-sign-in-01.b57a79fdec455f0d7fe7ab5c4446cd2c.png) [設定ページ](https://docs.stripe.com/stripe-apps/app-settings.md)で使用される SignInView。 ### SignInView プロパティ | プロパティ | 型 | | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `brandColor` | (任意) `string | undefined` `brandIcon` と対照的な CSS カラー。 | | `brandIcon` | (任意) `string | undefined` `brandColor` と対照的な、線の端が四角い単色の SVG。 | | `description` | (任意) `string | undefined` アプリとその機能についての説明。 | | `descriptionActionContents` | (任意) `React.ReactNode` `FocusView` で開かれる説明アクションコンテンツ。 | | `descriptionActionLabel` | (任意) `string | undefined` 説明の下にあるアクションラベル (「もっと知る」や「デモを見る」など)。 | | `descriptionActionTitle` | (任意) `string | undefined` 説明アクションの `FocusView` 内のタイトル。 | | `footerContent` | (任意) `React.ReactNode` フッターのプライマリーアクションの下にある React ノード。 | | `primaryAction` | (任意) `(SignInActionWithHref | SignInActionWithOnPress) | undefined` 関連型: [SignInActionWithHref](https://docs.stripe.com/stripe-apps/components/signinview.md#signinactionwithhref)、[SignInActionWithOnPress](https://docs.stripe.com/stripe-apps/components/signinview.md#signinactionwithonpress)。 | | `secondaryAction` | (任意) `(SignInActionWithHref | SignInActionWithOnPress) | undefined` 関連型: [SignInActionWithHref](https://docs.stripe.com/stripe-apps/components/signinview.md#signinactionwithhref)、[SignInActionWithOnPress](https://docs.stripe.com/stripe-apps/components/signinview.md#signinactionwithonpress)。 | ### SignInActionWithHref | プロパティ | 型 | | --------- | -------------------------------------------------- | | `href` | (必須) `string` | | `label` | (必須) `string` | | `onPress` | (任意) `((event: PressEvent) => void) | undefined` | | `target` | (任意) `string | undefined` | ### SignInActionWithOnPress | プロパティ | 型 | | --------- | ------------------------------------ | | `label` | (必須) `string` | | `onPress` | (必須) `(event: PressEvent) => void` | | `href` | (任意) `string | undefined` | | `target` | (任意) `string | undefined` | ## 例 ## 追加のコンテキスト ユーザーがサインインする前に、デモ、アプリの詳細な説明、またはスクリーンショットを表示することもできます。この時点でユーザーはすでにアプリをインストールしているため、すぐにサインインしようとしますが、追加のコンテキストを表示したい場合は、`descriptionActionLabel`、`descriptionActionTitle`、`descriptionActionContents` の各プロパティを使用してフォーカスビューで表示することができます。以下に例を挙げます。 ![](https://b.stripecdn.com/docs-statics-srv/assets/contextview-wide.05a45f6c9e0e4af6a0e47d783badb9f6.png) # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/signinview?app-sdk-version=9. `SignInView` コンポーネントを使用して、Stripe のアイコンの横にアプリのアイコンのグラフィック、サインインプロセスの簡単な説明、アクションボタンなどを表示します。アプリでユーザーがサインインする必要がある場合は、ユーザーが Stripe に接続していることを明確に把握するために、`SignInView` コンポーネントが必要です。 ![](https://b.stripecdn.com/docs-statics-srv/assets/sign-in-01.fea0b34449e5808d68c542be4a4301dc.png) ドロワーに表示される SignInView の例。 ![](https://b.stripecdn.com/docs-statics-srv/assets/settings-sign-in-01.b57a79fdec455f0d7fe7ab5c4446cd2c.png) [設定ページ](https://docs.stripe.com/stripe-apps/app-settings.md)で使用される SignInView。 ### SignInView プロパティ | プロパティ | 型 | | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `brandColor` | (任意) `string | undefined` `brandIcon` と対照的な CSS カラー。 | | `brandIcon` | (任意) `string | undefined` `brandColor` と対照的な、線の端が四角い単色の SVG。 | | `description` | (任意) `string | undefined` アプリとその機能についての説明。 | | `descriptionActionContents` | (任意) `React.ReactNode` `FocusView` で開かれる説明アクションコンテンツ。 | | `descriptionActionLabel` | (任意) `string | undefined` 説明の下にあるアクションラベル (「もっと知る」や「デモを見る」など)。 | | `descriptionActionTitle` | (任意) `string | undefined` 説明アクションの `FocusView` 内のタイトル。 | | `footerContent` | (任意) `React.ReactNode` フッターのプライマリーアクションの下にある React ノード。 | | `primaryAction` | (任意) `(SignInActionWithHref | SignInActionWithOnPress) | undefined` 関連型: [SignInActionWithHref](https://docs.stripe.com/stripe-apps/components/signinview.md#signinactionwithhref)、[SignInActionWithOnPress](https://docs.stripe.com/stripe-apps/components/signinview.md#signinactionwithonpress)。 | | `secondaryAction` | (任意) `(SignInActionWithHref | SignInActionWithOnPress) | undefined` 関連型: [SignInActionWithHref](https://docs.stripe.com/stripe-apps/components/signinview.md#signinactionwithhref)、[SignInActionWithOnPress](https://docs.stripe.com/stripe-apps/components/signinview.md#signinactionwithonpress)。 | ### SignInActionWithHref | プロパティ | 型 | | --------- | -------------------------------------------------- | | `href` | (必須) `string` | | `label` | (必須) `string` | | `onPress` | (任意) `((event: PressEvent) => void) | undefined` | | `target` | (任意) `string | undefined` | ### SignInActionWithOnPress | プロパティ | 型 | | --------- | ------------------------------------ | | `label` | (必須) `string` | | `onPress` | (必須) `(event: PressEvent) => void` | | `href` | (任意) `string | undefined` | | `target` | (任意) `string | undefined` | ## 例 ## 追加のコンテキスト ユーザーがサインインする前に、デモ、アプリの詳細な説明、またはスクリーンショットを表示することもできます。この時点でユーザーはすでにアプリをインストールしているため、すぐにサインインしようとしますが、追加のコンテキストを表示したい場合は、`descriptionActionLabel`、`descriptionActionTitle`、`descriptionActionContents` の各プロパティを使用してフォーカスビューで表示することができます。以下に例を挙げます。 ![](https://b.stripecdn.com/docs-statics-srv/assets/contextview-wide.05a45f6c9e0e4af6a0e47d783badb9f6.png) ## See also - [従うべき設計パターン](https://docs.stripe.com/stripe-apps/patterns.md) - [アプリのスタイル設定](https://docs.stripe.com/stripe-apps/style.md) - [UI テスト](https://docs.stripe.com/stripe-apps/ui-testing.md)