4

ユーザーがMeteor.jsの組み込みを介してFacebookでログインできる小さな個人プロジェクトに取り組んでいますが{{loginButtons}} 、問題は、アプリをフルスクリーンで実行すると、apple-mobile-web-app-capable許可を求めるポップアップダイアログが表示されないことです。画面が真っ白になるだけです。

私はFacebookのSDKをまったく使用していません。

モバイルサファリでは問題なく動作します。最終テストのために meteor にデプロイしたので、localhost の問題ではありません。

これは、独自のユーザー作成、および/またはサーバー側の実装、および/または Facebook の SDK を作成しなくても可能ですか? 最終的には、twitter や google などを追加する予定です。

また、私はまだiOS 6.1を使用しています

4

3 に答える 3

3

更新、大幅に改善された例については、私の他の回答を参照してください

それで、私はちょうど約1時間かけていくつかのものを考え出しました. 最善の方法は、Meteor のビルトイン アカウント システムを削除することだと思います。代わりに、「oauth.io」(所属なし) と「meteor ルーター」を使用し、Meteor の Accounts.createUser(); でユーザーを作成します。これの最大の利点は、localhost と私の 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);
            });
        });
    }
});

次に、単純なアンカー

$('#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);

Ok。ということで、ちょっと設定をいじってみました。

何らかの理由で Meteor Router が /oauth をロードするたびにページを 2 回更新するため、Backbone Router に切り替える必要がありました。バックボーンはそうではありません。

パスワードを生成するためのサーバー側関数を追加しました。

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 でのみ動作し、十分にテストされていません。何らかのガイダンス、および/または建設的な批判が大好きです。

于 2013-11-07T02:48:31.303 に答える
1

問題は、oauth パッケージが window.open を使用してポップアップ ウィンドウを開くことにあるようです。これまでに apple-mobile-web-app-capable を使用した経験はありませんが、window.open が機能しないことを示唆する調査がいくつかあります。ソリューションは、クライアントがフルスクリーン アプリを使用しているかどうかをテストしているように見えます。

window.navigator.standalone

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.htmlによると

残念ながら、oauth ログイン ワークフローは、ポップアップが開かれていると仮定すると、ちょっと厄介です。このテストを行うのに最適な場所はどこなのか、ユーザーが新しいウィンドウにユーザー名/パスワードを入力した後にログインまたはユーザーの作成を試行するかどうかはわかりません。

accounts-oauth-helper/oauth_client.js で window.open メソッドを window.location に変更しようとしたところ、ウィンドウが開きましたが、電話から localhost プロジェクトでこれを行っていたため、redirect_uri に問題がありました。そのため、ログイン後にログイン プロセスが続行されるかどうかはわかりません。

これは、apple-mobile-web-app-capable を使用する場合にすべてのログイン プロバイダーに影響を与える可能性が高いため、おそらく修正が必要なバグです。後でプロジェクトをセットアップして、これをよりよく見て、その様子をお知らせします。

于 2013-11-06T04:14:26.943 に答える