> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> このガイドでは、Authlib SDK を使用して Auth0 を Python の Django アプリケーションに統合する方法を説明します。
# Django アプリケーションにログイン機能を追加する
export const AuthCodeGroup = ({children, dropdown}) => {
const [processedChildren, setProcessedChildren] = useState(children);
useEffect(() => {
let unsubscribe = null;
function init() {
unsubscribe = window.autorun(() => {
const processChildren = node => {
if (typeof node === "string") {
let processedNode = node;
for (const [key, value] of window.rootStore.variableStore.values.entries()) {
const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
processedNode = processedNode.replaceAll(new RegExp(escapedKey, "g"), value);
}
return processedNode;
} else if (Array.isArray(node)) {
return node.map(processChildren);
} else if (node && node.props && node.props.children) {
return {
...node,
props: {
...node.props,
children: processChildren(node.props.children)
}
};
}
return node;
};
setProcessedChildren(processChildren(children));
});
}
if (window.rootStore) {
init();
} else {
window.addEventListener("adu:storeReady", init);
}
return () => {
window.removeEventListener("adu:storeReady", init);
unsubscribe?.();
};
}, [children]);
return {processedChildren};
};
export const QuickstartButtons = ({githubLink}) => {
const text = {
viewOnGithub: "GitHubで見る",
loginAndDownload: "サンプルをダウンロード"
};
const parseGithubUrl = url => {
try {
const urlObj = new URL(url);
const pathParts = urlObj.pathname.split("/").filter(Boolean);
if (pathParts.length >= 4 && pathParts[2] === "tree") {
const repoName = pathParts[1];
const branch = pathParts[3];
const path = pathParts.slice(4).join("/") || undefined;
return {
repo: repoName,
branch,
path
};
}
console.warn("GitHub URLを解析できませんでした:", url);
return null;
} catch (error) {
console.error("GitHub URLの解析中にエラーが発生しました:", error);
return null;
}
};
const handleDownload = async () => {
const params = parseGithubUrl(githubLink);
if (!params) {
console.error("GitHub URLの形式が無効です");
return;
}
try {
await window.Auth0DocsUI?.getSample(params);
} catch (error) {
console.error("サンプルのダウンロードに失敗しました:", error);
}
};
return ;
};
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 ;
}
function Input({id, label, value, onChange, placeholder, name}) {
return ;
}
function Select({label, value, onChange, options}) {
return ;
}
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" &&
;
}
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 ;
}
function Input({id, label, value, onChange, placeholder, name}) {
return ;
}
function Select({label, value, onChange, options}) {
return ;
}
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 || "無題"
}];
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" &&
;
}
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
Auth0アカウント
{" "}にサインアップするか、既存のアカウントに{" "}
console.log("log in")}>
ログイン
{" "}
して、ご自身のテナントと直接統合してください。
;
}
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: "configure-auth0",
title: "Auth0 を設定する"
}, {
id: "install-dependencies",
title: "依存関係をインストールする"
}, {
id: "configure-your-env-file",
title: ".env ファイルを設定する"
}, {
id: "create-an-application",
title: "アプリケーションを作成する"
}, {
id: "update-settings-py",
title: "settings.py を更新する"
}, {
id: "setup-your-application",
title: "アプリケーションをセットアップする"
}, {
id: "setup-your-route-handlers",
title: "ルートハンドラーをセットアップする"
}, {
id: "register-your-routes",
title: "ルートを登録する"
}, {
id: "add-templates",
title: "テンプレートを追加する"
}, {
id: "run-your-application",
title: "アプリケーションを実行する"
}];
Auth0を使用すると、アプリケーションに認証を追加し、ユーザープロファイル情報にアクセスできます。このガイドでは、[Authlib](https://authlib.org/) SDKを使用して、Auth0をPython [Django](https://www.djangoproject.com/)アプリケーションに統合する方法について説明します。
Auth0 のサービスを利用するには、Auth0 Dashboard でアプリケーションを設定しておく必要があります。Auth0 アプリケーションでは、
開発中のプロジェクトで認証をどのように機能させるかを設定します。
### アプリケーションを設定する
インタラクティブなセレクターを使用して、新しい Auth0 アプリケーションを作成するか、
統合するプロジェクトに対応する既存のアプリケーションを選択します。Auth0 の各アプリケーションには、
一意の英数字のクライアントID が割り当てられます。アプリケーションコードはこのクライアントID を使用して、SDK 経由で Auth0 API を呼び出します。
このクイックスタートで設定した内容は、[Dashboard](https://manage.auth0.com/dashboard/us/auth0-dsepaid/) のアプリケーションに自動的に反映されます。今後はそこでアプリケーションを管理できます。
完全な設定例を確認したい場合は、代わりにサンプルアプリケーションを参照してください。
### コールバックURLを設定する
コールバックURL は、認証後に Auth0 がユーザーをリダイレクトするアプリケーション内の URL です。
設定しない場合、ユーザーはログイン後にアプリケーションへ戻れません。
サンプルプロジェクトに沿って進めている場合は、これを
`http://localhost:3000/callback` に設定してください。
### ログアウトURLを設定する
ログアウトURL は、ログアウト後に Auth0 がユーザーをリダイレクトするアプリケーション内の URL です。
設定しない場合、ユーザーはアプリケーションからログアウトできず、エラーが表示されます。
サンプルプロジェクトに沿って進めている場合は、これを `http://localhost:3000` に設定してください。
この統合では、Authlib などのライブラリ依存関係をいくつか追加します。プロジェクトディレクトリに
`requirements.txt` ファイルを作成し、次の内容を記載します。
```text lines theme={null}
authlib ~= 1.0
django ~= 4.0
python-dotenv ~= 0.19
requests ~= 2.27
```
これらの依存関係を利用可能にするには、シェルで次のコマンドを実行します。
```text lines theme={null}
pip install -r requirements.txt
```
次に、プロジェクトディレクトリに `.env` ファイルを作成します。このファイルには、クライアントキーやその他の
設定情報を保存します。
```text lines theme={null}
AUTH0_CLIENT_ID={yourClientId}
AUTH0_CLIENT_SECRET={yourClientSecret}
AUTH0_DOMAIN={yourDomain}
```
Django アプリケーションのセットアップがすでに完了している場合は、次の手順に進んでください。新しいアプリケーションプロジェクトの場合は、次のコマンドを実行してください。
```text lines theme={null}
django-admin startproject webappexample
```
新しいプロジェクトフォルダーに移動します。
```text lines theme={null}
cd webappexample
```
`.env` の値を確認するため、`webappexample/settings.py` ファイルを開きます。
ファイルの先頭に、`os` と `dotenv` の import を追加します。
次に、`BASE_DIR` の定義の下に `TEMPLATE_DIR` 変数を追加します。
次に、`TEMPLATES` 変数を見つけて、`DIRS` の値を更新し、
`TEMPLATE_DIR` 文字列を追加します。これにより、後の手順で作成する
テンプレートファイルのパスが決まります。この配列のその他の内容は変更しないでください。
このファイルの末尾に、Auth0 の設定を読み込むコードを追加します。
アプリケーションの作成を開始するには、IDE で `webappexample/views.py` ファイルを開きます。
アプリケーションに必要なライブラリをすべてインポートします。
これで、Auth0 を使用したアプリケーションの認証を Authlib で処理するように設定できます。
Authlib の OAuth `register()` メソッドで使用できる設定オプションの詳細については、[公式ドキュメント](https://docs.authlib.org/en/latest/client/frameworks.html#using-oauth-2-0-to-log-in)を参照してください。
この例では、アプリケーションに 4 つのルート (login、callback、logout、index) を追加します。
* `login` - アプリの訪問者が `/login` ルートにアクセスすると、Auth0 に移動して認証フローを開始します。
* `callback` - ユーザーが Auth0 でのログインを完了すると、`/callback` ルートでアプリケーションに戻ります。このルートはユーザーのセッションを保存するため、再度アクセスしたときに
もう一度ログインする必要がありません。
* `logout` - `/logout` ルートは、ユーザーをアプリケーションからサインアウトさせます。このルートは
アプリ内のユーザーセッションをクリアし、セッションが残らないように Auth0 のログアウトエンドポイントへリダイレクトします。
その後、アプリケーションはユーザーをホームルートへリダイレクトします。
* `index` - ホームルートでは、認証済みユーザーの詳細を表示するか、訪問者にサインインを促します。
新しいルートに接続するには、`webappexample/urls.py` ファイルの内容を右側のコードに置き換えます。
これにより、`/login`、`/callback`、`/logout`、`/` の各ルートが
適切なハンドラーにルーティングされます。
次に、ホームページのルートで使用するテンプレートファイルを作成します。
`webappexample` フォルダー内に `templates` という名前の新しいサブディレクトリを作成し、
`index.html` ファイルを作成します。
`index.html` ファイルには、ログイン時にはユーザー情報を表示し、ログアウト時には
ログインボタンを表示するためのテンプレートコードを記述します。
アプリケーションを実行する準備ができました。プロジェクトディレクトリでシェルを開き、次を実行します。
```text lines theme={null}
python3 manage.py migrate
python3 manage.py runserver 3000
```
これで、アプリケーションをブラウザーで [http://localhost:3000](http://localhost:3000) から開けるようになっているはずです。
##### 確認ポイント
確認のため、[http://localhost:3000](http://localhost:3000/) にアクセスします。Auth0 に遷移するログインボタンが表示され、ログイン後にアプリケーションに戻ってプロフィール情報を確認できるはずです。
## 次のステップ
お疲れ様でした！ここまで進めることができたなら、アプリケーションでログイン、ログアウト、およびユーザープロフィール情報が正常に動作しているはずです。
クイックスタートチュートリアルはここで終わりですが、Auth0にはまだまだ多くの機能があります。Auth0でできることをさらに詳しく知りたい場合は、以下をご覧ください。
* [Auth0 Dashboard](https://manage.auth0.com/dashboard/us/dev-gja8kxz4ndtex3rq) - Auth0 テナントとアプリケーションの設定および管理方法について説明します
* [Auth0 Marketplace](https://marketplace.auth0.com/) - 有効化してAuth0の機能を拡張できる連携を探す
```html webappexample/templates/index.html lines theme={null}
Auth0 Example
{% if session %}
Welcome {{session.userinfo.name}}!
Logout
{% else %}
Welcome Guest
Login
{% endif %}
```
```py webappexample/settings.py lines theme={null}
import os
from pathlib import Path
from dotenv import load_dotenv, find_dotenv
# プロジェクト内のパスはこのように構築します: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATE_DIR = os.path.join(BASE_DIR, "webappexample", "templates")
# ... その他の設定 ...
TEMPLATES = [
{
# 他の行はそのままにして、`DIRS` のみを更新します。
"DIRS": [TEMPLATE_DIR],
},
]
# ... その他の設定 ...
# 環境定義ファイルを読み込む
ENV_FILE = find_dotenv()
if ENV_FILE:
load_dotenv(ENV_FILE)
# Auth0 アプリケーションの設定をメモリに読み込む
AUTH0_DOMAIN = os.environ.get("AUTH0_DOMAIN")
AUTH0_CLIENT_ID = os.environ.get("AUTH0_CLIENT_ID")
AUTH0_CLIENT_SECRET = os.environ.get("AUTH0_CLIENT_SECRET")
```
```py webappexample/urls.py lines theme={null}
from django.urls import path
from . import views
urlpatterns = [
path("", views.index, name="index"),
path("login", views.login, name="login"),
path("logout", views.logout, name="logout"),
path("callback", views.callback, name="callback"),
]
```
```py webappexample/views.py highlight={1-18} lines theme={null}
import json
from authlib.integrations.django_client import OAuth
from django.conf import settings
from django.shortcuts import redirect, render, redirect
from django.urls import reverse
from urllib.parse import quote_plus, urlencode
oauth = OAuth()
oauth.register(
"auth0",
client_id=settings.AUTH0_CLIENT_ID,
client_secret=settings.AUTH0_CLIENT_SECRET,
client_kwargs={
"scope": "openid profile email",
},
server_metadata_url=f"https://{settings.AUTH0_DOMAIN}/.well-known/openid-configuration",
)
def login(request):
return oauth.auth0.authorize_redirect(
request, request.build_absolute_uri(reverse("callback"))
)
def callback(request):
token = oauth.auth0.authorize_access_token(request)
request.session["user"] = token
return redirect(request.build_absolute_uri(reverse("index")))
def logout(request):
request.session.clear()
return redirect(
f"https://{settings.AUTH0_DOMAIN}/v2/logout?"
+ urlencode(
{
"returnTo": request.build_absolute_uri(reverse("index")),
"client_id": settings.AUTH0_CLIENT_ID,
},
quote_via=quote_plus,
),
)
def index(request):
return render(
request,
"index.html",
context={
"session": request.session.get("user"),
"pretty": json.dumps(request.session.get("user"), indent=4),
},
)
```
```py webappexample/views.py highlight={1-18} lines theme={null}
import json
from authlib.integrations.django_client import OAuth
from django.conf import settings
from django.shortcuts import redirect, render, redirect
from django.urls import reverse
from urllib.parse import quote_plus, urlencode
oauth = OAuth()
oauth.register(
"auth0",
client_id=settings.AUTH0_CLIENT_ID,
client_secret=settings.AUTH0_CLIENT_SECRET,
client_kwargs={
"scope": "openid profile email",
},
server_metadata_url=f"https://{settings.AUTH0_DOMAIN}/.well-known/openid-configuration",
)
def login(request):
return oauth.auth0.authorize_redirect(
request, request.build_absolute_uri(reverse("callback"))
)
def callback(request):
token = oauth.auth0.authorize_access_token(request)
request.session["user"] = token
return redirect(request.build_absolute_uri(reverse("index")))
def logout(request):
request.session.clear()
return redirect(
f"https://{settings.AUTH0_DOMAIN}/v2/logout?"
+ urlencode(
{
"returnTo": request.build_absolute_uri(reverse("index")),
"client_id": settings.AUTH0_CLIENT_ID,
},
quote_via=quote_plus,
),
)
def index(request):
return render(
request,
"index.html",
context={
"session": request.session.get("user"),
"pretty": json.dumps(request.session.get("user"), indent=4),
},
)
```
```html webappexample/templates/index.html lines theme={null}
Auth0 Example
{% if session %}
Welcome {{session.userinfo.name}}!
Logout
{% else %}
Welcome Guest
Login
{% endif %}
```
```py webappexample/settings.py lines theme={null}
import os
from pathlib import Path
from dotenv import load_dotenv, find_dotenv
# プロジェクト内のパスはこのように構築します: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATE_DIR = os.path.join(BASE_DIR, "webappexample", "templates")
# ... その他の設定 ...
TEMPLATES = [
{
# 他の行はそのままにして、`DIRS` のみを更新します。
"DIRS": [TEMPLATE_DIR],
},
]
# ... その他の設定 ...
# 環境定義ファイルを読み込む
ENV_FILE = find_dotenv()
if ENV_FILE:
load_dotenv(ENV_FILE)
# Auth0 アプリケーションの設定をメモリに読み込む
AUTH0_DOMAIN = os.environ.get("AUTH0_DOMAIN")
AUTH0_CLIENT_ID = os.environ.get("AUTH0_CLIENT_ID")
AUTH0_CLIENT_SECRET = os.environ.get("AUTH0_CLIENT_SECRET")
```
```py webappexample/urls.py lines theme={null}
from django.urls import path
from . import views
urlpatterns = [
path("", views.index, name="index"),
path("login", views.login, name="login"),
path("logout", views.logout, name="logout"),
path("callback", views.callback, name="callback"),
]
```
```py webappexample/views.py highlight={20-52} lines theme={null}
import json
from authlib.integrations.django_client import OAuth
from django.conf import settings
from django.shortcuts import redirect, render, redirect
from django.urls import reverse
from urllib.parse import quote_plus, urlencode
oauth = OAuth()
oauth.register(
"auth0",
client_id=settings.AUTH0_CLIENT_ID,
client_secret=settings.AUTH0_CLIENT_SECRET,
client_kwargs={
"scope": "openid profile email",
},
server_metadata_url=f"https://{settings.AUTH0_DOMAIN}/.well-known/openid-configuration",
)
def login(request):
return oauth.auth0.authorize_redirect(
request, request.build_absolute_uri(reverse("callback"))
)
def callback(request):
token = oauth.auth0.authorize_access_token(request)
request.session["user"] = token
return redirect(request.build_absolute_uri(reverse("index")))
def logout(request):
request.session.clear()
return redirect(
f"https://{settings.AUTH0_DOMAIN}/v2/logout?"
+ urlencode(
{
"returnTo": request.build_absolute_uri(reverse("index")),
"client_id": settings.AUTH0_CLIENT_ID,
},
quote_via=quote_plus,
),
)
def index(request):
return render(
request,
"index.html",
context={
"session": request.session.get("user"),
"pretty": json.dumps(request.session.get("user"), indent=4),
},
)
```
```html webappexample/templates/index.html lines theme={null}
Auth0 Example
{% if session %}
Welcome {{session.userinfo.name}}!
Logout
{% else %}
Welcome Guest
Login
{% endif %}
```
```py webappexample/settings.py lines theme={null}
import os
from pathlib import Path
from dotenv import load_dotenv, find_dotenv
# プロジェクト内のパスはこのように構築します: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATE_DIR = os.path.join(BASE_DIR, "webappexample", "templates")
# ... その他の設定 ...
TEMPLATES = [
{
# 他の行はそのままにして、`DIRS` のみを更新します。
"DIRS": [TEMPLATE_DIR],
},
]
# ... その他の設定 ...
# 環境定義ファイルを読み込む
ENV_FILE = find_dotenv()
if ENV_FILE:
load_dotenv(ENV_FILE)
# Auth0 アプリケーションの設定をメモリに読み込む
AUTH0_DOMAIN = os.environ.get("AUTH0_DOMAIN")
AUTH0_CLIENT_ID = os.environ.get("AUTH0_CLIENT_ID")
AUTH0_CLIENT_SECRET = os.environ.get("AUTH0_CLIENT_SECRET")
```
```py webappexample/urls.py lines theme={null}
from django.urls import path
from . import views
urlpatterns = [
path("", views.index, name="index"),
path("login", views.login, name="login"),
path("logout", views.logout, name="logout"),
path("callback", views.callback, name="callback"),
]
```
```py webappexample/urls.py lines theme={null}
from django.urls import path
from . import views
urlpatterns = [
path("", views.index, name="index"),
path("login", views.login, name="login"),
path("logout", views.logout, name="logout"),
path("callback", views.callback, name="callback"),
]
```
```html webappexample/templates/index.html lines theme={null}
Auth0 Example
{% if session %}
Welcome {{session.userinfo.name}}!
Logout
{% else %}
Welcome Guest
Login
{% endif %}
```
```py webappexample/settings.py lines theme={null}
import os
from pathlib import Path
from dotenv import load_dotenv, find_dotenv
# プロジェクト内のパスはこのように構築します: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATE_DIR = os.path.join(BASE_DIR, "webappexample", "templates")
# ... その他の設定 ...
TEMPLATES = [
{
# 他の行はそのままにして、`DIRS` のみを更新します。
"DIRS": [TEMPLATE_DIR],
},
]
# ... その他の設定 ...
# 環境定義ファイルを読み込む
ENV_FILE = find_dotenv()
if ENV_FILE:
load_dotenv(ENV_FILE)
# Auth0 アプリケーションの設定をメモリに読み込む
AUTH0_DOMAIN = os.environ.get("AUTH0_DOMAIN")
AUTH0_CLIENT_ID = os.environ.get("AUTH0_CLIENT_ID")
AUTH0_CLIENT_SECRET = os.environ.get("AUTH0_CLIENT_SECRET")
```
```py webappexample/views.py highlight={1-18} lines theme={null}
import json
from authlib.integrations.django_client import OAuth
from django.conf import settings
from django.shortcuts import redirect, render, redirect
from django.urls import reverse
from urllib.parse import quote_plus, urlencode
oauth = OAuth()
oauth.register(
"auth0",
client_id=settings.AUTH0_CLIENT_ID,
client_secret=settings.AUTH0_CLIENT_SECRET,
client_kwargs={
"scope": "openid profile email",
},
server_metadata_url=f"https://{settings.AUTH0_DOMAIN}/.well-known/openid-configuration",
)
def login(request):
return oauth.auth0.authorize_redirect(
request, request.build_absolute_uri(reverse("callback"))
)
def callback(request):
token = oauth.auth0.authorize_access_token(request)
request.session["user"] = token
return redirect(request.build_absolute_uri(reverse("index")))
def logout(request):
request.session.clear()
return redirect(
f"https://{settings.AUTH0_DOMAIN}/v2/logout?"
+ urlencode(
{
"returnTo": request.build_absolute_uri(reverse("index")),
"client_id": settings.AUTH0_CLIENT_ID,
},
quote_via=quote_plus,
),
)
def index(request):
return render(
request,
"index.html",
context={
"session": request.session.get("user"),
"pretty": json.dumps(request.session.get("user"), indent=4),
},
)
```
```html webappexample/templates/index.html lines theme={null}
Auth0 Example
{% if session %}
Welcome {{session.userinfo.name}}!
Logout
{% else %}
Welcome Guest
Login
{% endif %}
```
```py webappexample/settings.py lines theme={null}
import os
from pathlib import Path
from dotenv import load_dotenv, find_dotenv
# プロジェクト内のパスはこのように構築します: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATE_DIR = os.path.join(BASE_DIR, "webappexample", "templates")
# ... その他の設定 ...
TEMPLATES = [
{
# 他の行はそのままにして、`DIRS` のみを更新します。
"DIRS": [TEMPLATE_DIR],
},
]
# ... その他の設定 ...
# 環境定義ファイルを読み込む
ENV_FILE = find_dotenv()
if ENV_FILE:
load_dotenv(ENV_FILE)
# Auth0 アプリケーションの設定をメモリに読み込む
AUTH0_DOMAIN = os.environ.get("AUTH0_DOMAIN")
AUTH0_CLIENT_ID = os.environ.get("AUTH0_CLIENT_ID")
AUTH0_CLIENT_SECRET = os.environ.get("AUTH0_CLIENT_SECRET")
```
```py webappexample/urls.py lines theme={null}
from django.urls import path
from . import views
urlpatterns = [
path("", views.index, name="index"),
path("login", views.login, name="login"),
path("logout", views.logout, name="logout"),
path("callback", views.callback, name="callback"),
]
```
```py webappexample/views.py highlight={1-18} lines theme={null}
import json
from authlib.integrations.django_client import OAuth
from django.conf import settings
from django.shortcuts import redirect, render, redirect
from django.urls import reverse
from urllib.parse import quote_plus, urlencode
oauth = OAuth()
oauth.register(
"auth0",
client_id=settings.AUTH0_CLIENT_ID,
client_secret=settings.AUTH0_CLIENT_SECRET,
client_kwargs={
"scope": "openid profile email",
},
server_metadata_url=f"https://{settings.AUTH0_DOMAIN}/.well-known/openid-configuration",
)
def login(request):
return oauth.auth0.authorize_redirect(
request, request.build_absolute_uri(reverse("callback"))
)
def callback(request):
token = oauth.auth0.authorize_access_token(request)
request.session["user"] = token
return redirect(request.build_absolute_uri(reverse("index")))
def logout(request):
request.session.clear()
return redirect(
f"https://{settings.AUTH0_DOMAIN}/v2/logout?"
+ urlencode(
{
"returnTo": request.build_absolute_uri(reverse("index")),
"client_id": settings.AUTH0_CLIENT_ID,
},
quote_via=quote_plus,
),
)
def index(request):
return render(
request,
"index.html",
context={
"session": request.session.get("user"),
"pretty": json.dumps(request.session.get("user"), indent=4),
},
)
```