javascript - Meteor.js facebook 使用 'apple-mobile-web-app-capable' 登录

Question

我正在做一个小型个人项目，用户可以通过 {{loginButtons}} 中内置的 Meteor.js 登录 Facebook 但问题是，当通过 apple-mobile-web-app-capable 全屏运行应用程序时，没有弹出对话框请求许可。屏幕一片空白。

我根本没有使用 facebook 的 sdk。

它在移动 safari 中运行良好。我已将它部署到 meteor 进行一些最终测试，所以这不是本地主机问题。

这是否可能而不必创建我自己的用户创建和/或服务器端实现和/或 facebook 的 sdk？ 最终我计划添加更多内容，例如 twitter 和 google。

此外，我还在使用 iOS 6.1

Answer 1

更新，请参阅我的其他答案以获得改进的示例

所以我只花了大约一个小时来解决一些问题。 我认为最好的办法是放弃 Meteor 的内置帐户系统 相反，我正在使用“oauth.io”(无从属关系)和“ meteor 路由器”，我将使用 Meteor 的 Accounts.createUser(); 创建用户； 最好的部分是它可以与本地主机和我的 iPhone 一起使用，所以我不必继续部署它来测试。

Meteor.startup(function () {
    OAuth.initialize('my key');
});

我的路线:

Meteor.Router.add({
    '/oauth': function() {
      console.log('oauthed');
        OAuth.callback('facebook', function(err, result) {
            var token = result.access_token;
            var url = 'https://graph.facebook.com/me?access_token='+token;

            $.get( url, function( data ) {
                alert(data.email)
                console.log(data);
            });
        });
    }
});

然后是一个简单的 anchor

$('#loginfb').live('click', function() {
    OAuth.redirect('facebook', "/oauth");
});

就我所知，它适用于 apple-mobile-web-app-capable 我能够验证并获取我的 Facebook 信息。 它比我想做的要多，但并不太难。

所以我在考虑做一些事情，比如用这种方法获取用户的电子邮件，然后使用:

Accounts.createUser({
    email: data.email, 
    password: data.id //since your Facebook id can't change
});

这样用户可以稍后更改或重置它，或者我可以提示他们更改它。

然后我要检查该用户是否存在，(不知道如何做)如果他们存在则做:

Meteor.loginWithPassword(data.email, data.id);

好的。所以我稍微调整了我的设置。

我不得不切换到 Backbone Router，出于某种原因，Meteor Router 每次加载/oauth 时都会刷新页面两次。 Backbone 没有。

我添加了一个用于生成密码的服务器端函数。

Meteor.startup(function () {
  Backbone.history.start({
      pushState: true,
      root: "/"
  });

  OAuth.initialize('key goes here');
});

var $Router = Backbone.Router.extend({
  routes: {
    "/": "home",
    "oauth": "oauth",
    "": "home"
  },
  home: function () {
    console.log('home')
  },
  oauth: function () {
    OAuth.callback('facebook', function (err, result) {
      console.log(result);
      var token = result.access_token;
      var url = 'https://graph.facebook.com/me?access_token=' + token;
      $.get(url, function (data) {
        var email = data.email;
        var pass = Meteor.call('generatePass', data, function (error, result) {
          Meteor.loginWithPassword(email, result, function (error) {
            if (error) {
              var options = {};
              options.email = email;
              options.password = pass;
              Accounts.createUser(options, function (error) {
                if (error) {
                  console.log(error);
                  $router.navigate('/');
                } else {
                  //Account creation successful return to index
                  $router.navigate('/');
                }
              })
            } else {
              //Login successful return to index
              $router.navigate('/');
            }
          });
        });
      });
      return false;
    });
  }
});

var $router = new $Router();
// I use jquery for events, I don't like to use meteor's template event handlers.

$('#loginfb').click(function (event) {
  event.preventDefault();
  //have to use redirect, otherwise popup won't work correctly since we're using mobile-webapp-capable
  OAuth.redirect('facebook', "/oauth");
});


//server.js
Meteor.methods({
  generatePass: function (data) {
    // .. do stuff ..
    var pass = fancy function that creates a password based on the supplied data;
    return pass;
  }
});

到目前为止，它只适用于 Facebook，而且还没有经过很好的测试。 我喜欢一些指导和/或建设性的批评。