Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Avatar from Google does not get displayed any more due to Picasa API no longer supported. #51

Open
slawek-kobiec opened this issue Jan 17, 2019 · 5 comments
Labels

Comments

@slawek-kobiec
Copy link

Javascript Console Errors:

Failed to load resource: the server responded with a status of 400 (Bad Request)
my-rides:1

Access to XMLHttpRequest at 'https://picasaweb.google.com/data/entry/api/user/****?alt=json' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

ngx-avatar.js:984 ngx-avatar: error while fetching google avatar

Google Note:
https://developers.google.com/picasa-web/

ngx-avatar version:
3.2.0

@odahcam
Copy link
Collaborator

odahcam commented Jan 17, 2019

The Picasa web API has been deprecated and all calls to it are being blocked, unless the calleer made a extension request, which is not our case.

I read the migration guide and I couldn't find how to migrate this specifc endpoint.

@odahcam odahcam added the bug label Jan 17, 2019
@HaithemMosbahi
Copy link
Owner

HaithemMosbahi commented Jan 17, 2019

@odahcam I think we need to use Google Photos API https://developers.google.com/photos/library/guides/overview
I'm not sure if it's possible to retrieve the user avatar with this API. I am going to check the documentation.

@odahcam
Copy link
Collaborator

odahcam commented Jan 17, 2019

Yeah, we need, that's what I found reading the migration guide I linked, but I found nothing about profile pics. I thought about Google+, but that thing is scheduled to die anyway, so I ran out of good options and I searched Stack Overflow which pointed me back to Google+. 😆

Also, the new Google Photos API has very few resources and that's what makes me think that it is just about https://photos.google.com. So I started to think that maybe we gonna need to SignIn the user -> https://developers.google.com/identity/sign-in/web/ (this page shows how to get a BasicProfile.imageUrl) because I'm out of ideas.

https://media1.tenor.com/images/73ff26dcbe661b915169c5ca0ac88722/tenor.gif?itemid=11859478

@odahcam
Copy link
Collaborator

odahcam commented Jan 30, 2019

This may be the solution for our problems:

image

(sorry, but my primary language is portuguese)

Following up with this API, I managed to get my own profile picture:

image

The request URL and its parameters:

GET https://people.googleapis.com/v1/people/{ANY_USERS_ID_OR_ME}?personFields=photos&key={YOUR_API_KEY}

@hakimio
Copy link

hakimio commented Feb 6, 2020

@HaithemMosbahi any plans to fix this using Google People API?

Yicong-Huang added a commit to Texera/texera that referenced this issue Mar 2, 2022
This PR creates an Angular component to show the avatar of a Texera user.

The library/component **ngx-avatar** does not support retrieving Google users' avatars by Google ID (HaithemMosbahi/ngx-avatar#51), so I implemented the logic to retrieve Google users' avatars myself in the component. 

In order to send requests to Google People API, a public key is needed to provide. 
Creating a Google API Public Key is easy, please follow this instruction.
https://developers.google.com/maps/documentation/maps-static/get-api-key

Then fill the public key in the **environment.default.ts**
`google: {
    clientID: "",
    publicKey: "",
  },`

Demo: 
If the user is a normal Texera user, the avatar will be the default avatar with a random background color.
![normal user](https://user-images.githubusercontent.com/52941906/142727712-691254e9-d4ae-48f9-b70b-8a46bde91e54.gif)


If the user is a Google user, the avatar will be its Google profile picture. 
![google user](https://user-images.githubusercontent.com/52941906/142727715-3fc6e839-e33c-4405-9813-389cb573a152.gif)

Co-authored-by: Yicong Huang <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants