如何使用 JS API 将配置选项传递给 Auth0 托管页面？

Posted 2023-03-08

【中文标题】如何使用 JS API 将配置选项传递给 Auth0 托管页面？

【英文标题】：How do I pass configuration options to an Auth0 hosted page using the JS API?

【发布时间】：2017-12-09 07:05:09

【问题描述】：

我在 auth0 和 auth0-js 模块上使用托管登录页面来授权我的用户。

文档讨论了a config object，页面本身清楚地显示了这样一个正在反序列化的对象。

但是，文档并没有远程谈论应该如何将此对象传递给页面。实际上，无法远程工作的文档indicate an approach（未设置配置参数）

我需要自己序列化对象并设置config 属性还是有其他方法？

【问题讨论】：

让我们退后一步。你为什么要这样做？您要解决的用例是什么？

一方面，传入徽标的 URL。如果我在自定义页面中对其进行硬编码，我需要跟踪它，我是否应该在将来更改徽标的位置或名称，而不是仅仅将其作为配置参数传入。此外，配置允许我传入要包含在登录页面中的字符串 - 对于任何类型的模板页面来说，这都是一个非常标准的用例。

等等...@@config@@ 是从其他地方来的吗？我在 auth0-js 代码中看不到任何设置属性，然后在托管页面中使用的内容...

auth0.com/docs/hosted-pages/login#pass-in-custom-parameters

酷...这是自定义参数，但是像config.dict.signin.title 或config.theme 这样的参数呢？这些是托管登录页面中的标准，但我看不到在哪里设置这些值

【参考方案1】：

我解决了这个问题：当您调用托管登录页面时，您必须在授权调用中传递参数。我做了一个示例，允许使用参数指定托管页面的语言。

脚本代码：

var params=new Array();
params['language'] = 'es';

var webAuth = new auth0.WebAuth(
    domain: 'example.auth0.com',
    clientID: 'YOUR_CLIENT_ID',
    redirectUri: 'https://www.example.com/redirect',
    audience: 'https://example.auth0.com/userinfo',
    responseType: 'code',
    scope: 'openid profile email',
    allowShowPassword: true,
);

webAuth.authorize(params);

托管页面代码：

var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
var language;
if (config.extraParams.language)
  language = config.extraParams.language;
else
    language = 'en';

var lock = new Auth0Lock(config.clientID, config.auth0Domain, 
  ...
  language: language
);

lock.show();

因此，您在授权调用中指定的任何参数都可以使用 config.extraParams 变量访问

P.D.：晚了几个月，但我希望它可以帮助其他用户

【讨论】：

谢谢。锁定示例中的 L1 也适用于 webauth 场景。您在哪里找到有关 @@config@@ 占位符的信息？我用谷歌搜索甚至搜索了 auth0 文档，但除了您的答案之外我找不到任何其他内容。