web-dev-qa-db-ja.com

Google Apps ScriptWebアプリでFacebookAPIを使用しますか？

Google AppsScriptをWebアプリとしてバックエンドとして使用してFacebookアプリを作成しようとしています。適用できると思われる唯一のFacebookAPIは Javascript SDK ですが、それを機能させることすらできません。
私が抱えている現在の問題は、Facebook JSSDKが「__」で終わるJavascript識別子を使用していることです。 Google Apps Script restricts 二重下線で終わる名前。

名前に二重下線を付けずにFacebookのJSファイルの変更されたコピーを使用すると、次のエラーが発生します。
Refused to display [URL] in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'

GASをFBでうまく再生させる方法はありますか？

facebook-graph-apigoogle-apps-scriptfacebook-apps
15
Protector one

Apps Script _UrlFetchApp.fetch_とHTMLサービスを使用して、FacebookでApps ScriptAppにユーザーをログインさせる方法を理解しました。 AppsScriptを使用してFacebookに投稿することもできます。

  • Facebook JavascriptSDKは必要ありません

総括

8つの異なるFacebookプラットフォームがあります。

Facebook Platforms

AppsScriptで使用しているFacebookプラットフォームはWebサイトプラットフォームです。ウェブサイトはFacebookに埋め込まれて実行されません。

あなたができないこと：（私が知る限り）

  • Facebookと相互作用するWebサイトとFacebookページタブには違いがあります。 Facebook _Page Tab_はFacebookに埋め込まれて実行されます。私の経験では、Apps ScriptのURLはFacebook _Page Tab_で問題を引き起こします。 Apps ScriptのURLには、Facebookが削除しているように見えるものがたくさん追加されています。 （またはそのようなもの）私はFacebookでGoogle製品のさまざまなバリエーションを試しました。 GoogleサイトをFacebookページタブとして使用できますが、サイト内、つまりFacebookページタブ内にGoogle Apps Scriptを埋め込むと、クロスドメインエラーが発生します。だから、私が仕事に就くことができる唯一のオプションはウェブサイトのオプションです。

私がページタブの問題に使用する一種の回避策は、Thunderpenny Static HTMLをFacebookページタブとして使用し、それが私のApps ScriptAppまたはGAEAppのいずれかにリンクすることです。 （HTTP[〜＃〜] s [〜＃〜]が必要かどうかによって異なります）

Googleサイトを[ページ]タブとして使用することもできますが、Thunderpennyは、通常どおりHTML、Javascript、CSSを使用してアプリを設計できます。ああ！そして、Thunderpenny内でFacebook Javascript SDKを使用してみましたが、うまくいきませんでした。さらに、Thunderpennyアプリにはバックエンドがなく、Apps ScriptにはFacebookアプリトークンを非表示にできるバックエンド（.gsコード）があります。

基本的な手順は次のとおりです。

  • アプリからFacebook oauthへのリンクをトリガーします。
  • href = "https://www.facebook.com/dialog/oauth?client_id=yourIDhereNoQuotes&redirect_uri=https://script.google.com/macros/s
  • OnLoad関数を使用してURLから返されたFacebookトークンをキャプチャします
  • doGet(e)を使用してFacebookリダイレクトURLをアプリケーションに戻すことはできません。これが理由です。 Apps Scriptは、URLを解析するために、URLに疑問符を表示する必要があります。 Facebookは異なる構成のURLを返します。
  • アプリが読み込まれたときにスクリプトを実行して、Facebookトークンを処理します
  • window.onload = function（）{};
  • onload関数は_.gs_関数を実行してトークンを検証します
  • トークンをdebugするために_UrlFetchApp.fetch_を使用します
  • ログインステータスをプライベートキャッシュにキャッシュする
  • var cache = CacheService.getPrivateCache（）;
  • 必要に応じてログインステータスを確認してください。

Facebookはアプリのログインステータスを個別に追跡することに注意してください。ただし、Facebookトークンの有効期限が切れても、アプリのログインステータスはまだアクティブである可能性があります。したがって、それを確認する方法が必要です。

