はじめに
この記事では ZENRIN Maps API を利用する際の認証方式の1つであるOAuth2.0認証の仕組みと利用方法について説明します。
OAuth2.0とは
OAuth(オーオース)2.0とは利用者が認証された後に、特定のリソースやデータへのアクセスを許可するフレームワークです。この仕組みにより、利用者は自分の登録情報を第三者に公開することなく、他のサービスに権限を与えることができます。
例）アプリケーションAの新規アカウント作成時に「Googleでログイン」ボタンをクリックして、Googleのアカウント情報でAのサービスを利用する
OAuth2.0認証で地図描画する
ZENRIN Maps API でも認証方式の1つにOAuth2.0認証を採用しています。以下は実際にOAuth2.0認証でJavaScript APIを利用して地図描画を行うフローです。
＜前提条件＞
１．コンソールから認証方式にOAuth2.0を設定
詳しい設定方法は以下の記事を参考にしてください。
２．コンソールからclient_idとclient_secretを取得してサーバ上に配置
2-1. コンソールにログイン
2-2.「チャネル設定」押下後に表示される画面から「詳細」ボタンを押下
2-3.「OAuth2.0」タブ押下後に表示されるclient_idとclient_secretを取得
2-4. サーバ上にclient_idとclient_secretを配置
※ 漏洩するリスクを防ぐため、クライアント側ではなくサーバー側に配置してください
＜地図描画までのフロー＞
① クライアント側からアクセストークンを取得するリクエストをバックエンドサーバに送信する
② コンソールから取得したclient_idとclient_secretを指定してOAuth2.0認証トークン取得APIを呼び出す
const clientId = '<client_id>';
const clientSecret = '<client_secret>';
const tokenUrl = 'https://{DOMAIN}/oauth2/token';
async function getAccessToken() {
// クライアントID,クライアントシークレットをBase64Encodeする
const credentials = Buffer.from(`${clientId}:${clientSecret}`).toString('base64');
const headers = {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': `Basic ${credentials}`
};
const body = new URLSearchParams({ grant_type: 'client_credentials' });
try {
const response = await fetch(tokenUrl, {
method: 'POST',
headers,
body
});
const data = await response.text();
return data;
} catch (error) {
throw new Error('アクセストークン取得エラー');
}
}
getAccessToken();
③ リクエストヘッダーに指定されたクライアントIDとクライアントシークレットから利用者の認証を行い、呼びだし元にアクセストークンを返却する
response:{
"access_token":"トークン文字列",
"token_type":"トークンのタイプ",
"expires_in":トークンの存続時間(秒)
}
④ クライアント側にアクセストークンを設定してレスポンスを返却
⑤ リクエストヘッダーに取得したアクセストークンを設定してmaps_loaderを呼び出す
// maps_loaderへリクエスト
loadScript () {
const loaderUrl = 'https://{DOMAIN}/maps_loader';
const apiKey = '<APIキー>';
fetch(loaderUrl, { headers: { 'x-api-key': apiKey, 'authorization': '<token_type>' + ' ' + '<access_token>' } })
.then(function (response) {
if (response.ok) {
return response.text();
} else {
throw new Error('ローダー取得エラー');
}
})
}
⑥ maps_loaderを取得する
⑦ maps_loaderを呼び出して取得したjsスクリプト（ZisAuth）から地図オプションの取得を行う
// maps_loaderへリクエスト
loadScript () {
const loaderUrl = 'https://{DOMAIN}/maps_loader';
const apiKey = '<APIキー>';
fetch(loaderUrl, { headers: { 'x-api-key': apiKey, 'authorization': '<token_type>' + ' ' + '<access_token>' } })
.then(function (response) {
if (response.ok) {
return response.text();
} else {
throw new Error('ローダー取得エラー');
}
})
.then(response => {
// jsスクリプトの読み込み
const oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.text = response;
const h = document.getElementsByTagName('head');
h[0].appendChild(oScript);
this.addMapLoaderEvent();
})
.catch(error => {
this.exeOnLoadCallback(null, error);
})
}
addMapLoaderEvent () {
// 地図オブジェクトの生成が可能な状態になるとreadyイベントが発行される
ZisAuth.addEventListener('ready', (e) => {
// 地図オプションを取得
const mapOptions = ZisAuth.getMapOption();
this.exeOnLoadCallback(mapOptions, null);
})
ZisAuth.addEventListener('failed', (e) => {
this.exeOnLoadCallback(null, e);
})
}
⑧ 取得した地図オプションを利用して地図クラスの初期化（地図表示）を行う
function drawMap (mapOptions, error) {
if (error) {
return;
}
// 描画したい場合の中心点の緯度経度を設定
const lat = <中心点の緯度>, lng = <中心点の経度>;
mapOptions.center = new ZDC.LatLng(lat, lng);
// マップタイプ指定
mapOptions.zipsMapType = '<maptype>';
// 地図を生成
map = new ZDC.Map(
document.getElementById('地図を設定するためのdiv要素のID'),
mapOptions,
function () {
// 成功時のコールバック
},
function () {
// 失敗時のコールバック
}
);
}
補足：トークンの有効期限切れへの対応
トークンの有効期限は1時間です。
有効期限が切れた場合は、上記の処理が再度必要になるため考慮が必要です。
setTimeout(() => location.reload(), トークンの有効期限);
おわりに
本記事では ZENRIN Maps API をOAuth2.0認証で利用する際の仕組みと手順についてご紹介しました。API実行時の認証方式にはIP・リファラ・OAuth2.0の3種類があるため、APIリファレンスを参照の上利用用途に合わせてご活用ください。
また、2か月無料でご利用いただけるお試しIDも提供していますので、ぜひご活用ください。
ZENRIN Maps API ２か月無料お試しID お申込みフォーム