三菱UFJ銀行のサンプルAPIを試してみた #JavaScript

最近は銀行もAPIを公開してます。

正式に使うには厳しい条件・審査があって、個人には無理ですが、試しに使ってみることはできるようです。
ウェブサイトにサンプルコードがのっていたので、三菱UFJ銀行のAPIを使ってみました。
https://developer.portal.bk.mufg.jp/

「利用手順」に書いてあるとおりにすれば、僕のようなド素人でもAPIが使える親切設計です。（ただし、サンプルデータのみです）
https://developer.portal.bk.mufg.jp/start

で、こちらのAPIを使ってみました。
https://developer.portal.bk.mufg.jp/api/retail/accounts_trial_v2

APIキーやパラメータは以下。

	解説	例
x-ibm-client-id	クライアントID ※「APIキー発行」のページで取得
x-btmu-seq-no	YYYYMMDD-16桁の英数字 ※多分適当でいいようだ	20200514-tatsuya123456789
Accept	利用可能なデータ形式	application/json
accept	利用可能なデータ形式	application/json

作ったもの

#MUFG のお試しAPIを使ってみた。（サンプルデータだけど）　https://t.co/JN8FEokFPH pic.twitter.com/6XGWEp9Wew
— たつや (@tatsuya1970) September 4, 2021

フレームワーク

Vue.js
Bootstrap

コード

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>MUFG</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
   </head>

   <body>
     <h1>銀行口座</h1>
     <div id="app">
       <button v-on:click="upCount" type="button" class="btn btn-outline-primary">残高照会</button>
     　<br><br>
     　<h2>
      　　{{ branchName }}
      　　{{ accountTypeName }}
      　　{{ accountNo }}
      　　<br>
      　　{{ balance.toLocaleString() }}円
　　　　</h2>
   　</div> 

    <script>
      const app = new Vue({
        el: '#app',
        data: {
          branchName: '',
          accountTypeName: '',
          accountNo: '',
          balance: ''
        },
        methods: {
          upCount: async function (event) {
            //ボタンがクリックされたら実行
            let response;
            try {
               response = axios({
                  method: 'GET',
                  url: 'https://developer.api.bk.mufg.jp/btmu/retail/trial/v2/me/accounts/',
                  headers: {
                    'X-IBM-Client-Id': 'クライアントID（「APIキー発行」のページで取得）　',
                    'X-BTMU-Seq-No': 'YYYYMMDD-16桁の英数字（多分適当でいいと思う）',
                    Accept: 'application/json',
                    accept: 'application/json'
                  }
               }).then(response => 
                  {
                    console.log(response.data);
                    this.branchName = response.data.accounts[0].branchName;  
                    this.accountTypeName = response.data.accounts[0].accountTypeName; 
                    this.accountNo = response.data.accounts[0].accountNo;   
                    this.balance = response.data.accounts[0].balance; 
                  }
                );
               } catch (error) {
                  console.error(error);
               }
            },
         },
      });
    </script>
  </body>
</html>

JSONデータ

response.data　はこんな感じ。

組み込み型金融（Embedded Finance）でなにかサービス作ろうかなあ。