2

我有一个托管在 Heroku 上的 Facebook 应用程序（画布），比如 xxxx.herokuapp.com/index.php。我在画布之外还有一个网站，比如 xxxx.herokuapp.com/welcome.php，我鼓励人们在其中了解更多有关该应用程序的信息并安装它。

是否有任何小部件“安装应用程序”将 Welcome.php 上的访问者重定向到 index.php，要求登录（如有必要）和安装应用程序的权限？

我目前正在使用“登录按钮”，但它只是执行登录步骤。

谢谢

4

1 回答 1

0

不，没有官方Install App按钮，但您可以自己创建一个。

创建一个按钮，将访问者 onclick 重定向到 index.php 页面和 index.php 页面，检查用户是否已经登录，如果没有，则使用您的应用程序需要的任何权限将他们重定向到身份验证流，然后返回索引.php。

如果你想要一个片段，我可以发布它。

编辑：根据要求，这是片段：

index.php

<?php
# Path to facebook's PHP SDK, Assuming it's in the root.
# Download latest SDK from https://github.com/facebook/facebook-php-sdk
require_once("facebook.php");

# Facebook application config.
$config = array(
    'appId'      => 'YOUR_APP_ID',
    'secret'     => 'YOUR_APP_SECRET',
);

# Create a new facebook object.
$facebook = new Facebook($config);

# Current user ID.
$user_id = $facebook->getUser();

# Check to see if we have user ID.
if($user_id) {

  # If we have a user ID, it probably means we have a logged in user.
  # If not, we'll get an exception, which we handle below.
  try {

    # Get logged in user's profile info:
    $user_info = $facebook->api('/me');

  } catch(FacebookApiException $e) {
    // If the user is logged out, you can have a 
    // user ID even though the access token is invalid.
    // In this case, we'll get an exception, so we'll just redirect the user to login again here.
    $login_url = $facebook->getLoginUrl();
    echo ("<script>top.location = '$login_url';</script>");
    error_log($e->getType());
    error_log($e->getMessage());
  }   
} else {

  # No user, redirect user to login and give the required permissions to perform tasks.
  $login_url = $facebook->getLoginUrl();
  echo ("<script>top.location = '$login_url';</script>");
}
?>

welcome.php示例：http: //jsfiddle.net/9CCcB/

我在这个例子中使用了Nicolas Gallagher的 CSS3 Social Sign-in Buttons，你可以使用任何样式的按钮。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Welcome</title>
  <style>
     /*
       CSS3 Social Sign-in Buttons by Nicolas Gallagher
       Link: http://nicolasgallagher.com/lab/css3-social-signin-buttons/
     */
     .btn-auth {
        position: relative;
        display: inline-block;
        height: 22px;
        padding: 0 1em;
        border: 1px solid #999;
        border-radius: 2px;
        margin: 0;
        text-align: center;
        text-decoration: none;
        font-size: 14px;
        line-height: 22px;
        white-space: nowrap;
        cursor: pointer;
        color: #222;
        background: #fff;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        /* iOS */
        -webkit-appearance: none; /* 1 */
        /* IE6/7 hacks */
        *overflow: visible;  /* 2 */
        *display: inline; /* 3 */
        *zoom: 1; /* 3 */
    }

    .btn-auth:hover,
    .btn-auth:focus,
    .btn-auth:active {
        color: #222;
        text-decoration: none;
    }

    .btn-auth:before {
        content: "";
        float: left;
        width: 22px;
        height: 22px;
        background: url(https://raw.github.com/necolas/css3-social-signin-buttons/master/auth-icons.png) no-repeat 99px 99px;
    }

    /*
     * 36px
     */

    .btn-auth.large {
        height: 36px;
        line-height: 36px;
        font-size: 20px;
    }

    .btn-auth.large:before {
        width: 36px;
        height: 36px;
    }

    /*
     * Remove excess padding and border in FF3+
     */

    .btn-auth::-moz-focus-inner {
        border: 0;
        padding: 0;
    }


    /* Facebook (extends .btn-auth)
       ========================================================================== */

    .btn-facebook {
        border-color: #29447e;
        border-bottom-color: #1a356e;
        color: #fff;
        background-color: #5872a7;
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#637bad), to(#5872a7));
        background-image: -webkit-linear-gradient(#637bad, #5872a7);
        background-image: -moz-linear-gradient(#637bad, #5872a7);
        background-image: -ms-linear-gradient(#637bad, #5872a7);
        background-image: -o-linear-gradient(#637bad, #5872a7);
        background-image: linear-gradient(#637bad, #5872a7);
        -webkit-box-shadow: inset 0 1px 0 #879ac0;
        box-shadow: inset 0 1px 0 #879ac0;
    }

    .btn-facebook:hover,
    .btn-facebook:focus {
        color: #fff;
        background-color: #3b5998;
    }

    .btn-facebook:active {
        color: #fff;
        background: #4f6aa3;
        -webkit-box-shadow: inset 0 1px 0 #45619d;
        box-shadow: inset 0 1px 0 #45619d;
    }

    /*
     * Icon
     */

    .btn-facebook:before {
        border-right: 1px solid #465f94;
        margin: 0 1em 0 -1em;
        background-position: 0 0;
    }

    .btn-facebook.large:before {
        background-position: 0 -22px;
    }

  </style>
</head>
<body>
 <center><a class="btn-auth btn-facebook large" href="http://domain.com/">Sign in with <b>Facebook</b></a></center>
</body>
</html>​
于 2012-10-10T10:39:02.387 回答