Hello I'm trying to implement "login with twitter", but it wont work on live website.
I followed this tutorial but it wont work on my implementation.
When I run it via MAMP the OAuth wont pop, but when I preview from PHPSTORM it pop and the login will work.
I added a "console.log" to log the final OAuth response and nothing happens while running the website via MAMP (live server), only via PHPstorm.
Can someone tell me what I'm doing wrong please?
$(document).ready(function(){
//function stops doubleclicks
$('#twitter-button-loggin').on('click', function() {
console.log("clicked")
const userLoginTwitter = {}
// Initialize with your OAuth.io app public key
OAuth.initialize('HwAr2OtSxRgEEnO2-JnYjsuA3tc');
// Use popup for OAuth
OAuth.popup('twitter').then(twitter => {
// console.log('twitter:', twitter);
userLoginTwitter.twitter = twitter
// Prompts 'welcome' message with User's email on successful login
// #me() is a convenient method to retrieve user data without requiring you
// to know which OAuth provider url to call
twitter.me().then(data => {
userLoginTwitter.me = data
// console.log('data:', data);
//alert('Twitter says your email is:' + data.email + ".\nView browser 'Console Log' for more details");
});
// Retrieves user data from OAuth provider by using #get() and
// OAuth provider url
twitter.get('/1.1/account/verify_credentials.json?include_email=true').then(data => {
// console.log('self data:', data);
userLoginTwitter.SelfData = data
})
console.log(userLoginTwitter)
});
})
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Vais Gostar </title>
<meta charset="utf-8">
<link rel="stylesheet" href="style/base.css">
<script type="text/javascript" src="https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js"></script>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"> </script>
<script type="text/javascript" src="js/anime.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.12.0/bootstrap-social.min.css">
</head>
<body >
<a id="twitter-button-loggin" class="btn btn-block btn-social btn-twitter">
<i class="fa fa-twitter"></i> Sign in with Twitter
</a>
<a id="twitter-button-loggin" class="btn btn-danger">
<i class="fa fa-twitter"></i> Log Out
</a>
</body>
</html>