用户设置¶

用户设置页面为 Authany 项目中已登录的用户提供了一个预置界面，供其查看和编辑账号设置。

设置页面中的操作¶

终端用户可以在设置页面中执行以下操作：

修改密码。
添加或修改邮箱、手机号码或用户名。
连接或断开与身份提供方的连接。
管理已登录的会话。
启用或禁用两步验证。
以及更多操作。

在网站中打开设置页面¶

Next.jsWeb SDK

使用 @authgear/nextjs/client 中的 <UserSettingsButton> 组件。它会将用户的会话交换为一个短期令牌，并在新标签页中打开已完成身份验证的设置页面，无需使用 Server Action。

import { UserSettingsButton } from "@authgear/nextjs/client";

export default function Dashboard() {
  return (
    <UserSettingsButton>Account Settings</UserSettingsButton>
  );
}

该按钮必须渲染在 <AuthgearProvider> 内部。请添加身份验证检查加以保护，以避免用户未登录时出错：

const { isAuthenticated } = useAuthgear();

<UserSettingsButton disabled={!isAuthenticated}>
  Account Settings
</UserSettingsButton>

更多选项（例如样式设置和自定义路由路径）请参阅 Next.js 指南。

使用 Authany Web SDK 的 open() 方法打开内置的设置页面。

import authgear, { Page } from "@authgear/web";

const openSettings = () => {
    authgear.open(Page.Settings)
}

在移动应用中使用 SDK 打开设置页面¶

如果您正在开发移动应用，可以使用我们的任意一款移动 SDK 打开设置页面。终端用户登录后，SDK 会提供一个方法，用于在 Webview 中打开设置页面。

React NativeFlutterXamariniOSAndroid

import React, { useCallback } from "react";
import authgear, { Page } from "@authgear/react-native";
import { View, Button } from "react-native";

function SettingsScreen() {
  const onPressOpenSettingsPage = useCallback(() => {
    authgear.open(Page.Settings).then(() => {
      // When the promise resolves, the webview have been closed.
    });
  }, []);
  return (
    <View>
      <Button
        title="Open Settings Page"
        onPress={onPressOpenSettingsPage}
      />
    </View>
  );
}

Future<void> onPressOpenSettingsPage() async {
  await authgear.open(SettingsPage.settings);
}

async void OnOpenSettingsClicked(object sender, EventArgs args)
{
  await authgear.OpenAsync(SettingsPage.Settings);
}

func onPressOpenSettingsPage(sender: UIButton, forEvent event: UIEvent) {
    authgear.open(.settings) {
        // When the completion handler is called, the webview is closed.
    }
}

public void onClickOpenSettingsPage() {
    authgear.open(Page.Settings, null, new OnOpenURLListener() {
        @Override
        public void onClosed() {
            // The webview is closed.
        }

        @Override
        public void onFailed(Throwable throwable) {
            // Some error occurred.
        }
    });
}

返回我的应用按钮¶

在基于 Web 的应用中，您可能希望在设置页面中添加"返回我的应用"按钮，以便用户在修改设置后能够返回您的网站。

要启用返回按钮，请在 Authany 管理台中进入品牌 > 外观设计。
打开在设置页面中显示"返回您的应用"按钮开关，并在开关下方输入"返回我的应用"按钮的目标 URL。

点击保存以应用新设置。

自定义用户设置页面¶

您可以使用 Authany 管理台中的 UI 设计工具，自定义用户设置页面的外观。

在 Authany 管理台中进入品牌 > 外观设计，即可自定义用户设置页面。

您为 AuthUI 设置的主题（深色、浅色或自动）、Logo、颜色、边框等，也会应用到用户设置页面。