Question

我有一个Google App Engine应用程序（使用Python！），其Facebook登录基于示例here。当用户登录时，此example.html负责显示（在我的例子中，是用户的Facebook好友的一个很好的列表，以及从图API中提取的一些信息）。

在标准Facebook登录框出现之前（或之后），我想要另一个弹出框，提示用户选择是否要显示男性朋友或女性朋友。换句话说，可能会像往常一样看到这个：

standard FB app login popup

......接下来是这样的：2

simple two-choice dialog box

...反过来也可以（偏好框然后是FB框）;目标是存储＆＃34; guy或gal＆＃34; preference作为我的User类的属性（就像Facebook登录让我收集其他属性一样），它延伸到example.py中的那个：

...
class User(db.Model):
    id = db.StringProperty(required=True)
    created = db.DateTimeProperty(auto_now_add=True)
    updated = db.DateTimeProperty(auto_now=True)
    name = db.StringProperty(required=True)
    profile_url = db.StringProperty(required=True)
    access_token = db.StringProperty(required=True)
    preferred_gender = db.StringProperty(required=True) ####### ADDED #########
...

我对当前事物流的理解是，example.py中的HomeHandler导致了main.html的呈现，它显示了点击时调用它的登录按钮：

function doLogin() {  
                 FB.login(function(response) {} , {perms:'...'}); 
}

...所以，我假设我想要的对话将从那里的某个地方调用/显示。因为我对Javascript，Bootstrap（我用作我的页面的框架）以及一般的Web，如何以及使用什么工具（例如，Bootstrap ...以及更多JS，或许是新手？）都很陌生。我可以协调这个吗？

Answer 1

FB登录会将用户从您的站点引导至FB，这样他们就可以登录（这样您就无法看到他们输入的密码）。

登录后，会将其重定向回您的网站。

在您的example.html中，有一些部分：

{% if current_user %}
  <p><a href="{{ current_user.profile_url }}"><img src="http://graph.facebook.com/{{ current_user.id }}/picture?type=square"/></a></p>
  <p>Hello, {{ current_user.name|escape }}</p>
{% endif %}

<div id="fb-root"></div>

{% if current_user %}
        <div>
        Upload photo test: 
               <form method="post">
               Enter URL to URLFetch from:<input type="text" name="url"/>
               <input type="submit"/>
               </form>
        </div>
{% endif %}

当用户未登录时，页面的这些部分不会显示，但是，在登录后将它们重定向回此页面时，页面的那些部分将被填写。因此，您可以替换“使用Bootstrap模式上传照片测试。

{% if current_user %}
    <div id="modal-question" class="modal">
      <div class="modal-header">
        <a href="#" class="close" data-dismiss="modal">×</a>
        <h3>I want to see</h3>
      </div>
      <div class="modal-body">
        <p>Guys</p>
        <p>Gals</p>
      </div>
      <div class="modal-footer">
        <a href="#" class="btn secondary" data-dismiss="modal">OK</a>
      </div>
    </div>

    <script>
      $('#modal-question').modal('show');
    </script>
{% endif %}

确保包含jquery和Bootstrap模式脚本。

Python / google app引擎/ bootstrap弹出输入对话框

1 个答案: