angular 中的回调不匹配错误与 auth0

Question

您好，我正在将 Auth0 与 Nodejs 和 angularjs

一起使用

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

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

我的代码被截断了

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 但不知道为什么当我在 angular side

中提到我的重定向 URL 时，我会遇到回调错误的错误

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

有趣的是，当我使用简单的 lock.js 而不是像这样的 angular 时

<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 路由被正确调用，所以我在 angular 做错了什么？

请帮忙

更新这是我的项目结构

完整代码 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;

AngularApp.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

angular 中的回调不匹配错误与 auth0

callback missmatch error in angular with auth0

node.js

angularjs

auth0