Django和用google身份验证进行响应登录

Question

我试着用react前端和django rest框架后端设置google身份验证。我使用这两部分教程PART1 & PART2设置了前端和后端。当我尝试在前面使用谷歌登录时，我想这是因为我的google需要一个访问令牌和一个授权代码来传递POST http://127.0.0.1:8000/google-login/ 400 (Bad Request)。在调试了react之后，我注意到我从google获得的响应没有授权代码。我怀疑是因为responseType是permission(默认情况下)，Source:反应登录道具，而不是code。我想知道你会如何改变反应类型？(我甚至不确定这是否就是问题所在)

这是我的后端代码

在我的views.py文件中

class GoogleLogin(SocialLoginView):
    adapter_class = GoogleOAuth2Adapter
    callback_url = "http://localhost:3000"
    client_class = OAuth2Client

在我的urls.py里

path('google-login/', GoogleLogin.as_view(), name='google-login'),

为了我的前端

/Components/login.js

const googleLogin = async (accesstoken,code) => {
    console.log(accesstoken)
    let res = await cacaDB.post(

      `google-login/`,
      {
        access_token: accesstoken,
        code: code 
      }
    );
    console.log(res);
    return await res.status;
};


const responseGoogle = (response) => {
    console.log(response.code);
    googleLogin(response.accessToken, response.code);

    }
return(
<div className="App">
                <h1>LOGIN WITH GOOGLE</h1>
      
                <GoogleLogin
                clientId="client_id"
                buttonText="LOGIN WITH GOOGLE"
                onSuccess={responseGoogle}
                onFailure={responseGoogle}
                />
            </div>
)

我希望将用户保存在数据库中，并让他们保持登录，在前端。

这个帖子解释了场景背后的登录流。这里是登录流图像，我基本上只能返回代码和访问(我可以成功地返回这个步骤)。

这是我的问题清单，

1. 如何从google返回代码？
2. 我已经设置了knox令牌，我可以使用它来代替JWT令牌吗？
3. class GoogleLogin(SocialLoginView)是否负责使用google验证访问令牌和代码，以及使用数据库中的电子邮件创建用户？

会很感激你的意见。

Answer 1

在对我做了一点调查之后，我想我可能有一个适合你的解决方案。

我以前处理过OAuth，它有时很棘手，因为它必须是健壮的。所以一堆安全政策通常会妨碍我们。

我会一步一步地提供我的全部，因为我能够让它发挥作用，尽我最大的努力来匹配你发布的信息。

首先，为了清白起见，我离开了教程中链接的示例代码。我克隆并构建了该项目，并完成了以下工作：

• 在GCP 上创建一个新项目
  • 配置OAuth同意书屏幕
    • 我将用户类型设置为“内部”。如果您不使用GSuite (我是)下的帐户，则此选项可能不可用。“外部”应该是好的，只是“内部”是最容易测试的。

- Created a OAuth 2.0 Client 
    - Added `http://localhost:3000` to the "Authorized JavaScript origins" and "Authorized redirect URIs" sections

• 注册Django超级用户
  • 注册了一个Site，两个字段的值都为localhost:8000。
  • 进入管理面板，添加了一个Social Application，其中Client ID和Secret Key分别作为GCP的“客户ID”和“客户端秘密”。我还选择了我们之前添加的localhost站点，并将其添加到右侧框中。(我把Key 的空格留给了)

我的应用程序页面示例

• 在clientId组件的参数中填充App.js中的GoogleLogin字段。

这里我遇到了一些麻烦，但这是好消息，因为我能够重现你的错误！查看网络检查器中的请求，我发现对我来说，没有人通过，这显然是错误的直接原因。但是看看App#responseGoogle(response)，它显然应该传递某种类型的令牌，因为我们看到了行googleLogin(response.accessToken)。

所以正在发生的事情是，accounts.google.com没有返回适当的响应，所以在它们的末端发生了一些事情，我们得到了一个无效的响应，但是我们失败了，因为javascript是javascript。

在查看了谷歌回复的回复后，我发现了这个相关的帖子，这让我得以解决这个问题，而有趣的是，说，老实说，我不太清楚这是为什么，但我怀疑这与开发是在您的本地机器上有关(可能是localhost/127.0.0.1差异？)

您也可以尝试访问您的网站通过匿名模式，或其他浏览器，这也对我工作。

我已经设置了knox令牌，我可以使用它来代替JWT令牌吗？

我不认为我有足够的知识来正确地回答这个问题，但我的初步研究表明没有。AFAIK，您应该只存储Google给您的令牌，因为令牌本身就是您将用于身份验证的内容。似乎Knox取代了Django的TokenAuthentication，这意味着Knox负责生成令牌。如果你将登录工作卸载到谷歌，我看不出你怎么能利用像诺克斯这样的东西。不过，我可能大错特错。

class GoogleLogin(SocialLoginView)是否负责使用google验证访问令牌和代码，以及使用数据库中的电子邮件创建用户？

我相信是这样的。在成功地与Google进行身份验证(并且它正确地调用后端端点)之后，它似乎创建了一个“社会帐户”模型。下面是它为我创造的一个例子。它从Google检索了所有这些信息(比如我的名字)。

我的“社会账户”页面的例子

至于如何从浏览器的本地存储中检索登录，我不知道。我没有看到cookie的任何证据，所以它必须将其存储在其他地方，否则您可能不得不自己设置它(使用React Providers、Services甚至Redux )。