> ## 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.
# MAUIアプリケーションにログインを追加する
> このチュートリアルは、Auth0を使用して、.NET MAUIアプリケーションにユーザーログインを追加する方法について説明します。
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: "auth0を構成する",
title: "Auth0を構成する"
}, {
id: "auth0-sdkをインストールする",
title: "Auth0 SDKをインストールする"
}, {
id: "プラットフォーム特定の構成",
title: "プラットフォーム特定の構成"
}, {
id: "auth0clientをインスタンス化する",
title: "Auth0Clientをインスタンス化する"
}, {
id: "アプリケーションにログインを追加する",
title: "アプリケーションにログインを追加する"
}, {
id: "アプリケーションにログアウトを追加する",
title: "アプリケーションにログアウトを追加する"
}, {
id: "ユーザープロファイル情報を表示する",
title: "ユーザープロファイル情報を表示する"
}];
Auth0を使用すると、アプリケーションに手軽に認証を追加することができます。このガイドは、.NET MAUIアプリケーションに[MAUI](https://www.nuget.org/packages/Auth0.OidcClient.MAUI/)用のAuth0 SDKを使ってAuth0を統合し、認証の追加とユーザープロファイル情報の表示を行う方法について説明します。
MAUI SDKは、Android、iOS、macOS、Windowsに対応しています。プラットフォーム特有の構成に関しては、以下をお読みください。
Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。
### アプリケーションを構成する
対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。
このクイックスタートを使って構成されたすべての設定は、[Dashboard](https://manage.auth0.com/#/)のアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。
完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。
### Callback URLを構成する
Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。
サンプルプロジェクトに沿って進めている場合は、`myapp://callback`に設定してください。
### ログアウトURLを構成する
ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。
サンプルプロジェクトに沿って進めている場合は、`myapp://callback`に設定してください。
MAUIアプリケーションで、Auth0認証を手軽に実装できるように、Auth0は[MAUI](https://www.nuget.org/packages/Auth0.OidcClient.MAUI/)のSDKを提供しています。
NuGetパッケージ マネージャー（［Tools（ツール）］ -> ［Library Package Manager（ライブラリーパッケージマネージャー）］ -> ［Package Manager Console（パッケージマネージャーコンソール）］）を使って`Auth0.OidcClient.MAUI`パッケージをインストールしてください。
NuGetパッケージマネージャーコンソール（`Install-Package`）や`dotnet` CLI（`dotnet add`）を代わりに使用することもできます。
```
Install-Package Auth0.OidcClient.MAUI
```
```
dotnet add package Auth0.OidcClient.MAUI
```
SDKをAndroidとWindowsで使うためにはプラットフォーム特定の構成が必要です。
### Android
`WebAuthenticatorCallbackActivity`を展開する新しいアクティビティを作成します：
```
[Activity(NoHistory = true, LaunchMode = LaunchMode.SingleTop, Exported = true)]
[IntentFilter(new[] { Intent.ActionView },
Categories = new[] { Intent.CategoryDefault, Intent.CategoryBrowsable },
DataScheme = CALLBACK_SCHEME)]
public class WebAuthenticatorActivity : Microsoft.Maui.Authentication.WebAuthenticatorCallbackActivity
{
const string CALLBACK_SCHEME = "myapp";
}
```
上記のアクティビティは、ログイン後にAuth0がAndroidアプリケーションへリダイレクトで戻る時に、アプリケーションが`myapp://callback` URLをハンドリングできることを保証します。
### Windows
Auth0にリダイレクトで戻された後、アプリケーションが適切に再アクティブ化されるには、2つのことを行う必要があります：
* 対応するプロトコルを`Package.appxmanifest`に加えます。この場合、設定は`myapp`になっていますが、お好きなものに変更できます（関連するすべてのAuth0 URLも確実に更新してください）。
```html theme={null}
```
* Windows固有の`App.xaml.cs`ファイルで`Activator.Default.CheckRedirectionActivation()`を呼び出します。
```
public App()
{
if (Auth0.OidcClient.Platforms.Windows.Activator.Default.CheckRedirectionActivation())
return;
this.InitializeComponent();
}
```
Auth0をアプリケーションに統合するには、Auth0ドメイン、クライアントID、要求されたスコープを含む`Auth0ClientOptions`のインスタンスを渡して`Auth0Client`クラスをインスタンス化します。また、Auth0が構成したURLを使って確実にアプリケーションにリダイレクトするよう、`RedirectUri`と`PostLogoutRedirectUri`も構成する必要があります。
```
using Auth0.OidcClient;
var client = new Auth0Client(new Auth0ClientOptions {
Domain = "{yourDomain}",
ClientId = "{yourClientId}",
RedirectUri = "myapp://callback",
PostLogoutRedirectUri = "myapp://callback",
Scope = "openid profile email"
});
```
SDKは初期設定で、AndroidにはChrome Custom Tabs、iOS・macOSにはASWebAuthenticationSessionを利用し、Windowsではシステムの既定ブラウザーが開きます。
##### チェックポイント
Auth0Clientが適切にインスタンス化されました。アプリケーションを実行して次の点を確認します：
Auth0ClientがMainPageで正しくインスタンス化されている。
アプリケーションがAuth0に関連したエラーを投入していない。
Auth0アプリケーションとAuth0 SDKの構成が完了したら、プロジェクトのためにログインをセットアップする必要があります。これを実現するには、SDKの`LoginAsync()`メソッドを使用して、ユーザーをAuth0のユニバーサルログインページにリダイレクトするログインボタンを作成します。
```js theme={null}
var loginResult = await client.LoginAsync();
```
エラーがなければ、`LoginAsync()`が返す`LoginResult`で`User`、`IdentityToken`、`AccessToken`、`RefreshToken`にアクセスすることができます。
##### チェックポイント
ユーザー名とパスワードを使ってログインやサインアップができるようになりました。
ログインボタンをクリックして次の点を確認します：
アプリケーションによってAuth0ユニバーサルログインページにリダイレクトされる。
ログインまたはサインアップできる。
Auth0によってアプリケーションにリダイレクトされる。
プロジェクトにログインしたユーザーには、ログアウトする方法も必要です。SDKの`LogoutAsync()`メソッドを使用してログアウトボタンを作成します。ユーザーはログアウトすると、Auth0ログアウトエンドポイントにリダイレクトされてから、即座に、このクイックスタートで先ほどセットアップしたログアウトURLにリダイレクトで戻されます。
```
await client.LogoutAsync();
```
##### チェックポイント
アプリケーションを実行してログアウトボタンをクリックし、次の点を確認します：
アプリケーションによって、アプリケーションの設定で［Allowed Logout URLs（許可されているログアウトURL）］の1つに指定されているアドレスへリダイレクトされる。
アプリケーションにログインしていない。
ユーザーがログインやログアウトできるようになったら、認証済のユーザーに関連付けられた[プロファイル情報](/docs/ja-jp/users/concepts/overview-user-profile)を取得できるようにしたいと考えるはずです。たとえば、ログインしたユーザーの名前やプロフィール写真をプロジェクトに表示したいかもしれません。
MAUI用のAuth0 SDKでは、`LoginResult.User`プロパティを通じてユーザー情報を提供します。
## 次のステップ
成功です！ここまで来れば、アプリケーションにログイン、ログアウト、ユーザープロファイル情報が備わっているはずです。
これでクイックスタートチュートリアルは終了ですが、機能はまだまだたくさんあります。Auth0でできることについて詳しくは、以下をご覧ください。
* [Auth0 Dashboard](https://manage.auth0.com/#) - Auth0のテナントやアプリケーションを構成して管理する方法について説明します
* [auth0-oidc-client-net SDK](https://github.com/auth0/auth0-oidc-client-net) - このチュートリアルで使用されているSDKをより詳しく説明します
* [Auth0 Marketplace](https://marketplace.auth0.com/) - Auth0の機能性を拡張できる各種の統合を見つけられます
```cs MainPage.xaml.cs lines highlight={3-10} theme={null}
public partial class MainPage : ContentPage
{
Auth0Client client = new Auth0Client(new Auth0ClientOptions
{
Domain = "{yourDomain}"
ClientId = "{yourClientId}",
RedirectUri = "myapp://callback",
PostLogoutRedirectUri = "myapp://callback",
Scope = "openid profile email"
});
public MainPage()
{
InitializeComponent();
}
private async void OnLoginClicked(object sender, EventArgs e)
{
var extraParameters = new Dictionary();
var audience = ""; // FILL WITH AUDIENCE AS NEEDED
if (!string.IsNullOrEmpty(audience))
extraParameters.Add("audience", audience);
var result = await client.LoginAsync(extraParameters);
DisplayResult(result);
}
private async void OnLogoutClicked(object sender, EventArgs e)
{
BrowserResultType browserResult = await client.LogoutAsync();
if (browserResult != BrowserResultType.Success)
{
ErrorLabel.Text = browserResult.ToString();
return;
}
LogoutBtn.IsVisible = false;
LoginBtn.IsVisible = true;
HelloLabel.Text = $"Hello, World!";
ErrorLabel.Text = "";
}
private void DisplayResult(LoginResult loginResult)
{
if (loginResult.IsError)
{
ErrorLabel.Text = loginResult.Error;
return;
}
var user = loginResult.User;
var name = user.FindFirst(c => c.Type == "name")?.Value;
var email = user.FindFirst(c => c.Type == "email")?.Value;
var picture = user.FindFirst(c => c.Type == "picture")?.Value;
LogoutBtn.IsVisible = true;
LoginBtn.IsVisible = false;
HelloLabel.Text = $"Hello, {loginResult.User.Identity.Name}";
ErrorLabel.Text = "";
}
}
```
```cs MainPage.xaml.cs lines highlight={25} theme={null}
public partial class MainPage : ContentPage
{
Auth0Client client = new Auth0Client(new Auth0ClientOptions
{
Domain = "{yourDomain}"
ClientId = "{yourClientId}",
RedirectUri = "myapp://callback",
PostLogoutRedirectUri = "myapp://callback",
Scope = "openid profile email"
});
public MainPage()
{
InitializeComponent();
}
private async void OnLoginClicked(object sender, EventArgs e)
{
var extraParameters = new Dictionary();
var audience = ""; // FILL WITH AUDIENCE AS NEEDED
if (!string.IsNullOrEmpty(audience))
extraParameters.Add("audience", audience);
var result = await client.LoginAsync(extraParameters);
DisplayResult(result);
}
private async void OnLogoutClicked(object sender, EventArgs e)
{
BrowserResultType browserResult = await client.LogoutAsync();
if (browserResult != BrowserResultType.Success)
{
ErrorLabel.Text = browserResult.ToString();
return;
}
LogoutBtn.IsVisible = false;
LoginBtn.IsVisible = true;
HelloLabel.Text = $"Hello, World!";
ErrorLabel.Text = "";
}
private void DisplayResult(LoginResult loginResult)
{
if (loginResult.IsError)
{
ErrorLabel.Text = loginResult.Error;
return;
}
var user = loginResult.User;
var name = user.FindFirst(c => c.Type == "name")?.Value;
var email = user.FindFirst(c => c.Type == "email")?.Value;
var picture = user.FindFirst(c => c.Type == "picture")?.Value;
LogoutBtn.IsVisible = true;
LoginBtn.IsVisible = false;
HelloLabel.Text = $"Hello, {loginResult.User.Identity.Name}";
ErrorLabel.Text = "";
}
}
```
```cs MainPage.xaml.cs lines highlight={32} theme={null}
public partial class MainPage : ContentPage
{
Auth0Client client = new Auth0Client(new Auth0ClientOptions
{
Domain = "{yourDomain}"
ClientId = "{yourClientId}",
RedirectUri = "myapp://callback",
PostLogoutRedirectUri = "myapp://callback",
Scope = "openid profile email"
});
public MainPage()
{
InitializeComponent();
}
private async void OnLoginClicked(object sender, EventArgs e)
{
var extraParameters = new Dictionary();
var audience = ""; // FILL WITH AUDIENCE AS NEEDED
if (!string.IsNullOrEmpty(audience))
extraParameters.Add("audience", audience);
var result = await client.LoginAsync(extraParameters);
DisplayResult(result);
}
private async void OnLogoutClicked(object sender, EventArgs e)
{
BrowserResultType browserResult = await client.LogoutAsync();
if (browserResult != BrowserResultType.Success)
{
ErrorLabel.Text = browserResult.ToString();
return;
}
LogoutBtn.IsVisible = false;
LoginBtn.IsVisible = true;
HelloLabel.Text = $"Hello, World!";
ErrorLabel.Text = "";
}
private void DisplayResult(LoginResult loginResult)
{
if (loginResult.IsError)
{
ErrorLabel.Text = loginResult.Error;
return;
}
var user = loginResult.User;
var name = user.FindFirst(c => c.Type == "name")?.Value;
var email = user.FindFirst(c => c.Type == "email")?.Value;
var picture = user.FindFirst(c => c.Type == "picture")?.Value;
LogoutBtn.IsVisible = true;
LoginBtn.IsVisible = false;
HelloLabel.Text = $"Hello, {loginResult.User.Identity.Name}";
ErrorLabel.Text = "";
}
}
```
```cs MainPage.xaml.cs lines highlight={55-58} theme={null}
public partial class MainPage : ContentPage
{
Auth0Client client = new Auth0Client(new Auth0ClientOptions
{
Domain = "{yourDomain}"
ClientId = "{yourClientId}",
RedirectUri = "myapp://callback",
PostLogoutRedirectUri = "myapp://callback",
Scope = "openid profile email"
});
public MainPage()
{
InitializeComponent();
}
private async void OnLoginClicked(object sender, EventArgs e)
{
var extraParameters = new Dictionary();
var audience = ""; // FILL WITH AUDIENCE AS NEEDED
if (!string.IsNullOrEmpty(audience))
extraParameters.Add("audience", audience);
var result = await client.LoginAsync(extraParameters);
DisplayResult(result);
}
private async void OnLogoutClicked(object sender, EventArgs e)
{
BrowserResultType browserResult = await client.LogoutAsync();
if (browserResult != BrowserResultType.Success)
{
ErrorLabel.Text = browserResult.ToString();
return;
}
LogoutBtn.IsVisible = false;
LoginBtn.IsVisible = true;
HelloLabel.Text = $"Hello, World!";
ErrorLabel.Text = "";
}
private void DisplayResult(LoginResult loginResult)
{
if (loginResult.IsError)
{
ErrorLabel.Text = loginResult.Error;
return;
}
var user = loginResult.User;
var name = user.FindFirst(c => c.Type == "name")?.Value;
var email = user.FindFirst(c => c.Type == "email")?.Value;
var picture = user.FindFirst(c => c.Type == "picture")?.Value;
LogoutBtn.IsVisible = true;
LoginBtn.IsVisible = false;
HelloLabel.Text = $"Hello, {loginResult.User.Identity.Name}";
ErrorLabel.Text = "";
}
}
```
Sign up for an{" "}
Auth0 account
{" "}
or{" "}
console.log("log in")}>
log in
{" "}
to your existing account to integrate directly with your own tenant.