Google 自定义元素内的 Auth 回调

Question

我正在尝试使用以下代码将 google auth 放入自定义元素中。它呈现正确，按钮导致常规 google 身份验证弹出窗口触发，但在完成登录后，回调未触发 - none 日志被触发，并且没有错误消息。有什么建议吗？

我猜这与我使用 class 的事实有关，因为我在某处读到字符串需要引用全局函数。但这当然在这种情况下是不可能的

customElements.define(
    "google-auth",
    class extends HTMLElement {
        constructor() {
            super();
            this._profile = {};
        }

        onSignIn(googleUser) {
            var profile = googleUser.getBasicProfile();
            console.log("ID: " + profile.getId()); // Do not send to your backend! Use an ID token instead.
            console.log("Name: " + profile.getName());
            console.log("Image URL: " + profile.getImageUrl());
            console.log("Email: " + profile.getEmail()); // This is null if the 'email' scope is not present.
            this._profile = profile;
        };

        connectedCallback() {
            console.log("google-auth");

            this.innerHTML = `
            <div class="g-signin2" data-onsuccess="onSignIn"></div>
        `;
        }
    }
);

Answer 1

您还可以明确定义成功回调，如 custom Sign-In button 上的 Google Auth 文档中所述。

例如：

connectedCallback() {
    console.log("google-auth");

    this.innerHTML = `
        <div id="my-signin2"></div>
    `;

    gapi.signin2.render('my-signin2', {
        'theme': 'dark',
        'onsuccess' : this.onSignIn.bind(this)
    });
}

如果这样做，Google 库必须在调用 connectedCallback() 时已经加载（即：没有 async defer 属性）。

如果您想保留 async defer 属性，则必须使用全局 render() 函数调用自定义元素方法来呈现按钮：

function render() { 
    GA.render() // where GA is the custom element id
}

class extends HTMLElement {
   render() {
       gapi.signin2.render('my-signin2', 
       ...
   }
}

Google 自定义元素内的 Auth 回调

Google Auth call back inside custom element

javascript

google-authentication

custom-element