Skip to content
Go to Dashboard

品牌化

全局登录框

路径:品牌化->全局登录框

INFO

有关支持「全局登录框」功能权益的 GenAuth 用户池版本信息,请查看 官网「价格」页。如你的版本不支持此权益,且想试用,可开通体验期。有关体验期介绍及开通方式,请查看 体验期

品牌化作为 GenAuth 最为注重的模块之一,给用户提供了非常强大的自定义功能。

下图为全局登录配置概览。

序号说明
1样式配置:可配置登录框样式。
2功能配置,可配置登录注册协议及登录注册信息补全。
3体验登录。
4整体样式:包括登录框样式配置及展示页面。
5常规登录:配置忘记密码、企业账号登录和社交账号登录入口的显示和隐藏。
6登录框预览语言,包括 跟随系统简体中文繁體中文English日本語
7Web 端预览。
8移动端预览。
9全屏显示,仅适用于 Web 端预览;再次点击,恢复原尺寸。

INFO

GenAuth 控制台内部的所有品牌化配置都会被该用户池下未开自定义登录框功能的应用所读取。

样式配置

你可以在此配置登录框的显示样式。

整体样式

整体样式适用于一次认证、二次认证、信息补全等应用登录 / 注册全程。

管理员可以在 整体样式 页面自定义登录 / 注册页背景、加载图标、登录框版本、显示语言、CSS 等。

自定义背景

管理员可以将登录框展示背景设置为纯色,或者上传图片,以图片为背景。

INFO

上传图片时,确保图片大小不超过 2M。

自定义加载图标

管理员可以在此模块自定义登录框加载时展示的图标。

要删除当前加载图标,只需点击选框,确定删除。

登录框版本

管理员可以选择 升级版经典版 两种登录框配置页面,默认升级版。

INFO

自 2022 年 8 月起,新创建的用户池将不支持切换至经典版登录框。我们的所有功能更新和性能维护也会基于升级版登录框完成。对于在此时间点之前创建的用户池,你正在使用的经典版登录框将不会受到影响。

下图为经典版配置页面:

默认语言

定义登录框的显示语言:

  • 跟随系统 登录框显示语言和登录后的应用系统语言可能不同。管理员可以设置登录框显示语言跟随应用的系统语言,从而提升用户登录体验。
  • 简体中文
  • 繁體中文
  • English
  • 日本語
切换语言

管理员可以通过 切换语言 开关定义是否在登录框底部显示语言切换选项,从而用户可以自定义登录框显示语言。如过该开关关闭,则用户无法自定义登录框显示语言。此时,界面显示语言为管理员在 默认语言 中配置的。

自定义 css

自定义 css 可以对托管登录页实现更加细致的控制,以便符合用户对于登录页的预期。通过自定义 css 可以对登录框进行一些高级自定义样式定制,如修改背景颜色:

css
.authing-guard-layout {
  background: gray;
}

要通过自定义 css 配置个性化登录框,需要在 整体样式 标签页打开 自定义 css 开关。

自定义 css 有以下注意事项:

  • 尽量控制指定 css 生效范围,其生成规则是依赖最后一级路由。如只针对登录页面样式,可在所有 css 选择器前添加 .login,如 /login 页面 则添加 .login
  • 尽量指定要修改的 guard 渲染节点,常见渲染节点如:
    • .g2-view-login
    • .g2-view-register
    • .g2-forget-password
    • .g2-need-help
    • ...如下图.g2-view-login 这个类名表明 guard 处于登录节点。携带这个类名作为前置的选择器,其样式只会在登录节点生效。
  • 具体的 css 类名可以在 GenAuth 的登录界面通过 Chrome 控制台查看,需要自定义样式的 dom 标签都提供了固定的类名,不能使用带有 hash 的类名,因为会经常变化。

  • 尽量精确选择元素。如果 dom 层级很深,建议使用 复制 selector 并配合前面第一、二条的前置选择器使用。

INFO

Guard 为更好的服务用户一直在保持迭代以及功能的扩展。在这一发展过程中可能会存在 dom 结构调整以及类名弃用等情况。如果影响了用户自定义 css 相关,可联系我们开发人员进行 css 调整。

