如何使用单独的API服务器在Nuxt中处理oauth?

时间:2019-02-18 11:11:58

标签: go vue.js nuxt.js

目前我有两个单独的应用

  1. 前端(Nuxt)
  2. 后端(Golang)

在后端,我正在使用一个名为Goth的第三方库,并且在使用Facebook作为提供者。后端一切正常,但是我对Nuxt端的前端的操作感到困惑

因此从技术上讲,后端将有两个网址

 /auth/facebook

/auth/facebook/callback

一旦一切正确,那么我将从后端的facebook上获取对象,这是用Golang编写的API

 data: {
         RawData: {
             email: "john@gmail.com",
             first_name: "John",
             id: "123123",
             last_name: "Grave",
             name: "John Grave",
             picture: {
                 data: {
                     height: 50,
                     is_silhouette: true,
                     url: "https://platform-lookaside.fbsbx.com/platform/profilepic/?asid=13123123&height=50&width=50&ext=1553079619&hash=AeTX5RW5K_avWLbI",
                     width: 50
                 }
             }
         },
         Provider: "facebook",
         Email: "john@gmail.com",
         Name: "John Grave",
         FirstName: "John",
         LastName: "Grave",
         NickName: "John Grave",
         Description: "",
         UserID: "123123",
         AvatarURL: "https://platform-lookaside.fbsbx.com/platform/profilepic/?asid=2312802522337124&height=50&width=50&ext=1553079619&hash=AeTX5RW5K_avWLbI",
         Location: "",
         AccessToken: "EAAIuR3NSCPwBAEcp2jskHuUCzdWLB97Aq99nCV5HuieVVz8xGfJ6exAZDZD",
         AccessTokenSecret: "",
         RefreshToken: "",
         ExpiresAt: "2019-04-19T15:52:59.895655+08:00"
     },
     status: 200
 }

假设后端一切正常。

我唯一想到的就是在方法(Nuxt端)上调用它

export default {
  methods: {
    facebookLogin() {
      window.location.href = `http://localhost:8080/auth/facebook`
    }
  }
}

这只会重定向到

http://localhost:8080/auth/facebook/callback?code=AQAaq9GYcGAnQ9wUCDAd5BFRHxMRjqGFR0J6zjGtYpD-

与后端OAuth API通信应该采取哪些正确步骤?

谢谢!

1 个答案:

答案 0 :(得分:0)

您好@sinusGob,您可以使用它作为nuxt的auth插件

请参阅文档。 https://auth.nuxtjs.org/reference/providers/facebook

谢谢。