KARTE CraftとGoogle Calendarを使ってKARTEの接客配信スケジュールを拡張しよう

<html><head></head><body>通常、自サイトにSNSなど別サービスの連携を行う場合、OAuthフロー（用意されていれば）を利用して認証することが多いのではないでしょうか。 
ただしその場合、Callback URLとして設定した自サイトのpathにtoken取得などの処理を（多くの場合、サーバーサイドに）実装する必要があります。
KARTE Craftを利用すれば、自サイトの実装を追加することなくCallback処理を実装することができます。
今回はOAuth2.0フローを利用することとなるInstagram APIの認証を例に、Instagram IDを来訪者のユーザーデータに連携する方法をご紹介します。
<h1 id="処理の流れ">処理の流れ</h1>
<ol>
<li>ユーザーがWebサイトにアクセス</li>
<li>Instagram認証を促す接客サービスが配信される</li>
<li>認証リンクをクリックし、Instagram側で認証をする</li>
<li>自サイトにリダイレクトされる</li>
<li>リダイレクトされてきたページで接客サービスが配信される。接客サービスがURLのクエリパラメータに渡ってくるcodeCraft FunctionのEndpointへ送信する。</li>
<li>Craft Functionsが認証情報を使って<a href="https://developers.facebook.com/docs/instagram-basic-display-api?locale=ja_JP" target="_blank" rel="noreferrer">Instagram 基本表示API</a>にてUser Id取得、KARTEへイベント送信する</li>
</ol>
<h1 id="Appの作成">Appの作成</h1>
<a href="https://developers.facebook.com/" target="_blank" rel="noreferrer">Meta for developers</a>にて、Facebookアプリを作成してください。 
参考：https://developers.facebook.com/docs/instagram-basic-display-api/getting-started 
コールバックURLは自サイトのKARTEタグが埋め込まれているページならどこでもかまいません
<h1 id="Instagram認証を促す接客サービス">Instagram認証を促す接客サービス</h1>
リンク先を下記に設定したポップアップ接客サービスを配信します。 
<code>{app-id}</code> <code>{redirect-uri}</code>はそれぞれ上記で作成・入力したものに置き換えてください。
<code> https://api.instagram.com/oauth/authorize ?client_id={app-id} &amp;redirect_uri={redirect-uri} &amp;scope=user_profile &amp;response_type=code</code>
<h1 id="Callback URLのページで発火する接客サービス・Craft Function">Callback URLのページで発火する接客サービス・Craft Function</h1>
<h2 id="Craft Function側の実装">Craft Function側の実装</h2>
<ul>
<li>Meta管理画面で作成したapp-id, secretをCraft Secret Managerに登録 (下記 <code>INSTAGRAM_APP_ID</code>, <code>INSTAGRAM_APP_SECRET</code> ）</li>
<li>KARTE Public APIのToken( scopeは <code>track.event.write</code>が必要）を登録（下記<code>KARTE_API_TOKEN</code>）</li>
</ul>
した上で、下記のCraft Functionsを作成します。 
<code>{{redirect-uri}}</code>はMeta管理画面で入力したものに置き換えてください。
<pre><code class="language-js hljs">import api from 'api';
const karteApiClient = api('@dev-karte/v1.0#1jvnhd6llgekil84');

const requestUrl = 'https://api.instagram.com/oauth/access_token';
const redirect_uri = '{{redirect-uri}}';

export default async function (data, { MODULES }) {
 const { logger, secret } = MODULES;
 // {
 // code: 'XXXXXXXXXXXXXXXXXXXXX',
 // user_id: 'ZZZ',
 // }
 const params = data.jsonPayload.data.hook_data.body;

 const { INSTAGRAM_APP_ID, INSTAGRAM_APP_SECRET } = await secret.get({keys: ['INSTAGRAM_APP_ID', 'INSTAGRAM_APP_SECRET']});
 const fd = new FormData();
 fd.append('code', params.code);
 fd.append('client_id', INSTAGRAM_APP_ID);
 fd.append('client_secret', INSTAGRAM_APP_SECRET);
 fd.append('grant_type', 'authorization_code');
 fd.append('redirect_uri', redirect_uri);

 const res = await fetch(requestUrl, {
 method: 'POST',
 body: fd,
 });

 if(!res.ok) throw new Error(await res.text());
 const body = await res.json();
 const instagram_user_id = body.user_id;
 const { KARTE_API_TOKEN } = await secret.get({keys: ['KARTE_API_TOKEN']});

 karteApiClient.auth(KARTE_API_TOKEN);
 await karteApiClient.postV2TrackEventWrite({
 keys: {user_id: params.user_id},
 event: {
 values: {
 user_id: params.user_id,
 instagram_user_id,
 },
 event_name: 'identify'
 }
 });
}
</code></pre>
<h1 id="接客サービス側の実装">接客サービス側の実装</h1>
App作成時にCallback URLとして入力したページへ下記接客サービスを配信します。 
HTML,CSSは必要ありません。scriptのみのテンプレートを利用してください。
<pre><code class="language-js hljs">// 上記Craft FunctionsのEndpoint URL
var craftEndPointUrl = 'https://t.karte.io/hook/xxxxxx/craft/yyyyyyy';
var matchedCode = location.search.match(/code=([^&amp;]+)/);

if(!matchedCode || !matchedCode[1] ) throw new Error('Invalid query');

fetch(craftEndPointUrl, {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json'
 },
 body: JSON.stringify({
 code: matchedCode[1],
 user_id: '#{user_id}',
 })
}).catch(function(e){ console.error(e) });
</code></pre>
これにより、Instagram User IdをKARTEへユーザーデータとして連携することができます。
</body></html>

OAuth2.0フローで取得できるIDをKARTE CraftでKARTEユーザーデータに連携する（Instagramを例に）