原产地应与注册的原产地相匹配 URL。 Origin URLs 可以在 Account Kit 开发者页面上注册

Question

我想在我的网站中集成 facebook AccounKit。我指的是 this。我在调试模式下收到“Origin 应该匹配注册的 origin URL。Origin URLs 可以在 Account Kit 开发者页面上注册。”错误。解决方案是什么？我在帐户设置页面以及 AccountKit 设置中添加了域 URLs。

附上图片供参考。

1.Error Image 2. App Settings 3. AccountKit Setting

1) 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 = "**************";
const app_secret = '*************************';
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('dist/login.html').toString();
}

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

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

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

app.post('/sendcode', function(request, response){
  // 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
      appsecret_proof: app_secret
    };
  
    // 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) {
      console.log(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
        console.log(respBody);
        if (respBody.phone) {
          view.method = "SMS"
          view.identity = respBody.phone.number;
        } else if (respBody.email) {
          view.method = "Email"
          view.identity = 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. :( ");
  }
});

app.listen(process.env.PORT);

2) Login.html

<!DOCTYPE html>
<html>
 <head>
  <title>Password Free: Facebook Account Kit</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
  <style>
   body {
    text-align: center;
    background: #EEE;
   }
   .mdl-button {
    width: 100%;
   }
  </style>
  <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
  
  <script src="https://sdk.accountkit.com/en_US/sdk.js"></script>
 </head>
 <body>

  <div class="mdl-grid">
    <div class="mdl-cell mdl-cell--4-col mdl-cell--4-offset">
     <div class="mdl-card mdl-shadow--2dp">
     <div class="mdl-card__supporting-text">
     <h1 class="mdl-typography--title">Passwordless Authentication</h1>
     <h2 class="mdl-typography--subhead">Facebook Account Kit</h2>
     <p><strong>Login via:</strong></p>
     <ul class="demo-list-icon mdl-list">
     <li class="mdl-list__item">
       <span class="mdl-list__item-primary-content">
         <button onclick="loginWithSMS();" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored mdl-typography--text-center">SMS</button>
       </span>
     </li>
     <li class="mdl-list__item">
       <button onclick="loginWithEmail();" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent mdl-typography--text-center"> Email</button>
     </li>
   </ul>
     </div>
     </div>
    </div>
  </div>
  <form id="my_form" name="my_form" action="/sendcode" method="POST" style="display: none;">
   <input type="text" id="code" name="code">
   <input type="text" id="csrf_nonce" name="csrf_nonce">
   <input type="submit" value="Submit">
  </form>

  <script>
    // initialize Account Kit with CSRF protection
    AccountKit_OnInteractive = function(){
     console.log("{{abcd}}")
      AccountKit.init(
        {
          appId:*****************, 
          state:"{{abcd}}", 
          version:"v1.0",
    debug:true
        }
      );
    };

    // 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
      }
    }

    function loginWithSMS(){
     AccountKit.login("PHONE",{}, loginCallback);
    }

    function loginWithEmail(){
     AccountKit.login("EMAIL", {}, loginCallback);
    }
  </script>
 </body>
</html>

3)登录-Success.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>AccountKitJS App</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
  <style>
   body {
    text-align: center;
    background: #EEE;
   }
   .mdl-button {
    width: 100%;
   }
  </style>
  <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
</head>

<body>
  <div class="mdl-grid">
   <div class="mdl-cell mdl-cell--4-col mdl-cell--4-offset">
    <div class="mdl-card mdl-shadow--2dp">
    <div class="mdl-card__supporting-text">
    <h1 class="mdl-typography--title">Passwordless Authentication</h1>
    <h2 class="mdl-typography--subhead">You're In!</h2>
    <p><strong>Details:</strong></p>
     <ul class="demo-list-icon mdl-list">
     <li class="mdl-list__item">
       <span class="mdl-list__item-primary-content">
         <i class="material-icons mdl-list__item-icon">fingerprint</i>
         <span id="token">{{method}}</span>
       </span>
     </li>
     <li class="mdl-list__item">
       <span class="mdl-list__item-primary-content">
         <i class="material-icons mdl-list__item-icon">face</i>
         <span id="nickname">{{identity}}</span>
       </span>
     </li>
     <li class="mdl-list__item">
       <span class="mdl-list__item-primary-content">
         <i class="material-icons mdl-list__item-icon">person</i>
         <span id="user_id">{{user_id}}</span>
       </span>
     </li>
     <li class="mdl-list__item">
       <span class="mdl-list__item-primary-content">
         <button onclick="goToLogin()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored mdl-typography--text-center">Try Another</button>
       </span>
     </li>
   </ul>
    </div>
    </div>
   </div>
 </div>

 <script>
      function goToLogin(){
     window.location.href = "/";
   }
 </script>

</body>
</html>

Answer 1

得到 Facebook 支持的帮助，我在 init 函数中遗漏了一些参数。

AccountKit_OnInteractive = function(){
        AccountKit.init(
          {
            appId:*****************, 
            state:"abcd", 
            version:"v1.0",
            debug:true,
            redirect:"//RedirectURl"
          }
        );
      };

注意：必须在帐户工具包设置中指定重定向 URL 和来源 URL。参考下面的图片。 1)Account Kit Settings

2)App Settings>>Advance

原产地应与注册的原产地相匹配 URL。 Origin URLs 可以在 Account Kit 开发者页面上注册

Origin should match a registered origin URL. Origin URLs can be registered on the Account Kit developer page

facebook-javascript-sdk

account-kit