常规登录

所谓的 常规登录 指的是密码登录和验证码登录。本章节会介绍只适用于常规登录的 忘记密码企业账号登录社交账号登录 隐藏 / 显示开关。

忘记密码

管理员可以在此定义是否在登录框显示 忘记密码 组件。开启后,用户在忘记登录密码时可以通过点击此按钮,重置密码登录。

企业账号登录

INFO

企业账号登录 隐藏 / 显示开关作用的前提是已添加并启用了第三方企业登录方式。否则即便该开关开启,也无法在登录框显示企业账号登录入口。有关添加企业登录方式的详细信息,请参阅 连接企业身份源

管理员可以在此定义是否在登录框显示其他企业账号登录入口。开启后,用户可以使用其他企业应用账号登录。

社交账号登录

INFO

社交账号登录 隐藏 / 显示开关作用的前提是已添加并启用了第三方社交登录方式。否则即便该开关开启,也无法在登录框显示社交账号登录入口。有关添加社交登录方式的详细信息,请参阅 连接社会化身份源

管理员可以在此定义是否在登录框显示第三方社交账号登录入口。开启后,用户可以使用第三方社交账号登录。

扫码登录

GenAuth 支持用户通过移动端扫码来登录。除了使用移动端 APP 扫码,还可以使用移动端第三方企业身份源或者社会化身份源扫码。

管理员可在此配置是否开启企业账号登录和社交账号登录。开启后,用户在扫码登录页可见。

企业账号登录

常规登录企业账号登录

社交账号登录

常规登录社交账号登录

功能配置

登录注册协议

用户注册时,需要让用户了解并同意你的服务条款,从而帮助你规避法律风险。为此,GenAuth 提供 登录注册协议 功能。

序号字段说明
1添加点击添加新的注册协议。
2显示位置协议呈现的位置:出现在 注册界面 还是 登录界面注意:支持复选。
3必选添加注册协议时默认开启。
4界面语言注意:当前配置的协议仅在所选语言界面下才会显示。可以点击协议添加面板下的 添加 按钮为不同语言的登录框添加不同语言版本注册协议。
5勾选文字可在此配置注册协议标题和内容。
6撤销撤销对注册协议标题和内容的修改。
7重做恢复对注册协议标题和内容的修改。
8协议内容点击配置具体的协议内容。
9注册协议提示可在此配置待查看和勾选的注册协议提示,用户登录 / 注册时可见。
10保存保存配置和修改。
11删除删除当前注册协议配置。
12添加同 1。
13地址协议内容可以是外部链接:即你已经部署好了协议详细内容的页面,直接输入页面地址即可,用户点击协议标题会跳转到你配置的链接。
14显示文字可在此配置外部链接对应的协议内容标题。

要开启此功能,执行以下步骤:

  1. 品牌化->功能配置->登录注册协议 模块点击右上角 添加 按钮。下方打开协议添加面板。

  2. 勾选 显示位置

  3. 选择注册协议适用的界面语言。

  4. 配置协议内容。

  5. 点击 保存 按钮保存当前配置。

配置完成后就可以在注册界面看到该注册协议。用户在登录 / 注册时需要查看和勾选你所配置的服务条款和隐私条款等内容:

登录注册信息补全

用户在登录和注册时通常需要提供手机号 / 邮箱等个人信息。除了这些常规个人信息,管理员可以指定用户补全特定信息才能完成登录 / 注册,用以作业务数据的收集。

管理员可以在控制台 品牌化->功能配置->登录注册信息补全 模块指定要补全的信息(即字段)。

要配置待补全的信息,执行以下步骤:

  1. 选择 信息补全开启位置注册时信息补全 和 / 或 登录时信息补全

  2. 指定用户在登录 / 注册时,是否可以跳过补全窗口。

INFO

  • 允许跳过 开关开启,则在用户登录补全时,补全窗口右上角呈现 跳过 按钮,用户可以点击按钮跳过补全。

  • 允许跳过 开关关闭,则补全窗口不会出现 跳过 按钮。

  1. 登录注册信息补全 模块点击右上角 添加 按钮添加待补全的字段。打开 添加字段 弹窗。

  2. 选择待补全的字段分类:用户基础字段用户扩展字段

