プラットフォーム開発における認証設計の苦労

by Kiyofumi Sano

Slide 1

Slide 1 text

Yappli Tech Conference 2024 2024.10.17 プラットフォーム開発における認証設計の苦労

Slide 2

Slide 2 text

Speaker 開発統括本部プロダクト開発本部開発2部サーバー3グループ佐野聖⽂ ● 2023年11⽉⼊社 ● Yappli CRMの開発を担当

Slide 3

Slide 3 text

● プラットフォーム開発における機能追加の⼤変さ ● 機能の実装で苦労した点とその解決策本⽇伝えたいこと

Slide 4

Slide 4 text

⽬次 1. Yappli CRMとは 2. giftee Point Base連携の概要 3. 実装で苦労した点とその解決策 4. まとめ

Slide 5

Slide 5 text

Yappli CRMとは

Slide 6

Slide 6 text

アプリプラットフォーム「Yappli」を提供するヤプリが開発した、アプリをリリースするだけで始められる新しいCRMです。顧客の⾏動データを活⽤し、アプリならではの多彩な施策を実⾏することで、顧客との関係性を強化します。 01 Yappli CRMとは

Slide 7

Slide 7 text

01 Yappli CRMとは従来CRMは導⼊企業様側でご⽤意いただいておりましたが、Yappli導⼊が広がる中、 CRMをお持ちでないケースや、開発済みのCRMがいわゆる「レガシーシステム」となっており、拡張性や保守性に課題を感じているケースが増えていました。この課題を解決するために⽣まれたのが、ノーコード(プログラミング不要)でCRMを開始できる「Yappli CRM」です。顧客との強⼒な接点であるアプリとスムーズに連携し、シンプルで使いやすいCRMにすること。また、⼤規模開発が不要になることで導⼊費⽤を抑え、マーケティング担当者が施策実⾏に集中できるスピード感にもこだわりました。「アプリの会社」だからこそ提供できる、新しいCRMです。開発の背景と課題

Slide 8

Slide 8 text

具体的には何ができるの? 01 Yappli CRMとは顧客管理施策セグメント CRMアクション分析‧ダッシュボード外部連携顧客ID発行顧客属性固定カラム15個+カスタムセグメント 50カラムまで追加可ポイント発行/加減算ランク管理タイムライン ● 　 ● 　 ● 　 ● 　 ● 　 ● 　 ● 会員ランク会員登録/更新日最終ログイン日時最終ポイント取得日総ポイント獲得数チェックイン QR/バーコード読み取り等トリガーURL ● 　 ● 　 ● 　 ● 　 ● 　 ● 　 ● ● 　　プッシュ配信メール配信 In-Appメッセージ一斉配信トリガー配信クーポン発行 ● 　 ● 　 ● 　 ● 　 ● 　 ● 　　会員登録者数会員アクティブ率配信レポート RFM分析 ● 　 ● 　 ● 　 ● 　　　 POS EC CDP、MA メール e-Gift ● 　 ● 　 ● 　 ● 　 ● 　

Slide 9

Slide 9 text

giftee Point Base連携の概要

Slide 10

Slide 10 text

giftee Point Base連携 02 giftee Point Base連携の概要 Yappli CRMで獲得したポイントを gifteeというeギフトサービスでギフトに交換できるようにする保有している任意のCRMポイントを、gifteeポイントへ交換できる（例：1000pt ⇨ CRM：500pt giftee：500pt）

Slide 11

Slide 11 text

giftee Point Base連携‧画⾯イメージ 02 giftee Point Base連携の概要 CRMポイントからgifteeポイントへ交換はユーザー側で実施以後、gifteeマイページ内（WebView）でeGiftへの交換などが可能ログイン以下からgifteeマイページへログインしてください。 ※セッション有効期間は24hとなります。最終アクセスから24h以内であれば本画⾯はスキップ（セッション切れたら表⽰） 5 100 任意のポイント数を⼊⼒（例：100ptをgifteeポイントへ交換） CRMポイントと交換導線を設置（CRM： 00pt、giftee：0pt） CRMポイントが減算される（CRM：0pt、giftee： 00pt） gifteeマイページを表⽰ ※web （eギフト等へ交換が可能）

Slide 12

Slide 12 text

gifteeマイページ機能 1 ● gifteeサービスで⽤意されているマイページにYappliのアプリから遷移させる機能 ○ 今回はこちらについて解説していきますポイント換算機能 2 ● Yappli CRMポイント→gifteeポイントへ換算する機能 ● 今回は割愛させていただきます ● こちらの詳細はヤプリテックブログにて後⽇投稿します! ○ https://tech.yappli.io/ 02 giftee Point Base連携の概要

