【kintone】freeeAPIで取引先を作成するまでの手順(後編)

kintone

kintone_001

はじめに

freeeにはさまざまなAPIが用意されていますが、APIを実装するには認証方式(OAuth)の理解や、アプリケーション環境の準備、認証コード取得、アクセストークン取得など初めての方には覚えることが多く、実現までの敷居がかなり高いです。
この記事ではkintoneを使ってfreeeへ取引先を作成する具体的な手順を説明します。kintoneを使って外部サービス連携をしてみたいが、APIを使ったことがなく分からない方は是非読んでみてください!

この記事は後編です。まだ前編を読んでいない方は先に前編を読んでみてください。

 

9. desktop.js実装

メインの処理となるdesktop.jsファイルの実装をします。流れとしては以下のようにしてAPIを実行しfreeeに取引先を登録します。

  1. 認可コード取得
    レコード一覧画面表示時イベント(app.record.index.show)にボタンを作成する処理をいれ、そのボタンから取得できるようにしています。取得した認可コードはURLのクエリパラメータとして取得しています。
  2. アクセストークン取得
    取得した認可コードを使用してアクセストークンを取得しています。
  3. API実行(freeeに取引先を登録)
    アクセストークンを使用してAPIを実行します。createPartner()関数にRESTAPIの実行処理を記述しています。
jQuery.noConflict();
(function($, PLUGIN_ID) { 
  'use strict';
  const APP_ID = 23;
  const CALLBACK_URL = 'https://' + window.location.hostname + '/k/' + APP_ID + '/';
  kintone.events.on('app.record.index.show', async function(event) {
  const button = document.createElement('button');
  button.innerText = 'アクセストークン取得';
  button.classList.add('kintoneplugin-button-normal');
  button.id = 'getAccessToken';
  kintone.app.getHeaderSpaceElement().appendChild(button);
  button.onclick = function(){
    transitionToAuthCodePages(PLUGIN_ID, CALLBACK_URL); 
  }
  await processAuth(event, CALLBACK_URL, PLUGIN_ID);
    return event;
  });
kintone.events.on('app.record.detail.show', function(event) {
  const record = event.record; const button = document.createElement('button');
  button.innerText = 'freee取引先作成'; button.classList.add('kintoneplugin-button-normal');
  button.id = 'createFreeePartner'; kintone.app.record.getHeaderMenuSpaceElement().appendChild(button);
  button.onclick = async function(){ const accessToken = sessionStorage.getItem('freeeAccessToken');
  const resp = await createPartner(accessToken, { 'company_id': record.事業所ID.value, 'name': record.取引先名.value, 'code': record.取引先コード.value }, PLUGIN_ID);
  if(resp.status ==201){ alert('取引先作成しました。');
  }else{ alert('取引先作成に失敗しました'); } } });
})(jQuery, kintone.$PLUGIN_ID);

function transitionToAuthCodePages(pluginId, callBackUrl) {
  const clientId = kintone.plugin.app.getConfig(pluginId).client_id;

  location.href = 'https://accounts.secure.freee.co.jp/public_api/authorize' +
      '?response_type=code' +
      '&client_id=' + clientId +
      '&redirect_uri=' + encodeURIComponent(callBackUrl) +
      '&state=freee' +
      '&scope=write';
  }

async function processAuth(event, callBackUrl, pluginId) {
  const queryString = location.search;
  let accessToken = sessionStorage.getItem('freeeAccessToken');
  let refreshToken = sessionStorage.getItem('freeeRefreshToken');
  if (queryString.substr(0, 6) === '?code=' && accessToken === null) {
    const authCode = getQueryParam('code');
    if (authCode === null) {
      alert('freeeの認証に失敗しました。担当者にお問い合わせください。');
      return event;
    }

    const headers = {
      'Content-Type': 'application/json'
    };
    const body = {
      'grant_type': 'authorization_code',
      'redirect_uri': callBackUrl,
      'code': authCode
    };
    const respFromTokenEndpoint = await reqAccessToken(headers, body, pluginId);
    const credentials = JSON.parse(respFromTokenEndpoint[0]);
    const status = JSON.parse(respFromTokenEndpoint[1]);

    if (status === 200) {
      accessToken = credentials.access_token;
      refreshToken = credentials.refresh_token;
      alert('freeeの認証処理が完了しました。');
    } else {
      accessToken = 'FAILED!!';
      refreshToken = 'FAILED!!';
    }
    sessionStorage.setItem('freeeAccessToken', accessToken);
    sessionStorage.setItem('freeeRefreshToken', refreshToken);

  }
  return event;
}
async function reqAccessToken(headers, body, pluginId) {
  return kintone.plugin.app.proxy(pluginId, 'https://accounts.secure.freee.co.jp/public_api/token', 'POST', headers, body).then((resp) => {
    return resp;
  });
}

function getQueryParam(key) {
  const value = window.location.href.match(new RegExp('[?&]' + key + '=(.*?)(&|$|#)'));
  if (value == null) return '';
  return decodeURIComponent(value[1]);
}

async function createPartner(act,
  {company_id, name, code} = {}, pluginId) {
  const result = {};
  const header = {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + act,
  };
  const body = {
    'company_id': company_id,
    'name': name
  };
  if (code) body.code = code;

  const requestUrl = '/api/1/partners/';

  return kintone.plugin.app.proxy(pluginId, 'https://api.freee.co.jp' + requestUrl, 'POST', header, body).then((resp)=> {
    result.body = JSON.parse(resp[0]);
    result.status = resp[1];
    return result;
  });
}

 

おわりに

いかがでしたでしょうか。今回は最も基本となるfreeeの取引先の登録でしたが、他にもfreeeAPIを利用すれば売上や勘定科目、品目なども登録、更新、取得、削除ができます。他のAPIも基本となる認証方法は同じなのですぐに使いこなせると思うのでfreeeのAPIリファレンスを読んで実装してみてみてください。

 

kintoneアプリ開発のご依頼は株式会社Crenaへ

会社名 株式会社Crena(クレナ)
TEL 043-388-8819
設立 2020年8月
代表取締役 平野 賢太郎 (Hirano Kentaro)
事業内容

クラウドソリューション事業

システム開発事業

ビジネスソリューション事業

URL https://create-new-air.com/

投稿者プロフィール

Kent
Kent
ケントです。大学卒業後、キヤノンでエンジニアとして7年働いた後、会社立ち上げから参画。現在はCrenaにフルコミットしています。
ラーメン、コーヒー、ガジェット、そしてプログラミングが好きな30歳。最近Notionにどハマリ中。

関連記事