vue3) Google Login Api (GSI) 的重定向模式找不到 http://localhost:3000

Question

我想调整google登录api(GSI)重定向模式。如果 api 复杂，则将 url 重定向到“http://localhost:3000/oauth”，将凭证令牌发布到后端并重定向到“http://localhost:3000”。

这是我的代码。

      <div
        id="g_id_onload"
        :data-client_id="googleClientId"
        data-ux_mode="redirect"
        data-auto_prompt="false"
        :data-callback="getGoogleLoginCallback"
        style="z-index: 100000000000000000"
      ></div>
      <div class="g_id_signin"></div>

页面重定向并单击我的帐户后，我收到错误 http://localhost:3000 is

如何获取页面？

我找不到任何方法来解决问题

Answer 1

从 docs 您可以看到，如果您不提供 data-login_uri 属性，如果您打算在登录后发布凭据 JWT ，Google 将重定向到您单击登录按钮的同一页面

http://localhost:3000/oauth

那么html一定是这样的

      <div
        id="g_id_onload"
        :data-client_id="googleClientId"
        data-ux_mode="redirect"
        data-auto_prompt="false"
        data-login_uri="http://localhost:3000/oauth"
        :data-callback="getGoogleLoginCallback"
        style="z-index: 100000000000000000"
      ></div>
      <div class="g_id_signin"></div>

我不推荐在您的 Vue 应用程序中使用这种 html 方式，如果在加载 library 后安装包含此 html 的组件，这可能不起作用

改为使用 renderButton 函数

您可以使用 google.accounts.id.renderButton 函数动态创建登录按钮。

或者使用插件代替

您可以使用这个 Vue 3 插件 vue3-google-login 轻松执行相同的操作，我最近创建了该插件，以便在您的 Vue 3 应用程序中轻松集成 Login With Google 功能，您所需要做的就是 在 main.js 中初始化该插件 使用您的客户端 ID，然后使用组件

GoogleLogin

像这样

<script setup>
const idConfiguration = {
      login_uri:'http://localhost:3000/oauth',
      ux_mode:'redirect'
    }
</script>

<template>
    <GoogleLogin 
    :idConfiguration="idConfiguration"
    />
</template>