使用Node.js实现Google OAuth2认证

Question

使用Node.js实现Google OAuth2认证

node.jsvue.jsgoogle-oauth

3

我有一个Vuejs应用程序，正在尝试添加谷歌认证。我使用这个插件 https://www.npmjs.com/package/vue-google-oauth2 在前端生成授权码，然后将其发送到后端，以获取用户凭据。

以下是前端的代码：

<script>
import axios from "axios";
export default {
  methods: {
    googleAuth() {
      this.$gAuth
        .getAuthCode()
        .then(authCode => {
          //on success
          axios.post('my-back-end', {code:authCode, redirect_uri: 'postmessage'}).then(res=>{
              console.log(res);
          });
        })
        .catch(error => {
          //on fail do something
        });
    }
  }
};
</script>

我成功地获得了授权码，然后将其发送到我的后端，该后端是基于官方Google文档编写的Node.js。链接如下：

https://github.com/googleapis/google-api-nodejs-client#oauth2-client

我有这个路由：

router.post('/google', googleController.getGoogleAccountFromCode);

还有这个控制器：

const {google} = require('googleapis');

const oauth2Client = new google.auth.OAuth2(
    process.env.GOOGLE_CLIENT_ID,
    process.env.GOOGLE_CLIENT_SECRET,
    process.env.GOOGLE_REDIRECT_URL
);

exports.getGoogleAccountFromCode = (req, res, next) => {
   const code = req.body.code;
   const data = oauth2Client.getToken(code)
    .then(res => {
        console.log(res);
    })
    .catch(err=>{
        console.log(err);
    });
};

我遇到了这个错误:

{ 错误: 无效的请求在 Gaxios.request (/home/monkeydkon/Desktop/tabata-rest/node_modules/gaxios/build/src/gaxios.js:70:23) 在 process._tickCallback (internal/process/next_tick.js:68:7) 响应: { 配置: { 方法: 'POST', url: 'https://oauth2.googleapis.com/token', data: 'code=4%2FlgGDaumBZrCEo1GraV2csRBqKMOQFM7IKhBUP3tJVf2NSPS2nBqbdc9mDqIuaM847ZIPy6mZ4MGHLD9fR2a3A_Q&client_id=918021882776-fu8hr3q5ld81t1dlv1pd8en7ht8hu3t6.apps.googleusercontent.com&client_secret=LBCef5d7K48XGB7TEEDF7SBK&redirect_uri=%2Fauth%2Fgoogle%2Fredirect&grant_type=authorization_code&code_verifier=', headers: [对象], params: [对象: null 原型] {}, paramsSerializer: [函数：paramsSerializer], body: 'code=4%2FlgGDaumBZrCEo1GraV2csRBqKMOQFM7IKhBUP3tJVf2NSPS2nBqbdc9mDqIuaM847ZIPy6mZ4MGHLD9fR2a3A_Q&client_id=918021882776-fu8hr3q5ld81t1dlv1pd8en7ht8hu3t6.apps.googleusercontent.com&client_secret=LBCef5d7K48XGB7TEEDF7SBK&redirect_uri=%2Fauth%2Fgoogle%2Fredirect&grant_type=authorization_code&code_verifier=', validateStatus: [函数：validateStatus], responseType: 'json' }, data: { error: 'invalid_request', error_description: 'Invalid parameter value for redirect_uri: Missing scheme: /auth/google/redirect' }, headers: { 'alt-svc': 'quic=":443"; ma=2592000; v="46,43,39"', 'cache-control': 'private', connection: 'close', 'content-encoding': 'gzip', 'content-type': 'application/json; charset=utf-8', date: 'Wed, 31 Jul 2019 20:47:01 GMT', server: 'scaffolding on HTTPServer2', 'transfer-encoding': 'chunked', vary: 'Origin, X-Origin, Referer', 'x-content-type-options': 'nosniff', 'x-frame-options': 'SAMEORIGIN', 'x-xss-protection': '0' }, status: 400, statusText: 'Bad Request' }, 配置: { 方法: 'POST', url: 'https://oauth2.googleapis.com/token', data: 'code=4%2FlgGDaumBZrCEo1GraV2csRBqKMOQFM7IKhBUP3tJVf2NSPS2nBqbdc9mDqIuaM847ZIPy6mZ4MGHLD9fR2a3A_Q&client_id=918021882776-fu8hr3q5ld81t1dlv1pd8en7ht8hu3t6.apps.googleusercontent.com&client_secret=LBCef5d7K48XGB7TEEDF7SBK&redirect_uri=%2Fauth%2Fgoogle%2Fredirect&grant_type=authorization_code&code_verifier=', headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'User-Agent': 'google-api-nodejs-client/4.2.6', Accept: 'application/json' }, params: [对象: null 原型] {}, paramsSerializer: [函数：paramsSerializer], body: 'code=4%2FlgGDaumBZrCEo1GraV2csRBqKMOQFM7IKhBUP3tJVf2NSPS2nBqbdc

我真的无法理解谷歌文档。对于oauth2，没有适当的支持。我真的需要一些帮助。

谢谢

- Giannis Savvidis

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MonkeyDkon · Accepted Answer

我之前也曾遇到过这个问题。你的前端代码看起来没问题，只是后端缺少了一些东西。

尝试将你的控制器改为这样

const {google} = require('googleapis');

exports.getGoogleAccountFromCode = (req, res, next) => {
    const code = req.body.code;
    const oauth2Client = new google.auth.OAuth2(process.env.GOOGLE_CLIENT_ID, process.env.GOOGLE_CLIENT_SECRET, 'postmessage');
    google.options({ auth: oauth2Client });


    oauth2Client.getToken(code).then(res => {
        const tokens = res.tokens;
        oauth2Client.setCredentials(tokens);
        const oauth2 = google.oauth2({ version: 'v2' });
        return oauth2.userinfo.get();
    })
        .then(userData => {
            console.log(userData);
        })
        .catch(err => {
            console.log(err);
        });
};

你漏掉的实际上是google.options。然后，提取令牌和用户信息。然后，您应该能够按照您想要的方式使用它们。

此外，不要忘记在测试时（例如使用POSTMAN），始终为每次尝试发送一个新代码code。