OAuth2.0認証での利用手順

JavaScript APIをOAuth2.0認証で利用する場合は下記注意事項をご理解の上、ご利用いただきますようお願いいたします。

・APIキーと、client_id, client_secret を利用してリクエストできるため、当該情報が窃取されると悪用されPVが増加する可能性があります。
・client_id, client_secret の不正利用について、当社は保証できません。
・ご利用者の責任において、client_id, client_secret は安全な場所に保管しご利用ください。

ソースコードと解説

OAuth2.0認証を用いて地図描画する手順とサンプルコードです。

トークン取得
OAuth2.0認証トークン取得APIを利用してサーバー側でトークンを取得します。
OAuth2.0認証では、サーバー間の認証方式を採用しており、秘密鍵はお客様で保護できるサーバーで管理いただく前提の仕組みとなっております。
秘密鍵が漏洩するリスクを防ぐため、クライアント側ではなくサーバー側でトークンを取得してください。

※トークンの有効期限は1時間です。
クライアントとトークンの関連付けはお客様にて実施してください。
maps_loaderの呼び出し、JavaScript APIを取得
maps_loaderを呼び出す際には、ヘッダーにトークンを設定します。
呼出し後、地図オブジェクトの生成が可能な状態になるとreadyイベントが発行されます。
3以降の処理は、readyイベント以降に実施する必要があります。

サンプルコード(JavaScript)
```
fetch('https://{DOMAIN}/maps_loader', { headers: { 'x-api-key': '[APIキー]' , 'authorization': '[トークンタイプ]' + ' ' + '[アクセストークン]' } })
```
```
ZisAuth.addEventListener('ready', (e) => {
  // 任意の処理（3以降の処理など）
})
```
サンプルコード中 {DOMAIN} は
API動作環境のWebAPIドメインを指定してください。
地図クラスの初期化準備（オプション情報オブジェクトの取得）
ZisAuthクラスのgetMapOption()で地図オプションを取得します。

サンプルコード(JavaScript)
```
const mapOptions = ZisAuth.getMapOption();
```
地図クラスの初期化
取得した地図オプションを利用（必要に応じて変更）し、地図クラスの初期化（地図表示）をします。

サンプルコード(JavaScript)
```
map = new ZDC.Map(
  document.getElementById('地図を設定するためのdiv要素のID'),
  mapOptions,
  function () {
    // 成功時のコールバック
  },
  function () {
    // 失敗時のコールバック
  }
);
```
以降は、実装したい機能に合わせた地図クラスの利用をしてください。

トークンの有効期限切れへの対応（考慮）

トークンには有効期限があります。
有効期限が切れた場合は、1~4の処理が再度必要になります。

サンプルコード(HTML)

トークンはクライアントごとに発行される前提のサンプルとなります。
トークンは1時間で有効期限が切れるため、一時間ごとにページをリロードしています。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
  function getAccessToken() {
    // トークンを取得
    // 秘密鍵が漏洩するリスクを防ぐため、クライアント側ではなくサーバー側でトークンを取得してください。
    return '[アクセストークン]'
  }
  
  function drawMap (mapOptions, error) {
    if (error) {
      console.error(error);
      return;
    }

    // ★描画用設定値
    // 中心点の緯度経度を設定
    // 東京駅
    const lat = 35.681406, lng = 139.767132;
    mapOptions.center = new ZDC.LatLng(lat, lng);
    // マップタイプ指定
    mapOptions.zipsMapType = 'kP8KjZdn';

    // 地図を生成
    map = new ZDC.Map(
      document.getElementById('ZMap'),
      mapOptions,
      function () {
        // Success callback
      },
      function () {
        // Failure callback
      }
    );
  }
  
  getAccessToken().then(() => {
    window.LoaderSample = new (class LoaderSample {
      constructor () {
        this.onLoad = null;
        this.eventCache = null;
      }

      loadScript () {
        // maps_loaderへリクエスト
        // webAPIのドメインを使用し、APIキーと取得したtoken_typeとaccess_tokenをヘッダーに設定する
        fetch('https://{DOMAIN}/maps_loader', { headers: { 'x-api-key': '[APIキー]' , 'authorization': '[トークンタイプ]' + ' ' + '[アクセストークン]' } })
          .then(function (response) {
            if (response.ok) {
              return response.text();
            } else {
              throw new Error('ローダー取得エラー');
            }
          })
          .then(response => {
            const oScript = document.createElement('script');
            oScript.type = 'text/javascript';
            oScript.text = response;
            const h = document.getElementsByTagName('head');
            h[0].appendChild(oScript);
            // ZisAuthのイベント設定
            this.addMapLoaderEvent();
          })
          .catch(error => {
            this.exeOnLoadCallback(null, error);
          })
      }

      addMapLoaderEvent () {
        ZisAuth.addEventListener('ready', (e) => {
          // マップオプションをデフォルト値から変更する
          const mapOptions = ZisAuth.getMapOption();
          this.exeOnLoadCallback(mapOptions, null);
        })
        ZisAuth.addEventListener('failed', (e) => {
          this.exeOnLoadCallback(null, e);
        })
      }

      exeOnLoadCallback (mapOptions, error) {
        if (this.onLoad) {
          this.onLoad(mapOptions, error);
        } else {
          // スクリプトのロードが完了したあとでコールバックが設定された場合への対応
          // コールバックが設定されていなければ設定されるまで一時保存
          this.eventCache = { mapOptions: mapOptions, error: error };
        }
      }

      setOnLoad (callback) {
        this.onLoad = callback;
        // すでにロードが完了している場合は一時保存されているデータを元にコールバック実行
        if (this.eventCache) {
          this.onLoad(this.eventCache.mapOptions, this.eventCache.error);
        }
      }
    })()

    window.LoaderSample.loadScript();

    // トークンの有効期限が切れたら強制的にリロードする
    setTimeout('location.reload()', [有効期限]);

  }).then(result => {
    let scriptElement = document.createElement('script');
    scriptElement.type = 'text/javascript';
    scriptElement.text = `LoaderSample.setOnLoad(drawMap)`;
    document.head.appendChild(scriptElement);
  });
</script>
</head>
<body>
  <div id="ZMap" style="position: relative; max-width: calc(510px * 16 / 9); height:510px; border:1px solid #777777;"></div>
</body>
</html>