arcgis-authentication

ArcGIS 認証

認証、OAuth、API キー、ID 管理を実装する際に、このスキルを使用してください。

インポートパターン

ESM の直接インポート

import OAuthInfo from "@arcgis/core/identity/OAuthInfo.js";
import esriId from "@arcgis/core/identity/IdentityManager.js";
import Portal from "@arcgis/core/portal/Portal.js";
import esriConfig from "@arcgis/core/config.js";

動的インポート（CDN）

const OAuthInfo = await $arcgis.import("@arcgis/core/identity/OAuthInfo.js");
const esriId = await $arcgis.import("@arcgis/core/identity/IdentityManager.js");
const Portal = await $arcgis.import("@arcgis/core/portal/Portal.js");

API キー

最も簡単な認証方法です。すべての SDK リクエストに対して一度設定します。

API キーを設定する

import esriConfig from "@arcgis/core/config.js";

esriConfig.apiKey = "YOUR_API_KEY";

// Now basemaps and services will use the API key
const map = new Map({
  basemap: "arcgis/streets",
});

HTML での API キー（CDN）

<script src="https://js.arcgis.com/5.0/"></script>
<script>
  $arcgis.config.apiKey = "YOUR_API_KEY";
</script>

OAuth 2.0 認証

基本的な OAuth の設定

import OAuthInfo from "@arcgis/core/identity/OAuthInfo.js";
import esriId from "@arcgis/core/identity/IdentityManager.js";

const oauthInfo = new OAuthInfo({
  appId: "YOUR_APP_ID",
  popup: false, // false = redirect, true = popup window
});

esriId.registerOAuthInfos([oauthInfo]);

サインイン状態を確認する

async function checkSignIn() {
  try {
    await esriId.checkSignInStatus(oauthInfo.portalUrl + "/sharing");
    const portal = new Portal({ authMode: "immediate" });
    await portal.load();
    console.log("Signed in as:", portal.user.username);
    return portal;
  } catch {
    console.log("Not signed in");
    return null;
  }
}

サインインする

async function signIn() {
  try {
    const credential = await esriId.getCredential(
      oauthInfo.portalUrl + "/sharing",
    );
    return credential;
  } catch (error) {
    console.error("Sign in failed:", error);
  }
}

サインアウトする

function signOut() {
  esriId.destroyCredentials();
  window.location.reload();
}

OAuth フローを完了する

import OAuthInfo from "@arcgis/core/identity/OAuthInfo.js";
import esriId from "@arcgis/core/identity/IdentityManager.js";
import Portal from "@arcgis/core/portal/Portal.js";

const oauthInfo = new OAuthInfo({ appId: "YOUR_APP_ID" });
esriId.registerOAuthInfos([oauthInfo]);

// Check if already signed in
esriId
  .checkSignInStatus(oauthInfo.portalUrl + "/sharing")
  .then(() => {
    const portal = new Portal({ authMode: "immediate" });
    return portal.load();
  })
  .then((portal) => {
    console.log("Welcome,", portal.user.fullName);
    displayUserContent(portal);
  })
  .catch(() => {
    showSignInButton();
  });

function showSignInButton() {
  document.getElementById("signInBtn").onclick = () => {
    esriId
      .getCredential(oauthInfo.portalUrl + "/sharing")
      .then(() => window.location.reload());
  };
}

エンタープライズポータル認証

エンタープライズポータル向けに設定する

const oauthInfo = new OAuthInfo({
  appId: "YOUR_APP_ID",
  portalUrl: "https://your-portal.com/portal",
  popup: true,
});

esriId.registerOAuthInfos([oauthInfo]);

ポータル URL をグローバルに設定する

import esriConfig from "@arcgis/core/config.js";

esriConfig.portalUrl = "https://your-portal.com/portal";

トークンベース認証

トークンを登録する

esriId.registerToken({
  server: "https://services.arcgis.com/",
  token: "YOUR_TOKEN",
});

トークンを手動で取得する

const credential = await esriId.getCredential(
  "https://services.arcgis.com/...",
);
console.log("Token:", credential.token);
console.log("Expires:", new Date(credential.expires));

ポータルユーザー情報

import Portal from "@arcgis/core/portal/Portal.js";

const portal = new Portal({ authMode: "immediate" });
await portal.load();

console.log("Username:", portal.user.username);
console.log("Full name:", portal.user.fullName);
console.log("Email:", portal.user.email);
console.log("Role:", portal.user.role);
console.log("Thumbnail:", portal.user.thumbnailUrl);
console.log("Org name:", portal.name);
console.log("Org ID:", portal.id);

ユーザーアイテムをクエリする

import PortalQueryParams from "@arcgis/core/portal/PortalQueryParams.js";

const queryParams = new PortalQueryParams({
  query: `owner:${portal.user.username}`,
  sortField: "modified",
  sortOrder: "desc",
  num: 20,
});

const result = await portal.queryItems(queryParams);
result.results.forEach((item) => {
  console.log(item.title, item.type, item.id);
});

認証情報の永続化

// Clear all stored credentials
esriId.destroyCredentials();

// Find a specific credential
const credential = esriId.findCredential("https://services.arcgis.com/...");

信頼済みサーバー

import esriConfig from "@arcgis/core/config.js";

esriConfig.request.trustedServers.push("https://services.arcgis.com");
esriConfig.request.trustedServers.push("https://your-server.com");

CORS とプロキシ

import esriConfig from "@arcgis/core/config.js";

// Configure proxy for cross-origin requests
esriConfig.request.proxyUrl = "/proxy/";

// Configure proxy rules
esriConfig.request.proxyRules.push({
  urlPrefix: "https://services.arcgis.com",
  proxyUrl: "/proxy/",
});

よくある落とし穴

1. アプリ ID のリダイレクト URI：App ID には、developers.arcgis.com で正しいリダイレクト URI を登録する必要があります。URI が一致しないと、認証は通知なしに失敗します。

2. モバイルでのポップアップブロッカー：ポップアップを使用する OAuth のサインインは、モバイルブラウザーでは失敗します。

   // Anti-pattern: using popup flow on mobile
   const oauthInfo = new OAuthInfo({
     appId: "YOUR_APP_ID",
     popup: true, // Blocked by most mobile browsers
   });
   

   // Correct: use redirect flow for mobile
   const isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);
   const oauthInfo = new OAuthInfo({
     appId: "YOUR_APP_ID",
     popup: !isMobile,
   });
   

3. ポータル URL の末尾のスラッシュ：ポータル URL の末尾にスラッシュがあると、トークンの検証に失敗します。

   // Anti-pattern
   const portal = new Portal({
     url: "https://myorg.maps.arcgis.com/", // Trailing slash
   });
   
   // Correct
   const portal = new Portal({
     url: "https://myorg.maps.arcgis.com", // No trailing slash
   });
   

4. トークンの有効期限切れ：トークンには有効期限があります。更新または再認証を適切に処理してください。

5. CORS エラー：ArcGIS 以外のサーバーへのクロスオリジンリクエストには、信頼済みサーバーを設定するか、プロキシを使用してください。

リクエストインターセプター

import esriConfig from "@arcgis/core/config.js";

esriConfig.request.interceptors.push({
  urls: "https://services.arcgis.com",
  before: (params) => {
    // Add custom headers or modify request
    console.log("Request to:", params.url);
  },
  after: (response) => {
    // Process response
    console.log("Response status:", response.httpStatus);
  },
  error: (error) => {
    console.error("Request failed:", error);
  },
});

参考サンプル

• identity-oauth-basic - 基本的な OAuth 2.0 認証の設定
• identity-oauth-component - OAuth コンポーネントベースの認証
• basemaps-portal - ベースマップ用の認証済みポータルアクセス
• webmap-save - マップの保存（認証が必要）

関連スキル

• ポータルアイテム、WebMaps、WebScenes の管理については、arcgis-portal-content を参照してください。
• 認証が必要なプレミアム REST サービスについては、arcgis-rest-services を参照してください。
• 認証設定を含むアプリのひな形作成については、arcgis-starter-app を参照してください。