ユーザーの本人確認書類を確認する
セッションを作成して、本人確認書類を収集します。
このガイドでは、Stripe Identity を使用して、身分証明書を安全に収集し、確認する方法について説明します。
はじめに
- 本番環境利用の申請を行う。
- Stripe Identity 申請書にご記入ください。
- (オプション) ブランディング設定ページでブランド設定をカスタマイズする。
注
Identity React Native SDK を利用するには、Identity 設定ページにアクセスして、有効にするをクリックします。
React Native でユーザーの本人確認を行うには、自社のアプリケーションに確認画面を表示します。このガイドでは、以下の手順を説明します。
- Stripe を設定します。
- サーバーエンドポイントを追加します。
- 確認画面を表示します。
- 確認イベントを処理します。
このガイドの手順は、サンプルアプリ と サンプルバックエンドサーバー で完全に実装されています。
設定サーバー側クライアント側
SDK をインストールする クライアント側
React Native SDK はオープンソースです。詳細なドキュメントが提供されており、iOS 13.0 または Android 5.0 (API レベル 21) 以降をサポートするアプリと互換性を持ちます。内部的には、ネイティブの iOS および Android SDK を使用します。
SDK をインストールするには、以下を実行します。
注
最新の SDK リリースと過去のバージョンの詳細については、GitHub のリリース ページをご覧ください。新しいリリースの公開時に通知を受け取るには、リポジトリーのリリースを確認してください。
iOS の場合は、ios
ディレクトリーの pod install
を実行して、必要なネイティブ依存関係もインストールします。Android では必要な追加手順はありません。
iOS のカメラの使用許可を設定する クライアント側
Stripe Identity iOS SDK では、デバイスのカメラにアクセスして本人確認書類をキャプチャーする必要があります。アプリがカメラの使用許可をリクエストできるようにするには、以下の手順に従います。
- Xcode で、プロジェクトの Info.plist を開きます。
NSCameraUsageDescription
キーを追加します。- アプリにカメラへのアクセスの許可が必要な理由をユーザーに説明する文字列値を追加します。
このアプリは、カメラを使用して本人確認書類の写真を撮影します。
カメラ認証のリクエストについて、詳細は Apple のドキュメントを参照してください。
Android のマテリアルのテーマを設定する クライアント側
Stripe Identity Android SDK には、マテリアルのテーマを使用するためのホスティングアクティビティーが必要です。Material のテーマを有効にするには、以下のようにします。
- プロジェクトの
app/src/main/AndroidManifest.
を開きます。xml application
に適用されるandroid:theme
がいずれかのマテリアルのテーマの子であることを確認してください (たとえば、Theme.
)。MaterialComponents. DayNight
マテリアルのテーマの詳細については、こちらをご覧ください。
サーバーに Stripe をインストールする サーバー側
まず、Stripe アカウントを登録します。
次に、アプリケーションから Stripe API へアクセスするためにライブラリをインストールします。
サーバーエンドポイントを追加するサーバー側
VerificationSession を作成する
VerificationSession は、本人確認をプログラムで示したものです。確認のタイプに関する詳細 (実行するチェックの内容など) が含まれています。確認済みの出力フィールドを拡張して、確認済みのデータの詳細を表示できます。
VerificationSession を作成するには、サーバー側のエンドポイントが必要です。サーバー側で VerificationSession
を作成することにより、悪意のあるユーザーによる確認オプションの上書き、およびお客様のアカウントでの支払いの処理の偽装を防止できます。セッションのメタデータにユーザー参照を含めるか、データベースにセッション ID を保存することで、このエンドポイントに認証を追加します。
セキュリティ上の理由から、モバイルクライアントから直接アクセス可能な VerificationSession
を作成しないでください。代わりにお客様のサーバーが SDK に一時キーを提供します。このキーは、VerificationSession への制限付きアクセス権が付与された一時的な API キーです。一時キーは、セッションとして考えることができ、そのセッションの間は SDK が特定の VerificationSession
オブジェクトを取得して更新することが許可されます。
VerificationSession
と一時キーを作成したら、その VerificationSession
の ID と一時キーシークレットをクライアントに送信し、書類のアップロード画面を表示します。
注
このエンドポイントの実行中の実装を こちら で迅速なテスト用に見つけることができます。
注意
一時キーシークレットは VerificationSession
にバインドされており、これによりアプリは機密データである本人確認情報 (書類や顔写真のファイルなど) を収集できるようになります。使用できるのは 1 回限りで、1 時間後に有効期限が切れます。一時キーシークレットは、記録したり、URL に埋め込んだり、対象のユーザー以外に公開したりしないでください。一時キーシークレットを返すエンドポイントで必ず TLS を有効化します。本人確認の設定や結果の漏洩を防止するため、一時キーシークレットのみをアプリに送信してください。
Web サーバー (localhost:4242
など) を起動し、curl で VerificationSession を作成する POST リクエストを送信して、エンドポイントをテストします。
curl -X POST -is "http://localhost:4242/create-verification-session" -d ""
端末に次のようなレスポンスが表示されます。
HTTP/1.1 200 OK Content-Type: application/json { id: "vs_QdfQQ6xfGNJR7ogV6", ephemeral_key_secret: "ek_YWNjdF8xRm..." }
確認画面を表示するクライアント側
確認画面を表示するボタンをセットアップします。このボタンをタップすると、ユーザーはパスポート、運転免許証、または国民 ID をキャプチャーしてアップロードできます。
開始する前に、確認ページで以下を行う必要があります。
- 本人確認が必要な理由をユーザーに説明します。
- Stripe の UI を表示する本人確認ボタンを含めます。
ボタンを追加する
Button (ボタン) コンポーネントの作成から始めます。
import React from 'react'; import { View, Button, } from 'react-native'; function VerifyScreen() { return ( <View> <Button title='Verify' /> </View> ); }
Stripe Identity SDK をインポートする
useStripeIdentity
フックをインポートします。
import React from 'react'; import { View, Button, } from 'react-native'; import { useStripeIdentity } from "@stripe/stripe-identity-react-native"; function VerifyScreen() { return ( <View> <Button title='Verify' /> </View> ); }
確認ボタンにイベントハンドラーを追加する
VerificationSession を作成するためのボタンとエンドポイントが準備できたため、次にボタンを変更し、ボタンがタップされたら、書類のアップロード画面が表示されるようにします。
次のためのコールを追加します。
- エンドポイントから、
VerificationSession
ID と一時キーシークレットを取得します。 - ブランドロゴで
fetchOptions
を渡してuseStripeIdentity
フックをインスタンス化し、それをユーザーに提示します。 status
を処理し、ユーザーが確認フローを完了したかを知ることができるようにします。
import React from 'react'; import { View, Button, Text, Image } from 'react-native'; import { useStripeIdentity } from "@stripe/stripe-identity-react-native"; // A square logo for your brand import logo from './assets/{{YOUR_BRAND_LOGO}}.png'; function VerifyScreen() { const fetchVerificationSessionParams = async () => { try { const data = await fetch(`${YOUR_SERVER_BASE_URL}/create-verification-session`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, }); const json = await data.json(); return json; } catch (e) { return {}; } }; const fetchOptions = async () => { const response = await fetchVerificationSessionParams(); return { sessionId: response.id, ephemeralKeySecret: response.ephemeral_key_secret, brandLogo: Image.resolveAssetSource(logo), }; }; const { status, present, loading } = useStripeIdentity(fetchOptions); const handlePress = React.useCallback(() => { present(); }, [present]); return ( <View> <Button title='Verify' disabled={loading} onPress={handlePress} /> <Text>Status: {status}</Text> </View> ); }
確認画面をテストする
確認ボタンで書類のアップロード画面が表示されるかどうかテストします。
- 本人確認ボタンをタップします。
- エラーメッセージが表示されないことを確認します。
構築したシステムが機能しない場合:
VerificationSession
ID と一時キーシークレットを取得する場所にブレークポイントを配置します。- ネットワークエラーがないこと、およびエンドポイントが
VerificationSession
ID と一時キーシークレットを返すことを確認します。
確認イベントを処理する
書類確認は通常、ユーザーがサイトにリダイレクトするとすぐに完了し、API からすぐに結果を取得できます。まれに、ドキュメント検証の準備ができておらず、非同期的に続行する必要があります。このような場合、検証結果の準備ができたときに Webhook を通じて通知されます。処理が完了すると、VerificationSession のステータスが processing
から verified
に変わります。
セッションのステータスに変化があると、Stripe は以下のイベントを送信します。
イベント名 | 説明 | 次のステップ |
---|---|---|
identity.verification_session.verified | すべての本人確認チェックの処理が完了し、確認のすべてが成功しました。 | アプリケーションで関連するアクションをトリガーします。 |
identity.verification_session.requires_input | すべての本人確認チェックの処理が完了し、少なくとも 1 つの確認が失敗しました。 | アプリケーションで関連するアクションをトリガーするとともに、ユーザーに本人確認の再試行を許可できます。 |
Webhook ハンドラを使用してこれらのイベントを受信し、確定メールの送信、自社データベース内の確認結果の更新、アカウント登録ステップの完了などのアクションを自動化します。ダッシュボードに確認イベントを表示することもできます。
イベントを受信して、ビジネスアクションを実行する
コード使用
Webhook ハンドラを構築してイベントをリッスンし、非同期型のカスタムの確認フローを作成します。Stripe CLI を使用して、ローカルで Webhook の組み込みのテストとデバッグを行います。
コードなし
ダッシュボードを使用してすべての本人確認を表示し、収集されたデータを調査して、確認の失敗について把握します。