公式Facebookグラフィックを使用する

ブランドリソース-Facebook

Facebookのグラフィックをダウンロードします。すべきこととすべきでないことを読む

Facebookのログインボタンを作成する

_<div id="FbLog">
    <a href="https://www.facebook.com/dialog/oauth?client_id=YourClientID&redirect_uri=https://script.google.com/macros/s/YourAppsScript/exec?&response_type=token&scope=publish_stream"><img src="https://FacebookGraphic.png" height="95%" width="95%"></a>
</div>
_

Facebookのログインボタンのスタイルを設定する

_#FbLog {
    padding: 10px;
    background-color: white;
    margin-left:auto;
    margin-right:auto;
    cursor: pointer;
}
_

ウィンドウのOnLoadコード

これは、Facebookトークンをキャプチャするために使用するwindow.onloadクライアント側コードです。これは、Facebookトークンをキャプチャするためにのみ使用され、トークンを検証するためには使用されません。私のアプリでは、Facebookログインと通常のログインの両方が許可されています。 Facebookトークンの検証は別のコードで行われます。

_window.onload=function(){
  //console.log("This onload did run");

  //get the URL out of the browsers address bar
  //the URL can have multiple different strings attached depending upon the situation.
  //1)Sign in with Facebook. 2) Someone wanting to buy an item 3) Someone wanting to input an item for sale.
  //Any situation other than the FB log in is initiated in the back end.
  window.daURL = window.location;
  window.urlStrng = daURL.toString();

  //console.log("url: " + urlStrng);
  //If there was a FaceBook login, there will be a hashtag in the url string
  window.hashPos = urlStrng.indexOf("#");
  if (window.hashPos > 0) {
    mainStart('InputBlock', 'InputForm');
    window.urlEnd = urlStrng.split("#", 2);
    window.urlTkn = urlEnd[1].split("&", 2);
    window.fbAcsTkn = urlTkn[0].split("=", 2);
    window.finalTkn = fbAcsTkn[1];

    window.scndExpire = urlStrng.substring(urlStrng.indexOf("_in=")+4, urlStrng.length);
    console.log("scndExpire: " + scndExpire);

    google.script.run.withFailureHandler(onFailure)
    .withSuccessHandler(showFBsuccess)
    .processFB_LogIn(window.finalTkn, scndExpire)
  }
  else {
    //If it's not a Facebook log in, go to next two choices
    //If the URL string has &L in it, then item listing info is being passed because someone clicked 'Buy'
    window.whatToLoad = urlStrng.indexOf("&L");
    console.log("Second option of onload ran");
    if (window.whatToLoad > 0) {
      google.script.run.withFailureHandler(onFailure)
        .withSuccessHandler(injectBuyForm)
        .include('MutualCmit');
     } else {
     google.script.run.withFailureHandler(onFailure)
       .withSuccessHandler(injectSignInForm)
       .include('SignIn');
     };
  };
};
_

Facebookログインはフロントエンドでトリガーされますが、検証は_.gs_コードで行われることに注意してください。誰かが偽のFacebookトークンを挿入する可能性がありますが、サーバー側のコードで検査に合格することはありません。

これは、Facebookログインを処理するための_.gs_コードです。

FacebookトークンGSコードの検証

_//I put this cache line at the very top of the `.gs` file. The other code
// can be put somewhere lower.

var cache = CacheService.getPrivateCache();

function processFB_LogIn(argFB_Tkn, expTime) {
    cache.put('fbTkn', argFB_Tkn, 4000);
    cache.put('fbExpr', expTime, 4000);

    var meFBtkn = cache.get('fbTkn');

    Logger.log("FaceBook Token: " + meFBtkn);

     //This section is for verifying (debug) the user actually signed in through Facebook
    //The first FB token is passed in from the URL right after the user signs in, and when this apps Script loads.
    //IMPORTANT!!!    IMPORTANT!!!   You MUST escape the | character with code %7C

    var AppAccssTkn = 'YourAppID%7YourAppToken'; //This never changes unless app secret changes
    var optnGetTkn = {"method" : "get", "muteHttpExceptions" : true};
      //This 'Debugs' the token returned in the URL after the user signed in with Facebook.  You "should" verify that the token is real.
      var rsltDebug = UrlFetchApp.fetch("https://graph.facebook.com/debug_token?input_token="  + meFBtkn  + "&access_token=" + AppAccssTkn, optnGetTkn);
      var debugTxt = rsltDebug.getContentText();
      Logger.log("debugTxt: " + debugTxt);

      var jsonObj = JSON.parse(debugTxt);
      Logger.log("jsonObj: " + jsonObj);
      //This is the FB user ID
      var useIdTxt = jsonObj.data.user_id;
      cache.put('pubIDcache', useIdTxt, 4000);

      var tknValid = jsonObj.data.is_valid;

      Logger.log("reslt of the debug: " + useIdTxt);
      Logger.log("tknValid: " + tknValid);

      var getFbUseName = UrlFetchApp.fetch("https://graph.facebook.com/" + useIdTxt + "/?fields=first_name&access_token=" + AppAccssTkn, optnGetTkn);

      var objUseName = JSON.parse(getFbUseName);
      var arryFirstName = objUseName.first_name;
      Logger.log("user name: " + arryFirstName);

      cache.put('fbFrstName', arryFirstName, 4000);

   if (tknValid === false) {
     return 'notValid';
   }
   else if (arryFirstName != null) {
     //This is how it's determined if someone is logged in or not.
     cache.put('imin', '9847594ujglfugfjogj', 4000);
     return arryFirstName;
  };
};
_

アプリシークレットを変更しない限り変更されない_one time_アプリトークンが必要です。これは、1回実行するコードで生成する必要があります。

このコードでアプリアクセストークンを取得します。

_//A Facebook App Token never changes unless you go to the Facebook Developers Console, and you
//change the App Secret.  So, do NOT keep requesting a new App Token.  Just get it once, then
//hard code it into a backend secret function.
// The App Token can be used to modify your App, but you can just do that 'Manually'
function getOneTimeFB_AppToken() {
  Logger.log("getOneTimeFB_AppToken ran");
  //keep this info secret
  //Generate an App Access Token
  var ysshAppID = 'Your App ID';
  var ysshAppSecret = 'Your App Secret';
  var optnAppTkn = {"method" : "get"};
  var getAppTknURL = "https://graph.facebook.com/oauth/access_token?client_id=" + ysshAppID + "&client_secret=" + ysshAppSecret + "&grant_type=client_credentials"
  var getAppTkn = UrlFetchApp.fetch(getAppTknURL, optnAppTkn);
  Logger.log("Object returned from GET: " + getAppTkn)
  var myAppTkn = getAppTkn.getContentText();
  Logger.log("myAppTkn: " + myAppTkn);
};
_

FacebookのGSコードに投稿する

_function fncPostItemFB(arg1ToPost, arg2ToPost, arg3ToPost, argEtcToPost) {
  var fbCacheTkn = cache.get('fbTkn');
  Logger.log("fbCacheTkn: " + fbCacheTkn);

  if (fbCacheTkn === null) {
    return false;
  };
  Logger.log("fncPostItemFB ran: " + fbCacheTkn);
  return fncPostSecurly_(arg1ToPost, arg2ToPost, arg3ToPost, argEtcToPost);
};

