如何定制auth0锁登录界面？

Question

我正在尝试自定义我的登录屏幕在auth0锁，以改变标志，我放置在下面的代码。而且它工作得很好。

      theme: {     
        logo: 'https://example.com/logo58px.png'
      },
      languageDictionary: { title: 'Custom title here' }

它不能工作，

但我想要将文本auth0更改为我的应用程序名称，我如何更改它？

Answer 1

没有真正简单的方法可以做到这一点。不过，Auth0锁的所有设置都可供您使用。在lock.js中，您可以找到所需的所有可用设置。

例如，如果您想要更改title，请在您喜欢的文本编辑器中打开lock.js，并在"Auth0“(包括引号)处打开CTRL+F，您将找到所需的内容。

在我的lock版本中，它位于一个对象中，如下所示：

exports.default = {
    ...
    title: "Auth0",
    ...
}

如果你想改变用户界面，就像CSS规则一样，只需检查浏览器中的Auth0锁，在你想要改变的对象上寻找一个特定的类，并为它设置你自己的规则。

这在“逆向工程”方面并不是那么麻烦(这里松散地使用这个术语)，但是你几乎可以改变任何你想要的关于Auth0锁的东西。

只是别忘了把它包含在你的repo中。

Answer 2

虽然@Tom Nijs的答案确实解决了您的问题，但更改您正在使用的库的源代码并不是一种好的做法。例如，当您更新Auth0锁库时，可能会丢失修改后的代码。在不同版本的库之间跟踪所有这些修改过的代码是一件很麻烦的事情。

相反，我建议做以下事情：

设置锁公开Auth0属性中的languageDictionary属性。

因此，要继续使用您提供的代码片段，您可以在锁的设置中执行此操作：

`theme: {
    logo: 'https://example.com/logo58px.png'
},
languageDictionary: {
    title: 'Custom title here',
    forgotPasswordAction: 'Custom lost password phrase here'
}`

如果您想要自定义更多的属性/文本，只需将它们添加到languageDictionary对象，所有可能的属性都可以在=> https://github.com/auth0/lock/blob/master/src/i18n/en.js中找到

属性名称取决于Auth0锁的版本，上面的配置是针对Auth0锁的，早期锁版本的属性名称在10.0.0+的文档中仍然可用。

Answer 3

另一种选择是使用Auth0的新通用登录并对其进行自定义。我已经创建了一个full tutorial for this