INFO

  • 管理员可以在 设置->字段管理 查看用户基础字段和用户扩展字段。

  • 管理员仅可编辑用户基础字段,不可增加和删除。

  1. 指定当前待补全字段 是否必填

INFO

  • 开启 是否必填 后,用户登录 / 注册时必须补全必填字段。

  • 若补全信息在用户登录 / 注册时已提供(如手机号、邮箱),则无论该补全信息是否被指定为 必填,不会出现在补全窗口,即只有当前为空的字段才会出现在补全窗口。

  1. 选择待补全字段。

INFO

  • 字段名分类 联动,数据源与 设置->字段管理 中的 用户基础字段 列表和 用户扩展字段 列表同步。

  • 若补选信息为用户扩展字段,需在 字段管理 菜单提前配置。有关用户扩展字段配置详情,请参阅 添加自定义用户字段

  • 选定字段后,自动带出下方 表单类型,与 字段管理 中该字段的 数据类型 一致,不可修改。

  1. 指定 校验规则,包含两个选项:
  • 不校验
  • 正则表达式: 输入下方 正则表达式错误提示信息(必填)。
  1. 点击 保存

INFO

  • 可以在补全字段列表点击目标字段所在行 操作 列相应按钮对当前字段进行编辑、删除。

  • 对于已创建的补全字段,点击编辑按钮,只能修改 是否必填校验规则

配置邮件服务和模版

INFO

有关支持「消息设置」功能各项权益的 GenAuth 用户池版本信息,请查看 官网「价格」页。如你的版本不支持此权益,且想试用,可开通体验期。有关体验期介绍及开通方式,请查看 体验期

邮件是 GenAuth 提供的针对使用「邮箱」注册的用户的邮件发送服务,进入任意应用后按照下图点击按钮即可进入邮件管理面板:

管理邮件模版

在邮件模版中可以配置六种类型的邮件模版,分别是:

  1. 欢迎邮件 - 若用户使用邮箱注册会发送此邮件。
  2. 重置密码确认 - 每当用户重置密码成功时,都会发送此电子邮件。
  3. 验证邮件 - 用户使用邮箱注册会发送一封验证邮件给用户用来验证邮箱,用户点击邮箱中的链接即可完成验证。
  4. 修改绑定邮箱 - 每当用户需要修改绑定邮箱、发送验证码时,都会发送此电子邮件。
  5. 重置密码 - 每当用户忘记密码时系统将发送此重置密码的邮件,邮件中附带一个验证码,用户提交验证码和新密码后将可以重置密码。
  6. 修改密码 - 每当用户要求更改密码时,都会发送此电子邮件,邮件中附带一个验证码,用户需要填写此验证码完成密码修改。

如下图所示:

邮件宏命令

宏命令用来生成一些动态内容,比如:

html
<div style="padding: 35px;">
  <table
    cellpadding="0"
    align="center"
    style="width: 600px; margin: 0px auto; text-align: left; position: relative; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; font-size: 14px; font-family:微软雅黑, 黑体; line-height: 1.5; box-shadow: rgb(153, 153, 153) 0px 0px 5px; border-collapse: collapse; background-position: initial initial; background-repeat: initial initial;background:#fff;"
  >
    <tbody>
      <tr>
        <th
          valign="middle"
          style="height: 25px; line-height: 25px; padding: 15px 35px; border-bottom-color: rgba(18, 24, 37, 0.87); background-color: #484f60; border-bottom-color: #C46200; background-color: #484f60; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;"
        >
          <font face="微软雅黑" size="5" style="color: rgb(255, 255, 255); "
            >{{app_name}}
          </font>
        </th>
      </tr>
      <tr>
        <td>
          <div style="padding:25px 35px 40px; background-color:#fff;">
            <h2 style="margin: 5px 0px; ">
              <font color="#333333" style="line-height: 20px; "
                ><font style="line-height: 22px; " size="4"
                  >你好,{{user_email}}</font
                ></font
              >
            </h2>
            <p>欢迎加入 {{app_name}}</p>
            <p>{{app_description}}</p>
            <p align="right">{{app_name}} 团队</p>
            <p align="right">{{TIME}}</p>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

