Syncing contacts with google contacts using contacts javascript api - javascript

Hello I have a web portal and people would share there email id's. I would to add the sync with google contacts. I am using javascript api for that, but facing lot of problems. I tried the example code provided by google http://code.google.com/apis/contacts/docs/1.0/developers_guide_js.html#Interactive_Samples
First I need to authenticate users to access there gmail id, i used this code
var contactsService;
function setupContactsService() {
contactsService = new google.gdata.contacts.ContactsService('exampleCo-exampleApp-1.0');
}
function logMeIn() {
var scope = 'https://www.google.com/m8/feeds';
var token = google.accounts.user.login(scope);
}
function initFunc() {
setupContactsService();
logMeIn();
getMyContacts();
}
But the problem is I am able to see the google authentication page when I click on the grant access button,I am redirected to same authentication page though I included create contact function and called on click. I am not able to figure how to proceed further and send contact details dynamically to gmail.
Kindly help me out

The solution for this problem what I followed was I created a iFrame and adding all the javascript and HTML inside that iframe and place that iframe in the mail page.

Related

How can I use access tokens to insert new Google Calendars and events via JavaScript?

I'm trying to create a Chrome extension that creates Google Calendars and inserts events into those calendars, but I'm running into a little difficulty using the Google Calendar API since there don't seem to be any concrete examples in JavaScript. Here's what I have so far:
chrome.identity.getAuthToken({ interactive: true }, function(token) {
if (chrome.runtime.lastError) {
alert(chrome.runtime.lastError.message);
return;
}
var x = new XMLHttpRequest();
x.open('GET', 'https://www.googleapis.com/calendar/v3/users/me/calendarList?access_token=' + token);
x.onload = function() {
alert(x.response);
};
x.send();
});
This gets me as far as successfully getting an access token and using that to retrieve the calendar list of an authorized user--I can verify that that snippet works. So, I should be able to modify this from a GET request to a POST or something similar to create a Calendar or insert events into a Calendar, given the Calendar's ID--my question is how can I go about this?
My current structure is a JavaScript content script that injects a button into a web page, processes the page data, and sends that data to a background page (from where the above snippet was taken), which is supposed to get access to a user's calendars and then create a Calendar and insert events into that Calendar using the page data. So far, the content script works perfectly and I can get valid access tokens from the background page, so it's just this last stage of insertion that I'm stuck on.

Google spreadsheet get parameters from URL

I have an app, that links one service with Google Sheets by OAuth 1.0.
I click "login" in addon menu, send signature and callback domain (current sheet). Then in service I click on button, get request token and it returns me to the specified domain with parameters.
function onOpen(e)
{
Logger.log( SpreadsheetApp.getActiveSpreadsheet().getUrl() );
Logger.log( e.source.getUrl() );
}
But .getUrl() doesn't contain them.
According to >this< I can't use doGet(e) in Sheets and, because of OAuth, I can't use Web App, because I still need to pass these parameters to Sheets.
I tried to get it on client-side by window.top.location.href, but had cross-domain errors.
Question: Can I get it? Or is it impossible?
So, a partial answer to my question:
We need 2 different scripts. The first as Sheets web addon, the second as Web App. Next, we need to implement all the steps presented in the screenshot:
1) After steps 0, 1, 2 Service Provider should redirect us to Helper script (Web App) with the following code:
function doGet(e)
{
var token = e.parameter.oauth_token,
code = e.parameter.oauth_verifier,
response;
if(token && code && Root.setVerificationCode(token, code))
response = "Success";
else
response = 'Error';
return HtmlService.createHtmlOutput(response);
}
Here we retrieving GET parameters and send them to Sheets web addon (Root).
Click Resources -> Libraries and add your addon as library. Root is just an identifier.
2) Sheets addon code:
function setVerificationCode(token, code)
{
var oauth = new OAuth();
if(oauth.getAccessToken(code))
{
// change menu here
return true;
}
else
return false;
}
These are full steps you need to implement OAuth 1.0.
P.S. Now I have problems with changing menu, but it'll be my next question.

Implement a window to log in LinkedIn in MVC 5

