> ## 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.
# CapacitorアプリでIonic Vueにログインを追加する
> このガイドは、Ionic（Vue）とCapacitrorのアプリケーションにAuth0 Vue SDKを使ってAuth0を統合する方法を説明します。
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, lang = "en"}) => {
const translations = {
en: {
viewOnGithub: "View On GitHub",
loginAndDownload: "Download Sample"
},
"fr-ca": {
viewOnGithub: "Afficher sur GitHub",
loginAndDownload: "Télécharger un exemple"
},
"ja-jp": {
viewOnGithub: "Githubで表示",
loginAndDownload: "サンプルをダウンロード"
}
};
const text = translations[lang] || translations.en;
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("Could not parse GitHub URL:", url);
return null;
} catch (error) {
console.error("Error parsing GitHub URL:", error);
return null;
}
};
const handleDownload = async () => {
const params = parseGithubUrl(githubLink);
if (!params) {
console.error("Invalid GitHub URL format");
return;
}
try {
await window.Auth0DocsUI?.getSample(params);
} catch (error) {
console.error("Failed to download sample:", 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
{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}
;
};
Auth0を使用すると、アプリケーションに手軽に認証を追加して、ユーザープロファイル情報にアクセスすることができます。このガイドは、Ionic（Vue）とCapacitrorのアプリケーションに[Auth0 Vue SDK](https://github.com/auth0/auth0-vue)を使ってAuth0を統合する方法を説明します。
このクイックスタートは、[Ionic](https://ionicframework.com/)アプリケーションが[Capacitor](https://capacitorjs.com/)を使ってすでに実行されていることを前提としています。そうでない場合には、[IonicフレームワークでCapacitorを使用する](https://capacitorjs.com/docs/getting-started/with-ionic)ガイドを参照しながら簡単なアプリから始めるか、[サンプルアプリ](https://github.com/auth0-samples/auth0-ionic-samples)を複製してください。
また、[Capacitorの開発ワークフロー](https://capacitorjs.com/docs/basics/workflow)を理解しておく必要もあります。
Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、プロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。
以下の説明では、`YOUR_PACKAGE_ID`を実際のアプリケーションのパッケージIDに置き換えてください。これは、`capacitor.config.ts`ファイルの`appId`フィールドで見つけて構成することができます。詳細については、[Capacitorの構成スキーマ](https://capacitorjs.com/docs/config#schema)を参照してください。
### アプリケーションを構成する
対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。
このクイックスタートを使って構成されたすべての設定は、[Dashboard](https://manage.auth0.com/#/)のアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。
代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。
### Callback URLを構成する
Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。
サンプルプロジェクトに沿って進めている場合は、`YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback`に設定してください。
### ログアウトURLを構成する
ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。
サンプルプロジェクトに沿って進めている場合は、`YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback`に設定してください。
### 許可されているオリジンを構成する
ネイティブアプリケーションからAuth0へ要求を送信できるようにするには、[アプリケーションの設定](https://manage.auth0.com/#/applications/%7ByourClientId%7D/settings)で次の**許可されているオリジン** を設定します。
サンプルプロジェクトに沿って進めている場合、iOSとAndroidでそれぞれ`capacitor://localhost, http://localhost`を設定します。
最後に、アプリケーションの\*\*［Application Type（アプリケーションタイプ）］\*\* が\*\*［Native（ネイティブ）］\*\* になっていることを[アプリケーションの設定](https://manage.auth0.com/#/applications/%7ByourClientId%7D/settings)で必ず確認してください。
プロジェクトディレクトリで次のコマンドを実行して、Auth0 Vue SDKをインストールします：
`npm install @auth0/auth0-vue`
SDKはモジュールや認証サービスなど、Auth0をVueアプリケーションに慣用的に統合しやすくする種類をいくつか公開しています。
### Capacitorプラグインをインストールする
このクイックスタートとサンプルでは、Capacitorの公式プラグインをいくつか使用しています。次のコマンドを使用して、これらをアプリにインストールします：
npm install @capacitor/browser @capacitor/app
* [`@capacitor/browser`](https://capacitorjs.com/docs/apis/browser)：デバイスのシステムブラウザーと対話できるようになり、Auth0の認可エンドポイントへのURLを開くために使用されます
* [`@capacitor/app`](https://capacitorjs.com/docs/apis/app)：高レベルのアプリイベントを受け取れるようになるため、Auth0からのコールバックを扱うのに便利です
iOSのCapacitorのBrowserプラグインは[`SFSafariViewController`](https://developer.apple.com/documentation/safariservices/sfsafariviewcontroller)を使用し、iOS 11以降ではデバイス上のSafariとクッキーを共有しません。つまり、これらのデバイスでは[SSO](/docs/ja-jp/sso)が機能しません。SSOが必要な場合には、[ASWebAuthenticationSession](https://developer.apple.com/documentation/authenticationservices/aswebauthenticationsession)を使用する互換性のあるプラグインを使用してください。
SDKは、SDKが機能するために必要なすべてのサービスを含んだコンポーザブル、`createAuth0`をエクスポートします。このコンポーザブルをアプリケーションに登録し、Auth0のドメインとクライアントIDで構成する必要があります。
`createAuth0`コンポーザブルは以下の構成を取ります。
* `domain`：Auth0 Dashboardで作成したアプリケーションの\*\*［Settings（設定）］\*\* にある`domain`値、またはAuth0の[カスタムドメイン機能](http://localhost:3000/docs/custom-domains)を使用する場合のカスタムドメインです。
* `clientId`：Auth0 Dashboardで作成したアプリケーションの\*\*［Settings（設定）］\*\* にあるクライアントID値です。
* `useRefreshTokens`：AndroidまたはiOSでauth0-vueをIonicと使用するには、リフレッシュトークンを有効にする必要があります。
* `useRefreshTokensFallback`：AndroidまたはiOSでauth0-vueをIonicと使用するには、iframeのフォールバックを無効にする必要があります。
* `authorizationParams.redirect_uri`：Auth0で認証した後に、ユーザーをリダイレクトするURLです。
アプリケーションの閉開後に認証を継続するには、SDKを構成する際に`cacheLocation`を`localstorage`に設定することをお勧めします。ただし、[localstorageにトークンを保管するリスク](/docs/ja-jp/libraries/auth0-single-page-app-sdk#change-storage-options)を理解してください。また、状況によってはlocalstorageのデータが思いがけず復元される可能性もあるため、Capacitorアプリ内では**一次的** なものとして扱ってください。[Capacitorドキュメントに記載のストレージに関するガイド](https://capacitorjs.com/docs/guides/storage#why-cant-i-just-use-localstorage-or-indexeddb)をお読みください。
さらに、より安全で永続的なストレージの仕組みが要件である場合、SDKを使用すると、[カスタムのキャッシュを実装](https://github.com/auth0/auth0-spa-js/blob/master/EXAMPLES.md#creating-a-custom-cache)してトークンを保管することができます。
**注意** ：[CapacitorのStorageプラグイン](https://capacitorjs.com/docs/apis/storage)は、iOSでは[UserDefaults](https://developer.apple.com/documentation/foundation/userdefaults)、Androidでは[SharedPreferences](https://developer.android.com/reference/android/content/SharedPreferences)によってバックアップされるため、トークンの保管に使用**しない** ことをお勧めします。これらのAPIを使って保管されたデータは暗号化されません。セキュリティで保護されることもなく、クラウドと同期される可能性があります。
##### チェックポイント
アプリがAuth0 Vue SDKで構成されました。今度は、アプリケーションを実行して、SDKがエラーなく初期化されること、そして、以前と同じように動作することを確認します。
Capacitorアプリケーションでは、[CapacitorのBrowserプラグイン](https://capacitorjs.com/docs/apis/browser)によって、Auth0の[ユニバーサルログインページ](https://auth0.com/universal-login)にリダイレクトされます。`loginWithRedirect`関数の`openUrl`パラメーターに`Browser.open`の使用を設定し、デバイスのシステムブラウザーコンポーネント（iOSでは[SFSafariViewController](https://developer.apple.com/documentation/safariservices/sfsafariviewcontroller)、Androidでは[Chrome Custom Tabs](https://developer.chrome.com/docs/android/custom-tabs)）でURLが開くようにします。
SDKの`loginWithRedirect`メソッドは、デフォルトで`window.location.href`を使用して、ユーザーのデバイスにあるデフォルトのブラウザーアプリケーションでログインページを開きます。プラットフォームに適切なシステムブラウザーコンポーネントは使用しません。ユーザーが認証でアプリケーションを離れるため、ユーザーエクスペリエンスとしては最適ではありません。
##### チェックポイント
loginWithRedirect関数は、SDKにログインフローを開始するように指示します。openUrlパラメーターを設定して、Browser.open関数を呼び出し、プラットフォームのシステムブラウザーコンポーネントでログインURLを開きます。これは、ユーザーがアプリケーションにログインする方法を提供します。ユーザーはAuth0のログインページにリダイレクトされ、エラーは一切受け取りません。
ユーザーがユニバーサルログインページでログインすると、カスタムURLスキームを使ったURLでアプリにリダイレクトされます。`appUrlOpen`イベントがアプリ内で処理されなければなりません。Auth0 SDKの`handleRedirectCallback`メソッドを呼び出すと、認証状態を初期化することができます。
このメソッドは、Auth0からのリダイレクトでのみ使用することができます。正常に機能していることを確認するには、URL内の`code`と`state`パラメーターを確認します。
このイベントが発生した際に、`Browser.close()`メソッドがブラウザーを閉じるようにします。
以下の説明では、カスタムURLスキームを使用して、アプリケーション内でコールバックを処理することを前提にしています。このためには、`YOUR_PACKAGE_ID`を選択したプラットフォームのURLスキームで置き換えて登録します。詳細については、iOSには「[カスタムURLスキームを定義する](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app)」、Androidには「[アプリコンテンツ用のディープリンクを作成する](https://developer.android.com/training/app-links/deep-linking)」をお読みください。
##### チェックポイント
アプリケーションのAppコンポーネントセットアップにappUrlOpenを追加して、ログインします。ユーザーが認証して、アプリにログインすると、ブラウザーのウィンドウが閉じます。
ユーザーがログインできるようになりました。今度は、[ログアウトする方法](/docs/ja-jp/logout/guides/logout-auth0)を構成する必要があります。ユーザーをAuth0のログアウトエンドポイントにリダイレクトし、ブラウザー内のセッションをクリアする必要があります。他の場合と同様に、ユーザーがアプリから離れることでユーザーエクスペリエンスが損なわれないように、CapacitorのBrowserプラグインがリダイレクトを処理するようにします。
Auth0 SDKを使用してIonicとCapacitorで実現するには、以下を行います。
* アプリについて、ログアウト後にAuth0のリダイレクト先となるURLを構築します。これは、登録済みのカスタムスキームとAuth0ドメインを使ったURLです。これを、Auth0 Dashboardの\*\*［Allowed Logout URLs（許可されているログアウトURL）］\*\* の構成に追加します。
* `logout`を呼び出し、`logoutParams.returnTo`パラメーターにリダイレクト先のURLを渡して、SDKからログアウトします。
* CapacitorのBrowserプラグインを使用して`Browser.open`でURLを開くコールバックに、`openUrl`パラメーターを設定します。
ログインの手順と同様に、`logout`を呼び出す際に`openUrl`を設定しないと、SDKがユーザーをログアウトURLにリダイレクトするのに、デバイスのデフォルトのブラウザーアプリケーションが使用されるため、ユーザーエクスペリエンスとしては最適ではありません。
##### チェックポイント
ユーザーがアプリケーションからログアウトする方法を提供します。Auth0にリダイレクトしてから、returnToパラメーターで指定したアドレスへ移動することを確認します。アプリケーションにログインしていないことを確認します。
Auth0 Vue SDKは必要な任意のコンポーネントについて、名前やプロフィール写真など、ログイン済みのユーザーに関連付けられた[ユーザープロファイル](/docs/ja-jp/users/concepts/overview-user-profile)を取得し、ユーザーインターフェイスをパーソナライズします。プロファイル情報は、`useAuth0()`コンポーザブルが公開する`user`プロパティを介して使用することができます。
SDKの初期化は非同期に行われます。`isLoading`と`user`プロパティを確認して、ユーザープロファイルを保護する必要があります。`isLoading`が`false`になり、`user`が値を持つと、ユーザープロファイルを利用することができます。
##### チェックポイント
ユーザーがアプリ内でユーザープロファイルの詳細を表示できる手段を提供し、ログインした後に自分のプロファイル情報を取得して画面に表示できることを確認します。
## 次のステップ
成功です！ここまで来れば、アプリケーションにログイン、ログアウト、ユーザープロファイル情報が備わっているはずです。
これでクイックスタートチュートリアルは終了ですが、機能はまだまだたくさんあります。Auth0でできることについて詳しくは、以下をご覧ください。
* [Auth0 Dashboard](https://manage.auth0.com/#) - Auth0のテナントやアプリケーションを構成して管理する方法について説明します
* [Auth0 Marketplace](https://marketplace.auth0.com/) - Auth0の機能性を拡張できる各種の統合を見つけられます
```ts main.ts lines highlight={} theme={null}
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { IonicVue } from "@ionic/vue";
import { createAuth0 } from "@auth0/auth0-vue";
import config from "./auth.config";
// ..
// Build the URL that Auth0 should redirect back to
const redirect_uri = `${config.appId}://{yourDomain}/capacitor/${config.appId}/callback`;
const app = createApp(App).use(IonicVue).use(router);
app.use(
createAuth0({
domain: "{yourDomain}",
clientId: "{yourClientId}",
useRefreshTokens: true,
useRefreshTokensFallback: false,
authorizationParams: {
redirect_uri
}
})
);
router.isReady().then(() => {
app.mount("#app");
});
```
```html LoginButton.vue lines highlight={} theme={null}
Log in
```
```html LogoutButton.vue lines highlight={} theme={null}
Log out
```
```html UserProfile.vue lines highlight={} theme={null}
Loading ...
{{ user.name }}
{{ user.email }}
```
```html LoginButton.vue lines highlight={} theme={null}
Log in
```
```ts main.ts lines highlight={} theme={null}
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { IonicVue } from "@ionic/vue";
import { createAuth0 } from "@auth0/auth0-vue";
import config from "./auth.config";
// ..
// Build the URL that Auth0 should redirect back to
const redirect_uri = `${config.appId}://{yourDomain}/capacitor/${config.appId}/callback`;
const app = createApp(App).use(IonicVue).use(router);
app.use(
createAuth0({
domain: "{yourDomain}",
clientId: "{yourClientId}",
useRefreshTokens: true,
useRefreshTokensFallback: false,
authorizationParams: {
redirect_uri
}
})
);
router.isReady().then(() => {
app.mount("#app");
});
```
```html LogoutButton.vue lines highlight={} theme={null}
Log out
```
```html UserProfile.vue lines highlight={} theme={null}
Loading ...
{{ user.name }}
{{ user.email }}
```
```ts main.ts lines highlight={} theme={null}
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { IonicVue } from "@ionic/vue";
import { createAuth0 } from "@auth0/auth0-vue";
import config from "./auth.config";
// ..
// Build the URL that Auth0 should redirect back to
const redirect_uri = `${config.appId}://{yourDomain}/capacitor/${config.appId}/callback`;
const app = createApp(App).use(IonicVue).use(router);
app.use(
createAuth0({
domain: "{yourDomain}",
clientId: "{yourClientId}",
useRefreshTokens: true,
useRefreshTokensFallback: false,
authorizationParams: {
redirect_uri
}
})
);
router.isReady().then(() => {
app.mount("#app");
});
```
```html LoginButton.vue lines highlight={} theme={null}
Log in
```
```html LogoutButton.vue lines highlight={} theme={null}
Log out
```
```html UserProfile.vue lines highlight={} theme={null}
Loading ...
{{ user.name }}
{{ user.email }}
```
```html LogoutButton.vue lines highlight={} theme={null}
Log out
```
```ts main.ts lines highlight={} theme={null}
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { IonicVue } from "@ionic/vue";
import { createAuth0 } from "@auth0/auth0-vue";
import config from "./auth.config";
// ..
// Build the URL that Auth0 should redirect back to
const redirect_uri = `${config.appId}://{yourDomain}/capacitor/${config.appId}/callback`;
const app = createApp(App).use(IonicVue).use(router);
app.use(
createAuth0({
domain: "{yourDomain}",
clientId: "{yourClientId}",
useRefreshTokens: true,
useRefreshTokensFallback: false,
authorizationParams: {
redirect_uri
}
})
);
router.isReady().then(() => {
app.mount("#app");
});
```
```html LoginButton.vue lines highlight={} theme={null}
Log in
```
```html UserProfile.vue lines highlight={} theme={null}
Loading ...
{{ user.name }}
{{ user.email }}
```
```html UserProfile.vue lines highlight={} theme={null}
Loading ...
{{ user.name }}
{{ user.email }}
```
```ts main.ts lines highlight={} theme={null}
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { IonicVue } from "@ionic/vue";
import { createAuth0 } from "@auth0/auth0-vue";
import config from "./auth.config";
// ..
// Build the URL that Auth0 should redirect back to
const redirect_uri = `${config.appId}://{yourDomain}/capacitor/${config.appId}/callback`;
const app = createApp(App).use(IonicVue).use(router);
app.use(
createAuth0({
domain: "{yourDomain}",
clientId: "{yourClientId}",
useRefreshTokens: true,
useRefreshTokensFallback: false,
authorizationParams: {
redirect_uri
}
})
);
router.isReady().then(() => {
app.mount("#app");
});
```
```html LoginButton.vue lines highlight={} theme={null}
Log in
```
```html LogoutButton.vue lines highlight={} theme={null}
Log out
```
Sign up for an{" "}
Auth0 account
{" "}
or{" "}
console.log("log in")}>
log in
{" "}
to your existing account to integrate directly with your own tenant.