这篇邮件中的 {{app_name}}{{app_description}}{{TIME}}{{user_email}} 都属于宏命令,这篇邮件在 GenAuth 经过解析后的结果会类似于下面这样:

目前支持的所有宏命令如下表所示:

宏命令作用
{{subject_name}}邮件主题
{{client_name}}发件人
{{app_name}}GenAuth 应用名称
{{app_description}}GenAuth 应用描述
{{app_logo}}GenAuth 应用 LOGO
{{user_email}}用户邮箱
{{user_display_name}}用户显示名称
{{user_name}}用户名
{{username}}用户名
{{password}}用户登录密码
{{app_domain}}应用登录地址
{{invite_link}}邀请用户时的邀请链接地址
{{inviter_name}}邀请用户时的邀请人名称
{{verify_code}}发送邮箱验证码时的验证码
{{verify_link}}邮箱验证地址
{{expires_in}}邮箱验证地址有效期
{{password_effective_time}}密码生效时间
{{update_password_link}}修改密码链接地址
{{email_effective_time}}邮箱生效时间
{{login_url}}新账号登录地址
{{tenant_name}}租户名称
{{tenant_logo}}租户 LOGO
{{tenant_domain}}租户域名
{{host_url}}租户管理地址
{{admin_name}}管理员名称
{{userpool_name}}用户池名
{{userpool_logo}}用户池 LOGO
{{ip}}用户登录 IP
{{country}}用户登录国家
{{province}}用户登录省份
{{city}}用户登录城市
{{datetime}}用户登录时间
{{userPoolName}}用户池名称
{{workflowName}}工作流名称
{{errorTime}}工作流执行错误时间
{{taskName}}工作流任务名称
{{workflowExecuteLogUrl}}工作流执行日志地址
{{errorReason}}工作流执行失败原因
{{workflowInstanceId}}工作流执行执行 ID
{{failedCount}}工作流执行执行失败错误数据条数

配置第三方邮件服务

我们自带的邮件发送服务器使用阿里云企业邮箱,若你想自定义邮件服务器可在此页面中设置:

config-email-provider

Code snippet: config-email-provider

配置短信服务

短信验证让用户能够使用以短信形式发送到其手机上的一次性密码登录。GenAuth 默认使用平台提供的短信服务,同时我们也支持配置自定义 创蓝短信服务阿里云短信服务腾讯云短信服务

国内短信服务

使用默认短信服务

  • 默认短信服务模版为:验证码 {S1},该验证码 {S2} 分钟内有效,请勿泄漏与他人。
  • 验证码有效时间为 5 分钟。
  • 短信接口 QPS 为 100。
  • 在网页端建议使用 小登录 免费获取手机号。

配置自定义短信服务商

我们目前支持以下短信服务商:

  • 阿里云短信服务
  • 创蓝 253 短信服务
  • 腾讯云短信服务
config-sms-provider

Code snippet: config-sms-provider

国际短信服务

国际短信服务主要是支持海外手机号短信验证。

配置自定义国际短信服务商

我们目前支持以下国际短信服务商:

  • 阿里云
  • 阿里云国际
config-int-sms-provider

Code snippet: config-int-sms-provider

自定义域名

INFO

有关支持「自定义域名」功能权益的 GenAuth 用户池版本信息,请查看 官网「价格」页。如你的版本不支持此权益,且想试用,可开通体验期。有关体验期介绍及开通方式,请查看 体验期

为什么要使用自定义域名?

在你的 GenAuth 用户池中,应用面板会拥有一个默认的域名 default.authing.cn。完成自定义域名的配置后,你的用户可以访问 login.your_domain.cn,从而始终在域名内完成登录。自定义域可以提升你的品牌知名度,并让用户始终在你的域名下使用提供的应用服务。

使用 GenAuth 提供的自定义域名功能

路径:品牌化->自定义域名

INFO

