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 :
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.
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.