开发环境的 Auth0 回调重定向答案

【问题标题】：Auth0 callback redirect for Development Environment开发环境的 Auth0 回调重定向
【发布时间】：2018-03-18 10:10:34
【问题描述】：

Auth0 有一个很棒的文档，有时即使你阅读了 1000 次，它对我个人来说也没有意义，所以希望其他人也有类似的问题。

我想要什么？

我从本地主机环境登录，该环境使用 auth0.WebAuth 对象编译，如下所示：

 auth0 = new auth0.WebAuth({
     clientID: 'adscsdcascascascasdcsdac',
     domain: 'webatom.auth0.com',
     responseType: 'token id_token',
     audience: 'https://api.webatom.com',
     redirectUri: 'http://localhost:5000/callback',        
     scope: 'openid profile'
 });

我希望它将开发人员重定向到本地主机。

如果我从生产环境登录（或用户登录），即。从 jtrade.pro 我希望他们被重定向到 jtrade.pro/callback。显然，生产版本中的对象看起来像这样（使用不同的重定向 uri）：

auth0 = new auth0.WebAuth({
    clientID: 'adscsdcascascascasdcsdac',
    domain: 'webatom.auth0.com',
    responseType: 'token id_token',
    audience: 'https://api.webatom.com',
    redirectUri: 'http://jtrade.pro/callback',        
    scope: 'openid profile'
});

据我了解，您就是这样做的。传递 uri，如果 uri 在客户端设置中被列入白名单并以逗号分隔，您将被重定向到所需的页面。漂亮，我已列入白名单并用逗号分隔。

最后一步，托管页面。

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
  auth: {
    redirectUrl:  config.callbackURL,
    responseType: 'token',
    params: config.internalOptions
  },
  assetsUrl:  config.assetsUrl,
  allowedConnections: connection ? [connection] : null,
  rememberLastLogin: !prompt,
  language: language,
  languageDictionary: languageDictionary,
  theme: {

  },
  prefill: loginHint ? { email: loginHint, username: loginHint } : null,
  closable: false,
});

重定向 URL 设置为 config.callbackURL，据我了解，这使 auth0 查看白名单并查看提供的 uri 之一是否存在，如果存在则重定向用户。

但是，这不会发生。 Auth0 仅将用户重定向到白名单中的第一个 uri。我找不到适合此问题的解决方案。希望也有人遇到这种情况。

【问题讨论】：

标签： auth0

【解决方案1】：

检查了上述内容，我看到的行为有所不同 - Auth0 正确使用了传入的 redirectUri。您应该仔细检查所有设置，以发现您的设置/配置有问题。以下是对调查结果的回顾：

客户端应用程序（使用开箱即用的 React 示例）：

 auth0 = new auth0.WebAuth({
    domain: AUTH_CONFIG.domain,
    clientID: AUTH_CONFIG.clientId,
    redirectUri: AUTH_CONFIG.callbackUrl,
    audience: `https://${AUTH_CONFIG.domain}/userinfo`,
    responseType: 'token id_token',
    scope: 'openid'
  });

翻译为以下各项：

https://demo.auth0.com/login?client=zalZ1MxxxxxxxxxxxZ5xfZga&protocol=oauth2&redirect_uri=http://localhost:3000/callback&response_type=token id_token&scope=openid&audience=https://demo.auth0.com/userinfo&nonce=2OfVCpn-4Ka9k33h50Y5YjNgw8nsxE5B

https://demo.auth0.com/login?client=zalZ1MxxxxxxxxxxxZ5xfZga&protocol=oauth2&redirect_uri=http://localhost:3001/callback&response_type=token id_token&scope=openid&audience=https://demo.auth0.com/userinfo&nonce=kDNsP5Sfp1M0ydJ57h7eG.S_sNkO7gRs

使用默认的 Auth0 HLP，您将拥有以下内容：

<script src="https://cdn.auth0.com/js/lock/10.18/lock.min.js"></script>
  <script>
    // Decode utf8 characters properly
    var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
    config.extraParams = config.extraParams || {};
    var connection = config.connection;
    var prompt = config.prompt;
    var languageDictionary;
    var language;

    if (config.dict && config.dict.signin && config.dict.signin.title) {
      languageDictionary = { title: config.dict.signin.title };
    } else if (typeof config.dict === 'string') {
      language = config.dict;
    }
    var loginHint = config.extraParams.login_hint;

    var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      auth: {
        redirectUrl: config.callbackURL,
        responseType: (config.internalOptions || {}).response_type ||
          config.callbackOnLocationHash ? 'token' : 'code',
        params: config.internalOptions
      },
      assetsUrl:  config.assetsUrl,
      allowedConnections: connection ? [connection] : null,
      rememberLastLogin: !prompt,
      language: language,
      languageDictionary: languageDictionary,
      theme: {
        //logo:            'YOUR LOGO HERE',
        //primaryColor:    'green'
      },
      prefill: loginHint ? { email: loginHint, username: loginHint } : null,
      closable: false,
      // uncomment if you want small buttons for social providers
      // socialButtonStyle: 'small'
    });

    lock.show();
  </script>

这会在原始回调 url (redirectUri) 中分配的端口上正确回调客户端。

【讨论】：

【解决方案2】：

问题在于，我没有调用将用户重定向到 /authorize 端点的方法 auth0.authorize()，而是硬编码了 url 并将用户重定向到 /login 端点，并且没有在参数中包含任何数据（即在url字符串内）。您不必使用您也可以根据需要自己构造字符串的方法。该方法的完整指南可以在here找到。

【讨论】：