对于本功能,有几点重要的说明:

  • 版本权益:GenAuth 当前支持在 B2B(高级版及以上)、B2E(高级版及以上)用户池场景下,为你的应用面板配置自定义域名。如果你是新注册用户,体验期内也可以自由使用本功能。更详细的版本权益说明,请查看 官网「价格」页
  • 在配置完你的自定义域名之后,GenAuth 为你提供的默认域名将仍旧生效,在访问原域名时,也将跳转到你配置的自定义域名下完成登录。
  • 完成自定义域名配置的当下,如果有用户正在使用原域名进行登录,其登录状态不会受到影响;其重新登录时将会在自定义域名下完成登录。
  • 使用嵌入式登录(GenAuth Guard)/ GenAuth SDK 实现登录时,也支持使用 GenAuth 提供的默认域名或配置自定义域名。

配置你的自定义域名

在 GenAuth 实现自定义域名的配置流程只需要三步:

第一步:输入合法的域名

INFO

你的自定义域名必须符合域名的标准规范,详情请参考 RFC 的域名标准规范

  1. 准备域名。如果你还没有自己的域名,可以前往域名注册商平台(如阿里云、腾讯云、华为云等)选购自己的域名。

  2. 备案。根据 工信部《互联网信息服务管理办法》(国务院 292 号令),网站在未完成备案之前,不能指向大陆境内服务器开通访问。如果你的网站托管在中国大陆节点服务器,就必须申请互联网内容提供商 (ICP) 备案。若网站服务器为非中国大陆节点,则不用申请备案。出于合规性考虑,在 GenAuth 使用的自定义域名都需要首先完成备案才能使用。

  3. 输入域名。确保域名格式正确、合法且生效后,将你的域名填入输入框,点击 下一步

第二步:在你的域名服务器中添加新的 CNAME

  1. 在填入有效的域名信息后,GenAuth 会生成对应的 TXTCNAME 信息。你需要前往 DNS 服务提供商添加 TXTCNAME 记录,将本页面的相关信息复制粘贴到你的 DNS 服务器,将域名指向 GenAuth 对应应用的域名。

示例:阿里云控制台 DNS 配置页 - CNAME 记录​

INFO

在不同的 DNS 服务器中添加 TXTCNAME 记录的步骤略有差异,你可以参考:在阿里云创建一条新的 CNAME 指向 GenAuth

  1. 确保当前信息在你的域名服务器中配置完成并生效后,返回 GenAuth 自定义域名->DNS配置,点击 连通测试

INFO

通常来讲在 DNS 服务器中添加完成一条有效的 CNAME 信息后,需要过几分钟才会生效,因此如果你的连通测试没有通过,请稍作等待后重试。

  1. 连通测试完成后,点击 下一步

第三步:填入有效的 SSL 证书信息

出于安全性考虑,GenAuth 当前仅支持 https 协议下的域名。为了确保域名能够正常访问,你需要在域名服务器中找到你的 SSL 证书并下载。

由于不同服务商提供的证书信息种类繁多,你需要在其中找到以下两项信息:

  • 签名证书
  • 签名私钥
  1. 上传签名证书。证书通常是以 .crt.pem 为扩展名的文件。使用文本编辑器打开证书文件可以看到内容 BEGIN CERTIFICATE 开头,END CERTIFICATE 结尾。确认证书内容格式后,直接将证书内容复制粘贴到签名证书输入框。签名证书的格式为:
txt
----- BEGIN CERTIFICATE-----
签名证书正文
----- END CERTIFICATE-----
  1. 上传签名私钥。私钥通常是以 .key.pem 等为扩展名的文件。使用文本编辑器打开证书文件可以看到内容 BEGIN PRIVATE KEY 开头,END PRIVATE KEY 结尾。确认证书内容格式后,直接将证书内容复制粘贴至签名私钥输入框。证书私钥的格式为:
txt
-----BEGIN RSA PRIVATE KEY-----
签名证书私钥正文
----- END RSA PRIVATE KEY-----
  1. 以上两部分信息完成配置后,点击 连通测试,我们会验证你所配置的证书是否对应你在第一步配置的域名,并且校验此证书是否仍在有效期内。

  2. 连通测试通过后,点击 完成。你的自定义域名当即生效!

相关功能配置

在开始使用自定义域名之前,你需要对现有的功能配置进行一些修改,以确保你所配置的自定义域名对现有的功能均生效。

