简体   繁体   English

保存 facebook 连接个人资料图片到自己的服务器

[英]Save facebook connect profile picture to own server

I am working in an application which uses facebook connect to fetch a user's profile picture.我正在使用 facebook 连接来获取用户的个人资料图片的应用程序中工作。 But after the connection is made I still have to be able to crop and resize the “large” image.但是在建立连接之后,我仍然必须能够裁剪和调整“大”图像的大小。 Therefor I want to download the profile picture from the facebook server to my own server.因此,我想从 facebook 服务器下载个人资料图片到我自己的服务器。

As of now I am not able to download the picture to my server.截至目前,我无法将图片下载到我的服务器。 Here is what I am doing:这是我正在做的事情:

  1. The facebook profile picture get sync in our application from facebook with the following path http://graph.facebook.com/uid/picture?type=large The facebook profile picture get sync in our application from facebook with the following path http://graph.facebook.com/uid/picture?type=large
  2. Now we need the image to be get saved locally from the URL mentioned above现在我们需要从上面提到的 URL 本地保存图像
  3. Crop it and display it, but we are unable to save the image from the provided URL裁剪并显示它,但我们无法从提供的 URL 中保存图像

Question问题

• So how we can save the facebook profile picture in our server using this path http://graph.facebook.com/uid/picture?type=large ? • 那么我们如何使用此路径在我们的服务器中保存 facebook 配置文件图片http://graph.facebook.com/uid/picture?type=large
• Or what is the other solution to save facebook profile? • 或者保存facebook 配置文件的其他解决方案是什么? Picture to be save in our server first before displaying it?图片在显示之前先保存在我们的服务器中吗?
• How do we still keep it in sync with facebook if we use the saved picture? • 如果我们使用保存的图片,我们如何使其与 facebook 保持同步?

Then I have another question:然后我还有一个问题:
How do you delete the cookies for a once established facebook connect connections if a user does not want to use facebook connect no more?如果用户不想再使用 facebook 连接,如何删除曾经建立的 facebook 连接连接的 cookies? If have tried to do this with the following code but no results:如果尝试使用以下代码执行此操作但没有结果:

    var api_key = "135xxxxxxxxxxx";
    var channel_path = ""+2;
    FB.init(api_key , cookie:false, channel_path, { "ifUserConnected": update_user_box });
    Function update_user_box(){
    Var fbId=FB.Connect.get_loggedInUser();

The code given above to delete the false cookie is not working.上面给出的删除虚假 cookie 的代码不起作用。 What do I have to do to resolve this issue?我该怎么做才能解决这个问题?

Instead of saving all the profile photos you could display the photo in a div that is too small for the entire image.您可以将照片显示在对于整个图像来说太小的 div 中,而不是保存所有个人资料照片。 Basically let the html do the cropping.基本上让 html 进行裁剪。

<body>
     <div style="background-image: url(http://scm-l3.technorati.com/11/01/14/25023/facebook-logo.jpg); width: 380px; height: 300px;">
 </div>
</body>

OR, per my comments below, you could wrap an image and resize the div.或者,根据我在下面的评论,您可以包装图像并调整 div 的大小。 Both options work.两种选择都有效。 One avoids using a CSS url() which might not follow redirects in come rare cases.避免使用 CSS url() 在极少数情况下可能不会遵循重定向。

<body>
     <div style="width: 380px; height: 300px; overflow: hidden;">
         <img src="http://scm-l3.technorati.com/11/01/14/25023/facebook-logo.jpg" alt="Facebook" />
 </div>
</body>

Like OffBySome said above , the key is knowing that it will redirect you.就像上面所说的OffBySome一样,关键是知道它会重定向你。 So, we turn off following the redirect automatically and retrieve the actual URL of the picture from the header of the profile URL.因此,我们自动关闭重定向并从配置文件 URL 的 header 中检索图片的实际 URL。 Here's a snippet I've used to download the actual image file.这是我用来下载实际图像文件的片段。 Available as a gist here: https://gist.github.com/1092990可在此处作为要点: https://gist.github.com/1092990

private static final String PROFILE_PICTURE_URL = "https://graph.facebook.com/%s/picture?type=large&access_token=%s";

private String downloadFacebookProfilePicture(String uid, String accessToken, String username) throws MalformedURLException, IOException {
    //Get the picture url
    HttpURLConnection.setFollowRedirects(false);
    String profilePictureUrlString = new URL(String.format(PROFILE_PICTURE_URL, uid, accessToken)).openConnection().getHeaderField(
            "location");

    //Set up temp location for picture
    String fileExtension = StringUtils.substring(profilePictureUrlString,
            StringUtils.lastIndexOf(profilePictureUrlString, ".") + 1);

    String tempFilePath = (new StringBuilder(String.valueOf(System
            .getProperty("java.io.tmpdir"))))
            .append(StringUtils.replace(username, ".", "_")).append(".")
            .append(fileExtension).toString();

    String exportUrl = profilePictureUrlString;
        //Download file to temp  location
        downloadFile(exportUrl, tempFilePath);

    return tempFilePath;
}

private void downloadFile(String exportUrl, String filepath)
        throws IOException, MalformedURLException {
    InputStream inStream = new URL(exportUrl).openStream();
    FileOutputStream outStream = new FileOutputStream(filepath);
    copyStreams(inStream, outStream);
}

private void copyStreams(InputStream inStream, OutputStream outStream)
        throws IOException {
    try {
        int c;
        while ((c = inStream.read()) != -1) {
            outStream.write(c);
        }
    } finally {
        if (inStream != null) {
            inStream.close();
        }
        if (outStream != null) {
            outStream.flush();
            outStream.close();
        }
    }
}

You should probably split your questions into separate questions but as others have pointed out , https://graph.facebook.com/me/picture will return a 302 redirect to the image URL that you can save to your server so you'll need to make sure you're either following the redirect or reading the Location header (more on how to do that here ) to get the URI of the actual image.您可能应该将您的问题分成单独的问题,但正如其他人指出的那样https://graph.facebook.com/me/picture将返回一个302 重定向到图像 ZE6B391A8D2C4D45902AZ3A8 可以保存到您的服务器所以您需要您的58902AZ3A8确保您遵循重定向或读取位置 header(更多关于如何在此处执行此操作)以获取实际图像的 URI。

As for your question on how to make sure you are always using the most up to date picture, you should subscribe to the "/picture" connection of the "User" object using Real-time Updates and we will ping your callback whenever any user of your app updates their picture so you can go pull the latest one.至于您关于如何确保您始终使用最新图片的问题,您应该使用实时更新订阅“用户”object 的“/图片”连接,我们将在任何用户时ping您的回调您的应用程序更新他们的图片,以便您可以 go 拉最新的一张。 This way you won't have to keep polling to see if the user has changed their picture.这样您就不必继续轮询以查看用户是否更改了他们的图片。

If you're able to achieve what you're going for with just CSS (without caching the pic on your own server), check out squinlan's solution .如果您仅使用 CSS(无需在您自己的服务器上缓存图片)就能够实现您的目标,请查看squinlan 的解决方案

When you try to download the image, make sure whatever you are download the image with can follow 302 redirects because the graph Facebook link only returns a redirect to the image, not the actual image itself.当您尝试下载图像时,请确保您下载图像的任何内容都可以遵循 302 重定向,因为图 Facebook 链接仅返回到图像的重定向,而不是实际图像本身。 But cropping the image with CSS would make a lot more sense.但是使用 CSS 裁剪图像会更有意义。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM