> ## 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.
> このチュートリアルでは、Ruby on Rails アプリケーションにユーザーログインを追加する方法を紹介します。
# Ruby on Rails アプリケーションにログインを追加する
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: "add-dependencies",
title: "依存関係を追加する"
}, {
id: "configure-the-sdk",
title: "SDKを設定する"
}, {
id: "configure-the-omniauth-middleware",
title: "OmniAuthミドルウェアを設定する"
}, {
id: "add-an-auth0-controller",
title: "Auth0コントローラーを追加する"
}, {
id: "configure-routes",
title: "ルートを設定する"
}, {
id: "add-login-to-your-application",
title: "アプリケーションにログイン機能を追加する"
}, {
id: "add-logout-to-your-application",
title: "アプリケーションにログアウト機能を追加する"
}, {
id: "show-user-profile-information",
title: "ユーザーのプロフィール情報を表示する"
}];
Auth0 のサービスを利用するには、Auth0 Dashboard でアプリケーションを設定しておく必要があります。Auth0 アプリケーションでは、
開発中のプロジェクトで認証をどのように機能させるかを設定します。
### アプリケーションを設定する
インタラクティブなセレクターを使用して、新しい Auth0 アプリケーションを作成するか、
連携するプロジェクトに対応する既存のアプリケーションを選択します。Auth0 のすべてのアプリケーションには、
英数字から成る一意のクライアントID が割り当てられており、アプリケーションコードはそれを使用して SDK 経由で Auth0 API を呼び出します。
このクイックスタートで行った設定は、[Dashboard](https://manage.auth0.com/#/) 内のアプリケーションに自動的に反映されます。ここでは、
今後アプリケーションを管理できます。
設定済みの完全な構成を確認したい場合は、代わりにサンプルアプリケーションを参照できます。
### コールバック URL を設定する
コールバック URL とは、認証後に Auth0 がユーザーをリダイレクトする先として
アプリケーション内で指定する URL です。設定しない場合、ユーザーはログイン後にアプリケーションへ戻れません。
サンプルプロジェクトを使って進めている場合は、これを
`http://localhost:3000/auth/auth0/callback` に設定してください。
### ログアウト URL を設定する
ログアウト URL とは、ログアウト後に Auth0 がユーザーをリダイレクトする先として
アプリケーション内で指定する URL です。設定しない場合、ユーザーはアプリケーションからログアウトできず、エラーが発生します。
サンプルプロジェクトを使って進めている場合は、これを `http://localhost:3000` に設定してください。
### 許可する Web オリジンを設定する
許可する Web オリジンとは、認証フローへのアクセスを許可する URL です。ここには
プロジェクトの URL を含める必要があります。これが適切に設定されていない場合、プロジェクトで認証トークンを
サイレントに更新できないため、ユーザーは次回アプリケーションにアクセスしたときやページを更新したときに
ログアウトされます。
サンプルプロジェクトを使って進めている場合は、これを `http://localhost:3000` に設定してください。
認証フローの処理には、カスタムの[OmniAuthストラテジー](https://github.com/intridea/omniauth#omniauth-standardized-multi-provider-authentication)である`omniauth-auth0`を使用します。
次の依存関係を`Gemfile`に追加します。
```gem lines theme={null}
gem 'omniauth-auth0', '~> 3.0'
gem 'omniauth-rails_csrf_protection', '~> 1.0' # 偽造された認証リクエストを防ぐ
```
gemを追加したら、`bundle install` を実行してインストールします。
Auth0 Dashboard のアプリケーション **Settings** にある Auth0 のドメイン、クライアントID、クライアント
シークレットの値を指定するため、設定ファイル `./config/auth0.yml` を作成します。
次の初期化ファイル `./config/initializers/auth0.rb` を作成し、前の手順で作成した設定ファイルを使用して **OmniAuth** ミドルウェアを[構成](https://github.com/auth0/omniauth-auth0/blob/master/EXAMPLES.md#send-additional-authentication-parameters)します。
`callback_path` が、Auth0 アプリケーションの "Allowed Callback URLs" 設定で指定した値と一致していることを確認してください。
認証コールバック、`logout` アクション、および
ログアウト URL を構築するメソッドを処理する Auth0 コントローラーを作成します。
次のコマンドを実行します。
`rails generate controller auth0 callback failure logout --skip-assets --skip-helper --skip-routes --skip-template-engine`.
callback メソッド内で、
`request.env['omniauth.auth']` として返されるユーザー情報のハッシュを現在のセッションに格納します。
ログアウトを設定するには、`logout` アクション内で `reset_session`
メソッドを呼び出し、セッションに保存されているすべてのオブジェクトをクリアします。その後、Auth0 のログアウトエンドポイントにリダイレクトします。`reset_session` の詳細については、
[Ruby on Rails ActionController documentation](http://api.rubyonrails.org/classes/ActionController/Base.html#M000668) を参照してください。
これらのルートを `./config/routes.rb` ファイルに追加します。
Rails が各種 Auth0 コールバック URL を前の手順で作成した Auth0 コントローラーにルーティングできるように、ルートを設定しておく必要があります。
##### チェックポイント
アプリケーションを実行し、意図したとおりに引き続き動作すること、および Auth0 関連のエラーが発生していないことを確認します。
ユーザーは `/auth/auth0` エンドポイントにアクセスすると、アプリケーションにログインできます。
[認証リクエストの偽造を防ぐ](https://github.com/cookpad/omniauth-rails_csrf_protection)には、`link_to` または
`button_to` ヘルパーメソッドで `:post` メソッドを使用してください。
```ruby lines theme={null}
<%= button_to 'Login', '/auth/auth0', method: :post %>
```
##### チェックポイント
選択するとユーザーが `/auth/auth0` エンドポイントにリダイレクトされるボタンをアプリケーションに追加します。ログインのために Auth0 にリダイレクトされ、認証が正常に完了するとアプリに戻ることを確認してください。
Rails アプリケーションにログインできるようになったので、次は
ログアウトする方法が必要です。ユーザーを `auth/logout` アクションにリダイレクトしてログアウトさせます。このアクションは
Auth0 のログアウトエンドポイントにリダイレクトします。
前の手順の後でこれをテストするには、セッションをクリアしてから、ユーザー
を Auth0 のログアウトエンドポイントにリダイレクトする必要がある場合があります。
```ruby lines theme={null}
<%= button_to 'Logout', 'auth/logout', method: :get %>
```
##### チェックポイント
選択するとユーザーが `/auth/logout` エンドポイントにリダイレクトされるボタンをアプリケーションに追加します。
Auth0 にリダイレクトされた後、すぐにアプリケーションに戻り、ログイン状態が解除されていることを確認します。
ユーザーのプロフィールを表示するには、アプリケーションで保護されたルートを用意する必要があります。複数の
コントローラー間で共有できるルートへのアクセスを制御するには、[Concern](https://guides.rubyonrails.org/getting_started.html#using-concerns) を使用できます。ユーザーが未認証の場合、Concern は自動的に Auth0 にリダイレクトするようにする必要があります。それ以外の
場合は、Concern は現在のユーザープロフィールを返すようにする必要があります。
Concern を作成したら、ログイン済みユーザーが必要なすべてのコントローラーにそれをインクルードします。すると、次の例のように、セッション `session[:userinfo]` から
ユーザー情報にアクセスできます。
```ruby lines theme={null}
class DashboardController < ApplicationController
include Secured
def show
@user = session[:userinfo]
end
end
```
セッションからユーザーが読み込まれたら、そのユーザー情報を使ってフロントエンドに情報を表示します。
```html lines theme={null}
正規化されたユーザープロファイル:<%= JSON.pretty_generate(@user[:info])%>
完全なユーザープロファイル:<%= JSON.pretty_generate(@user[:extra][:raw_info])%>
```
##### チェックポイント
アプリに `Secured` concern を追加し、認証済みのユーザーのみがアクセスできる
コントローラーにこれを含めます。認証済みのユーザーがその
コントローラー内のアクションにアクセスできること、および未認証のユーザーが認証のために Auth0 にリダイレクトされることを確認します。
## 次のステップ
お疲れ様でした！ここまで進めることができたなら、アプリケーションでログイン、ログアウト、およびユーザープロフィール情報が正常に動作しているはずです。
クイックスタートチュートリアルはここで終わりですが、Auth0にはまだまだ多くの機能があります。Auth0でできることの詳細については、以下をご覧ください。
* [Auth0 Dashboard](https://manage.auth0.com/dashboard/us/dev-gja8kxz4ndtex3rq) - Auth0のテナントとアプリケーションの設定および管理方法をご確認ください
* [omniauth-auth0 SDK](https://github.com/auth0/omniauth-auth0) - このチュートリアルで使用する SDK の詳細を見る
* [Auth0 Marketplace](https://marketplace.auth0.com/) - 有効化して Auth0 の機能を拡張できる連携を探す
```yml config/auth0.yml lines theme={null}
development:
auth0_domain: {yourDomain}
auth0_client_id: {yourClientId}
auth0_client_secret: {yourClientSecret}
```
```ruby auth0.rb lines theme={null}
AUTH0_CONFIG = Rails.application.config_for(:auth0)
Rails.application.config.middleware.use OmniAuth::Builder do
provider(
:auth0,
AUTH0_CONFIG['auth0_client_id'],
AUTH0_CONFIG['auth0_client_secret'],
AUTH0_CONFIG['auth0_domain'],
callback_path: '/auth/auth0/callback',
authorize_params: {
scope: 'openid profile'
}
)
end
```
```ruby auth0_controller.rb lines theme={null}
class Auth0Controller < ApplicationController
def callback
# OmniAuthはAuth0とIdPから返された情報を
# request.env['omniauth.auth']に格納します。
# このコードでは、id_tokenから提供されたraw_infoを取得し、
# セッションに割り当てます。
# 'omniauth.auth'の内容の詳細については、
# https://github.com/auth0/omniauth-auth0/blob/master/EXAMPLES.md#example-of-the-resulting-authentication-hash
# を参照してください。
auth_info = request.env['omniauth.auth']
session[:userinfo] = auth_info['extra']['raw_info']
# 認証成功後にリダイレクトするURLを指定します
redirect_to '/dashboard'
end
def failure
# 認証失敗を処理します
@error_msg = request.params['message']
end
def logout
reset_session
redirect_to logout_url
end
private
AUTH0_CONFIG = Rails.application.config_for(:auth0)
def logout_url
request_params = {
returnTo: root_url,
client_id: AUTH0_CONFIG['auth0_client_id']
}
URI::HTTPS.build(host: AUTH0_CONFIG['auth0_domain'], path: '/v2/logout', query: to_query(request_params)).to_s
end
def to_query(hash)
hash.map { |k, v| "#{k}=#{CGI.escape(v)}" unless v.nil? }.reject(&:nil?).join('&')
end
end
```
```ruby routes.rb lines theme={null}
Rails.application.routes.draw do
# . .
get '/auth/auth0/callback' => 'auth0#callback'
get '/auth/failure' => 'auth0#failure'
get '/auth/logout' => 'auth0#logout'
end
```
```ruby secured.rb lines theme={null}
module Secured
extend ActiveSupport::Concern
included do
before_action :logged_in_using_omniauth?
end
def logged_in_using_omniauth?
redirect_to '/' unless session[:userinfo].present?
end
end
```
```ruby auth0.rb lines theme={null}
AUTH0_CONFIG = Rails.application.config_for(:auth0)
Rails.application.config.middleware.use OmniAuth::Builder do
provider(
:auth0,
AUTH0_CONFIG['auth0_client_id'],
AUTH0_CONFIG['auth0_client_secret'],
AUTH0_CONFIG['auth0_domain'],
callback_path: '/auth/auth0/callback',
authorize_params: {
scope: 'openid profile'
}
)
end
```
```yml config/auth0.yml lines theme={null}
development:
auth0_domain: {yourDomain}
auth0_client_id: {yourClientId}
auth0_client_secret: {yourClientSecret}
```
```ruby auth0_controller.rb lines theme={null}
class Auth0Controller < ApplicationController
def callback
# OmniAuthはAuth0とIdPから返された情報を
# request.env['omniauth.auth']に格納します。
# このコードでは、id_tokenから提供されたraw_infoを取得し、
# セッションに割り当てます。
# 'omniauth.auth'の内容の詳細については、
# https://github.com/auth0/omniauth-auth0/blob/master/EXAMPLES.md#example-of-the-resulting-authentication-hash
# を参照してください。
auth_info = request.env['omniauth.auth']
session[:userinfo] = auth_info['extra']['raw_info']
# 認証成功後にリダイレクトするURLを指定します
redirect_to '/dashboard'
end
def failure
# 認証失敗を処理します
@error_msg = request.params['message']
end
def logout
reset_session
redirect_to logout_url
end
private
AUTH0_CONFIG = Rails.application.config_for(:auth0)
def logout_url
request_params = {
returnTo: root_url,
client_id: AUTH0_CONFIG['auth0_client_id']
}
URI::HTTPS.build(host: AUTH0_CONFIG['auth0_domain'], path: '/v2/logout', query: to_query(request_params)).to_s
end
def to_query(hash)
hash.map { |k, v| "#{k}=#{CGI.escape(v)}" unless v.nil? }.reject(&:nil?).join('&')
end
end
```
```ruby routes.rb lines theme={null}
Rails.application.routes.draw do
# . .
get '/auth/auth0/callback' => 'auth0#callback'
get '/auth/failure' => 'auth0#failure'
get '/auth/logout' => 'auth0#logout'
end
```
```ruby secured.rb lines theme={null}
module Secured
extend ActiveSupport::Concern
included do
before_action :logged_in_using_omniauth?
end
def logged_in_using_omniauth?
redirect_to '/' unless session[:userinfo].present?
end
end
```
```ruby auth0_controller.rb lines theme={null}
class Auth0Controller < ApplicationController
def callback
# OmniAuthはAuth0とIdPから返された情報を
# request.env['omniauth.auth']に格納します。
# このコードでは、id_tokenから提供されたraw_infoを取得し、
# セッションに割り当てます。
# 'omniauth.auth'の内容の詳細については、
# https://github.com/auth0/omniauth-auth0/blob/master/EXAMPLES.md#example-of-the-resulting-authentication-hash
# を参照してください。
auth_info = request.env['omniauth.auth']
session[:userinfo] = auth_info['extra']['raw_info']
# 認証成功後にリダイレクトするURLを指定します
redirect_to '/dashboard'
end
def failure
# 認証失敗を処理します
@error_msg = request.params['message']
end
def logout
reset_session
redirect_to logout_url
end
private
AUTH0_CONFIG = Rails.application.config_for(:auth0)
def logout_url
request_params = {
returnTo: root_url,
client_id: AUTH0_CONFIG['auth0_client_id']
}
URI::HTTPS.build(host: AUTH0_CONFIG['auth0_domain'], path: '/v2/logout', query: to_query(request_params)).to_s
end
def to_query(hash)
hash.map { |k, v| "#{k}=#{CGI.escape(v)}" unless v.nil? }.reject(&:nil?).join('&')
end
end
```
```yml config/auth0.yml lines theme={null}
development:
auth0_domain: {yourDomain}
auth0_client_id: {yourClientId}
auth0_client_secret: {yourClientSecret}
```
```ruby auth0.rb lines theme={null}
AUTH0_CONFIG = Rails.application.config_for(:auth0)
Rails.application.config.middleware.use OmniAuth::Builder do
provider(
:auth0,
AUTH0_CONFIG['auth0_client_id'],
AUTH0_CONFIG['auth0_client_secret'],
AUTH0_CONFIG['auth0_domain'],
callback_path: '/auth/auth0/callback',
authorize_params: {
scope: 'openid profile'
}
)
end
```
```ruby routes.rb lines theme={null}
Rails.application.routes.draw do
# . .
get '/auth/auth0/callback' => 'auth0#callback'
get '/auth/failure' => 'auth0#failure'
get '/auth/logout' => 'auth0#logout'
end
```
```ruby secured.rb lines theme={null}
module Secured
extend ActiveSupport::Concern
included do
before_action :logged_in_using_omniauth?
end
def logged_in_using_omniauth?
redirect_to '/' unless session[:userinfo].present?
end
end
```
```ruby routes.rb lines theme={null}
Rails.application.routes.draw do
# . .
get '/auth/auth0/callback' => 'auth0#callback'
get '/auth/failure' => 'auth0#failure'
get '/auth/logout' => 'auth0#logout'
end
```
```yml config/auth0.yml lines theme={null}
development:
auth0_domain: {yourDomain}
auth0_client_id: {yourClientId}
auth0_client_secret: {yourClientSecret}
```
```ruby auth0.rb lines theme={null}
AUTH0_CONFIG = Rails.application.config_for(:auth0)
Rails.application.config.middleware.use OmniAuth::Builder do
provider(
:auth0,
AUTH0_CONFIG['auth0_client_id'],
AUTH0_CONFIG['auth0_client_secret'],
AUTH0_CONFIG['auth0_domain'],
callback_path: '/auth/auth0/callback',
authorize_params: {
scope: 'openid profile'
}
)
end
```
```ruby auth0_controller.rb lines theme={null}
class Auth0Controller < ApplicationController
def callback
# OmniAuthはAuth0とIdPから返された情報を
# request.env['omniauth.auth']に格納します。
# このコードでは、id_tokenから提供されたraw_infoを取得し、
# セッションに割り当てます。
# 'omniauth.auth'の内容の詳細については、
# https://github.com/auth0/omniauth-auth0/blob/master/EXAMPLES.md#example-of-the-resulting-authentication-hash
# を参照してください。
auth_info = request.env['omniauth.auth']
session[:userinfo] = auth_info['extra']['raw_info']
# 認証成功後にリダイレクトするURLを指定します
redirect_to '/dashboard'
end
def failure
# 認証失敗を処理します
@error_msg = request.params['message']
end
def logout
reset_session
redirect_to logout_url
end
private
AUTH0_CONFIG = Rails.application.config_for(:auth0)
def logout_url
request_params = {
returnTo: root_url,
client_id: AUTH0_CONFIG['auth0_client_id']
}
URI::HTTPS.build(host: AUTH0_CONFIG['auth0_domain'], path: '/v2/logout', query: to_query(request_params)).to_s
end
def to_query(hash)
hash.map { |k, v| "#{k}=#{CGI.escape(v)}" unless v.nil? }.reject(&:nil?).join('&')
end
end
```
```ruby secured.rb lines theme={null}
module Secured
extend ActiveSupport::Concern
included do
before_action :logged_in_using_omniauth?
end
def logged_in_using_omniauth?
redirect_to '/' unless session[:userinfo].present?
end
end
```
```ruby secured.rb lines theme={null}
module Secured
extend ActiveSupport::Concern
included do
before_action :logged_in_using_omniauth?
end
def logged_in_using_omniauth?
redirect_to '/' unless session[:userinfo].present?
end
end
```
```yml config/auth0.yml lines theme={null}
development:
auth0_domain: {yourDomain}
auth0_client_id: {yourClientId}
auth0_client_secret: {yourClientSecret}
```
```ruby auth0.rb lines theme={null}
AUTH0_CONFIG = Rails.application.config_for(:auth0)
Rails.application.config.middleware.use OmniAuth::Builder do
provider(
:auth0,
AUTH0_CONFIG['auth0_client_id'],
AUTH0_CONFIG['auth0_client_secret'],
AUTH0_CONFIG['auth0_domain'],
callback_path: '/auth/auth0/callback',
authorize_params: {
scope: 'openid profile'
}
)
end
```
```ruby auth0_controller.rb lines theme={null}
class Auth0Controller < ApplicationController
def callback
# OmniAuthはAuth0とIdPから返された情報を
# request.env['omniauth.auth']に格納します。
# このコードでは、id_tokenから提供されたraw_infoを取得し、
# セッションに割り当てます。
# 'omniauth.auth'の内容の詳細については、
# https://github.com/auth0/omniauth-auth0/blob/master/EXAMPLES.md#example-of-the-resulting-authentication-hash
# を参照してください。
auth_info = request.env['omniauth.auth']
session[:userinfo] = auth_info['extra']['raw_info']
# 認証成功後にリダイレクトするURLを指定します
redirect_to '/dashboard'
end
def failure
# 認証失敗を処理します
@error_msg = request.params['message']
end
def logout
reset_session
redirect_to logout_url
end
private
AUTH0_CONFIG = Rails.application.config_for(:auth0)
def logout_url
request_params = {
returnTo: root_url,
client_id: AUTH0_CONFIG['auth0_client_id']
}
URI::HTTPS.build(host: AUTH0_CONFIG['auth0_domain'], path: '/v2/logout', query: to_query(request_params)).to_s
end
def to_query(hash)
hash.map { |k, v| "#{k}=#{CGI.escape(v)}" unless v.nil? }.reject(&:nil?).join('&')
end
end
```
```ruby routes.rb lines theme={null}
Rails.application.routes.draw do
# . .
get '/auth/auth0/callback' => 'auth0#callback'
get '/auth/failure' => 'auth0#failure'
get '/auth/logout' => 'auth0#logout'
end
```