自社プロダクトへの組み込み

概要

Anyflow SDKを使うことで、自社プロダクト上でAnyflow Embedのウィザードを表示・操作することができます。

Sales Marker のサービスに Anyflow Embed のウィザードを表示した様子

組み込みの2ステップ

Anyflow SDKを組み込むためには、大きく分けて２つのステップが存在します。

1. [バックエンド] JWT発行エンドポイントの実装

Anyflowのウィザードでは、エンドユーザーごとに認証情報やソリューションの設定内容が区別される必要があります。

エンドユーザーは自社プロダクトが指定したIDにより区別されます。

Anyflowでは、自社プロダクトとAnyflowの間でセキュアにID等のやり取りを行う方法として、JWTを使っています。

JWTのペイロードに、自社プロダクトのユーザーIDを指定いただくことで、Anyflowはユーザーの区別を行います。（詳細は JWTを生成する を参照してください）

このJWTをAnyflow SDK（フロントエンド）から取得できるように、サーバーのエンドポイントを実装してください。

2. [フロントエンド] Anyflow SDKの実装

Anyflow SDKを使うには初期化が必要です。

const fetchJwt = async () => {
  const res = await fetch("./path/to/your/jwt/endpoint")
  const json = await res.json()
  return json["token"]
}

AnyflowSDK.init(fetchJwt)

init関数の引数としてJWT発行の処理を渡すことで、Anyflow SDKが初期化されます。

ヒント

SDK組み込みツアーも参考にしてください。

シーケンス図

Anyflow SDKとベンダープロダクトのシーケンス図