Slide 13

Slide 13 text

gifteeマイページ機能の全体構成 02 giftee Point Base連携の概要

Slide 14

Slide 14 text

02 giftee Point Base連携の概要

Slide 15

Slide 15 text

フォーム2機能について 02 giftee Point Base連携の概要

Slide 16

Slide 16 text

⼊⼒フォームを表⽰し、端末からの回答内容をYappli側に保存する機能 02 giftee Point Base連携の概要

Slide 17

Slide 17 text

フォーム2機能のデモ 02 giftee Point Base連携の概要

Slide 18

Slide 18 text

02 giftee Point Base連携の概要

Slide 19

Slide 19 text

02 giftee Point Base連携の概要アプリでの表⽰

Slide 20

Slide 20 text

苦労した点とその解決策

Slide 21

Slide 21 text

実装で苦労したこと 03 苦労した点とその解決策

Slide 22

Slide 22 text

03 苦労した点とその解決策 ● CSRF対策 ○ ウェブビュー機能は不特定多数からのアクセスを想定しているためIP制限をかけることができない ● ネイティブアプリから送られてくるmember_idが信頼できる値になるような設計 ○ member_idが偽装されるとgifteeマイページになりすましログインされる危険がある ○ 分散サービスのため、⾃分が普段開発していないプロジェクトのソースコードを深い所まで追う必要があったセキュリティを担保した設計

Slide 23

Slide 23 text

解決策 03 苦労した点とその解決策

Slide 24

Slide 24 text

CSRF対策 03 苦労した点とその解決策

Slide 25

Slide 25 text

03 苦労した点とその解決策 CSRF対策

Slide 26

Slide 26 text

03 苦労した点とその解決策 ● CSRFトークンを利⽤する a. トークンを発⾏するAPIをアプリから実⾏ b. アプリ側にトークンをcookieとして格納する c. 以後gifteeマイページAPIを実⾏するときはトークンをリクエストヘッダに⼊れてもらい、サーバーで検証する ■ カスタムヘッダーを設定するとプリフライトリクエストが必ず⾏われる ● クロスサイトリクエストではプリフライトリクエストを実⾏することができないため、GETリクエストのAPIに対するCSRF対策になる解決案1(没案)

Slide 27

Slide 27 text

03 苦労した点とその解決策 ● 上記実現するには、アプリ側の実装で、ウェブビュー機能のリンクへアクセス時、tokenをリクエストヘッダーに含めるようにしてもらう必要があった ○ これはgiftee連携の⽂脈においてのみ必要な要件になるので、ウェブビューという Yappliの汎⽤的な機能に実装するべきものではないはず解決案1が没になった理由

Slide 28

Slide 28 text

03 苦労した点とその解決策 ● tokenを⽤いず合わせ技で対応 ○ cookieのSameSite属性をLaxにする ■ Laxにするとクロスサイトリクエストでcookieは送信されなくなる ○ リファラチェック解決案2(没案)

Slide 29

Slide 29 text

03 苦労した点とその解決策 ● tokenを⽤いず合わせ技で対応 ○ cookieのSameSite属性をLaxにする ■ Laxにするとクロスサイトリクエストでcookieは送信されなくなる ● →しかし、GETだとcookieを送信してしまうのでgiftee マイページAPIでは意味がない ○ リファラチェック ■ →偽造できてしまう解決案2が没になった理由

Slide 30

Slide 30 text

03 苦労した点とその解決策 ● ウェブビュー機能ではなく、フォーム2機能を経由してgifteeマイページへのアクセスを受け付けるようにする ○ CMS(管理画⾯)で以下の設定を⾏うことで実現する i. ウェブビュー機能に「保存されたセッションからmemberを取得して、giftee マイページURLを取得するAPI」を設定する ii. フォーム2で外部API連携に「渡ってきたmember_idをセッションに保存する API」を設定する iii. フォーム2で遷移先のリンクに、iのウェブビュー機能を設定する解決案3(採⽤)

Slide 31

Slide 31 text

