next-auth + Chrome扩展

Question

我想在一个有前端和后端的站点上使用next-auth。这在下一个版本中很容易，但是，我想不出一种通过Chrome扩展来验证用户身份的方法，这个扩展可以与后端通信。这样做的目的是在站点上创建数据，并将其与Chrome扩展一起用于创建该站点的用户。我不能把秘密存储在Chrome扩展程序上。有什么想法吗？我有一个想法来验证用户的身份，比如在电视和其他设备上。他们在站点上生成代码并将其插入到Chrome扩展程序中。当然，它在短期内是有效的。

但在我走上这条路之前，我想知道是否有人有更好的解决办法。

Answer 1

对我起作用的是从扩展到next-auth会话端点：/api/auth/session的请求。

如果会话不存在，我将打开一个带有登录页面的新选项卡，然后从那里开始。

下面是我的manifest.json的样子：

{
    "manifest_version": 3,
    "name": "Timer Extension",
    "version": "1.0.0",
    "description": "Hello Chrome World!",
    "icons": {
        "16": "grin.png",
        "48": "grin.png",
        "128": "grin.png"
    },
    "action": {
        "default_icon": {
            "16": "grin.png",
            "24": "grin.png",
            "32": "grin.png"
        },
        "default_title": "Timer Extension Action Title",
        "default_popup": "popup.html"
    },
    "background": {
        "service_worker": "authCheck.js"
    },
    "host_permissions": [
        "https://*/"
    ]
}

以下是authCheck.js服务工作者：

chrome.runtime.onMessage.addListener(
    function (request, sender, onSuccess) {
        console.log("running check")
        fetch("<your-domain>/api/auth/session", {
            mode: 'cors',
        })
            .then(response => response.json())
            .then((session) => {
                if (Object.keys(session).length > 0) {
                    onSuccess(session)
                } else {
                    onSuccess(null)
                }
            })
            .catch(err => {
                console.error(err);
                onSuccess(null)
            })

        return true;  // Will respond asynchronously.
    }
);

然后，在default_popup html的js文件中，我有以下内容：

chrome.runtime.sendMessage(
    {action: 'AUTH_CHECK'},
    (session) => {    
        if (session) {
            //user is logged in
        } else {
            //no session means user not logged in
            chrome.tabs.create({
                url: '<link to your login page>'
              }); 
        }
    }
);