首页 > 解决方案 > 使用 Facebook SDK (JavaScript) 共享 Firebase 存储图像

问题描述

我正在使用 Firebase 存储用户图像。我想为用户添加在 Facebook 上分享这些照片的功能。我在 Facebook Developers 上创建了一个项目。我目前正在使用 React,所以下面是我的组件的淡化版本。

class Share extends React.Component {
    componentDidMount() {
        window.fbAsyncInit = function() {
            //SDK loaded, initialize it
            FB.init({
                appId      : 'app-id',
                xfbml      : true,
                version    : 'v2.6'
            });
            //JS SDK initialized, now you can use it
            FB.XFBML.parse();
        };

        //load the JavaScript SDK
        (function(d, s, id){
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    }

    render() {
        return (
            <a onClick={() => {
                FB.ui({
                    method: 'share',
                    display: 'popup',
                    href: imageData.image_url
                })
            }}>Share</a>
        )
    }
}

/*
    imageData.image_url = "https://firebasestorage.googleapis.com/v0/b/zoostagram-c0ec2.appspot.com/o/journey%2FTbewuTE9MDZaBByadZUz9kXjtK93%2F-LAucp-cHpPUWnMmn_GV%2F174915781175375011-1618340686-1759905821-1592844446-1892410559-711095936445312870.jpg?alt=media&token=5a37d0d5-2917-4783-ab4c-2dbd94734320"
*/

Facebook 分享弹出窗口确实打开了,所以我假设该FB.init()功能运行良好。但是,我在弹出窗口中收到错误消息:“无法加载 URL:此 URL 的域不包含在应用程序的域中。要能够加载此 URL,请添加应用程序的所有域和子域到您的应用设置中的应用域字段。 "

我试图添加firebasestorage.googleapis.com到我的应用程序域,但它没有被保存,因为它不是我的站点 URL。其他注意事项,我正在使用“create-react-app”,所以仍在本地开发。我也尝试运行encodeURI(url)& encodeURIComponent(url),但都没有奏效。

标签: javascriptfacebookreactjsfacebook-javascript-sdkfirebase-storage

解决方案


推荐阅读