03 苦労した点とその解決策解決案3(採⽤) ● このmember_idはdevice_idをもとにDBから取得する値のため信頼できる値 ● 内部システムからしか叩かれないため、信頼できるリクエストである ● そのため、IP制限をかけることができる ● ウェブビュー機能ではなく、フォーム2機能を経由してgifteeマイページへのアクセスを受け付けるようにする ○ CMS(管理画⾯)で以下の設定を⾏うことで実現する i. ウェブビュー機能に「保存されたセッションからmemberを取得して、giftee マイページURLを取得するAPI」を設定する ii. フォーム2で外部API連携に「渡ってきたmember_idをセッションに保存する API」を設定する iii. フォーム2で遷移先のリンクに、iiのウェブビュー機能を設定する CSRF対策

Slide 32

Slide 32 text

03 苦労した点とその解決策フォーム2機能を経由してgifteeマイページへアクセスする

Slide 33

Slide 33 text

CMSの設定について補⾜ 03 苦労した点とその解決策

Slide 34

Slide 34 text

ウェブビュー機能 ● WebViewで表⽰する任意のURLを指定できる ● Yappli CRMのAPI(/giftee/mypage)をURLに設定 03 苦労した点とその解決策

Slide 35

Slide 35 text

フォーム2 - 遷移先フォーム2機能の遷移先にウェブビュー機能で設定したリンクを設定 03 苦労した点とその解決策

Slide 36

Slide 36 text

03 苦労した点とその解決策 ● 外部API連携にYappli CRMのAPI(/prepare_mypage)を設定 ● フォームからPOST時にこのAPIが実⾏されるフォーム2 - 外部API連携

Slide 37

Slide 37 text

03 苦労した点とその解決策フォーム2機能

Slide 38

Slide 38 text

03 苦労した点とその解決策ウェブビュー機能

Slide 39

Slide 39 text

03 苦労した点とその解決策 ● ウェブビュー機能に「保存されたセッションからmemberを取得して、gifteeマイページURLへリダイレクトするAPI」 ● レートリミット対策としてログインURLの情報をRedisへキャッシュ gifteeマイページAPIのソース

Slide 40

Slide 40 text

● フォーム2で外部API連携に設定する「渡ってきたmember_idをセッションに保存するAPI」 03 苦労した点とその解決策 /prepare_mypageのソース

Slide 41

Slide 41 text

まとめ

Slide 42

Slide 42 text

04 まとめ ● プラットフォームなので、それぞれの機能は汎⽤的で柔軟性があるものでなければならない ○ ひとつの機能のために局所的な最適化をすることは保守性を悪くする ○ ⼀度これを許してしまうと、そこから窓割れが発⽣しかねない ● 汎⽤的な機能同⼠をうまく組み合わせて、ひとつの機能をつくっていくのはそれぞれの機能に対して深い理解が求められる ○ その上で全体のアーキテクチャについても理解していなければセキュリティを担保した良い設計ができない ○ 単なる機能ではなく、プロダクト全体の構成を考えた設計が必要プラットフォーム開発の難しさ

Slide 43

Slide 43 text

だからこそ技術的にも⾯⽩い体験ができる 04 まとめ

Slide 44

Slide 44 text

04 まとめ ● 既存の汎⽤的な機能を組み合わせて⼀つの機能をつくっていくためには、柔軟な発想が求められる ● Yappliはアプリプラットフォームという特性上、制約がある ○ 開発の制約がある中で、どうやって設計をしていくか考える⾯⽩さ ○ 利⽤者が制約を受け⼊れてでも利⽤してもらいたいと思ってもらえるには、⼤きなメリットを提供する必要がある ● だからこそ、設計のやりがいがある ○ ヤプリでしか経験できないノーコードプラットフォームとしての仕組み作りは⾯⽩いプラットフォーム開発の面白さ

Slide 45

Slide 45 text

技術的なこと、開発組織のこと興味ある⽅はカジュアル⾯談に是⾮お越しください! 04 まとめ

Slide 46

Slide 46 text

その他のテンプレ

Slide 47

Slide 47 text

要点を⾔いたいときに使うスライドです 00 セクションタイトルを⼊れます

Slide 48

Slide 48 text

Yappliの「改善」はどのようにして進化を歩んだか 04 分析⽤データ基盤刷新の⽅向性

Slide 49

Slide 49 text

● ここに本⽂を⼊⼒します（レベル1） ○ レベル2はこんな感じです ■ レベル3はこんな感じです（リンク） ● アクセント2です ● アクセント3は蛍光ペンで使う想定ですこのページのタイトルを⼊れます 01 Yappli CRMとはアクセント4はこんな感じで使う想定ですアクセント5使⽤例アクセント6使⽤例アクセント6はこんな感じでも使えそうです

Slide 50

Slide 50 text

02 Yappliの開発について - STEP3 改善の説明着⼿途中に何らかの理由で⽌まってしまった 1 ● ⼀番古いチケットで、2018年作成のものもあった ● OS関係のチケットは、最新OSでは解消しているが、チケットは未対応のまま残り続けた ● ⼀番古いチケットで、2018年作成のものもあった

Slide 51

Slide 51 text

02 Yappliの開発について - STEP3 改善の説明タイトル 1 ⽬的フリーテキスト実施⽅法フリーテキスト

Slide 52

Slide 52 text

着⼿途中に何らかの理由で⽌まってしまったチケットが進⾏していない 1 ● ⼀番古いチケットで、2018年作成のものもあった ● OS関係のチケットは、最新OSでは解消しているが、チケットは未対応のまま残り続けた ● ⼀番古いチケットで、2018年作成のものもあった着⼿途中に何らかの理由で⽌まってしまったチケットが進⾏していない 2 ● ⼀番古いチケットで、2018年作成のものもあった ● OS関係のチケットは、最新OSでは解消しているが、チケットは未対応のまま残り続けた ● ⼀番古いチケットで、2018年作成のものもあった 02 Yappliの開発について - STEP3 改善の説明

Slide 53

Slide 53 text

Yappliの「改善」はどのようにして進化を歩んだか STEP 3 02 Yappliの開発について - STEP3 改善の説明

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

以下没スライド安置所

Slide 56

Slide 56 text

gifteeマイページ機能 - 出し分けとは 02 外部システム連携の概要 (シーケンス図で、出し分けの箇所をハイライトしている画像を置く)

Slide 57

Slide 57 text

gifteeマイページ機能 - 出し分けとは 02 外部システム連携の概要 (出し分けについて、コードやCMSのスクショなどをつかって具体的に解説)

Slide 58

Slide 58 text

00 セクションタイトルを⼊れますポイント換算機能 - Yappli CRMポイント→gifteeポイント 4 (ここでポイント換算機能全体のシステム概要図を書く。このスライドでは主にYappli CRM atami-native Audienceサーバーの3つが登場するシーケンス図を書く) この機能は主にフォーム2が絡んでくるので、この後のスライドでフォーム2 機能についてもシーケンス図をハイライトしつスライドを複数枚つかって解説する。)

Slide 59

Slide 59 text

02 外部システム連携の概要⽬的と課題 3 ● CRMポイントがgiftee（for business）でも利⽤可能とすることで「コンテンツ/インセンティブ不⾜」に悩む企業へ価値を提供していく ○ 課題1）UNITEアプリで従業員のエンゲージメントを⾼めるためにポイント（CRMポイント）を発⾏してるが、ポイントの交換先が不⾜してるため上⼿くインセンティブが効いていない ○ 課題2）Y4Mアプリでユーザー向けに発⾏してるポイントの利⽤範囲を、「⾃社サービス以外」にも拡充させることで、⾃社ポイント獲得を促し最終的に⾃社サービスの利⽤率を上げたい

Slide 60

Slide 60 text

　 Yappliとの違いは？ Yappliは、アプリの多様なインターフェースと、それを構築する管理画⾯を、Yappli CRMは、顧客情報管理と、その管理画⾯を提供しています。顧客１⼈１⼈の個⼈情報を取得‧管理し、それを施策に活⽤できるのがYappliCRMです。異なるサービスである事は⼀⽬瞭然ですが、 Yappliでもセグメント（属性情報 ※性別など）を取得、管理する事はできます。ただし、個⼈情報に該当するデータの取得‧管理を不可としています。「顧客ID」単体でも個人情報（個人データ）に該当

Slide 61

Slide 61 text

刷新⽅法 ● データマート作成処理をdbtでリプレイス 04 分析⽤データ基盤刷新の⽅向性「dbt」とは？ ● データの加⼯処理を管理してくれるツール ○ SQLによる加⼯処理のGit管理を可能に ○ データカタログの⾃動⽣成 ○ データのテスト ○ etc… ● 無償CLI版と有償SaaS版がある ○ 弊社では無償CLI版を採⽤ dbt Labs

Slide 62

Slide 62 text

ヤプリが第⼆製品として開発した、顧客管理、ポイント‧電⼦マネーの発⾏、アプリマーケティング施策をワンストップで実現するプロダクト Yappli CRMとは 01 Yappli CRMとは

Slide 63

Slide 63 text

01 Yappli CRMとは従来CRMは導⼊企業様側でご⽤意いただいておりましたが、Yappli導⼊が広がる中、 CRMをお持ちでないケースや、開発済みのCRMがいわゆる「レガシーシステム」となっており、拡張性や保守性に課題を感じているケースが増えていました。この課題を解決するために⽣まれたサービスが、ノーコードでCRMを開始できる「Yappli CRM」です。顧客との強⼒な接点であるアプリとスムーズに連携し、シンプルで使いやすいCRMにすること。また、⼤規模開発が不要になることで導⼊費⽤を抑え、マーケティング担当者が施策実⾏に集中できるスピード感にもこだわりました。「アプリの会社」だからこそ提供できる、新しいCRMです。

Slide 64

Slide 64 text

00 セクションタイトルを⼊れますポイント換算機能 - フォーム2とは 2 (シーケンス図で、フォーム2の利⽤箇所をハイライトしている画像を置く)

Slide 65

Slide 65 text

00 セクションタイトルを⼊れますポイント換算機能 - フォーム2とは 3 (フォーム2の機能概要について、コードやCMSのスクショなどをつかって解説)

Slide 66

Slide 66 text

01 Yappli CRMとは具体的には何ができるの? 3 ヤプリが第⼆製品として開発した、顧客管理、ポイント‧電⼦マネーの発⾏、アプリマーケティング施策をワンストップで実現するプロダクトです。

Slide 67

Slide 67 text

Slide 68

Slide 68 text

02 外部システム連携の概要 giftee Point Base連携‧画⾯イメージ 2 CRMポイントからgifteeポイントへ交換はユーザー側で実施以後、gifteeマイページ内（WebView）でeGiftへの交換などが可能任意のポイント数を入力（ex.5ptをgifteeポイントへ交換） CRMポイントと交換導線を設置（CRM：10pt giftee：0pt） CRMポイントが減算される（CRM：5pt giftee：5pt） gifteeマイページを表示 ※web （eギフト等へ交換が可能）ログイン以下から gifteeマイページへログインしてください。 ※セッション有効期間は24hとなります。最終アクセスから 24h以内であれば本画面はスキップ（セッション切れたら表示） 5 100

Slide 69

Slide 69 text

実装で苦労した点-その1

Slide 70

Slide 70 text

00 セクションタイトルを⼊れますポイント換算機能 1 ● サービスを跨いだトランザクション ○ Yappli CRMポイントを減算後、減算した分のポイントをgifteeポイント付与APIで実⾏するため、トランザクションが1つのサービスに閉じない ■ パフォーマンスのため、なるべく換算処理はバックグラウンドでやりたい ■ しかし、減算処理を⾮同期に⾏うと保有ポイントが不⾜したときにユーザーにフィードバックできない ■ ポイントは財産に該当するため、特にデータ不整合が許されない

Slide 71

Slide 71 text

解決策

Slide 72

Slide 72 text

00 セクションタイトルを⼊れますポイント換算機能 1 ● ジョブの中でポイント付与APIの実⾏に失敗したら、Yappli CRMポイントをリカバリーする処理を⾏う ○ 付与予定だったポイントをリカバリーする処理を⾏うことでロールバック処理を⾏う ● ジョブ実⾏前にポイント減算は同期的に⾏う ○ 先に同期的に減算処理をすることでポイント不⾜時にユーザーへフィードバックでき

Slide 73

Slide 73 text

00 セクションタイトルを⼊れますポイント換算機能 1 (図やコードを⽤いて解説)

Slide 74

Slide 74 text

フォーム2とは 02 外部システム連携の概要 (フォーム2について、コードやCMSのスクショなどをつかって具体的に解説⼊⼒フォームを表⽰し、端末からの回答内容をYappli側に保存する機能。)

Slide 75

Slide 75 text

/prepare_mypageエンドポイント 02 外部システム連携の概要

Slide 76

Slide 76 text

/giftee/mypageエンドポイント 02 外部システム連携の概要

Slide 77

Slide 77 text

謎の不具合の発⽣ 03 実装で苦労した点 ● なぜかAndroidだけフォーム2からgifteeマイページに遷移できない事象が発⽣… ○ ○

Slide 78

Slide 78 text

フォーム2Demo 02 外部システム連携の概要

Slide 79

Slide 79 text

ドット付きのドメインを付与した cookieを返すカスタムミドルウェアをつくりました 04 解決策

Slide 80

Slide 80 text

ドット付きのドメインを付与した cookieを返すカスタムミドルウェアをつくりました 04 解決策

Slide 81

Slide 81 text

04 解決策 (図やコードを用いて解説する。 )