How can I render AccountKit UI - facebook-login

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.

Related

redirect to stripe checkout

i have my website in ruby on rails 5 and i'm updating my stripe payment gateway with this link but clicking my button doesn't redirect me to the stripe checkout, this is what i have in the controller:
def index
Stripe.api_key = Rails.configuration.stripe[:secret_key]
session = Stripe::Checkout::Session.create(
payment_method_types: ['card'],
line_items: [{
price: 'price_1HKywnBS16ZK5Vr3GYCRvTir',
quantity: 1,
}],
mode: 'subscription',
success_url: 'https://www.my_site.network/success?session_id={CHECKOUT_SESSION_ID}',
cancel_url: 'https://www.my_site.network/cancel',
)
end
I think the error may be when replacing the session id in the javascript code of my index view:
<button id="checkout-button">Pay</button>
<script src="https://js.stripe.com/v3/"></script>
<script type="text/javascript">
var stripe = Stripe('<%= Rails.configuration.stripe[:publishable_key] %>');
var checkoutButton = document.getElementById('checkout-button');
checkoutButton.addEventListener('click', function() {
stripe.redirectToCheckout({
// Make the id field from the Checkout Session creation API response
// available to this file, so you can provide it as argument here
// instead of the {{CHECKOUT_SESSION_ID}} placeholder.
sessionId: '<%=session.id%>'
}).then(function (result) {
// If `redirectToCheckout` fails due to a browser or network
// error, display the localized error message to your customer
// using `result.error.message`.
});
});
</script>
you don't have to use '<%=session.id%>'.
The value that you must to use there is the entire value that you store in session when you do: Stripe::Checkout::Session.create in your controller.

can't access to the POST variable that sent from register form in django

I have a register form in html that has a button that type of submit and the name of registerSubmit like this:
<input class="RegisterButton right green" name="registerSubmit" type="submit" value="Continue">
I want to check the form with Ajax and then if every thing is valid then redirect the user to her/his profile.But when I want to redirect the user to his/her profile I can't send the submit input that its name is registerSubmit. here is a section of JQuery code that related to this event:
$("#mainRegisterForm").submit(function(event){
var thisRegisterForm = $(this);
$(".ajaxLogoRegister").show();
event.preventDefault();
var firstName = $("input[name='firstname']").val();
var lastName = $("input[name='lastname']").val();
var emailAddress = $("input[name='email']").val();
var password = $("input[name='password']").val();
var rePass = $("input[name='rePass']").val();
var sex = "NULL";
if ($("input[name='gender']").is(":checked")){
sex = $("input[name='gender']:checked").val();
}
var data ={
firstname:firstName,
lastname:lastName,
emailaddress:emailAddress,
password:password,
repass:rePass,
sex:sex
};
$.ajax({
url: 'ajax/registercheck',
data: data,
dataType: 'json',
success:function(result){
if(result.fn==0){
//do some stuff
}
//another if conditions that checks the validity of every field of refister form
...
...
$(".ajaxLogoRegister").hide();
if(result.isOK=='1'){ //isOK = 1 when every filed is valid and user must redirect to his/her profile
thisRegisterForm.unbind('submit').submit();
}
}
});
});
My main problem is that when I click the registerSubmit button in views.py the request.POST.get('registerSubmit') returns None object instead of Continue value.
when I don't use Ajax and send the form normally registerSubmit value is Continue and every thing is OK.where I am wrong?
By default, $.ajax(); will issue a GET request, not a POST. You need to specify that in your ajax options. Second, I don't see where you're accessing the value of the element named "registerSubmit". I see an "rePass", but you're not including the value you're expecting to find in the request.
You need to either specifically set the "type" ajax option type to "POST" or retrieve the method property from the form element:
$ajax({
url: 'ajax/registercheck',
data: data,
dataType: 'json',
type: 'POST',
....
});

Access token doesn't contain any scopes

I want to get a list of my friends with their name, current location and profile picture. I executed the query and the access token (with the required scope parameters) in the GRAPH API explorer tool and it works fine --> https://developers.facebook.com/tools/explorer?method=GET&path=me%2Ffriends%3Ffields%3Dname%2Clocation%2Cpicture
But everytime I execute the application, I get an access token without the required scope (it has none). How can I send my scopes to the access token?
Scope I want to give to the access token: Scopes: friends_location user_location user_relationships
I work in a localhost environment.
<html>
<head></head>
<body>
<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js"></script>
<script js.src = "//connect.facebook.net/en_US/all/debug.js"></script>
<script>
var accessToken
var uid
window.fbAsyncInit = function() {
FB.init({
appId : '493774134048550', // App ID
channelUrl : '//localhost/Facebook', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
// for any authentication related change, such as login, logout or session refresh. This means that
// whenever someone who was previously logged out tries to log in again, the correct case below
// will be handled.
FB.Event.subscribe('auth.authResponseChange', function(response) {
// Here we specify what we do with the response anytime this event occurs.
if (response.status === 'connected') {
// The response object is returned with a status field that lets the app know the current
// login status of the person. In this case, we're handling the situation where they
// have logged in to the app.
uid = response.authResponse.userID;
accessToken = response.authResponse.accessToken;
console.log(uid);
console.log(accessToken);
testAPI(function(response) {
// handle the response
uid = response.authResponse.userID;
accessToken = response.authResponse.accessToken;
console.log(uid);
console.log(accessToken);
}, {scope: 'friends_location, user_location, user_relationships'});
} else if (response.status === 'not_authorized') {
// In this case, the person is logged into Facebook, but not into the app, so we call
// FB.login() to prompt them to do so.
// In real-life usage, you wouldn't want to immediately prompt someone to login
// like this, for two reasons:
// (1) JavaScript created popup windows are blocked by most browsers unless they
// result from direct interaction from people using the app (such as a mouse click)
// (2) it is a bad experience to be continually prompted to login upon page load.
//FB.login();
FB.login(function(response) {
// handle the response
uid = response.authResponse.userID;
accessToken = response.authResponse.accessToken;
console.log(uid);
console.log(accessToken);
}, {scope: 'friends_location, user_location, user_relationships'});
} else {
// In this case, the person is not logged into Facebook, so we call the login()
// function to prompt them to do so. Note that at this stage there is no indication
// of whether they are logged into the app. If they aren't then they'll see the Login
// dialog right after they log in to Facebook.
// The same caveats as above apply to the FB.login() call here.
// FB.login();
FB.login(function(response) {
// handle the response
uid = response.authResponse.userID;
accessToken = response.authResponse.accessToken;ยต
console.log(uid);
console.log(accessToken);
}, {scope: 'friends_location, user_location, user_relationships'});
}
}, {scope: 'friends_location, user_location, user_relationships'});
};
// Load the SDK asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
// Here we run a very simple test of the Graph API after login is successful.
// This testAPI() function is only called in those cases.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
//FB.api('/me', function(response) {
// console.log('Good to see you, ' + response.name + '.');
// console.log(response);
//});
///me/friends?fields=name,location,picture&accesstoken=CAACEdEose0cBAFhNXAYgMjfAPWNxGZAdNdEJ6s2GAyIQp4zicpV0ZBZCeVINbiLvIxaFl33N0I1gZAZArREsHmOGiqQX2HPaNZCiU4W4Nq3VA12TrreKfeOtFSMvmZC8c1qYqu85NZAzzWDXWH5foXIWfPFk1ZBScNbAZD
FB.api('/'+uid+'/friends?fields=name,location,picture&accesstoken='+accessToken, function(response) {
//FB.api('/'+uid+'/friends?fields=name,location,picture&accesstoken=CAACEdEose0cBAJayThSg77Ydil76EM0W4zuJ9l29yKoIxlu6g37ZAX1CWQhpTStBL48xoX5g0Bbe8Va4wr6qqT2ft5tZBoNDZCWFYF7TtwmBnTDOSGWruOp0pSS9Ws1phfl5wiFbHeZAyUbdZBDdx3GLBHeysn6EZD', function(response) {
var teller1 = 0;
console.log('Good to see you, ' + response.name + '.');
console.log(response.data);
for (var i=0;i<response.data.length;i++)
{
if(response.data[i].name && response.data[i].location && response.data[i].picture){
console.log(response.data[i].name);
console.log(response.data[i].location.name);
console.log(response.data[i].picture.data.url);
teller1++;
}
//<img border="0" src="console.log(response.data[0].picture.data.url)">
}
console.log(teller1); //aantal gebruikers met naam, locatie en picture
console.log(response.data.length); //aantal gebruikers in totaal
});
}
//Logout
function fbLogout() {
FB.init();
FB.logout(function (response) {
//Do what ever you want here when logged out like reloading the page
window.location.reload();
});
}
</script>
<!--
Below we include the Login Button social plugin. This button uses the JavaScript SDK to
present a graphical Login button that triggers the FB.login() function when clicked.
Learn more about options for the login button plugin:
/docs/reference/plugins/login/ -->
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
<span id="fbLogout" onclick="fbLogout()"><a class="fb_button fb_button_medium"><span class="fb_button_text">Logout</span></a></span>
</body>
</html>
Replace the code under response.status === 'connected' with this. Remove all other parts in the original code where the scope was added. (you only have to add it here)
if (response.status === 'connected') {
// The response object is returned with a status field that lets the app know the current
// login status of the person. In this case, we're handling the situation where they
// have logged in to the app.
if(accessToken)
{
// alert("Connected WITH accesToken");
testAPI();
}
else{
// alert("Connected WITHOUT accesToken");
FB.login(function(response) {
// handle the response
uid = response.authResponse.userID;
accessToken = response.authResponse.accessToken;
console.log(uid);
console.log(accessToken);
}, {scope: 'friends_location, user_location, user_relationships'});
}

facebook javascript permission dialog for email

i have a question.... i am actually developing a facebook application with FB javascript SDK. In my application I need email permission for further processing. i am using
FB.Connect.showPermissionDialog("email");
but some how the dialog doesn't appears... here is my code
<script>
appid = '*************';
name = 'Palmchip Test App';
href = 'https://apps.facebook.com/*********/';
FB.init({
appId:appid, cookie:true,
status:true, xfbml:true
});
FB.getLoginStatus(function(response) {
if (response.session) {
alert("You are logged in...");
FB.Connect.showPermissionDialog("email", function(perms) {
if (!perms) {
alert("no access");
} else {
alert("accessed...");
}
});
}
else {
top.location.href='https://graph.facebook.com/oauth/authorize?client_id='+appid+'&redirect_uri='+href+'&display=page';
}
});
</script>
the alert which says you are logged in... works fine but then nothing happens .....
You need to upgrade to OAuth 2.0 ouath: true
You should use the new OAuth Dialog
You should be aware when upgrading that FB.getLoginStatus() will return different objects: response.authResponse
Try this code block
FB.init({appId: <?= APP_ID ?>, status: true, cookie: true, xfbml: true, oauth:true});
function getin(){
FB.login(function(response) {
if (response.authResponse) {
var regurl = "/login";
location.href=regurl;
} else {
var regurl = "/logout";
window.location.href=regurl;
}
}, {scope:'email'});
}
So when you call the getin() function , if the current user already gave you the email address it'll do nothing for him just will redirect him to /login url , but if the user is a new user then he/she will see a pop-up box asking for the email address once he/she allows that you can pull the email address using graph or fql. BTW response inside FB.login has the user id , access_toke and some more useful data so save that for further use.

call FB.login() after FB.init() automatically

i`m developing an app for Facebook.
My Code:
function init() {
window.fbAsyncInit = function() {
var appID = 'xxxxxxxxxxxxxxxxxxxxxxxxxx';
FB.init({ appId: appID,
status: true,
cookie: true,
xfbml: true});
login();
};
(function() {
var e = document.createElement("script");
e.async = true;
e.src = "https://connect.facebook.net/en_US/all.js?xfbml=1";
document.getElementById("fb-root").appendChild(e);
}());
};
function login() {
FB.login(function(response) {
if (response.session) {
if (response.perms) {
// user is logged in and granted some permissions.
// perms is a comma separated list of granted permissions
} else {
// user is logged in, but did not grant any permissions
}
} else {
// user is not logged in
}
}, {perms:'read_stream,publish_stream,offline_access'});
};
I want to call the "init" function and after "init" should call the "login" function (open up the Facebook Login Window) automatically.
But i always get "b is null"
FB.provide('',{ui:function(f,b){if(!f....onent(FB.UIServer._resultToken));}}); Error in Firebug.
Can anybody help me?
Does anybody have the same problem?
Thanks
You needn't have the facebook init stuff in a function, it can go straight on the page, then it will load at the same time, rather than waiting for a button click to load. Then you just need the login logic on the logiin button
<html>
<head>
</head>
<body>
<script type="text/javascript">
window.fbAsyncInit = function() {
var appID = 'xxxxxxxxxxxxxxxxxxxxxxxxxx';
FB.init({
appId: appID,
status: true,
cookie: true,
xfbml: true
});
// This bit adds the login functionality to the login
// button when api load is complete
document.getElementById("login").onclick = function() {
FB.login(function(response) {
if (response.session) {
if (response.perms) {
// user is logged in and granted some permissions.
// perms is a comma separated list of granted permissions
} else {
// user is logged in, but did not grant any permissions
}
} else {
// user is not logged in
}
}, {perms:'read_stream,publish_stream,offline_access'});
}
};
(function() {
var e = document.createElement("script");
e.async = true;
e.src = "https://connect.facebook.net/en_US/all.js?xfbml=1";
document.getElementById("fb-root").appendChild(e);
}());
</script>
<a id="login" href="somewhere.html">My login button</a>
</body>
</html>
You can put the login stuff in a method and automatically call the it after the FB.init, but most browsers will block the pop up window. You are better off waiting for the user to click a login button to make sure they see it properly, and it is generally good practise to only make things happen when the user explicitly requests them to. I think the facebook 'good practice' guide also mentions this somewhere.