function fncPostSecurly_(arg1ToPost, arg2ToPost, arg3ToPost, argEtcToPost) {
  Logger.log("fncPostSecurly ran");

  var sttsUpdate = argToPost + "your text to post here" + argToPost;
  var fromLogInTkn = cache.get('fbTkn');

  Logger.log("cache FB token: " + fromLogInTkn);

  //This is added security https://developers.facebook.com/docs/graph-api/securing-requests/
  var appsecret_sig = Utilities.computeHmacSha256Signature(fromLogInTkn, "YourAppSecret");
  var optnPostFB = {"method" : "post"};  //
  var PostToFB_URL = "https://graph.facebook.com/FacebookPageOrGroupID/feed?message=" + sttsUpdate + "&access_token=" 
    + fromLogInTkn; // + "&appsecret_proof=" + appsecret_sig;


    //Make a post to the Page
    var whatHappened = UrlFetchApp.fetch(PostToFB_URL, optnPostFB );
    //The return from facebook is an object.  Has to be converted to a string.
    var strFrmFbObj = whatHappened.getContentText();
    Logger.log("Return value of Post: " + strFrmFbObj);

    //When a post is successfully made to Facebook, a return object is passed back with an id value.

    var rtrnVerify = strFrmFbObj.indexOf('{\"id\":\"');
    Logger.log("rtrnVerify: " + rtrnVerify);

    if (rtrnVerify != -1) {
      return true;
    } else {
      return false;
    };
 };
_

FacebookフロントエンドJavascriptコードに投稿する

_<script>
window.WriteInput = function(whereToPost) {

    window.strngCtgry = document.getElementById('id_Category').value;
    window.strngMaker = document.getElementById('id_Maker').value;
    window.strngAskingPrice = document.getElementById('id_AskingPrice').value;
    window.strngType = document.getElementById('id_ShrtDesc').value;
    window.strngFunction = document.getElementById('id_Function').value;
    window.strngCosmetic = document.getElementById('id_Cosmetic').value;  
    window.strngDescription = document.getElementById('id_Description').value;
    window.strngUserID = document.getElementById('pubID_Holder').textContent;
    window.addrIP = document.getElementById('IP_Holder').textContent;

  if (whereToPost === 'fb') {
    console.log("fncPostToFB ran" + strngDescription);
    if (strngDescription === "" || strngAskingPrice === "") {alert("Missing Input"); return false;};
    google.script.run.withFailureHandler(postFbFail)
    .withSuccessHandler(savedToFB)
    .fncPostItemFB(strngCtgry, strngMaker, strngAskingPrice, strngType, strngDescription, strngFunction, strngCosmetic, addrIP);
  } else {
    google.script.run.withFailureHandler(onFailure)
      .withSuccessHandler(savedLst)
      .fncSaveItem(strngCtgry, strngMaker, strngAskingPrice, strngType, strngDescription, strngFunction, strngCosmetic, addrIP);
      };
    };

window.savedLst = function(rtrnInput) {
   if (rtrnInput === false) {
     alert("Failed to Save Data");
   }
   else if (rtrnInput === "NotLogged") {
     alert("You are not logged in!");
     mainStart('SignInBody', 'SignIn');
   }
   else if (rtrnInput === "noItemForPic") {
     alert("You Need to Save an Item to attach the Picture to");
   }
   else {
  alert("Your Data Was Saved!");
  //Show the listing that was just saved next to the upload Pics button
  document.getElementById('listToPic').innerHTML = document.getElementById('id_ShrtDesc').value +
    ", " + document.getElementById('id_Description').value +
    ", - Made By: " + document.getElementById('id_Maker').value +
    ", Price: $" + document.getElementById('id_AskingPrice').value;

    };
};

window.postFbFail = function() {
  alert("Failed to Post to Facebook!  Try Signing In Again.");
  unsignFB();
};

window.savedToFB = function(pstFbStat) {
  if (pstFbStat === false) {
    alert("You are Not Signed in to Facebook!");
    unsignFB();
    google.script.run.withFailureHandler(onFailure)
      .signOutFB();
  } else {
    alert("Your Item was Posted to Facebook!");
  };
};

</script>
_
17
Alan Wells

GoogleAppスクリプトのoAuth2ライブラリを介してFacebookAPIに接続できます。oAuth2ライブラリコードは次のとおりです1B7FSrk5Zi6L1rSxxTDgDEUsPzlukDsi4KGuTMorsTQHhGBzBkMun4iDF

およびfacebook 。gs ファイル

0
Bitz Trail