Angular & Google Login - Using Google Platform Library (GAPI) for Google Sign-In and GMail

hi everybody in this video we will build a google login for an angular web page and also we will use the user's access token to access the google mail api and list some of the user's emails let me demonstrate that with this preview here i have the login button i click on the button and then i can use my google login let me type the password and then i'm logged in with google and now i can access the user's google mail data let's have a list of mails and you see a list of mail ids you can use each id to get the actual mail content this this and also you can sign out if you want to and then login again and get the mails list again we will use the google platform library which is a vanilla javascript library and which you can include with a script tag into your html page this library is officially maintained by google and it is the key to a lot of google apis also there are typescript definitions available if you go to the npm package browser and search for add types gapi you see a variety of definitions which you can use for example we will use the oauth2 definition for the google sign in and also we will use the gmail type definition to access the user's google mail data with these typescript definitions we will be able to use autocomplete in our development environment before we can start using google sign in we must create a client id in the google cloud make sure you are logged in in the google cloud console also make sure you have created and selected the proper project here and then you can use the navigation menu here and then you have apis and services so go there and then you can go over here to credentials submenu and here you have a list of all registered credentials you have this section the oauth2 client ids and we must create a new client id you can do that by clicking here create credentials and then oauth client id first you must set the application type and it will be a web application then you can give it a name for example angular login test and then you may specify an authorized origin just add a uri and it will be http localhost port 4200 the web page will be running locally and also an authorized redirect uri and then you can click on create and then the client id and secret is displayed to you for the browser application we only need the client id so just copy it now you have a client id and can start using it for google sign in also there is this section here o auth conson screen here you can customize the content screen for example you can set your application's name which will be displayed to the user also you can verify your app by google change the publishing state either test or production and the user type external means that all external google users can use your application and you also see the oauth rate limits like user cap and token grant rate alright it is time to start coding i have created a new annular project the first thing i'm going to do is include the google platform javascript library for that i'm going here into the index.html and here in the header i include this script tag so i am including the google platform javascript library the next thing i want to do is install the typescript definition package this one so going to the terminal and then type npm install so having this package installed you have access to the ga api namespaces like here and this one in order to avoid compile errors we must add these namespaces to the typescript compiler options for that just open the typescript config app.json file and then you have here compiler options and types and here we add the namespaces to the types array at first i add gapi and then i add gapi auth2 okay now let's take a short look at the google sign in documentation it tells us that we must first load the auth2 library like here then we must initialize the auth2 object with this function and provide the client id and after that we can use the sign in and sign out methods they are described here the send in function and the sign out function in angular i would create a service for the google send in functionality so let me just do that i say ng generate service google sign in and then i have this google sign in service class and in the constructor of the service i would load the auth 2 library so i would say here gapi and then i would use the load function and i might say which library i want to load it is the auth2 library and here i can provide a handler function this handler function will be called after the auth2 library has been loaded and only after the library has been loaded i can access this here gapi auth2 and then i can call the init function and here in the init function i must provide the parameters and the parameters contain the client id so this is the place where i paste the created client id from the google cloud console just paste it here also the init function provides me a reference to this object here and for that i am creating a member and assigning this object to the member so having this google auth object i can call the sign in and sign out methods on this object for that i create two public methods sign in and i say this author sign in i can also provide parameters to the sign in function for example i can say which scopes i want to have that i will do later the sign in method returns a promise and then i can resolve the promise i can say then i have an instance of user the logged in user or i can say catch in case an error occurred the user is of type google user it contains basic information such as name and email of the user and also it contains the access token which we're gonna use later and then i would like to add a send out method so i create another public method sign out and i say this of 2 sign out and it also returns a promise i can say then do something i would like to let components subscribe to the send in state so the components know if a user has signed in or signed out for that i create a replay subject let me define another member private subject and it's a new replay subject buffer size of one and with the type g api author google user so the subject will have a user if the user has signed in or it will have a null object if the user has signed out for that i can say after the user has signed in i just use the next function on the subject and i provide the logged in user and if the login has been rejected or it has failed i can say next null and on the sign out i can just say next user is null and now i need to define a method to let the component subscribe to the state let me create another public method observable and it returns this subject as observable the return type of the function is observable with the type g api out to google user and now i can start using this service in a component so let me go to this component here and then i define the constructor and i inject the google sign-in service also i implement their own init methods and here i would want to subscribe to the user change this sign in service observable and then subscribe and i can say i have a user and then i would like to start the user as a member of this component so i say this user is user and also i would want to trigger the change detection of this component so if a user has been changed i would want to re-render the component and i say ref of type change detector ref with this change detector i can say check for changes this rev detect changes and also let me create sign in and sign out methods for this component and now we can build the sign in and send out buttons in the html template let's go to the html file and here we can just add a classic button let's say google sign in and on the click event i call the send in function and this button should be rendered only if i have no user ng if user is null and also another button to sign out on the click event i call sign out and this button should be rendered only if i have a logged in user and also let me div where it shows the signed in username ng if user not equals null then i can say if you are signed in with google and then the username user get basic profile get name so let's try to sign in at google click on the button and you have the google login screen and i type my user login then my password and as you can see the login was successful and if you open the developer tool of the browser while you sign in you see that the login at google is successful and in the response you see stuff like access token id token and other informations alright now we have a google user with the google access token we want to use it to access google apis in particular gmail in order to enable gmail api we must go back to the google cloud console and then in the navigation menu go to apis and services and here in the library section you have the search bar and you can search for gmail so now you have found the gmail api just click on it and then you must click on enable and this will enable the gmail api for your project after it has been enabled you must create an api key so go back here again apis and services and then here under credentials you can create credentials and you want to have an api key so now it has generated an api key for you and you this is the one which you must copy and later insert in the angular application we have already included the g api the google platform javascript library we must get the typescript tiles for the gmail client it is this package here so let me install the package via npm npm install and after that we should add the client gmail namespace to the typescript compiler options so open the typescript config app.json again and here under compiler options types array we must add gapi client gmail with that we will avoid compiler errors now we can start integrating the gmail api again in angular i would want to have a service for that so i just create one ng generate service gmail and now i have this gmail service and in the gmail service i must initialize the g api client library so once again i say g api and then load and i say which library i want to load and this time it is the client library and after that i do some initialization and here i can say after the client library has been loaded g api client init and here in the init function i can provide some parameters and here in the parameters i must add the following things at first i can say the api key and here i paste the api key which i have just created at the google cloud console also i must provide the client id here and it's the same which i use for the google sign in also i can set discovery docs here i can place the discovery url for the gmail api and i can just paste this one here and at last i must specify which scopes i want to claim here i place a space separated list of scopes the claim scope specifies which permissions my application wants to have in order to find out which scope i need i go to this page here the gmail for developers guide here under guides down here i have the authorization scopes section so these are scopes which i can claim since i want to read the user emails i want to list them and read the content i will use this scope here the read-only scope so copy it and then here in the scopes i just paste that and it must be scope not scopes now i will rely on the gmail api reference here i have the rest resource users message and i have the methods i can list emails of a user and the response will have an array of messages and it will contain only ids and thread ids of emails and after that i can use a get request so using the user id the email id and the access token of the user i will be able to retrieve the content of a email so let me implement the gmail service at first i create a public method to get a list of emails and the method will return a promise with the type g api client gmail list messages response and for that i return a new promise i provide a resolver and here i use the gapi namespace again client gmail and users and messages so this is the messages resource and here i can say list and in the list function i must provide some parameters at first the user id so i need to provide the user id here in order to get the user id i will just provide the user as a parameter for this function g api auth to google user and then i can say user get id and also i must provide the access token here and then i can say user get auth response and then access token and also i would like to have a maximum number of results of five emails and after the call has been successful i can say then response and i resolve the created promise with response result and also i must build a function to retrieve the content of an email given an email id let's say i have another public method get message and it will also receive a google user and also an id of type string and it will return a promise of string and here i can say return new promise resolve and again i call the gmail client users messages and then the get function and here again i must provide the user id the access token and also i must provide the email id and after that response i can resolve the promise response result snippet resolve so now let me integrate this gmail service into my component so i go to my component and here in the constructor i inject the service and then i can create another method list and as we call the gmail service list and i provide this user and then i want to access the promise result so here i want to store the list result in the member let's say i have a messages member and it is a g api client gmail message array and also a message of type string so here i say this messages results messages and also i need a method to get a message buy a given message id and here i say again gmail service get message given a user and an email id this must be string and then i have the response and i can say this message is equals result each time a user signs in or signs out i must reset those members on the subscription of the user state i say this messages is null this message is now and after each of those events i would like to trigger the change detection so i just say detect changes all right and now it's time to extend the html template so let's go here and then here i can create another button it will be displayed only if the user is logged in and here on the click event i can just say list to get a list of the latest five emails and the label of the button is list males and below that button i would like to create a table and it will contain a raw and this raw will be generated for each message list entry ng for that message of messages and here i can see the column here this one it contains the message id and also it contains another column where it has the button to get the content of the email and the on click events i call them function get message with the message id and the label should be get mail and right below the table i would like to have a div and it displays the message content so at first i would click on the button to get a list of messages then this table will be will contain a list of message entries and then for each message id i can push the button get mail with the message id and then the result should be shown below the table also let's not forget to add the scope to the sign in method let's go back to the google sign-in service and then here in the sign in function i have left out the scope but now i would like to add it and here i add this code which i want to claim so with that i specify that i want to read the user's email content so let's save that and now it's time to try out the gmail clients let's first sign in i select the account and then i get a warning screen from google it says that it's a non-verified application by google and it wants to access my personal data that is reading my emails because it is a test application and i trust my own test application i say okay i want to proceed with the login and it says the application wants to access my emails and here i must provide my content and i say ok and it says i am giving the application the permission to read my emails i say it's okay and now i'm logged in and now i can try out the gmail client let's say i want to list my mails and as you see i get a list of mail ids and i can say i want to get the content of this email that's this also of that or of this all right the google sign in and gmail api calls are working now we did not cover token expiration let's just take a quick look at that in the user object with the get out response you have the information for when the token expires or how long the token lasts the expires in is a is the overall token duration you can check if you have surpassed the expires at timestamp or you can measure the time and check if you have surpassed the overall token duration if you want to reload the user token you just call the following function on the user object reload out response and then you have a promise which contains the refreshed authorization response let me just demonstrate that by always refreshing the token of the user when i'm calling the list function so here i can call user reload out response and then after it has been refreshed i can say refreshed access token and also i did the same for the get message service function so i print out the expires add timestamp of the access token every time i call the gmail service and now i try that in the browser and open the browser developer tool to see the output of the console and you see every time i call the gmail service i get a fresh new token with a new expiry date so that's it with the angular google sign in guide hope you liked the video and see you next time goodbye

Channel: Genka

Views: 14,846

Keywords:

Id: G5HPBdZgcx8

Length: 28min 31sec (1711 seconds)

Published: Sat Mar 20 2021