Search code examples
facebook-loginaccount-kit

How can I render AccountKit UI


Here is my form which is on my login.php page:

    <form id="LoginForm">
    <input value="+1" id="country_code" />
    <input placeholder="phone number" id="phone_number"/>
    <button onclick="smsLogin();">Login via SMS</button>
    </form>

<script src="https://sdk.accountkit.com/en_US/sdk.js"></script>

<script>
  // initialize Account Kit with CSRF protection
  AccountKit_OnInteractive = function(){
    AccountKit.init(
      {
        appId:"{{FACEBOOK_APP_ID}}", 
        state:"{{csrf}}", 
        version:"{{ACCOUNT_KIT_API_VERSION}}",
        fbAppEventsEnabled:true,
        redirect:"{{REDIRECT_URL}}"
      }
    );
  };

  // login callback
  function loginCallback(response) {
    if (response.status === "PARTIALLY_AUTHENTICATED") {
      var code = response.code;
      var csrf = response.state;
      // Send code to server to exchange for access token
    }
    else if (response.status === "NOT_AUTHENTICATED") {
      // handle authentication failure
    }
    else if (response.status === "BAD_PARAMS") {
      // handle bad parameters
    }
  }

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


  // email form submission handler
  function emailLogin() {
    var emailAddress = document.getElementById("email").value;
    AccountKit.login(
      'EMAIL',
      {emailAddress: emailAddress},
      loginCallback
    );
  }
</script>

And here is the expected interface to send the code :

AccountKit UI

The problem I have is before AccountKIt UI get rendered the user has to click Login via SMS button... which I am not finding interesting, I want if the user goes on login.php page the AccountKit UI should be rendered automatically without showing my form.

I tried to do to remove the form and modified the function smsLogin() to be immediately called as follow :

 function {
        var countryCode = document.getElementById("country_code").value;
        var phoneNumber = document.getElementById("phone_number").value;
        AccountKit.login(
          'PHONE', 
          {countryCode: countryCode, phoneNumber: phoneNumber}, // will use default values if not specified
          loginCallback
        );
}();

But I received the error saying :

TypeError: AccountKit.login is not a function

I need some tips to see how I can acheive what I want to do.


Solution

  • I am redirecting the user directly on the page of accountkit when he visit my login page.The link of accountkit is : https://www.accountkit.com/v1.0/basic/dialog/sms_login/ and has parameter I am passing the phonenumber, country_code,redirect url(which is my page on which the user will be sent). So everything is working as I wanted.