Google Sheets加载项无模式对话框中第三方认证实现方案咨询

在Google Sheets加载项中，在无模式核心对话框上打开模态对话框承载第三方认证是常规且推荐的方案，选择showModalDialog而非继续使用无模式对话框的原因如下：

• 认证流程需要用户专注完成，模态对话框会阻塞父对话框的交互，避免用户误操作导致流程混乱；
• 符合第三方登录的交互习惯，用户能明确当前处于认证环节，不会被其他操作干扰。

一、实现认证模态对话框的触发逻辑 #

1. 在Google Apps Script（.gs文件）中定义打开认证对话框的函数 #

根据传入的认证提供商（微软/谷歌），生成对应的授权页面并打开模态对话框：

function showAuthDialog(provider) {
    // 生成对应提供商的授权URL（需自行实现第三方OAuth配置逻辑）
    const authUrl = getProviderAuthUrl(provider);
    // 创建跳转至授权页面的HTML输出
    const authHtml = HtmlService.createHtmlOutput(`
        <script>
            window.location.href = "${authUrl}";
        </script>
    `).setWidth(600).setHeight(600);
    // 打开模态对话框
    SpreadsheetApp.getUi().showModalDialog(authHtml, `${provider === 'microsoft' ? '微软' : '谷歌'}登录`);
}

// 示例：获取第三方授权URL的辅助函数（需根据实际OAuth配置实现）
function getProviderAuthUrl(provider) {
    if (provider === 'microsoft') {
        return 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize?' +
            new URLSearchParams({
                client_id: '你的微软OAuth客户端ID',
                response_type: 'code',
                redirect_uri: '你的回调URL（需匹配微软OAuth配置）',
                scope: 'openid profile email'
            });
    } else if (provider === 'google') {
        return 'https://accounts.google.com/o/oauth2/v2/auth?' +
            new URLSearchParams({
                client_id: '你的谷歌OAuth客户端ID',
                response_type: 'code',
                redirect_uri: '你的回调URL（需匹配谷歌OAuth配置）',
                scope: 'openid profile email'
            });
    }
    return '';
}

2. 在核心无模式对话框的网页中添加登录按钮并绑定事件 #

核心网页通过google.script.run调用GS端的函数打开模态对话框：

<!-- 核心无模式对话框内的登录按钮 -->
<button onclick="triggerAuth('microsoft')">微软登录</button>
<button onclick="triggerAuth('google')">谷歌登录</button>

<script>
    function triggerAuth(provider) {
        // 调用GS端函数打开认证模态对话框
        google.script.run.showAuthDialog(provider);
    }
</script>

二、处理认证成功后的回调与状态同步 #

1. 配置第三方OAuth回调URL #

将回调URL指向你部署的Google Apps Script Web App（需在Google Cloud Console中完成微软/谷歌OAuth应用的回调地址配置）。

2. 在GS文件中实现回调处理函数 #

接收第三方返回的授权码，交换为访问令牌并存储，同时关闭模态对话框：

function doGet(e) {
    const provider = e.parameter.provider;
    const authCode = e.parameter.code;
    
    // 用授权码交换第三方访问令牌（需自行实现令牌交换逻辑）
    const tokens = exchangeAuthCodeForTokens(provider, authCode);
    
    // 存储令牌至用户属性，供后续核心功能调用
    PropertiesService.getUserProperties().setProperty(`${provider}_tokens`, JSON.stringify(tokens));
    
    // 返回关闭对话框的HTML
    return HtmlService.createHtmlOutput(`
        <script>
            // 关闭模态对话框
            window.top.close();
            // 通知核心无模式对话框登录成功（可选）
            google.script.run.withSuccessHandler(() => {
                // 核心对话框可在此处刷新用户状态
                window.opener.refreshUserInfo();
            }).notifyLoginSuccess(provider);
        </script>
    `);
}

// 示例：令牌交换与登录成功通知辅助函数
function exchangeAuthCodeForTokens(provider, code) {
    // 实现微软/谷歌的令牌交换逻辑，返回包含access_token、refresh_token等的对象
    return {};
}

function notifyLoginSuccess(provider) {
    // 可选：可在此处做一些全局状态更新
}

三、关键注意事项 #

• OAuth配置：需在Google Cloud Console配置OAuth同意屏幕，添加第三方认证所需的授权范围；同时确保微软/谷歌OAuth应用的回调URL与Web App部署地址完全匹配。
• 令牌存储：使用PropertiesService.getUserProperties()存储用户令牌，避免重复登录。
• 对话框交互：认证成功后通过window.top.close()关闭模态对话框，若需同步核心对话框状态，可通过window.opener调用核心页面的函数。

内容的提问来源于stack exchange，提问作者SoftTimur