Next.jsでStripe Identityによる本人確認を実装した話

「JP_Stripe in 金沢 #2 - 事例に学ぶ、オンラインビジネス / DXの始め方」で登壇した資料です。
https://jpstripes.connpass.com/event/327630/

Transcript

1. 栗原 誠 Next.jsで Stripe Identityによる 本⼈確認を実装した話 JP_Stripe in ⾦沢 2024/10/06
2. 【ニックネーム】  くりりん 【仕事】  ぴいてっく（フリーランス）  Webエンジニア 【スキルセット】  ‧Next.js / React  ‧WordPress  ‧Stripe etc.. 【ソーシャル】 2 ⾃⼰紹介 栗原 誠（Makoto Kurihara） @pitolick_tech
3. 【話すこと】  ‧Next.js App Router + Vercel の構成で Stripe Identity を実装するサンプル  ‧Stripe Identity の動作デモ 【話さないこと】  ‧Stripe Identity の具体的な活⽤‧使⽤例  ‧Next.js App Router の基本的な使い⽅ 3 今回のテーマ
4. 事前知識 4
5. Next.js とは Next.jsはReactの機能を拡張し たフレームワーク。 State of JavaScript 2023 のメ タフレームワーク部⾨におい て使⽤率56%と⾼く、Reactを 使った開発において最も⼈気 なフレームワークの1つ。 5
6. Stripe Identity とは 6 Stripeが提供する本⼈確認機能のこと。 オンライン上で本⼈確認を完結できる（eKYC） ため業務効率化が狙える。 120 カ国以上の⾝分証明書に対応しているため、 グローバル展開を⾒据えた事業でも活躍可能。
7. 動作デモ 7 ※デモ環境は予告なくアクセスできなくなる場合があります。
8. 実装 8 公式ドキュメント https://docs.stripe.com/identity/verify-identity-documents
9. Stripe API について 9 Stripe API には混合しやすい以下の2種類がある。 Stripe Identity の実装にはこの両⽅を使⽤する。 【Stripe API】https://docs.stripe.com/api  ‧バックエンド環境で動作させることを前提にした API  ‧JavaScript だと Node.js と AWS Lambda で作るイメージ  ‧Next.js App Router の場合、 API Routes という機能で実⾏する 【Stripe JS】https://docs.stripe.com/js  ‧フロントエンド環境で動作させることを前提にしたパッケージ  ‧代表的な使⽤⽤途としては Stripe Elements
10. Stripe API 利⽤の下準備 - APIキーの発⾏ 1. Stripe管理画⾯ヘッダー部分にある「開発者」をクリック 2. API キータブ内にある「公開可能キー」と「シークレットキー」をコピー 3. 環境変数として設定 【公開可能キー】  ‧主に「Stripe JS」で使⽤するAPIキー  ‧「pk_test_」もしくは「pk_live_」から始まる  ‧Next.jsで設定する場合、クライアント（ブラウザ）で呼び出すため   環境変数名の頭に「NEXT_PUBLIC_」をつける必要がある 【シークレットキー】  ‧主に「Stripe API」で使⽤するAPIキー  ‧「sk_test_」もしくは「sk_live_」から始まる 10
11. Stripe API 利⽤の下準備 - API Routes 1. 「app」ディレクトリ内に「api/stripe」ディレクトリを作成する 2. Stripe API への認証部分をあらかじめ作って export しておくと便利 11
12. VerificationSession を作成 VerificationSession は、 Stripe Identity の本⼈認証を 「起動する」というようなイ メージ。 1ユーザーに対して何個でも 作成可能だが、実⾏する度に ID は変わる。 12 1. API Routes で identity.verificationSessions.create を実⾏する API を作成
13. アップロードモーダルを表⽰する① 1. フロントページで本⼈認証を実⾏するボタンを作成する 2. 上記ボタンを押下時の処理で VerificationSession を作成するAPIを実⾏する 13
14. アップロードモーダルを表⽰する② 1. Stripe JS に「公開可能キー」と VerificationSession 作成時に発⾏された client_secret を渡して verifyIdentity を実⾏ 14
15. 確認ページの表⽰とIDの送信 1. Stripe Identity の ID が発⾏されたら、 useState 等を使って確認ページを表 ⽰する 2. 最後に取得した ID を CRM や DB に繋ぎこむ 本⼈確認の結果は送信した ID を使ってダッシュボードか確認⽤ API で状況を確認 15
16. まとめ • Stripe Identity を使えばオンラインで簡単に本⼈確認が完了する • 開発環境でもスマホ実機を使ったテストができる • Next.js で実装するときは API Routes を使おう • ドキュメントがわかりやすいので実装⼯数が少なく済む ◦ すでに Next.js で Stripe Elements などを構築済みの場合、3hほどで実装完了 16
17. Thank you ! ありがとうございました