使用统一域名的用户池

在不使用统一域名的用户池中,自定义域名配置完成后,将仅对应用面板(即单点登录 SSO)的认证地址生效:

而在使用统一域名的用户池中,自定义域名配置完成后,由于用户池中的所有应用(包括应用面板、集成应用以及所有的自建应用)均使用统一的、用户池级别的域名。因此自定义域名配置完成后,将对该用户池中的所有应用生效。

如果不能明确是否该使用统一域名的用户池,请前往 了解何时应该使用统一域名的用户池

涉及到应用域名的邮件模板

当你开始使用自定义域名后,预置的邮件模板中涉及到应用域名的部分都会更新为自定义域名。涉及到的发送邮件相关的场景包括:

  • 欢迎邮件
  • 首次邮箱登录验证
  • 控制台发起验证
  • 密码到期提醒
  • 管理员重置密码提醒
  • 账户密码修改提醒
  • 向内部管理员发送登录地址
  • 向租户管理员发送登录地址

自定义短信模板

遗憾的是,由于法律规定,第三方短信服务商在允许使用短信模板时,需要首先将你的自定义域名在平台进行备案,因此我们暂不支持你在使用自定义短信服务的同时使用自定义域名,这样的配置会导致短信无法正常发送。

如果你使用的是 GenAuth 内置的短信服务,则不需要有这个顾虑,可以正常使用。

第三方身份源登录(社会化身份源、企业身份源)

如果你在使用 GenAuth 的第三方身份源(社会化身份源/企业身份源),为了保证这些身份源在自定义域名下仍旧能够正常使用,你需要更新你的应用代码中包含的登录地址。

GenAuth API 调用

所有请求(即获取令牌,并实际调用 API)必须使用相同的域。通过自定义域获得的令牌必须在相同的域名下使用。

如果使用自定义域的身份验证流来请求访问令牌以访问管理 API,那么也必须使用自定义域调用管理 API 端点。

http
POST https://mycustomdomain.cn/oidc/token
... // other parameters 
...
audience:https://YOUR_APP.authing.cn/api/v3/

你的访问令牌请求应该类似于:

http
GET https://mycustomdomain.com/api/v3/clients
Headers:
Authorization: Bearer <access_token>

SAML 相关功能配置

对于已经在控制台完成 SAML 配置并将 SAML 应用添加到应用面板的集成应用,如果已经配置了自定义域名,要使其生效,则需要重新 下载 SAML 元数据文档(新配置的自定义域名将直接更新为 entityID 的值),用以替换阿里云上配置的元数据。

下载 SAML 元数据文档​ - 控制台

替换 SAML 元数据文档​ - 阿里云工作台

私有化部署

当前我们还不支持在私有化场景下实现自定义域名。如果有特殊需求,请联系你的服务支持团队。

常见操作

更新 SSL 证书

每一份 SSL 证书都有自己的过期时间。如发现 SSL 证书即将过期,你可以点击 编辑 进行修改。更新证书信息之后需要重新进行连通测试,生效后你的自定义域名即可继续正常使用。

更换自定义域名

如果你需要更换自定义域名,那么需要删除掉现有的域名重新开始配置。如果当前的自定义域名处于生效状态,那么你在删除这个自定义域名后,目前正在这个域名下访问的用户将不能继续使用你的应用服务,而需关闭此页面后重新登录。

停止使用自定义域名

如要恢复使用默认域名,需要删除当前已经完成配置的域名。如果当前的自定义域名处于生效状态,那么你在删除这个自定义域名时,目前正在这个域名下访问的用户将不会受到影响,刷新界面之后需要重新登录。

应用面板配置

路径:品牌化->应用面板

应用面板,是展示和访问用户池内部可使用 单点登录 SSO 的各类应用的载体,企业管理员可将员工、或目标终端用户所需的各类应用加入到应用面板,实现员工 / 终端用户对各应用的单点登录(SSO),提高工作效率、保证信息安全。

