如何使用 navigator.credentials 在 React 应用程序中存储密码？

问题描述

在 React 应用程序中，我需要访问 MysqL 服务器，为此我需要用户的凭据。为了避免每次打开连接时用户都输入它们，我想将密码存储在浏览器的密码存储/管理器中。

根据 MDN，所有主要浏览器都应该支持 Credentials Management API。所以我是这样试的：

    private requestPassword = (commandId: string,args?: any[]): void => {
        if (args && args.length > 0) {
            // First check if we already have a password and don't ask for it,if so.
            const request: IServicePasswordRequest = args[0];

            navigator.credentials.get({
                password: true,mediation: "silent",} as any).then((credential) => {
                if (credential) {
                    const id = 0;
                } else {
                    // Opens the password dialog.
                    this.setState({ request },() => this.dialogRef.current?.open());

                }
            });
        }
    };

    private closePanel = (e: React.SyntheticEvent,props: IButtonProperties): void => {
        // Called when either OK or Cancel was clicked by the user,in the password dialog.
        if (props.id === "ok") {
            const { request } = this.state;
            const options = {
                password: {
                    id: request!.serviceId,name: request!.user,password: "root",// Just for test.
                },};

            navigator.credentials.create(options as any).then((credential) => {
                if (credential) {
                    navigator.credentials.store(credential).then((value) => {
                        console.log("Success: " + value);
                    }).catch((e) => {
                        console.log("Error: " + e);
                    });
                }
            });
        }

        this.dialogRef.current?.close();
    };

但是有几个问题：

1. 密码成员（如 CredentialContainer.create() 页面中所述，Typescript 未知。我使用 any 强制转换解决了该问题。返回的凭据是 PasswordCredential 结构，内容看起来不错。
2. 存储凭据时，采用成功分支，但承诺值为空。不确定这是否相关。
3. 当我调用 navigator.credentials.get 时，我再也没有取回任何凭据。事实上，我并不感到惊讶。难道不需要传入 id 和用户名来查找凭据吗？但 API 不允许这样做。

那么，这里的正确方法是什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）