帶有節點 js 的 Google oauth2

Question

我有一個 Vuejs 應用程序，我正在嘗試添加 google 身份驗證。 我使用這個插件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>

我成功地獲得了授權碼，直到這里我將它發送到我的后端，它是基於谷歌官方文檔用 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);
    });
};

我得到這個錯誤：

{ Error: invalid_request at Gaxios.request (/home/monkeydkon/Desktop/tabata-rest/node_modules/gaxios/build/src/gaxios.js:70:23) at process._tickCallback (internal/process/next_tick.js:68 ：7）響應：{配置：{方法： 'POST'，URL： ' https://oauth2.googleapis.com/token '，數據：“代碼= 4％2FlgGDaumBZrCEo1GraV2csRBqKMOQFM7IKhBUP3tJVf2NSPS2nBqbdc9mDqIuaM847ZIPy6mZ4MGHLD9fR2a3A_Q＆CLIENT_ID = 918021882776-fu8hr3q5ld81t1dlv1pd8en7ht8hu3t6.apps.googleusercontent.com＆client_secret = LBCef5d7K48XGB7TEEDF7SBK＆REDIRECT_URI =％2Fauth％2Fgoogle％2Fredirect＆grant_type = authorization_code＆code_verifier = '標頭：本發明的課題，則params：[對象：空原型] {}，paramsSerializer：[功能：paramsSerializer]，體：' 代碼= 4％2FlgGDaumBZrCEo1GraV2csRBqKMOQFM7IKhBUP3tJVf2NSPS2nBqbdc9mDqIuaM847ZIPy6mZ4MGHLD9fR2a3A_Q＆CLIENT_ID = 918021882776-fu8hr3q5ld81t1dlv1pd8en7ht8hu3t6 .apps.googleusercontent.com&client_secret=LBCef5d7K48XGB7TEEDF7SBK&redirect_uri=%2Fauth%2Fgoogle%2Fredirect&grant_type=authorization_code&code_verifi er=', validateStatus: [Function: validateStatus], responseType: 'json' }, data: { error: 'invalid_request', error_description: 'redirect_uri 的參數值無效：缺少方案：/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'，日期：'Wed, 31 Jul 2019 20:47:01 GMT'，服務器：'scaffolding on HTTPServer2'，'transfer-encoding'：'chunked'，變化：'Origin，X-Origin， Referer', 'x-content-type-options': 'nosniff', 'x-frame-options': 'SAMEORIGIN', 'x-xss-protection': '0' }, status: 400, statusText: 'Bad請求'}，配置：{方法： 'POST'，URL： ' https://oauth2.googleapis.com/token '，數據：'代碼= 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: [Object: null prototype] {}, paramsSerializer: [Function: paramsSerializer], body: 'code=4%2FlgGDaumBZrCEo1GraV2csRBqKMOQFM7IKhBUP3tJVf2NSPS2nBqZIPym6m 4MGHLD9fR2a3A_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'}，代碼： '400'}

我真的無法理解谷歌文檔。 沒有對 oauth2 的適當支持。 我真的需要一些幫助。 謝謝

Answer 1

我之前也一直被這個問題困擾。 您的前端代碼看起來不錯。 您只是在后端缺少一些東西。

嘗試將您的控制器更改為此

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 。 然后，您提取令牌和用戶信息。 你應該能夠對他們做你想做的事。

也不要忘記在測試時（例如使用郵遞員）總是為每次嘗試發送一個新code 。