应用面板配置支持修改应用面板的面板名称、Logo、地址、样式和背景等信息,你也可以通过自定义 css 搭建一个美观的、贴合品牌形象的应用面板。对应用面板进行更细粒度的品牌化配置可以深化组织内部终端使用者对品牌的认知;或在作为外部业务系统使用时提升可信度,并进一步拓展单点登录面板的适用场景。

INFO

要使用 品牌化->应用面板 功能,用户池须已开通 单点登录 SSO 增值功能

基础设置

企业管理员或具有 GenAuth 控制台权限的管理员可以进入控制台 品牌化->应用面板->基础设置 修改应用面板基本信息:

序号名称功能说明
1应用面板名称自定义终端用户登录应用面板后所见的应用面板名称。初始状态下名称位于应用面板左上角
2应用面板地址自定义应用面板访问地址,在此编辑后,终端用户凭借该地址登录应用面板
3应用面板 Logo可自行上传图片作为应用面板 Logo。初始状态下 Logo 位于应用面板左上角
4应用面板 Favicon可自行上传图片作为应用面板的浏览器标签页 Favicon。
5预览在此预览 1 - 4 自定义的内容

样式配置

应用面板的样式配置分为桌面设备样式和移动设备样式,桌面设备支持自定义主题、自定义背景、自定义 css;移动设备支持自定义背景和自定义 css。

自定义应用面板主题

管理员可以为应用面板选择 亮色模式暗色模式 两种主题,两种主题皆为应用面板预置了一套颜色和背景样式配置;也可以在此基础上编辑自定义的颜色和背景样式。默认主题为暗色模式。

自定义背景

管理员可以将应用面板背景设置为任意纯色;或者上传图片作为应用面板背景,此处可自定义贴合企业品牌形象 / 营销需求的背景图。以桌面设备为例,操作步骤如下:

  1. 准备一张桌面设备尺寸背景图
  2. 打开 品牌化->应用面板->样式配置,选择 桌面设备->自定义背景->图片背景
  3. 鼠标悬停于图像框,点击【重传】,从本地上传图片,查看预览效果



  1. 点击页头右侧按钮【保存配置】,保存成功后即可登录应用面板体验。



INFO

上传图片时,确保图片大小不超过 2M。

自定义 css

要通过自定义 css 配置个性化应用面板框,需要在 样式配置 标签页打开 自定义 css 开关。

自定义 css 可以对托管应用面板页实现更加细致的外观控制,以符合你的企业员工或终端用户对于应用面板的预期。通过自定义 css 可以对应用面板框进行一些高级自定义样式定制,例如背景、特定元素的位置。
  1. 以修改背景颜色为例:
css
.authing-launchpad-container {
  background: #F5F7FA !important;
}

实现效果如下图:

  1. 以修改页面元素位置为例:
css
.authing-launchpad-header { 
  position: absolute; bottom: 0px; 
}

实现效果如下图:

自定义 css 有以下注意事项:####
  • 尽量控制指定 css 生效范围,其生成规则是依赖最后一级路由。如只针对应用面板页面样式,可在所有 css 选择器前添加 .launchpad,如 /login 页面 则添加 .launchpad
* 尽量指定要修改的 控制面板 渲染节点,PC 端常见渲染节点如: * .authing-launchpad-container * .authing-launchpad-header * .authing-launchpad-main
  • 尽量指定要修改的 控制面板 渲染节点,移动端常见渲染节点如:
    • .authing-launchpad-m-content
    • .authing-launchpad-m-content
    • .authing-launchpad-m-content-container
    • ...

如下图.authing-launchpad-container 这个类名表明 launchpad 处于应用面板节点。携带这个类名作为前置的选择器,其样式只会在应用面板节点生效。

* 具体的 css 类名可以在 GenAuth 的应用面板界面通过 Chrome 控制台查看,需要自定义样式的 dom 标签都提供了固定的类名,不能使用带有 hash 的类名,因为会经常变化。
  • 尽量精确选择元素。如果 dom 层级很深,建议使用 复制 selector 并配合前面第一、二条的前置选择器使用。

INFO

应用面板 为更好地服务用户一直在保持迭代以及功能的扩展。在这一发展过程中可能会存在 dom 结构调整以及类名弃用等情况。如果影响了用户自定义 css 相关样式,可联系我们开发人员进行 css 调整。