Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

Cloudflare Access

最終更新 Markdown で表示Agent セットアップ

Cloudflare Access Pages Plugin は、Cloudflare Access の JWT アサーションを検証するミドルウェアです。指定したユーザーの JWT について追加情報を照会する API も含みます。

インストール

npm i @cloudflare/pages-plugin-cloudflare-access

使い方

import cloudflareAccessPlugin from "@cloudflare/pages-plugin-cloudflare-access";

export const onRequest: PagesFunction = cloudflareAccessPlugin({
	domain: "https://test.cloudflareaccess.com",
	aud: "4714c1358e65fe4b408ad6d432a5f878f08194bdb4752441fd56faefa9b2b6f2",
});

この Plugin は、プロパティが 2 つのオブジェクトを受け取ります。Cloudflare Access アカウントの domain と、検証対象のポリシー aud（audience）です。検証に失敗したリクエストには 403 ステータスコードが返されます。

JWT ペイロードにアクセスする

アプリケーションで JWT ペイロードが必要な場合（たとえばユーザーのメールアドレスが必要な場合）、この Plugin は data.cloudflareAccess.JWT.payload で利用できるようにします。

例:

import type { PluginData } from "@cloudflare/pages-plugin-cloudflare-access";

export const onRequest: PagesFunction<unknown, any, PluginData> = async ({
	data,
}) => {
	return new Response(
		`Hello, ${data.cloudflareAccess.JWT.payload.email || "service user"}!`,
	);
};

JWT ペイロード全体 は data.cloudflareAccess.JWT.payload で利用できます。利用できるフィールドは、ID 付きの認可（ブラウザー上のユーザーなど）と ID なしの認可（サービストークンなど）で異なる点に注意してください。

ID を照会する

ユーザーの ID について詳細を取得するには、用意されている getIdentity API 関数を使います。

import { getIdentity } from "@cloudflare/pages-plugin-cloudflare-access/api";

export const onRequest: PagesFunction = async ({ data }) => {
	const identity = await getIdentity({
		jwt: "eyJhbGciOiJIUzI1NiIsImtpZCI6IjkzMzhhYmUxYmFmMmZlNDkyZjY0NmE3MzZmMjVhZmJmN2IwMjVlMzVjNjI3YmU0ZjYwYzQxNGQ0YzczMDY5YjgiLCJ0eXAiOiJKV1QifQ.eyJhdWQiOlsiOTdlMmFhZTEyMDEyMWY5MDJkZjhiYzk5ZmMzNDU5MTNhYjE4NmQxNzRmMzA3OWVhNzI5MjM2NzY2YjJlN2M0YSJdLCJlbWFpbCI6ImFkbWluQGV4YW1wbGUuY29tIiwiZXhwIjoxNTE5NDE4MjE0LCJpYXQiOjE1MTkzMzE4MTUsImlzcyI6Imh0dHBzOi8vdGVzdC5jbG91ZGZsYXJlYWNjZXNzLmNvbSIsIm5vbmNlIjoiMWQ4MDgzZjcwOGE0Nzk4MjI5NmYyZDk4OTZkNzBmMjA3YTI3OTM4ZjAyNjU0MGMzOTJiOTAzZTVmZGY0ZDZlOSIsInN1YiI6ImNhNjM5YmI5LTI2YWItNDJlNS1iOWJmLTNhZWEyN2IzMzFmZCJ9.05vGt-_0Mw6WEFJF3jpaqkNb88PUMplsjzlEUvCEfnQ",
		domain: "https://test.cloudflareaccess.com",
	});

	return new Response(`Hello, ${identity.name || "service user"}!`);
};

getIdentity 関数は、jwt 文字列と domain 文字列の 2 つのプロパティを持つオブジェクトを受け取ります。/cdn-cgi/access/get-identity エンドポイントが返すオブジェクト の Promise を返します。アプリケーションの権限判定などで、ユーザーのグループ所属を使いたい場合に特に便利です。

便宜上、同じ情報は、現在のリクエストの JWT に対して data.cloudflareAccess.JWT.getIdentity 関数でも取得できます（上記のとおり Plugin でリクエストを検証済みである前提です）。

import type { PluginData } from "@cloudflare/pages-plugin-cloudflare-access";

export const onRequest: PagesFunction<unknown, any, PluginData> = async ({
	data,
}) => {
	const identity = await data.cloudflareAccess.JWT.getIdentity();

	return new Response(`Hello, ${identity.name || "service user"}!`);
};

ログイン / ログアウト URL

ログインやログアウトを強制したい場合は、次のユーティリティ関数で URL を生成し、ユーザーをリダイレクトします。

import { generateLoginURL } from "@cloudflare/pages-plugin-cloudflare-access/api";

export const onRequest = () => {
	const loginURL = generateLoginURL({
		redirectURL: "https://example.com/greet",
		domain: "https://test.cloudflareaccess.com",
		aud: "4714c1358e65fe4b408ad6d432a5f878f08194bdb4752441fd56faefa9b2b6f2",
	});

	return new Response(null, {
		status: 302,
		headers: { Location: loginURL },
	});
};
import { generateLogoutURL } from "@cloudflare/pages-plugin-cloudflare-access/api";

export const onRequest = () =>
	new Response(null, {
		status: 302,
		headers: {
			Location: generateLogoutURL({
				domain: "https://test.cloudflareaccess.com",
			}),
		},
	});

役に立ちましたか？