为原生应用添加自定义登录/注册 UI¶

在任何原生应用（Flutter、React Native、Kotlin 或 iOS）中实现自定义登录和注册页面，都不需要对已经接入 Authany 的现有原生应用代码做太多改动。

目前，我们尚不支持原生代码直接与驱动自定义 UI 的 Authentication Flow API 交互。也就是说，您需要使用我们已经提供的各平台专用 SDK，调用 authenticate 方法来启动身份验证流程。

本指南将教您如何使用 Flutter SDK 和 Authentication Flow API，在 Flutter 应用中实现自定义身份验证 UI。

在 Authany 应用中启用自定义 UI 的关键，是在 Authany 中指定一个自定义 UI URL。设置该值后，在任意原生 SDK 中调用 authenticate 方法都会以 Web View 的形式打开自定义登录/注册 UI，而不是默认的 Auth UI。

如果您还没有 Authany 应用，请登录 Authany 管理台，进入应用 > 添加应用 来创建一个应用。

输入应用名称，将应用类型设置为 Native App，然后点击保存按钮继续。

在这一步中，您需要添加一个 URI，身份验证完成后，Authany 会用它把您的应用重新带回屏幕前台。

对于我们的示例 Flutter 应用，这个 URI 将以应用的包名开头，后面跟着 ://host/path。

要设置重定向 URI，请在应用配置页面的 URIs 部分中找到 Authorized Redirect URI，输入应用对应的正确 URI，然后点击保存。

注意：您可以在 android/app/build.gradle 文件的 android > namespace 下找到 Flutter 应用的包名。

在 Authany 管理台中为 Custom UI URI 设置一个值，会让应用的用户被重定向到您的自定义身份验证 UI，而不是默认的 Auth UI。因此，这是为原生应用添加自定义登录和注册 UI 时最重要的一步。

要设置 Custom UI URI，请在 Authany 管理台的应用配置页面中滚动到 Custom UI 部分，然后在 Custom UI URI 文本框中填入自定义登录/注册页面的 URL。

这个 URL 应是一个可公开访问的网络链接，托管着实现自定义 UI、并实际与 Authentication Flow API 交互的代码。想了解更多，可以参考我们使用 PHP 和 JavaScript(Express) 实现自定义登录和注册 UI 页面的示例。

如果您现有的 Flutter 应用已经实现了默认的 AuthUI，可能不需要做任何改动，就能使用您在上一步中设置的 Custom UI URI。

但如果您正在创建一个新应用，请按以下步骤操作：

运行以下命令创建一个新的 Flutter 应用：

flutter create myapp

运行上述命令前，请确保本地已经搭建好 Flutter 开发环境。可以参考 Flutter 官方的搭建指南，点击这里查看。完成后，请用您喜欢的代码编辑器（VS Code 或 Android Studio）打开新建的项目文件夹。

现在，在项目目录下运行以下命令来安装 Authany Flutter SDK：

flutter pub add flutter_authgear

要在 Flutter 应用中使用 SDK 接入 Authany，请参照 Authany Flutter SDK 指南页面中的说明操作。

您也可以在下面找到其他原生平台的类似指南：

要测试您的应用，请运行以下命令：

flutter run

当应用在真机或模拟器上运行后，点击 Authenticate 按钮。这时您应该会看到自定义 UI，而不是默认的 Auth UI。

上面这份指南中有一点非常重要：在原生应用中使用自定义身份验证 UI 时，您仍然可以像使用默认 Auth UI 那样搭建应用。唯一的主要区别在于，您需要在 Authany 管理台中提供自定义 UI 的链接。

想了解更多在 Flutter 应用中使用 Authany 的方法，请查看 Authany Flutter SDK 这个页面。