表示されているのは Looker のドキュメントです。Looker Studio のドキュメントについては、https://support.google.com/looker-studio をご覧ください。

OAuth を使用した Looker API 認証

Looker では、OAuth を使用して、OAuth クライアントアプリケーションが実行されているブラウザにクライアント ID とクライアントシークレットを公開することなく、OAuth クライアントアプリケーションを Looker API に対して認証できるようにします。

OAuth を使用するウェブアプリケーションは、次の要件を満たしている必要があります。

OAuth による認証は、Looker API 4.0 でのみ使用できます。
アプリケーションのユーザーが Looker で認証できるようにするには、まず API を使用して OAuth クライアントアプリケーションを Looker に登録する必要があります。
クライアントアプリケーションは、Looker API へのすべてのリクエストで HTTPS を使用する必要があります。ブラウザが提供する SubtleCrypto API を使用するクライアントアプリケーションは、HTTPS でホストされている必要があります。

Looker API の CORS サポート

Looker API は、ブラウザ内とオリジン間での呼び出しを、クロスオリジンリソースシェアリング（CORS）プロトコルを使用してサポートしています。Looker の CORS サポートには、次の要件があります。

CORS を使用して API を呼び出せるのは、埋め込みドメインの許可リストに登録されているオリジンのみです。
CORS を使用して Looker API を呼び出すには、OAuth から取得したアクセストークン、または /login API エンドポイントの呼び出しから取得したアクセストークンのみを使用できます。

/login API エンドポイントは、CORS リクエストを使用して呼び出すことはできません。CORS リクエストを使用して Looker API を呼び出すクライアントアプリケーションでは、OAuth を使用したユーザーログインの実行で説明されている OAuth ログインプロセスを使用するか、アプリケーションサーバーまたは CORS 以外の API 呼び出しからトークンを取得する必要があります。

OAuth 認証の概要

OAuth 認証プロセスの概要は次のとおりです。

Looker API に OAuth クライアントアプリケーションを登録します。
OAuth クライアントアプリケーションの送信元を、コード交換 API 呼び出しと後続の CORS API 呼び出しのために埋め込みドメインの許可リストに追加します。
OAuth クライアントアプリケーションがユーザーを認証しようとしたときに、Looker UI ホスト名（Looker API ホスト名ではない）のブラウザエンドポイントを /auth エンドポイントにリダイレクトします。例: https://instance_name.looker.com
ユーザーが正常に認証され、Looker にログインすると、Looker はすぐに OAuth クライアントアプリケーションへの OAuth リダイレクトを返します。ユーザーがデバイスとブラウザで Looker にまだログインしていない場合は、Looker のログイン画面が表示され、ユーザーは通常の認証プロトコルを使用して Looker ユーザーアカウントにログインするよう求められます。
OAuth リダイレクトで返された認証コードを使用して、OAuth クライアントアプリケーションが次に Looker API ホスト名（https://instance_name.looker.com:19999 など）の /token エンドポイントを呼び出す必要があります。API ホスト名は、Looker UI のホスト名と同じでも異なる場合があります。/token エンドポイントは Looker API ホストにのみ存在し、/auth エンドポイントは Looker UI ホストにのみ存在します。
/token エンドポイントに渡された認可コードが有効な場合、Looker は OAuth クライアントアプリケーションのドメインからの CORS API リクエストに対して有効になっている API access_token を返します。

OAuth クライアントアプリケーションの登録

OAuth を使用して Looker API への認証を試みるすべての OAuth クライアントアプリケーションは、Looker がアクセスを承認する前に、Looker インスタンスにまず登録する必要があります。OAuth クライアントアプリケーションを登録するには:

Looker インスタンスで API Explorer を開きます。
バージョンプルダウンメニューを使用して、API の 4.0 - 安定バージョンを選択します。
[認証] メソッドで、register_oauth_client_app() API エンドポイントを見つけます。[検索] フィールドで「oauth app」を検索することもできます。register_oauth_client_app() を使用して、OAuth クライアントアプリケーションを Looker に登録できます。[Run It] ボタンをクリックし、API Explorer にパラメータを入力して、もう一度 [Run It] をクリックして OAuth クライアントアプリケーションを登録するか、register_oauth_client_app() API エンドポイントをプログラムで使用します。必須の register_oauth_client_app() パラメータは次のとおりです。
- client_guid: アプリケーション用のグローバルに一意の ID
- redirect_uri: アプリケーションが認可コードを含む OAuth リダイレクトを受け取る URI
- display_name: アプリケーションのユーザーに表示されるアプリケーションの名前
- description: ユーザーがアプリケーションから最初にログインしたときに、開示ページと確認ページでユーザーに表示されるアプリケーションの説明
client_guid パラメータと redirect_uri パラメータの値は、OAuth クライアントアプリケーションが提供する値と完全に一致する必要があります。そうでない場合、認証は拒否されます。

OAuth を使用してユーザーログインを実行する

UI ホストの /auth エンドポイントにユーザーを誘導します。次に例を示します。
```
async function oauth_login() {
  const code_verifier = secure_random(32)
  const code_challenge = await sha256_hash(code_verifier)
  const params = {
    response_type: 'code',
    client_id: '123456',
    redirect_uri: 'https://mywebapp.com:3000/authenticated',
    scope: 'cors_api',
    state: '1235813',
    code_challenge_method: 'S256',
    code_challenge: code_challenge,
  }
  const url = `${base_url}?${new URLSearchParams(params).toString()}` // Replace base_url with your full Looker instance's UI host URL, plus the `/auth` endpoint.
  log(url)

  // Stash the code verifier we created in sessionStorage, which
  // will survive page loads caused by login redirects
  // The code verifier value is needed after the login redirect
  // to redeem the auth_code received for an access_token
  //
  sessionStorage.setItem('code_verifier', code_verifier)

  document.location = url
}

function array_to_hex(array) {
  return Array.from(array).map(b => b.toString(16).padStart(2,'0')).join('')
}

function secure_random(byte_count) {
  const array = new Uint8Array(byte_count);
  crypto.getRandomValues(array);
  return array_to_hex(array)
}

async function sha256_hash(message) {
  const msgUint8 = new TextEncoder().encode(message)
  const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8)
  return base64.urlEncode(hashBuffer))  // Refers to the implementation of base64.encode stored at https://gist.github.com/jhurliman/1250118
}
```
ヒント: 上記のサンプルコードはブラウザが提供する SubtleCryptoAPI に依存していますが、ブラウザは安全な（HTTPS）ウェブページからのみこれらの関数の使用を許可します。

Looker は、Looker インスタンスが構成されている認証システムを使用してユーザーの認証を試みます。
- 現在のブラウザで Looker にすでにログインしている場合（つまり、ライブログイン Cookie の状態がある場合）、ユーザーはログイン認証情報の入力を求められません。
- このユーザーがこの OAuth クライアントを使用して初めてログインする場合、Looker では開示ページと確認ページが表示され、ユーザーの確認と同意が行われます。アプリケーションの登録時に使用した description パラメータのテキストが表示されます。説明には、アプリがユーザーの Looker アカウントで何を行うかを明記する必要があります。ユーザーが [承認] をクリックすると、ページがアプリケーション redirect_uri にリダイレクトされます。
- ユーザーが現在のブラウザで Looker にログイン済みであり、すでに開示ページに確認応答している場合、OAuth ログインは視覚的な中断を生じることなく瞬時に完了します。
Looker API は、OAuth クライアントアプリケーションに OAuth リダイレクトを返します。URI パラメータに表示されている認証コードを保存します。OAuth リダイレクト URI の例を次に示します。
```
https://mywebapp.com:3000/authenticated?&code=asdfasdfassdf&state=...
```
認証コードは、URI の &code= の後に表示されます。この例では、認証コードは asdfasdfassdf です。

Looker API の /token エンドポイントにウェブリクエストを行い、認証コードとアプリケーション情報を渡します。次に例を示します。

async function redeem_auth_code(response_str) {
  const params = new URLSearchParams(response_str)
  const auth_code = params.get('code')

  if (!auth_code) {
    log('ERROR: No authorization code in response')
    return
  }
  log(`auth code received: ${auth_code}`)
  log(`state: ${params.get('state')}`)

  const code_verifier = sessionStorage.getItem('code_verifier')
  if (!code_verifier) {
    log('ERROR: Missing code_verifier in session storage')
    return
  }
  sessionStorage.removeItem('code_verifier')
  const response = await
  fetch('https://mycompany.looker.com:19999/api/token', {  // This is the URL of your Looker instance's API web service
    method: 'POST',
    mode: 'cors',    // This line is required so that the browser will attempt a CORS request.
    body: stringify({
      grant_type: 'authorization_code',
      client_id: '123456',
      redirect_uri: 'https://mywebapp.com:3000/authenticated',
      code: auth_code,
      code_verifier: code_verifier,
    }),
    headers: {
      'x-looker-appid': 'Web App Auth & CORS API Demo', // This header is optional.
      'Content-Type': 'application/json;charset=UTF-8'  // This header is required.
    },
  }).catch((error) => {
    log(`Error: ${error.message}`)
  })

  const info = await response.json()
  log(`/api/token response: ${stringify(info)}`)

  // Store the access_token and other info,
  // which in this example is done in sessionStorage

  const expires_at = new Date(Date.now() + (info.expires_in * 1000))
  info.expires_at = expires_at
  log(`Access token expires at ${expires_at.toLocaleTimeString()} local time.`)
  sessionStorage.setItem('access_info', stringify(info))
  access_info = info
}

応答の受信に成功すると、OAuth クライアントアプリケーションに API access_token が返されます。レスポンスには refresh_token も含まれます。これは、後でユーザー操作なしで新しい access_token を取得するために使用できます。refresh_token の有効期間は 1 か月です。refresh_token を安全に保管します。

このシステム内のすべてのトークンは、Looker 管理者がいつでも取り消すことができます。