ユーザーの本人確認書類を確認する
このガイドでは、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 をインストールするには、以下を実行します。
yarn add @stripe/stripe-identity-react-native
注
最新の 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 を保存することで、このエンドポイントに認証を追加します。
For security, don’t create a VerificationSession
object that’s directly accessible from the mobile client. Instead, your server provides the SDK with an ephemeral key — a short-lived API key with restricted access to the VerificationSession. You can think of an ephemeral key as a session, authorizing the SDK to retrieve and update a specific VerificationSession
object for the duration of the session.
VerificationSession
と一時キーを作成したら、その VerificationSession
の ID と一時キーシークレットをクライアントに送信し、書類のアップロード画面を表示します。
注
このエンドポイントの実行可能な実装が Glitch で提供されており、簡単なテストに利用できます。
// Set your secret key. Remember to switch to your live secret key in production. // See your keys here: https://dashboard.stripe.com/apikeys const stripe = require('stripe')(
); // In the route handler for /create-verification-session: // Authenticate your user. // Create the session. const verificationSession = await stripe.identity.verificationSessions.create({ type: 'document', metadata: { user_id: '{{USER_ID}}', }, }); // Create an ephemeral key for the VerificationSession const ephemeralKey = await stripe.ephemeralKeys.create( {verification_session: verificationSession.id}, {apiVersion: '2024-04-10'} ); // Return only the ID and ephemeral key secret to the frontend. const verficationSessionId = verificationSession.id; const ephemeralKeySecret = ephemeralKey.secret;'sk_test_4eC39HqLyjWDarjtT1zdp7dc'
注意
一時キーシークレットは 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 と一時キーシークレットを返すことを確認します。
確認イベントを処理する
本人確認書類のチェックは非同期であるため、確認結果がすぐに提供されるわけではありません。通常、完了までに 1 ~ 3 分かかります。処理が完了すると、VerificationSession のステータスが変わり、processing
から verified
になります。
セッションのステータスに変化があると、Stripe は以下のイベントを送信します。
イベント名 | 説明 | 次のステップ |
---|---|---|
identity.verification_session.verified | すべての検証チェックの処理が完了し、すべての確認が成功しました。 | アプリケーションで関連するアクションをトリガーします。 |
identity.verification_session.requires_input | すべての検証チェックの処理が完了し、少なくとも 1 つの確認が失敗しました。 | アプリケーションで関連するアクションをトリガーするとともに、ユーザーに本人確認の再試行を許可できます。 |
Webhook ハンドラーを使用してこれらのイベントを受信し、確定メールの送信、お客様のデータベース内の確認結果の更新、アカウント登録ステップの完了などのアクションを自動化します。ダッシュボードに確認イベントを表示することもできます。
イベントを受信して、ビジネスアクションを実行する
コード使用
Webhook ハンドラを構築してイベントをリッスンし、非同期型のカスタムの確認フローを作成します。Stripe CLI を使用して、ローカルで Webhook の組み込みのテストとデバッグを行います。
コードなし
ダッシュボードを使用してすべての本人確認を表示し、収集されたデータを調査して、確認の失敗について把握します。