I'm working in an mvc5 application where users have their own profiles, there should be a button which would open a pop-up window so that an individual user logs into LinkedIn as to sync his/her LinkedIn profile picture with our site's.
I don't think it can be implemented with modals because there's page navigation involved, so I thought about what I stated previously: a pop-up, is there a way to do this via javascript? Like, opening a pop-up and expecting a response to determine if the user logged in. If there is a better way, any info would be greately appreciated, my aim is to be able to sync the profile picture without having the user to get redirected to linked in from their profile view, I want them to change it from there and not leave the view. Is it possible to do so?
EDIT: To clarify, getting the image URL is not a problem, what I need to do is get the url from the profile window, which comes from the popup window.
You should have a look at their API it is well documented. You'll need additional permissions to retrieve the full profile. LinkedIn Profile API
I ended up using the Javascript SDK:
$('#btnSyncLinkedInPicture').on('click',
function () {
var myID = 3;
IN.User.authorize(function () {
IN.API.Raw("/people/~:(picture-url)").result(function (data) {
$.ajax({
type: 'GET',
url: '/MyController/MyAction?pictureUrl= ' + data.pictureUrl + '&id=' + myID,
success: function (result) {
$('#imgProfilePicture').attr('src', result);
}
});
}).error(function () {
});
});
});
First, we authorize the user which will open a pop-up window so that we authenticate, the SDK will abstract us from the OAuth process. After authenticating, we may want to write a callback function, in which we can already perform REST calls via the SDK methods (you can do it elsewhere as long as you have successfully authenticated).

Building email tracking for open rate and geo analytics with JavaScript?

As a project, I want to learn how to create an email tracker that generates a unique pixel, tracks open rates in JavaScript (MeteorJS).
Does anyone have any resources I can look into to accomplish this? I know ToutApp does this in PHP and found similar tutorials in PHP but nothing in JS.
Cheers!
Use Iron:Router's server-side routing to track when a user clicks on something like /emails/ew45gf23. The ID in the URL could be the _id from the collection that stores all the emails sent, e.g. EmailsSent.findOne({_id: _id})
Router.route('/emails/:_id', function () {
var emailClicked = EmailsSent.findOne({_id: _id});
... do whatever you need to with the tracking ...
this.response.end('email click received\n');
}, {where: 'server'});

javascript getting google-plus user avatar

stackoverflow'ers!
So my job now is to work around social networks. I've made login for facebook, google and twitter. Now i need to retrieve user avatars. Site is very dynamic and pretty much everything are working through javascript and ajax. I have got facebook user avatar successfully. When user has avatar, it returns avatar, when user has no avatar, it returns facebook's default avatar. Now im working on google-plus and twitter. I found nice url, where i can get avatar from google-plus:
https://plus.google.com/s2/photos/profile/{oauth_id}?sz=100
I am storing oauth_id in session, it is accessible.
When user has set avatar - everything works fine. Problem is, when users avatar is'nt set - that link returns 404 error.
How can i determine in jquery or just javascript, if that link returns 404 error or not?
And for some future work - i think twitter has the same problem.
Or may be you could provide some better options to achieve this.
Another way to do this is to request the plus.me scope, authenticate the user, then retrieve their profile which will have the image value set if they have an avatar. I created a live demo here: http://wheresgus.com/profile.html which shows profile retrieval using the Google+ public data API.
To set things up for your project, go to the Google APIs console - https://code.google.com/apis/console/ and create a project with the Google+ API enabled. You will need the Client ID for a web application from the API Access section of the Google APIs console.
The relevant code is as follows:
<html>
<head>
<script src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
function onSignin(e){
accessToken = e.access_token;
var xhr = new XMLHttpRequest();
xhr.open('GET', "https://www.googleapis.com/plus/v1/people/me/");
xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
xhr.send();
xhr.onreadystatechange = function(){
if (this.readyState == 4){
var myProfile = JSON.parse(xhr.responseText);
alert(myProfile.image.url);
}
}
}
</script>
</head>
<body>
<g:plus action="connect" clientid="YOUR CLIENT ID" scope="https://www.googleapis.com/auth/plus.me" callback="onSignin">
</g:plus>
</body>
</html>
Create an HTML file with this code and replace YOUR CLIENT ID with the credentials you created in the Google APIs console. When you click the sign in button, the client will give you a URL for the user.
If you are using the jquery.ajax() or jquery.get() method (or something similar), you should be able to check the jqXHR object that is returned as part of the callback. It has a "status" field which contains the status code for the HTTP call.
See the section The jqXHR Object under http://api.jquery.com/jQuery.ajax/
I tried to fiddle around with the above suggestions but found the following approach suitable. I used jquery get to fetch the image url. Following is the code snippet.
function getImageURL(_gplusid) {
$.get("https://www.googleapis.com/plus/v1/people/"+_gplusid+"?fields=image"+"&key="+googlepluskey,
function (data) {
console.log(data);
});
}
P.S : _gplusid is the google plus id of the user and googlepluskey is your google authentication key. The output is a json object containing the image url. You need to enable google plus api access via google api console.

Categories