Moo*_*ody 0 oauth cors express passport.js angular
上下文
我正在使用Angular,Express和PassportJS 构建无状态应用程序,并希望使用他们的Google帐户对用户进行身份验证.在对用户进行身份验证后,我的目标是使用JWT令牌来拥有无状态应用程序.
角2侧
点击Google登录按钮后,我的服务中会执行以下代码:
login() {
return this.http.get('http://localhost:3000/api/auth/google');
}
表达方面
在Express上,执行以下操作:
// This gets executed first after clicking the sign in using Google button.
router.get('/api/auth/google', passport.authenticate('google', {
session: false,
scope: ['profile', 'email']
}));
// Google sends me back here (callback).
passport.use(new GoogleStrategy({
clientID: 'omitted',
clientSecret: 'omitted',
callbackURL: '/api/auth/google/callback'
}, function (accessToken, refreshToken, profile, cb) {
// Here, I obtain the profile and create a JWT token which I send back to the user.
let jwtToken = generateToken(); // Code omitted for simplicity.
cb(null, jwtToken); // assume success
}
));
// After creating a JWT token, this will get executed.
router.get('/api/auth/google/callback', (req, res, next) => {
passport.authenticate('google', (err, jwtToken) => {
res.status(201).json(jwtToken);
})(req, res);
});
错误:
点击"使用Google登录"按钮(get即向Angular 发出请求)后,收到以下错误消息:
Failed to load https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=(long_string_here): No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
我试过了什么
我在Angular和React应用程序上看到了类似的问题,虽然有答案(我已经尝试过),但实际上没有"已接受的答案"可以解决这个问题.我真的很震惊为什么会出现这样的问题:
奇怪的是:如果我直接打电话window.location.href = http://localhost:3000/api/auth/google而不是提出get请求,它的工作正常.然而,问题是我无法获得我的JWT令牌,因为我被完全重定向.
我还尝试在后端以多种不同方式启用CORS,并允许各种来源.这不会改变任何事情.
这里一个重要的注意事项是我的Angular应用程序在端口上运行,4200而我的Express应用程序在端口上运行3000.但是,即使我编译我的Angular项目并将其放在Express的公共文件夹中并提供服务,我仍然会遇到相同的CORS问题!
小智 5
从登录调用这样的,
flogin(){
window.open('/auth/facebook',"mywindow","location=1,status=1,scrollbars=1, width=800,height=800");
let listener = window.addEventListener('message', (message) => {
//message will contain facebook user and details
});
}
在服务器上,我希望你有护照facebook-stratagy工作
app.get('/auth/facebook', passport.authenticate('facebook', { scope: ['email'] }));
app.get('/auth/facebook/callback',
passport.authenticate('facebook', { failureRedirect: '/auth/fail' }),
function(req, res) {
var responseHTML = '<html><head><title>Main</title></head><body></body><script>res = %value%; window.opener.postMessage(res, "*");window.close();</script></html>'
responseHTML = responseHTML.replace('%value%', JSON.stringify({
user: req.user
}));
res.status(200).send(responseHTML);
});