ArcGIS で始める Web マップアプリ開発　OAuth 2.0 認証編

はじめに

この記事は「ArcGIS で始める Web マップアプリ開発」のシリーズ記事として、はじめてWeb マップアプリ開発を行う方に向けて、ArcGIS Maps SDK for JavaScript を使用した Web マップアプリ開発の流れをシリーズで連載しています。

最終回となる今回は、特定の人のみに公開しているようなセキュアなデータを扱う方法を紹介します。

これまでの記事と同様に、ソースコードは ESRIジャパンの GitHub で公開していますので、ご覧ください。

アプリケーションの認証方法

ArcGIS で公開したデータには、誰もが見ることができるよう全体に公開されているデータや、プライベートなデータなど、特定の人のみの間で公開しているデータがあると思います。前回ご紹介した Editor コンポーネントでは全体に公開されているデータの編集でしたので、誰でも編集ができてしまいますが、特定の人のみに編集させたいなど、プライベートなデータを扱うケースも多いと思います。その場合は認証の仕組みを使用してアプリを開発する必要があります。

ArcGIS Location Platform で作成したアプリケーションは、OAuth 2.0 に基づいたいくつかの認証パターンを実装することで、セキュアなコンテンツや ArcGIS Maps SDK for JavaScript で作成したサービスにアクセスすることができます。アプリケーションを認証するために使用できる方法は「API キー認証」、「ユーザー認証」、「アプリ認証」の 3 つの方法が存在します。

ユーザー認証では、アプリを利用するユーザーが ArcGIS Online アカウントを使用してアプリケーションにログインする方法です。

アプリ認証では、アプリケーションが ArcGIS Online で認証を行い、ArcGIS Online アカウントを持たないユーザーでもサービスにアクセスするための認証情報を取得することができます。

以降の手順では、コンポーネント編で作成したアプリケーションに OAuth 2.0 による認証を実装します。今回は、ArcGIS Online のアカウントでサインインして行うユーザー認証の方法をご紹介します。他の記事とは異なり、CodePen を使用することはできず、ローカルでコードを実行する必要がありますのでご注意ください。また、認証パターンやアプリの登録については開発リソース集のセキュリティと認証の紹介も併せてご参照ください。

OAuth 2.0 による認証の実装

１．アプリケーションの登録

アプリの登録の手順に従って、サインインしアプリケーションを登録します。

アプリケーションを登録後、認証の実装に必要な ClientID をコピーしておきます。

２．モジュールの追加

ユーザー認証に必要なPortal、OAuthInfo、IdentityManager の 3 つのモジュールを追加します。

<script type="module">
  const [FeatureLayer, Portal, OAuthInfo, esriId] = await $arcgis.import([
    "@arcgis/core/layers/FeatureLayer",
    "@arcgis/core/portal/Portal.js",
    "@arcgis/core/identity/OAuthInfo.js",
    "@arcgis/core/identity/IdentityManager.js",
  ]);
</script>

３．認証の実装

OAuthInfo クラスの appId に手順の①でアプリを登録した際のClient ID を入力し認証に必要な情報を追加します。popup にはデフォルトでは false に設定されていますが、ture に設定するとポップアップウィンドウにサインインをするページが表示されます。

続いて、IdentityManager クラスの registerOAuthInfos メソッドを用いて認証情報の定義を登録します。

// ポータルのURL
const portalUrl = "https://www.arcgis.com";

const info = new OAuthInfo({
  appId: "xxxx", //アプリケーションの Client ID を入力
  popup: false 
});

esriID.registerOAuthInfos([info]);

IdentityManager クラスの、セキュアなリソースへアクセスするための Credential オブジェクトを取得する getCredential メソッドや Credential オブジェクトの破棄を行う destroyCredentials メソッドを使用して、ArcGIS にサインイン / サインアウトを行う処理を実装します。そして、checkSignInStatus メソッドで取得した認証情報を確認し、編集処理を実行します。

// ArcGIS にサイン イン
document.getElementById('sign-in').addEventListener('click', () => { 
esriID.getCredential(portalUrl);
}, false);

// サイン アウト
document.getElementById('sign-out').addEventListener('click', () => {
  esriID.destroyCredentials();
  window.location.reload();
});

//認証に成功した場合にレイヤーを追加
esriID.checkSignInStatus(portalUrl).then(function() {
  document.getElementById('anonymousPanel').style.display = 'none';
  document.getElementById('personalizedPanel').style.display = 'block';
  adddemoLyr();
});

４．フィーチャレイヤーの追加処理

認証後、editorMap() 関数にPortal クラスの load メソッドでマップを読み込み、フィーチャレイヤーをマップに追加する処理を実装します。

function adddemoLyr() {
  const portal = new Portal();

  // ポータルの読み込み
  portal.load().then(() => {

/************************************************************
 * 省略（フィーチャ レイヤーをマップに追加するコード）
************************************************************/

これで、ArcGIS Online のアカウントでサインインをし、アプリケーションに OAuth 2.0 による認証を実装することができました。全体のコードは ESRIジャパンの GitHub をご参照ください。

まとめ

今回は OAuth 2.0 を用いた認証についてご紹介しました。ArcGIS Maps SDK for JavaScript には今回使用した OAuthInfo や IdentityManager などといった認証に必要なクラスが用意されています。目的に応じてアプリに認証の仕組みを取り入れることができますので、ご活用ください。

また、今回は ArcGIS Online アカウントを用いた「ユーザー認証」を実装しましたが、ArcGIS ユーザーでない方もアプリにアクセスする場合等で特定のアプリをログインなしで認証を行う「アプリ認証」や「API キー認証」といった方法もございますので、開発リソース集のセキュリティと認証の紹介をご参照ください。

さいごに

「ArcGIS で始める Web マップアプリ開発」は本記事で最後となります。地図の作成やレイヤーの表示、検索方法など基本的な要素を紹介してきましたが、API には、マッピングアプリケーションを開発するための豊富な機能が提供されています。

API の Web ヘルプ（英語）には、トピックごとにまとめられたガイドやクラスの詳細を網羅した API リファレンス、コードと一緒に手軽に試せるサンプルコードなど開発に役立つさまざまな情報が提供されています。

また、専門的な用語が多い GIS をわかりやすく解説した GIS 基礎解説も併せてご参照ください。

ArcGIS 開発者コミュニティでは、今後も開発に役立つ情報を提供していく予定ですので、ぜひご覧ください。

ArcGIS で始める Web マップアプリ開発　OAuth 2.0 認証編