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

<html><head></head><body>通常、自サイトにSNSなど別サービスの連携を行う場合、OAuthフロー（用意されていれば）を利用して認証することが多いのではないでしょうか。 
ただしその場合、Callback URLとして設定した自サイトのpathにtoken取得などの処理を（多くの場合、サーバーサイドに）実装する必要があります。
KARTE Craftを利用すれば、自サイトの実装を追加することなくCallback処理を実装することができます。
今回はOAuth1.0フローを利用することとなるTwitter APIの認証を例に、Twitter IDを来訪者のユーザーデータに連携する方法をご紹介します。
<h1 id="取得の流れ">取得の流れ</h1>
<ol>
<li>ユーザーがWebサイトにアクセス</li>
<li>Twitter認証を促す接客サービス（リンクscript内でCraft Function(1)のEndpointより取得）が配信される</li>
<li>認証リンクをクリックし、Twitter側で認証</li>
<li>Webサイトにリダイレクトされる</li>
<li>リダイレクトされてきたページで接客サービスが配信される。接客サービスがURLのクエリパラメータに付加されているoauth_tokenとoauth_verifierをCraft Function(2)のEndpointへ送信</li>
<li>Craft Function(2)が認証情報を使ってtwitterのUser Id取得、KARTEへイベント送信</li>
</ol>
<h1 id="TwitterにAppを作成">TwitterにAppを作成</h1>
<a href="https://developer.twitter.com/en/portal/dashboard" target="_blank" rel="noreferrer">Twitter Developer Portal</a>でAppを作成し、consumer api keyとconsumer secretを取得します。 
callback URLは自サイトのKARTEタグの入っているページであればどこでも構いません。
<h1 id="Twitter認証をユーザーに促す">Twitter認証をユーザーに促す</h1>
<img src="https://ik.imagekit.io/plaid/c0e3b69d-733f-4816-b84d-087caa178904/スクリーンショット2023-05-3110.52.47.png" width="300px">
自サイトでTwitter認証を促す接客サービスを配信します。 
この際のリンク先はCraft Functionより取得します。
<h2 id="Craft Functions側の実装">Craft Functions側の実装</h2>
作成したconsumer api keyとconsumer secretをCraft Secretに保存した（以下 <code>TWITTER_CONSUMER_KEY</code> <code>TWITTER_CONSUMER_SECRET</code> ）上で、下記の Craft Functionを設定します
<pre><code class="hljs">import crypto from 'crypto';

const requestUrl = 'https://api.twitter.com/oauth/request_token';
const signatureMethod = 'HMAC-SHA1';
const version = '1.0';

// 署名の作成
function createSignature(consumerKey, consumerSecret, nonce, timestamp){

 const base =
 'POST&amp;' +
 encodeURIComponent(requestUrl) +
 '&amp;' +
 encodeURIComponent(`oauth_consumer_key=${consumerKey}`) +
 encodeURIComponent(`&amp;oauth_nonce=${nonce}`) +
 encodeURIComponent(`&amp;oauth_signature_method=${signatureMethod}`) +
 encodeURIComponent(`&amp;oauth_timestamp=${timestamp}`) +
 encodeURIComponent(`&amp;oauth_version=${version}`);

 return crypto.createHmac('sha1', consumerSecret + '&amp;').update(base).digest('base64');
}

export default async function (data, { MODULES }) {
 const { secret } = MODULES;
 const {TWITTER_CONSUMER_KEY: consumerKey, TWITTER_CONSUMER_SECRET: consumerSecret} = await secret.get({keys: ['TWITTER_CONSUMER_KEY','TWITTER_CONSUMER_SECRET']});

 const nonce = crypto.randomUUID();
 const timestamp = Math.floor(new Date().getTime() / 1000);

 const signature = createSignature(consumerKey, consumerSecret, nonce, timestamp);

 const query_params = new URLSearchParams({
 oauth_consumer_key: consumerKey,
 oauth_nonce: nonce,
 oauth_signature: signature,
 oauth_signature_method: signatureMethod,
 oauth_timestamp: timestamp,
 oauth_version: version,
 }); 

 const ret = await fetch(`${requestUrl}?${query_params}`, { method: 'POST'});
 if(!ret.ok) throw new Error('failed to get oauth url');
 const query = await ret.text();
 return `https://api.twitter.com/oauth/authorize?${query}`;
}
</code></pre>
<h2 id="接客サービス">接客サービス</h2>
下記は接客サービスのサンプルコードです。script部分のみ記載しています。
<pre><code class="language-js hljs">var craftEndPointUrl = 'https://t.karte.io/hook/xxxxxxxxxxx/craft/yyyyyyyyyyyy';

fetch(craftEndPointUrl, {
 method: 'POST'
})
.then(function(res){
 res.text()
 .then(function(text){
 // HTML内で `&lt;a :href="OAuthURL"&gt;&lt;/a&gt; のような形でバインドして利用します
 widget.setVal('OAuthURL', text);
 // 接客サービスの表示はCraft Functionとの通信が完了してから行いましょう
 widget.show();
 })
});
</code></pre>
<h1 id="認証完了後にTwitter側の情報をKARTEに連携">認証完了後にTwitter側の情報をKARTEに連携</h1>
<h2 id="Craft Functions側の実装">Craft Functions側の実装</h2>
まず、Craft Secret ManagerへKARTE Publc APIのtoken（scopeは <code>track.event.write</code> が必要）を保存（以下 <code>KARTE_API_TOKEN</code> ）し、下記Craft Functionを設定します
<pre><code class="hljs">import api from 'api';
const karteApiClient = api('@dev-karte/v1.0#1jvnhd6llgekil84');

const requestUrl = 'https://api.twitter.com/oauth/access_token';

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

 const query_params = new URLSearchParams({
 oauth_token: params.oauth_token,
 oauth_verifier: params.oauth_verifier
 });

 const res = await fetch(`${requestUrl}?${query_params}`, {
 method: 'POST'
 });

 const text = await res.text();
 if(!res.ok) throw new Error(text);

 const twitter_user_id = text.match(/user_id=(\w+)/)[1];
 const twitter_screen_name = text.match(/screen_name=(\w+)/)[1];
 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,
 twitter_user_id,
 twitter_screen_name,
 },
 event_name: 'identify'
 }
 });
}
</code></pre>
<h2 id="接客サービス側の実装">接客サービス側の実装</h2>
そしてApp作成時にCallback URLとして入力したページへ下記接客を配信します。 
scriptのみのテンプレートを利用してください。
<pre><code class="language-js hljs">// 上記Craft FunctionのEndpoint URL
var craftEndPointUrl = 'https://t.karte.io/hook/xxxxxxxxxxx/craft/zzzzzzzzzzzz';

var matchedToken = location.search.match(/oauth_token=([^&amp;]+)/);
var matchedVerifier = location.search.match(/oauth_verifier=([^&amp;]+)/);

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

fetch(craftEndPointUrl, {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json'
 },
 body: JSON.stringify({
 oauth_token: matchedToken[1],
 oauth_verifier: matchedVerifier[1],
 user_id: '#{user_id}',
 })
}).catch(function(e){ console.error(e) });
</code></pre>
これにより、ユーザーデータへtwitterのuser_idを連携することが可能になります。
</body></html>

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