facebook-javascript-sdkaccount-kit

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

I want to integrate facebook AccounKit in my website. I refer this. I am getting "Origin should match a registered origin URL. Origin URLs can be registered on the Account Kit developer page." error in debug mode. What is the solution for this? I have added domain URLs in Account setting page as well as AccountKit Setting also.

Attached Images for reference.

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)Login-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>

Solution

  • Got help from Facebook support, I missed some parameters in init function.

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

    Note: Redirect URL and Origin URL must Be Specified in Account Kit Settings. Refer images Below. 1)Account Kit Settings

    2)App Settings>>Advance