I want to login with google plus using javascript,below is my code
index.html
Here i placed all scripts,html code
<html>
<title>Login With google plus</title>
<meta name="google-signin-client_id"
content="aaaaaaaaaaa.apps.googleusercontent.com ">
<script src="jquery.min.js"></script>
<script src="https://apis.google.com/js/client:platform.js?
onload=renderButton" async defer></script>
<script>
function onSuccess(googleUser) {
var profile = googleUser.getBasicProfile();
gapi.client.load('plus', 'v1', function () {
var request = gapi.client.plus.people.get({
'userId': 'me'
});
request.execute(function (resp) {
var profileHTML = '<div class="profile"><div class="head">Welcome
'+resp.name.givenName+'! <a href="javascript:void(0);"
onclick="signOut();">Sign out</a></div>';
profileHTML += '<img src="'+resp.image.url+'"/><div
class="proDetails"><p>'+resp.displayName+'</p>
<p>'+resp.emails[0].value+'</p><p>'+resp.gender+'</p>
<p>'+resp.id+'</p><p>View Google+ Profile
</p></div></div>';
$('.userContent').html(profileHTML);
$('#gSignIn').slideUp('slow');
});
});
}
function onFailure(error) {
alert(error);
}
function renderButton() {
gapi.signin2.render('gSignIn', {
'scope': 'profile email',
'width': 240,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSuccess,
'onfailure': onFailure
});
}
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
$('.userContent').html('');
$('#gSignIn').slideDown('slow');
});
}
</script>
<div id="gSignIn"></div>
<div class="userContent"></div>
</html>
but when i want to login this error will show.
That’s an error.
Error: invalid_client
The OAuth client was not found.
I can't get this error, please help me to solve this error.
You have to register your application with google console to be able to use the OAuth, You will have to specify the return url after OAuth is granted by the client
Related
So I have this javascript code:
$(document).ready(function () {
$("#login_with_linkedin").on("click", requestAuthLinkedIn);
googleInit();
LinkedInInit();
});
function LinkedInInit() {
$.getScript("https://platform.linkedin.com/in.js", function () {
IN.init({
api_key: MY_API_KEY,
authorize: true,
onLoad: function () {
IN.Event.on(IN, "auth", function () {
onLinkedInAuth();
});
},
scope: "r_basicprofile r_emailaddress openid email profile"
});
});
}
function onLinkedInAuth() {
IN.API.Profile("me").result(function (data) {
var profile = data.values[0];
console.log(profile);
});
}
function requestAuthLinkedIn() {
IN.User.authorize();
}
This would be the frontend part:
<div id="loginLinkedIn" runat="server" visible="false">
<div id="login_with_linkedin">
<img src="<%= ComunControls.Global.URL_Resources %>i/login/LinkedIn_SignIn.png" alt="" />
</div>
</div>
The problem is that when I click on the linkedin "button"(image), I keep gettint this error in the javascript console
Uncaught TypeError: Cannot read properties of
undefined (reading 'then')
at Object.authorize (in.js?_=1676306000491:25:68028)
at HTMLDivElement.requestAuthLinkedIn (:38:13)
at HTMLDivElement.dispatch (com_5jq.min.js?v=382:2:68763)
at a.handle (com_5jq.min.js?v=382:2:66808)
If I'm not mistaken, the linkedin JS is fully loaded when I try to trigger the event, so I don't really know what I'm doing wrong
I want to display on my web application a custom dialog. So I'm building this code:
<script type="text/javascript">
var mappaRisposte = #Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.mappaRisposte));
ConfirmDialog('Are you sure');
function ConfirmDialog(message) {
$('<div></div>').appendTo('body')
.html('<div><h6>' + message + '?</h6></div>')
.dialog({
modal: true,
title: 'Delete message',
zIndex: 10000,
autoOpen: true,
width: 'auto',
resizable: false,
buttons: {
Yes: function () {
// $(obj).removeAttr('onclick');
// $(obj).parents('.Parent').remove();
$('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');
$(this).dialog("close");
},
No: function () {
$('body').append('<h1>Confirm Dialog Result: <i>No</i></h1>');
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
}
</script>
These are the external library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!---->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
So if I try to execute this page, I can see this:
But if I try to call ConfirmDialog function from another js function in this mode:
function endFirstPartSummary() {
ConfirmDialog('Are you sure');
var parolaChiave = document.getElementById("tParolaChiave").value;
//alert(parolaChiave);
$.ajax({
url: '/Questionario/endFirstPartSummary',
data: { "json": JSON.stringify(parolaChiave)},
type: "GET",
success: function (data) {
//TODO: Add whatever if you want to pass a notification back
location.href='#Url.Action("PageRingraziamento", "PageRingraziamento")'
},
error: function (error) {
//TODO: Add some code here for error handling or notifications
//alert("Il nome di fantasia indicato è già stato utilizzato, inventane un altro");
document.getElementById("tParolaChiave").value = "";
}
});
}
I have this error from console:
TypeError: $(...).appendTo(...).html(...).dialog is not a function
As far as i understand, you try using the very same dialog object twice, but on the second attempt you are getting an error.
Try saving the instance global (not inside an function), like:
const myDialog = $("#dialog").dialog('open');
and reuse it like:
myDialog.dialog("close"); // or maybe: myDialog.close();
At the moment you are using "$(this).dialog("close");" in the context of an function. So "this" is the function, not the dialog.
I am fetching google contacts using https://www.googleapis.com/auth/contacts.readonly in javascript working fine on website desktop view but when I am changing view to mobile for website this is not working for me please help me to find out this problem with mobile view
sample code
<script src="https://apis.google.com/js/client.js"></script>
function auth() { $('.loader').css('display','block')
var client_id = "<?php echo config::get('app.client_id') ?>";
var scope = 'https://www.googleapis.com/auth/contacts.readonly';
gapi.load('auth', function(){
gapi.auth.authorize(
{ client_id: client_id, scope: scope, immediate: false }, authResult);
})
return false;
}
function authResult(_Result){ if (_Result && !_Result.error)
{ loadPeopleApi(); }}
function loadPeopleApi(){
gapi.client.load('https://people.googleapis.com/$discovery/rest',
'v2', showContacts);
}
function showContacts()
{
var request = gapi.client.people.people.connections.list({
'resourceName': 'people/me',
'pageSize': 1999,
'requestMask.includeField':'person.email_addresses,person.names,person.photos',
'sortOrder':'FIRST_NAME_ASCENDING',
});
request.execute(function(resp) {
})
}
I am trying to integrate facebook login for my angular JS website. I am getting a pop up and even I am getting some data like my id and username. The issue what I am facing here is when I am trying to redirect the page or sending this data to a handleUser object in my controller, it is not allowing me to call any of the function from that fbLOgin() function block.
It is not allowing me to call any function from dat block... please help me with this.
FBLogin(){
console.log("came into fb ");
FB.init({
appId : 'my_id',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.9'
// js.src = "//connect.facebook.net/en_US/sdk.js";
});
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
// console.log('Good to see you, ' + response.name + '.');
console.log(response.name);
let user = {
"userAccountId":response.name,
"userRole": "CUSTOMER",
"lastOtpRequest": 0,
"fullName": "myname",
"mobileNo": "1234567890",
"emailId": "mymail#gmail.com",
"like": false,
"token": 0,
"loyal": false,
"guest": false,
"enabled": true,
"newCustomer": true
}
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});
}
Actually I am having the same problem with the gmail account also. So what I found here is, we cant call the current object from that promise. So I Created another function from that promise and I m calling that function. The code is as follows..
googleLogin() {
var google = window.gapi;
var currentObject = this;
function authenticateUser(data) {
var user = {};
user.emailId = data.getEmail();
user.fullName = data.getName();
user.socialId = data.getId();
user.username = data.getGivenName();
currentObject.handleUser(user);
}
google.load('auth2', function () {
google.auth2.init({
client_id: ''
}).then(function (auth2) {
if (auth2.isSignedIn.get()) {
var googleUser = auth2.currentUser.get();
authenticateUser(googleUser.getBasicProfile());
} else {
auth2.signIn();
auth2.isSignedIn.listen(onSignIn);
function onSignIn(googleUser) {
console.log(googleUser);
if (googleUser) {
var googleUser = auth2.currentUser.get();
authenticateUser(googleUser.getBasicProfile());
}
}
}
});
});
}
I am trying to redirect the page back when the user provides a wrong authentication credentials but after a jAlert pops up and exactly after the close btn of the jAlert is pressed but I am unable to do so. Please help me out with this task. Thanks in advance!!!
Here is the code:
<script>
$(document).ready(function () {
$.jAlert({
'title': 'Authentication Error',
'content': 'Invalid Username of Password"!',
'theme': 'blue',
'btns': { 'text': 'close' }
});
});
</script>
The jAlert plugin provides an onClose function that fires when the modal is dismissed. Define the behaviour you want within the function, for example:
<script>
$(document).ready(function() {
$.jAlert({
'title': 'Authentication Error',
'content': 'Invalid Username or Password!',
'theme': 'blue',
'btns': { 'text': 'close' },
'onClose': function(alertElem) {
// alert("Redirecting...");
window.location = "index.html";
}
});
});
</script>
See the jAlert documentation at http://flwebsites.biz/jAlert/.