使用auth0进行角度回调失配错误

Question

嗨，我正在使用Auth0与Nodejs和angularjs

这就是我想要实现的目标 1.我想用户使用auth0的锁注册 2.一旦用户登录回调，就应该在我的nodejs服务器上调用 3.之后我将获得用户信息和用户的JWT 4.然后我将用户重定向到仪表板页面并将JWT存储在浏览器中

Auth0的例子有什么问题 1.他们提供了单独的angular或nodejs的例子，而不是组合的 2.有组合（客户端服务器）示例，但是使用带有nodejs的jade

我的代码片段

Angular剪了一下

    var options = { auth: {
          redirectUrl: 'http://localhost:3000/callback'
        , responseType: 'code'
        , params: {
          scope: 'openid name email picture'
        }
  }
}

    lockProvider.init({
      clientID: 'cUlBNhhaIblahBlahRp6Km',
      domain: 'rishabh.auth0.com',
     option:options
    });

节点剪断

router.get('/callback',
  passport.authenticate('auth0', { failureRedirect: '/url-if-something-fails' }),
  function(req, res) {
    console.log(req.user);
    res.json({id_token:req.user});
  });

注意：我在auth0 http://localhost:3000/callback中添加了这个回调，但是当我在角度方面提到我的重定向URL时，我不知道为什么我面临回调错误的错误

谁能告诉我我的代码有什么问题为什么auth0没有将我重定向到这个网址http://localhost:3000/callback

而有趣的是当我使用简单的lock.js而不是像这样的角度

<script>
var options = { auth: {
          redirectUrl: 'http://localhost:3000/callback'
        , responseType: 'code'
        , params: {
          scope: 'openid name email picture'
        }
  }
}

var lock = new Auth0Lock('clientID', 'rishabh.auth0.com',options);
lock.show();
</script>

那么在这种情况下我的nodejs / callback路由被正确调用，那么我的角度错误了吗？

请帮忙

更新这是我的项目结构

完整代码https://github.com/LabN36/error

Config.js

    var Auth0Strategy = require('passport-auth0');
var passport = require('passport');


var strategy = new Auth0Strategy({
    domain:       process.env.AUTH0_DOMAIN || 'rishabh.auth0.com',
    clientID:     process.env.AUTH0_CLIENT_ID || 'cUheWwRxm7OLdHBRzlBNvfvfvfvfvhhaI1lxRp6Km',
    clientSecret: process.env.AUTH0_CLIENT_SECRET || 'e37eIZpjgBnDMBtrYMwvffvfvfvfaU4jSqt8qylZMT9Oj1EiffLGViinWQ5AiuWi1-WBwA8v3',
    callbackURL:  process.env.AUTH0_CALLBACK_URL || 'http://localhost:3000/callback'
  }, function(accessToken, refreshToken, extraParams, profile, done) {
    // accessToken is the token to call Auth0 API (not needed in the most cases)
    // extraParams.id_token has the JSON Web Token
    // profile has all the information from the user
     console.log(extraParams.id_token);
     //save user detail with token here and return token only profile
    return done(null, extraParams.id_token);
  });

passport.use(strategy);

// you can use this section to keep a smaller payload
passport.serializeUser(function(user, done) {
  done(null, user);
});

passport.deserializeUser(function(user, done) {
  done(null, user);
});

module.exports = passport;

Angular App.js

    angular.module('workApp',['auth0.lock'])

.config(function($locationProvider,lockProvider){

var options = { auth: {
          // redirect:true,
         responseType: 'code',
          redirectUrl: 'http://localhost:3000/callback',
         params: {
          scope: 'openid name email picture'
        }
  }
}

    lockProvider.init({clientID: 'cUheWwRxm7OLdHBRzlBNhhaI1lxRp6Km',domain: 'rishabh.auth0.com',
    option:options
});
$locationProvider.html5Mode(true);
})
.controller('homeCtrl',function($scope,$http,$location,$window,lock){

  $scope.login = function() {
    // window.alert("magic")
    console.log("Messed Up really")
    var vm = this;
  vm.lock = lock; 
  lock.show();
  }

}).run(function(lock){
    lock.interceptHash();

  lock.on('authenticated', function(authResult) {
    localStorage.setItem('id_token', authResult.idToken);

    lock.getProfile(authResult.idToken, function(error, profile) {
      if (error) {
        console.log(error);
      }
      localStorage.setItem('profile', JSON.stringify(profile));
    });
  });
})

Answer 1

根据屏幕截图，错误发生是因为身份验证请求是使用redirect_uri：

http://localhost:3000/

并且允许的回调URL是：

http://localhost:3000/callback http://35.162.118.253:3000/callback

同样基于你分享的代码，你确实将redirectUrl设置为http://localhost:3000/callback，因此代码的其余部分可能会有一些东西导致该值被覆盖或根本不使用。

如果未设置redirectUrl，Lock将使用当前页面，因此可能的罪魁祸首是您设置的选项未被使用。如果仍然找不到原因，请使用与Lock显示方式相关的代码更新问题。

---

该死的，实际的根本原因已经在你最初提供的代码中显示出来了，但是现在只看整个代码就可以让我抓住它......

你打电话给lockProvider.init()：

{ clientID: [?], domain: [?], option: options }

什么时候应该调用：

{ clientID: [?], domain: [?], options: options } // options instead of option