首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >带节点js的Google oauth2

带节点js的Google oauth2
EN

Stack Overflow用户
提问于 2019-07-31 20:49:28
回答 1查看 2.2K关注 0票数 3

我有一个Vuejs应用程序,我正在尝试添加google身份验证。我使用这个插件https://www.npmjs.com/package/vue-google-oauth2在前端生成授权代码,然后将它发送到我的后端,这样它就可以获得用户凭据。

下面是前端的代码:

代码语言:javascript
运行
复制
<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编写的,基于官方的google。https://github.com/googleapis/google-api-nodejs-client#oauth2-client

我有一条路线:

代码语言:javascript
运行
复制
router.post('/google', googleController.getGoogleAccountFromCode);

而这个控制器:

代码语言:javascript
运行
复制
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 process._tickCallback (Gaxios.request/Gaxios.request/next_tick.js:68:7)响应:{ config:{ method:'POST',url:'https://oauth2.googleapis.com/token',数据:'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=',标头: Object,params: Object: null prototype {},paramsSerializer: Function: paramsSerializer,正文:'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:’validateStatus‘,error_description:“redirect_uri的无效参数值:缺失方案: /auth/google/redirect‘},标题:{’alt‘:’quic=‘:443”;ma=2592000;v=“46,43,39”,‘缓存-控制’:‘私有’,连接:‘关闭’,‘内容-编码’:'gzip',‘内容-类型’:'application/json;charset=utf-8',日期:'Wed,2011年7月31日20:47:01 GMT',服务器:‘HTTPServer2 2上的脚手架’,‘传输-编码’:‘分块’,变化:‘起源,X-原产地,引用’,‘x-内容-类型-选项’:'nosniff',‘x-帧-选项’:'SAMEORIGIN',‘x-xss-保护’:'0‘},状态: 400,statusText:’坏请求‘},配置:{方法:'POST',url:'https://oauth2.googleapis.com/token',数据:https://oauth2.googleapis.com/token标题:{‘Content’:‘application/x form-urlencoded’,‘User’:‘google nodejs/4.2.6’,接受:'application/json‘},params: Object: null prototype {},paramsSerializer: paramsSerializer,正文:'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‘},代码:'400’}

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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-08-01 17:51:53

我以前也被困在这个问题上。你的前端代码看起来没问题。你只是在你的后端遗漏了一些东西。

尝试将您的控制器更改为

代码语言:javascript
运行
复制
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时,不要忘记。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57298646

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档