Google Photos API Integration: From Setup to Code Implementation

in this tutorial we will learn how to create a Google developer account and enable Google photos API and oauth consent screen to start go to developer.google.com and click on the start button provide all the necessary information to create an account once the account is created go to console.cloud.google.com accept the terms and conditions select create a new project and click on the create button since it's a personal project there is no need to select a location wait for the project creation to complete then click on it for our project we have to do three things here API and services as we want to access Google photo from the user we have to enable Google photos API we have to set up the oauth consent screen as we are going to use a web application to get access to the Google photos account we need an oauth consent screen to get that access this is how the sample auth consent screen looks we have to create credentials we have to create our secret keys to verify our identity with Google to enable the API go to API and services and select the Google photos Library API enable it now we need to enable the oauth consent screen to request permission from the user to access their Google photos since we are only testing at this point and don't have any organization we can select external and then click create next we need to provide some basic app information such as the app name and email ID if you have any links you want to provide you can add them here as well you'll also need to provide developer contact information which can be any valid email address once you've entered this information click save and continue now we need to select the Scopes we want to request from the user Scopes are essentially the types of information we are requesting from the user in this case we want to access the user's Google photos so we will select the scope related to Google photos different Scopes are available for different use cases such as Google drive read-only or write access search for photos and select read-only access in the next step we need to Define which users we want to test this application for as we are still testing we can add up to 100 email IDs for now we will use the same email ID that we are testing once we publish our application to production we will have more access now it's time to check all the information before creating credentials return to the dashboard and click on credentials these credentials are like secret keys that allow us to access the user's Google photos since we are using a web application we need an oauth client ID in the authorized redirect URL field we need to define the URL which we want to shortlist when we go to the oauth consent screen and Google asks for the email ID to select Google will redirect back to one of these authorized domains we need to whitelist this domain to tell Google that it is a valid URL or endpoint that can be trusted for testing purposes we can use localhost 4040 summon point and click create finally we need to download and save the client ID and client secret somewhere safe this information should not be shared with anyone else with everything set up we can now request permission to access the user's Google photos let's see what the process looks like to pull Google photos from our telegram bot firstly we need to use the client data and secret to obtain a login URL this URL will prompt us to select the Google account from which we want to pull out Google photos once we choose the account we will receive a code which is just a secret string next we use this code to obtain the refresh token with this refresh token we can then obtain an access token using this access token we can access the Google photos of the user although the process may seem lengthy we can simplify it by writing some code we can begin by creating a file called Google auth Js and a folder called config where we can paste the credentials we downloaded earlier in a file called config.json in the Google auth by JS file we need to import the axios library and the config we just copied after importing these we can create a function called get new login URL and Export it this method will enable us to obtain the login URL in order to get the URL we must make a call to the google.com API and include specific parameters these parameters include the client ID that was obtained from the configuration the redirect URL that was provided when creating the oauth consent screen the access type which should be set to offline the response type set to code the scope that was selected when creating the auth consent screen the state set to the new access token and consent prompt here we are returning the axios instance to test this method we can add a condition in our index file if the request URL is slash test we will return a string once we run the server we can hit localhost 4040 and slash test in the browser to check if it is working yep it is working but we see there is an error in our console and the server got stopped let's find out why let's try to debug the code for that click on this debug icon click on run and debug and click on this debug console now we should see the debugging toolkit let's keep a break point here and let's hit it again now if we see the request.url coming as a test which is expected Behavior but again this Handler got invoked now we are getting a request for the FV icon so when our browser requests something it automatically asks for a fav icon let's handle this case go to our index file here along with the Handler request let's send which type of method this is a post call this is a get call now our Handler will just simply check if the method is get then we'll check this condition any other get request will simply return this string unknown request Let's test this logic by restarting our server now let's see what data we are getting from the get login URL method let's debug this code awesome we can see the API is successful and we are getting URL inside data configurl let's return that URL you take a look at the URL you'll notice some spaces between the query parameters it it's best to remove them once you do you'll see the correct URL open it in a new tab it will prompt you to select your Google account choose the account from which we want to pull Google photos since we selected testing when creating the application we'll receive a warning however we can proceed for now fantastic you'll notice that it returns to the G token path which is the redirect URL we previously provided in the query parameters you'll see that it returned the code we were anticipating now let's see how we can obtain the refresh token using this code let's create a new function called get refresh token inside Google earth.js and Export it to obtain the refresh token we need to make a post API call to Google to do so we must send the following parameters client ID client secret code the code we obtained earlier from the URL Grant type set to authorization code and redirect URL now let's create the axios configuration set the method to post and the URL to Google apis.com token add the headers and parameters we created earlier next let's hit the API and return that instance when the user selects their account in the browser it redirects to the endpoint G token let's listen to this path and extract the code from it for now let's return an empty value and debug the code to see what data we're receiving when we refresh the browser we don't see any breakpoints let's set a breakpoint at the beginning of the function and try again if we refresh the browser again we can see the breakpoint the method should be get but the URL has slash g token and also some query parameters attached let's check for an index of in the URL and test it we can now see that the query parameters contain the code let's import our get refresh token method and pass the code to it since our get refresh token method returns an axios instance we must wait for it to finish the code may have expired so let's get a fresh code let's obtain the refresh token from the response since our application is in the testing phase this refresh token will expire in five days therefore we need to obtain a new refresh token every five days in future tutorials we'll explore how we can use our telegram bot to automate this process for now let's save this refresh token so far we've been able to obtain the login URL using the client ID using that login URL we obtained a code using that code we obtained our refresh token now let's explore how we can obtain an access token using this refresh token let's create a method to obtain an access token in our Google auth file we'll receive the refresh token as a parameter in this method we must call the Post API with the following options client ID client secret refresh token the refresh token we obtained earlier and Grant type set to refresh token the axios configuration should have the method set to post and the URL set to slash token it's similar to the get refresh token method with the only difference being the grant type let's call axios and Export this method to test this method let's create a new endpoint for testing this is the refresh token we obtained earlier let's call the get access token method by passing this refresh token let's debug to see what we're receiving our access code looks the same as the refresh token after cracking my head for some time I got the issue to explain let's set a breakpoint inside slash g token and rerun the entire process if we look at the refresh token data we have the access token and refresh token we can obtain the access token here but it's only valid for 3599 seconds that's a short-lived token that's why we'll take the refresh token here and save it refresh tokens are valid for a longer time in our testing phase they're valid for five days if we submit our application in the Google developer console then Google will verify the app and make it production then our refresh tokens will be valid for a very long period of time let's take a refresh token here and save it so that we can obtain a fresh access token whenever we need it using this refresh token let's change our code accordingly if we hit this end point again and again we'll obtain a new access token that we can use now let's explore how we can obtain the user Google photos using the access token before that let's go to my Google photos account so in this account I have 17 photos uploaded each photo is called a media item in Google photos so let's see which API we can use to get these items for that let's search for Google photos and API media items and go to this link here if you see under the media item these are all types of apis that we can use right now we are interested in the list API which gives us all the images in one list let's close this sidebar this API is a get request and has query parameters such as page size and Page token page size refers to the number of media items we want to fetch in one request and Page token I will explain in a bit unfortunately this API can only return a maximum of 100 media items at a time if for example we have 200 photos in our Google photos we will need to call this API twice with a page size of 100. the response body returns an array of media item objects and a next page token the media item objects contain unique IDs for each photo as well as other relevant information the base URL is the only information we require as it is publicly accessible and provides access to the image in Google photos we can try out this method to retrieve the media items from our Google photos account and see the unique IDs and base urls gives the image in that Google photos okay now if I Collapse this you see we just got the responses media items here I didn't use any page size as I said earlier in my Google photos account there are 17 photos now let's give the page sizes 10 so I'm asking Google photos to give 10 photos in one shot now if I execute this it gives the 10 items and also it gives something called the next page token so basically it is telling these are the first 10 items and if you want the next 10 items use this token so we have to call this API recursively if we want all the photos so this next page token is something we will pass in that page token in that request body now let's write some code to get these photos go to our editor and create a file called Google photos so to make the API calls let's import the axios library and let's create a method get all media and Export that this method requires three arguments the access token the page token and the page size the access token is the token obtained earlier the page token will be empty for the initial load and subsequently added recursively and the page size is the number of items to be retrieved in one request let us gather all the images we receive from the API and place them in the final set to execute this API call we need specific parameters firstly the page size which would be two in this case and secondly the page token during the initial load the page token is empty and we add it recursively lastly we require the axios config our method is get and we have the URL from before in the headers we must send a new header named authorization the value for this header should be Bearer space access token and the content type should be application to a Json along with the parameters as this is a promise we will reject it if an error occurs once the promise resolves we will get all the media items from the response and we will then push the base URL of each image then we will check if there is any next page data if there is we will receive a token then we will have to call this method again if there is no page token we can resolve the final set of data we have collected if there is a next page token we will call the get all media function Again by passing the access token we will then append whatever data we receive from that method to the existing final data and resolve all the final sets to dry run this code let us take an example page size of 10. as there are 17 photos in our Google photos by default the page token will be empty the first 10 media items will be pushed into the final set and there will be a next page token so this method will be called again with the next page token this process will repeat until we receive no next page token and we will resolve all the data we have collected we will then append the remaining data to the existing final set therefore we will have a total set of 17 base urls to test this let us create a test route import the file and call the get all media by passing the access token then we will return the data we receive we can see all the URLs and each item is an image to summarize using the client data and secret we can get a login URL using the login URL we can select the Google account from which we want to pull our Google photos from that account we will receive a code using that code we will get our refresh token using our refresh token we will get our access token finally using this access token we will call the Google photos API to get all the photos from the user account so right now everything is at pieces we are getting login URLs at one endpoint and we are getting images at one endpoint in the upcoming tutorials we will streamline this process using our telegram bot but before that let us see how to set up a postgrad database so that we can save some of the information we need thank you for tuning in I will see you in the next tutorial foreign [Music]

Channel: Lets build together

Views: 4,027

Keywords: google api, developer console google, google photos, photos api, google photos api

Id: EgbBpRiy5Ao

Length: 23min 29sec (1409 seconds)

Published: Sun Sep 17 2023