> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-docs-event-stream-action-templates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Laravelアプリケーションにログインを追加する
> このガイドでは、新規（または既存）のLaravel 9または10アプリケーションにAuth0を統合する方法を説明します。
export const LoggedInForm = ({sampleApp}) => {
const LS_APPS_KEY = "auth_demo_apps";
const LS_APP_CFG_KEY = "auth_demo_app_cfg";
const CHANNEL = "auth_flows_sync_v1";
const mkChannel = () => new BroadcastChannel(CHANNEL);
function uid() {
return Math.random().toString(36).slice(2) + Date.now().toString(36);
}
function loadApps() {
const raw = localStorage.getItem(LS_APPS_KEY);
if (raw) return JSON.parse(raw);
const seeded = [{
id: "{yourClientId}",
name: "Default App"
}];
localStorage.setItem(LS_APPS_KEY, JSON.stringify(seeded));
return seeded;
}
function saveApps(apps) {
localStorage.setItem(LS_APPS_KEY, JSON.stringify(apps));
}
function loadCfg() {
const raw = localStorage.getItem(LS_APP_CFG_KEY);
return raw ? JSON.parse(raw) : {};
}
function saveCfg(cfg) {
localStorage.setItem(LS_APP_CFG_KEY, JSON.stringify(cfg));
}
const RightChevron = ({className = "w-5 h-5", ...props}) =>
;
const LightningIcon = () =>
;
const LayersIcon = () =>
;
const GithubIcon = () =>
;
function IconTile({children}) {
return
{children}
;
}
function Card({className = "", children}) {
return {children}
;
}
function Button({variant = "primary", type = "button", onClick, children}) {
const base = "inline-flex items-center justify-center gap-2 h-10 px-4 rounded-xl font-medium transition";
let styles = "";
if (variant === "primary") {
styles = "mint-bg-indigo-600 text-white hover:mint-bg-indigo-700";
} else if (variant === "outline") {
styles = "border border-zinc-300 dark:border-zinc-700 mint-bg-transparent hover:mint-bg-zinc-50 dark:hover:mint-bg-zinc-800";
} else if (variant === "ghost") {
styles = "hover:mint-bg-zinc-100 dark:hover:mint-bg-zinc-800";
}
return
{children}
;
}
function Input({id, label, value, onChange, placeholder, name}) {
return
{label}
;
}
function Select({label, value, onChange, options}) {
return
{label}
onChange(e.target.value)}>
{options.map(o =>
{o.name}
)}
;
}
function Toast({open, onClose, children}) {
useEffect(() => {
if (!open) return;
const t = setTimeout(onClose, 2200);
return () => clearTimeout(t);
}, [open, onClose]);
return ;
}
function Flows() {
const [route, setRoute] = useState("menu");
const [apps, setApps] = useState(loadApps());
const [cfg, setCfg] = useState(loadCfg());
const [selected, setSelected] = useState(apps[0]?.id || "");
const [toast, setToast] = useState(false);
const [bc] = useState(() => mkChannel());
useEffect(() => {
if (!apps.find(a => a.id === selected)) {
setSelected(apps[0]?.id || "");
}
}, [apps, selected]);
useEffect(() => {
const onMsg = e => {
const {type, payload} = e.data || ({});
switch (type) {
case "NAV":
setRoute(payload.route);
break;
case "SELECT":
setSelected(payload.appId);
break;
case "APPS_UPDATED":
setApps(loadApps());
break;
case "CFG_UPDATED":
setCfg(loadCfg());
setToast(true);
break;
default:
break;
}
};
bc.addEventListener("message", onMsg);
return () => bc.removeEventListener("message", onMsg);
}, [bc]);
const nav = nextRoute => {
setRoute(nextRoute);
bc.postMessage({
type: "NAV",
payload: {
route: nextRoute
}
});
};
const selectApp = appId => {
setSelected(appId);
bc.postMessage({
type: "SELECT",
payload: {
appId
}
});
};
const onCreate = name => {
const id = uid();
const next = [...apps, {
id,
name: name || "Untitled"
}];
setApps(next);
saveApps(next);
bc.postMessage({
type: "APPS_UPDATED"
});
selectApp(id);
nav("integrate");
};
const onSaveCfg = (appId, data) => {
const next = {
...cfg,
[appId]: data
};
setCfg(next);
saveCfg(next);
setToast(true);
bc.postMessage({
type: "CFG_UPDATED"
});
};
return
{route === "menu" &&
nav("create")} onIntegrate={() => nav("integrate")} />}
{route === "create" && nav("menu")} onSave={onCreate} />}
{route === "integrate" && onSaveCfg(selected, data)} onCancel={() => nav("menu")} />}
setToast(false)}>
Successfully saved your changes.
;
}
function Menu({onCreate, onIntegrate}) {
return ;
}
function CreateForm({onSave, onCancel}) {
const [name, setName] = useState("");
return ;
}
function IntegrateForm({apps, selected, onSelect, saved, onSave, onCancel}) {
const [callbacks, setCallbacks] = useState(saved?.callbacks ?? "");
const [logouts, setLogouts] = useState(saved?.logouts ?? "");
const [origins, setOrigins] = useState(saved?.origins ?? "");
useEffect(() => {
setCallbacks(loadCfg()[selected]?.callbacks ?? "");
setLogouts(loadCfg()[selected]?.logouts ?? "");
setOrigins(loadCfg()[selected]?.origins ?? "");
}, [selected]);
return ;
}
return
;
};
export const SignUpForm = () => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [storeReady, setStoreReady] = useState(false);
useEffect(() => {
let unsubscribe = null;
function init() {
setStoreReady(true);
unsubscribe = window.autorun(() => {
const authenticated = window.rootStore?.sessionStore?.isAuthenticated || false;
setIsAuthenticated(authenticated);
});
}
if (window.rootStore) {
init();
} else {
window.addEventListener("adu:storeReady", init);
}
return () => {
window.removeEventListener("adu:storeReady", init);
unsubscribe?.();
};
}, []);
function LoggedInForm({sampleApp}) {
const LS_APPS_KEY = "auth_demo_apps";
const LS_APP_CFG_KEY = "auth_demo_app_cfg";
const CHANNEL = "auth_flows_sync_v1";
const mkChannel = () => new BroadcastChannel(CHANNEL);
function uid() {
return Math.random().toString(36).slice(2) + Date.now().toString(36);
}
function loadApps() {
const raw = localStorage.getItem(LS_APPS_KEY);
if (raw) return JSON.parse(raw);
const seeded = [{
id: "{yourClientId}",
name: "Default App"
}];
localStorage.setItem(LS_APPS_KEY, JSON.stringify(seeded));
return seeded;
}
function saveApps(apps) {
localStorage.setItem(LS_APPS_KEY, JSON.stringify(apps));
}
function loadCfg() {
const raw = localStorage.getItem(LS_APP_CFG_KEY);
return raw ? JSON.parse(raw) : {};
}
function saveCfg(cfg) {
localStorage.setItem(LS_APP_CFG_KEY, JSON.stringify(cfg));
}
const RightChevron = ({className = "w-5 h-5", ...props}) =>
;
const LightningIcon = () =>
;
const LayersIcon = () =>
;
const GithubIcon = () =>
;
function IconTile({children}) {
return
{children}
;
}
function Card({className = "", children}) {
return {children}
;
}
function Button({variant = "primary", type = "button", onClick, children}) {
const base = "inline-flex items-center justify-center gap-2 h-10 px-4 rounded-xl font-medium transition";
let styles = "";
if (variant === "primary") {
styles = "mint-bg-indigo-600 text-white hover:mint-bg-indigo-700";
} else if (variant === "outline") {
styles = "border border-zinc-300 dark:border-zinc-700 mint-bg-transparent hover:mint-bg-zinc-50 dark:hover:mint-bg-zinc-800";
} else if (variant === "ghost") {
styles = "hover:mint-bg-zinc-100 dark:hover:mint-bg-zinc-800";
}
return
{children}
;
}
function Input({id, label, value, onChange, placeholder, name}) {
return
{label}
;
}
function Select({label, value, onChange, options}) {
return
{label}
onChange(e.target.value)}>
{options.map(o =>
{o.name}
)}
;
}
function Toast({open, onClose, children}) {
useEffect(() => {
if (!open) return;
const t = setTimeout(onClose, 2200);
return () => clearTimeout(t);
}, [open, onClose]);
return ;
}
function Flows() {
const [route, setRoute] = useState("menu");
const [apps, setApps] = useState(loadApps());
const [cfg, setCfg] = useState(loadCfg());
const [selected, setSelected] = useState(apps[0]?.id || "");
const [toast, setToast] = useState(false);
const [bc] = useState(() => mkChannel());
useEffect(() => {
if (!apps.find(a => a.id === selected)) {
setSelected(apps[0]?.id || "");
}
}, [apps, selected]);
useEffect(() => {
const onMsg = e => {
const {type, payload} = e.data || ({});
switch (type) {
case "NAV":
setRoute(payload.route);
break;
case "SELECT":
setSelected(payload.appId);
break;
case "APPS_UPDATED":
setApps(loadApps());
break;
case "CFG_UPDATED":
setCfg(loadCfg());
setToast(true);
break;
default:
break;
}
};
bc.addEventListener("message", onMsg);
return () => bc.removeEventListener("message", onMsg);
}, [bc]);
const nav = nextRoute => {
setRoute(nextRoute);
bc.postMessage({
type: "NAV",
payload: {
route: nextRoute
}
});
};
const selectApp = appId => {
setSelected(appId);
bc.postMessage({
type: "SELECT",
payload: {
appId
}
});
};
const onCreate = name => {
const id = uid();
const next = [...apps, {
id,
name: name || "Untitled"
}];
setApps(next);
saveApps(next);
bc.postMessage({
type: "APPS_UPDATED"
});
selectApp(id);
nav("integrate");
};
const onSaveCfg = (appId, data) => {
const next = {
...cfg,
[appId]: data
};
setCfg(next);
saveCfg(next);
setToast(true);
bc.postMessage({
type: "CFG_UPDATED"
});
};
return
{route === "menu" &&
nav("create")} onIntegrate={() => nav("integrate")} />}
{route === "create" && nav("menu")} onSave={onCreate} />}
{route === "integrate" && onSaveCfg(selected, data)} onCancel={() => nav("menu")} />}
setToast(false)}>
Successfully saved your changes.
;
}
function Menu({onCreate, onIntegrate}) {
return ;
}
function CreateForm({onSave, onCancel}) {
const [name, setName] = useState("");
return ;
}
function IntegrateForm({apps, selected, onSelect, saved, onSave, onCancel}) {
const [callbacks, setCallbacks] = useState(saved?.callbacks ?? "");
const [logouts, setLogouts] = useState(saved?.logouts ?? "");
const [origins, setOrigins] = useState(saved?.origins ?? "");
useEffect(() => {
setCallbacks(loadCfg()[selected]?.callbacks ?? "");
setLogouts(loadCfg()[selected]?.logouts ?? "");
setOrigins(loadCfg()[selected]?.origins ?? "");
}, [selected]);
return ;
}
return
;
}
;
function SignUpFormInternal() {
return
Sign up for an{" "}
Auth0 account
{" "}
or{" "}
console.log("log in")}>
log in
{" "}
to your existing account to integrate directly with your own tenant.
console.log("sign up")} className="bg-primary dark:bg-primary-light text-white dark:text-black px-4 py-2 rounded-md mt-4 font-medium" style={{
width: "140px"
}}>
Sign up
;
}
;
return <>;
};
export const SideMenuSectionItem = ({id, children}) => {
return ;
};
export const SideMenu = ({sections, children}) => {
const [visibleSection, setVisibleSection] = useState(sections[0]?.id ?? null);
const checkVisibility = () => {
let currentVisible = null;
const viewportHeight = window.innerHeight;
const scrollY = window.scrollY;
sections.forEach(({id}) => {
const section = document.getElementById(id);
if (section) {
const rect = section.getBoundingClientRect();
const sectionTop = rect.top + scrollY;
const sectionBottom = sectionTop + rect.height;
const multiplier = viewportHeight > 1600 ? 0.34 : 0.22;
if (scrollY + viewportHeight * multiplier >= sectionTop && scrollY <= sectionBottom) {
currentVisible = id;
}
}
});
if (currentVisible && currentVisible !== visibleSection) {
setVisibleSection(currentVisible);
}
};
useEffect(() => {
const throttledCheck = () => {
setTimeout(checkVisibility, 100);
};
checkVisibility();
window.addEventListener("scroll", throttledCheck);
return () => {
window.removeEventListener("scroll", throttledCheck);
};
}, [sections, visibleSection]);
useEffect(() => {
sections.forEach(({id}) => {
const section = document.getElementById(id);
const sideMenuItem = document.getElementById(`side-menu-item-${id}`);
if (section) {
if (id === visibleSection) {
section.classList.add("active-section");
} else {
section.classList.remove("active-section");
}
}
if (sideMenuItem) {
if (id === visibleSection) {
sideMenuItem.classList.add("active-side-menu-item");
} else {
sideMenuItem.classList.remove("active-side-menu-item");
}
}
});
}, [visibleSection, sections]);
return
{children.map(child => {
if (child.props.id === visibleSection) {
return child;
}
return null;
})}
;
};
export const Section = ({id, title, stepNumber, children, isSingleColumn = false}) => {
return
{}
{children}
;
};
export const Content = ({title, children}) => {
return
{title &&
{title} }
{children}
;
};
export const Recipe = ({children, isSingleColumn = false}) => {
return
{children}
;
};
export const sections = [{
id: "laravelをインストールする",
title: "Laravelをインストールする"
}, {
id: "sdkをインストールする",
title: "SDKをインストールする"
}, {
id: "sdkを構成する",
title: "SDKを構成する"
}, {
id: "ログイン経路",
title: "ログイン経路"
}, {
id: "アクセス制御",
title: "アクセス制御"
}, {
id: "ユーザー情報",
title: "ユーザー情報"
}, {
id: "ユーザー管理",
title: "ユーザー管理"
}, {
id: "アプリケーションを実行する",
title: "アプリケーションを実行する"
}];
[Auth0のLaravel
SDK](https://github.com/auth0/laravel-auth0)を使用すると、Laravelアプリケーションに認証、ユーザープロファイル管理、ルーティングに基づくアクセスコントロールを手軽に追加できます。このガイドでは、新規（または既存）の[Laravel
9または10](https://github.com/auth0/laravel-auth0#support-policy)アプリケーションにAuth0を統合する方法を説明します。
**Laravelアプリケーションをまだセットアップしていない場合** には、シェルを開いて、新規プロジェクトに適切なディレクトリに移動し、次のコマンドを実行します：
```sh wrap lines theme={null}
composer create-project --prefer-dist laravel/laravel auth0-laravel-app ^9.0
```
このガイドにあるすべてのコマンドは、Laravelプロジェクトディレクトリのルートから実行されていることを前提としています。必ず新規プロジェクトのディレクトリに移動（`cd`）してください：
```sh lines theme={null}
cd auth0-laravel-app
```
プロジェクトディレクトリで次のコマンドを実行して、[Auth0 Laravel SDK](https://github.com/auth0/laravel-auth0)をインストールします：
```sh wrap lines theme={null}
composer require auth0/login:^7.8 --update-with-all-dependencies
```
そして、アプリケーションにSDK構成ファイルを生成します：
```sh lines theme={null}
php artisan vendor:publish --tag auth0
```
プロジェクトディレクトリから次のコマンドを実行して、Auth0 CLIをダウンロードします：
```sh wrap lines theme={null}
curl -sSfL https://raw.githubusercontent.com/auth0/auth0-cli/main/install.sh | sh -s -- -b .
```
そして、Auth0アカウントを使ってCLIを認証し、プロンプトでユーザーとしてログインすることを選択します：
```sh lines theme={null}
./auth0 login
```
次に、Auth0で新しいアプリケーションを作成します：
```sh lines theme={null}
./auth0 apps create \
--name "My Laravel Application" \
--type "regular" \
--auth-method "post" \
--callbacks "http://localhost:8000/callback" \
--logout-urls "http://localhost:8000" \
--reveal-secrets \
--no-input \
--json > .auth0.app.json
```
また、新しいAPIも作成します：
```sh lines theme={null}
./auth0 apis create \
--name "My Laravel Application's API" \
--identifier "https://github.com/auth0/laravel-auth0" \
--offline-access \
--no-input \
--json > .auth0.api.json
```
これで、SDKを構成するプロジェクトディレクトリ内に2つのファイルが作成されます。
これらのファイルには資格情報が保管されているため、機密として扱うことが重要です。必ず、バージョン管理では、これらのファイルをコミットしないようにしてください。Gitを使用している場合は、必ず`.gitignore`ファイルに追加します：
```sh lines theme={null}
echo ".auth0.*.json" >> .gitignore
```
SDKは、アプリケーションのユーザーを認証するために必要なすべての経路を自動的に登録します。
これらについて細かな制御が必要な場合や、アプリケーションで既存の経路と競合する場合には、SDKのコントローラーを手動で登録することができます。高度な統合について、[SDKのREADME](https://github.com/auth0/laravel-auth0)を参照してください。
Laravelの認証機能は「guards」を使用して、それぞれの要求でユーザーがどのように認証されるのかを定義します。アプリケーションの経路へのアクセスを制約するには、Auth0 SDKの認証ガードを使用することができます。
経路へのアクセスに先だって、ユーザーの認証を要求するには、Laravelの`auth`ミドルウェアを使用することができます。
```text lines theme={null}
Route::get('/private', function () {
return response('Welcome! You are logged in.');
})->middleware('auth');
```
また、これをLaravelの`can`ミドルウェアと組み合わせると、認証済みのユーザーに特定の[権限](/docs/ja-jp/manage-users/access-control/rbac)を要求することができます。
```text lines theme={null}
Route::get('/scope', function () {
return response('You have `read:messages` permission, and can therefore access this resource.');
})->middleware('auth')->can('read:messages');
```
認証済みのユーザーについての情報は、Laravelの`Auth`ファサードまたは`auth()`ヘルパー関数を介して利用できます。
以下は、ユーザーの識別子とメールアドレスを取得する例です。
```text lines theme={null}
Route::get('/', function () {
if (! auth()->check()) {
return response('You are not logged in.');
}
$user = auth()->user();
$name = $user->name ?? 'User';
$email = $user->email ?? '';
return response("Hello {$name}! Your email address is {$email}.");
});;
```
ユーザー情報は、[Auth0 Management
API](https://github.com/auth0/laravel-auth0/blob/main/docs/Management.md)を使用して更新することができます。管理エンドポイントはすべて、SDKの`management()`メソッドでアクセスすることができます。
**Management APIを呼び出す前に、アプリケーションがManagement APIと通信できるようにしなければなりません。** これを実行するには、[Auth0
DashboardのAPIページ](/docs/ja-jp/%24%7Bmanage_url%7D#/apis)で`［Auth0 Management API］`を選択してから［Machine to Machine
Applications（M2Mアプリケーション）］タブを選択します。Laravelアプリケーションを認可してから、下矢印をクリックして、付与したいスコープを選択します。
以下の例では、ユーザーのメタデータを更新し、好きな色をランダムに割り当てますが、必ず`read:users`と`update:users`のスコープを付与するようにします。APIエンドポイントのリストと必要なスコープについては、[Management APIのドキュメント](https://auth0.com/docs/api/management/v2)を参照してください。
```text lines theme={null}
use Auth0\Laravel\Facade\Auth0;
Route::get('/colors', function () {
$endpoint = Auth0::management()->users();
$colors = ['red', 'blue', 'green', 'black', 'white', 'yellow', 'purple', 'orange', 'pink', 'brown'];
$endpoint->update(
id: auth()->id(),
body: [
'user_metadata' => [
'color' => $colors[random_int(0, count($colors) - 1)]
]
]
);
$metadata = $endpoint->get(auth()->id());
$metadata = Auth0::json($metadata);
$color = $metadata['user_metadata']['color'] ?? 'unknown';
$name = auth()->user()->name;
return response("Hello {$name}! Your favorite color is {$color}.");
})->middleware('auth');
```
SDKにあるManagement APIの全メソッドについては、[こちら](https://github.com/auth0/laravel-auth0/blob/main/docs/Management.md)にクイックリファレンスガイドがあります。
Laravelアプリケーションを起動する準備が整いました。要求を受け付けることができます：
```text lines theme={null}
php artisan serve
```
##### チェックポイント
ブラウザーを開いて、以下の経路にアクセスしてみてください。
* [http://localhost:8000](http://localhost:8000/)（パブリックルートを確認する）
* [http://localhost:8000/private](http://localhost:8000/private)（認証を促す）
* [http://localhost:8000](http://localhost:8000/)（パブリックルートを確認する、今回は認証済み）
* [http://localhost:8000/scope](http://localhost:8000/scope)（`read:messages`[permission](/docs/ja-jp/manage-users/access-control/rbac)があるかを確認する）
* [http://localhost:8000/update](http://localhost:8000/update)（ユーザープロファイルを更新する）
* [http://localhost:8000/logout](http://localhost:8000/logout)（ログアウトする）
### その他の情報
* [ユーザーリポジトリとモデル](https://github.com/auth0/laravel-auth0/blob/main/docs/Users.md)はAuth0 Laravel
SDKを拡張して、カスタムのユーザーモデルを使用し、データベースでユーザーの保管や取得を行う方法を指定することができます。
* [イベントフック](https://github.com/auth0/laravel-auth0/blob/main/docs/Events.md)はAuth0 Laravel SDKで発生したイベントを聞く方法を処理して、統合の動作を完全にカスタマイズすることができます。
* [Management API](https://github.com/auth0/laravel-auth0/blob/main/docs/Management.md)対応はAuth0 Laravel SDKに組み込まれているため、LaravelアプリケーションからManagement
APIと対話することができます。
## 次のステップ
成功です！ここまで来れば、アプリケーションにログイン、ログアウト、ユーザープロファイル情報が備わっているはずです。
これでクイックスタートチュートリアルは終了ですが、機能はまだまだたくさんあります。Auth0でできることについて詳しくは、以下をご覧ください。
* [Auth0 Dashboard](https://manage.auth0.com/#) - Auth0のテナントやアプリケーションを構成して管理する方法について説明します
* [laravel-auth0 SDK](https://github.com/auth0/laravel-auth0) - このチュートリアルで使用されているSDKをより詳しく説明します
* [Auth0 Marketplace](https://marketplace.auth0.com/) - Auth0の機能性を拡張できる各種の統合を見つけられます
```php routes/web.php lines theme={null}
Route::get('/private', function () {
return response('Welcome! You are logged in.');
})->middleware('auth');
Route::get('/scope', function () {
return response('You have `read:messages` permission, and can therefore access this resource.');
})->middleware('auth')->can('read:messages');
```
```php routes/web.php lines theme={null}
Route::get('/', function () {
if (! auth()->check()) {
return response('You are not logged in.');
}
$user = auth()->user();
$name = $user->name ?? 'User';
$email = $user->email ?? '';
return response("Hello {$name}! Your email address is {$email}.");
});
```
```php routes/web.php lines theme={null}
use Auth0\Laravel\Facade\Auth0;
Route::get('/colors', function () {
$endpoint = Auth0::management()->users();
$colors = ['red', 'blue', 'green', 'black', 'white', 'yellow', 'purple', 'orange', 'pink', 'brown'];
$endpoint->update(
id: auth()->id(),
body: [
'user_metadata' => [
'color' => $colors[random_int(0, count($colors) - 1)]
]
]
);
$metadata = $endpoint->get(auth()->id());
$metadata = Auth0::json($metadata);
$color = $metadata['user_metadata']['color'] ?? 'unknown';
$name = auth()->user()->name;
return response("Hello {$name}! Your favorite color is {$color}.");
})->middleware('auth');
```
Sign up for an{" "}
Auth0 account
{" "}
or{" "}
console.log("log in")}>
log in
{" "}
to your existing account to integrate directly with your own tenant.