Question

我已根据Facebook帐户套件文档[link]中的说明为Web创建了一个帐户套件示例。

我在提交电话号码并点击通过短信登录后收到错误。错误弹出：

（我们很抱歉，出了点问题）。

的login.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://sdk.accountkit.com/en_US/sdk.js"></script>
  </head>
  <body>
        Enter country code (e.g. +1):
    <input type="text" id="country_code" />
    Enter phone number without spaces (e.g. 444555666):
    <input type="text" id="phone_num"/>
    <button onclick="phone_btn_onclick();">Login via SMS</button>
    Enter email address
    <input type="text" id="email"/>
    <button onclick="email_btn_onclick();">Login via Email</button>
    <script>
  // initialize Account Kit with CSRF protection
  AccountKit_OnInteractive = function(){
    AccountKit.init(
      {
        appId:"288886378122244",
        state:"cswwsrf",
        version:"v1.0"
      }
    );
  };

  // login callback
  function loginCallback(response) {
    console.log(response);
    if (response.status === "PARTIALLY_AUTHENTICATED") {
      document.getElementById("code").value = response.code;
      document.getElementById("csrf_nonce").value = response.state;
      document.getElementById("my_form").submit();
    }
    else if (response.status === "NOT_AUTHENTICATED") {
      // handle authentication failure
    }
    else if (response.status === "BAD_PARAMS") {
      // handle bad parameters
    }
  }

  // phone form submission handler
  function phone_btn_onclick() {
    var country_code = document.getElementById("country_code").value;
    var ph_num = document.getElementById("phone_num").value;
    AccountKit.login('PHONE',
      {countryCode: country_code, phoneNumber: ph_num}, // will use default values if this is not specified
      loginCallback);
  }


  // email form submission handler
  function email_btn_onclick() {
    var email_address = document.getElementById("email").value;

    AccountKit.login('EMAIL', {emailAddress: email_address}, loginCallback);
  }

</script>
  </body>
</html>

Server.js

const fs = require('fs');
const Guid = require('guid');
const express = require('express');
const bodyParser = require("body-parser");
const Mustache  = require('mustache');
const Request  = require('request');
const Querystring  = require('querystring');
const app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

var csrf_guid = Guid.raw();
const api_version = 'v1.0';
const app_id = '288886378122244';
const app_secret = 'f67b17e61d3ac36350b5f325be77659f';
const me_endpoint_base_url = 'https://graph.accountkit.com/v1.0/me';
const token_exchange_base_url = 'https://graph.accountkit.com/v1.0/access_token';


function loadLogin() {
  return fs.readFileSync('login.php').toString();
}

app.get('/', function(request, response){
  var view = {
    appId: app_id,
    csrf: csrf_guid,
    version: account_kit_api_version,
  };

  var html = Mustache.to_html(loadLogin(), view);
  response.send(html);
});

function loadLoginSuccess() {
  return fs.readFileSync('login_success.html').toString();
}

app.post('/sendcode', function(request, response){
  console.log('code: ' + request.body.code);

  // CSRF check
  if (request.body.csrf_nonce === csrf_guid) {
    var app_access_token = ['AA', app_id, app_secret].join('|');
    var params = {
      grant_type: 'authorization_code',
      code: request.body.code,
      access_token: app_access_token
    };

    // exchange tokens
    var token_exchange_url = token_exchange_base_url + '?' + Querystring.stringify(params);
    Request.get({url: token_exchange_url, json: true}, function(err, resp, respBody) {
      var view = {
        user_access_token: respBody.access_token,
        expires_at: respBody.expires_at,
        user_id: respBody.id,
      };

      // get account details at /me endpoint
      var me_endpoint_url = me_endpoint_base_url + '?access_token=' + respBody.access_token;
      Request.get({url: me_endpoint_url, json:true }, function(err, resp, respBody) {
        // send login_success.html
        if (respBody.phone) {
          view.phone_num = respBody.phone.number;
        } else if (respBody.email) {
          view.email_addr = respBody.email.address;
        }
        var html = Mustache.to_html(loadLoginSuccess(), view);
        response.send(html);
      });
    });
  }
  else {
    // login failed
    response.writeHead(200, {'Content-Type': 'text/html'});
    response.end("Something went wrong here. :( ");
  }
});

app.listen(process.env.PORT);

Login_success.html

<!doctype html>
<head>
  <meta charset="utf-8">
  <title>AccountKitJS App</title>
</head>

<body>
  <div>Logged In to Account Kit:</div>
  <div>User Token {{user_access_token}}</div>
  <div>User Token Expires at {{expires_at}}</div>
  <div>User Id {{user_id}}</div>
  <div>User phone: {{phone_num}}</div>
  <div>User email: {{email_addr}}</div>
</body>

我已经启动了server.js（npm start）。从直接网址运行。

Answer 1

您是否确定要进行登录呼叫的来源在开发者门户网站上列为原始网址？

Answer 2

当您运行代码时，在应用程序的Facebook Developer页面上，您必须在“服务器URL”字段中添加“http://localhost:3000”，然后单击右下角的按钮保存更改。现在尝试再次登录该应用。这是screenshot of the steps to fix the error.

Answer 3

在AccountKit.init中，您可以设置debug: true：

AccountKit.init({appId: 1, state: state, version: 'v1.0', debug: true})

Facebook帐户套件（我们很抱歉，出了问题）问题

3 个答案: