Question

我正在我的网络应用程序中实现登录功能。为了做到这一点，我使用一个名为“passport”的流行模块来进行OAuth处理。这是问题！

我的Signin.vue文件：

<div>
    <div id="Navbar">
        <navigation-bar/>
    </div>

    <div id="contents">
        <div class="form">
            <div class="form-inner">
                <img src="../assets/logo.png" class="logo">
                <div class="user-input">
                    <div class="third-party-sign-in">
                        <a v-on:click.prevent="googleSigninRequest()"><div class="login-submit google-signin"><span class="helper"></span>Sign in with Google</div></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

export default {
name: "SignIn",
methods: {
    googleSigninRequest: function() {
        axios.get('http://localhost:4000/auth/google')
        .then(function(response){
            console.log(response);
        })
        .catch(function(error){
            console.log(error);
        })
    }
}

OAuth在服务器端的auth-routes.js中处理：

passport.use(new GoogleStrategy({
    callbackURL: '/auth/google/callback',
    clientID: secrets.googleClientID,
    clientSecret: secrets.googleClientSecret,
}, function (token, tokenSecret, profile, done) {

   })
);
router.get('/google', passport.authenticate('google', {
    scope:['profile']
}));

但它有错误

所以我认为这是我身边的CORS问题，并试图添加一个中间件，将“Access-Control-Allow-Origin”字段的标题设置为“*”。但同样的错误仍然存在。所以根据这篇文章：

Oauth Redirect Returning No 'Access-Control-Allow-Origin' header is present on the requested resource

我意识到谷歌可能不允许自己使用CORS。据我所知，接收方（谷歌）必须允许CORS。

此外，即使Google OAuth请求在后端成功，前端如何知道Google的“登录”弹出窗口是什么或如何... ...

所以有些人这样做https://jsfiddle.net/phanan/a4qyysrh/来处理客户端的登录。但我想在后端进行我的webapp的所有登录，包括Facebook和Linkedin，我只是认为在我的情况下进行登录客户端可能不是最理想的事情。

我该怎么办？我应该如何使用Vue.js处理Google OAuth登录？也许我正在采取的方法，即在一个端口上托管前端，并且每当我想做一些复杂的事情时，使用AJAX请求后端到另一个端口并不常见？

我应该完全放弃Vue.js并使用ejs或其他东西进行服务器端渲染吗？请帮助我T.T !!

Vue.js + Google OAuth2 +客户端呈现

0 个答案: