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

<br>
最近は銀行も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<br>※「APIキー発行」のページで取得　| |
| x-btmu-seq-no   | YYYYMMDD-16桁の英数字<br>※多分適当でいいようだ |20200514-tatsuya123456789 |
| Accept    | 利用可能なデータ形式  | application/json     |
| accept     | 利用可能なデータ形式  | application/json     |


##作ったもの

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/MUFG?src=hash&amp;ref_src=twsrc%5Etfw">#MUFG</a> のお試しAPIを使ってみた。（サンプルデータだけど）　<a href="https://t.co/JN8FEokFPH">https://t.co/JN8FEokFPH</a> <a href="https://t.co/6XGWEp9Wew">pic.twitter.com/6XGWEp9Wew</a></p>&mdash; たつや (@tatsuya1970) <a href="https://twitter.com/tatsuya1970/status/1433991442490290180?ref_src=twsrc%5Etfw">September 4, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


##フレームワーク
- 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　はこんな感じ。
![スクリーンショット 2021-09-04 12.51.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/6a59511f-872b-d007-7989-9d9a192cb215.png)

<br>

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