Angular & Google Login OAuth2 / OpenID Connect - Using the angular-oauth2-oidc Library

hi and welcome to this video today again we will implement google login into our angular app this time using the oauth slash openid connect method at the google identity platform so basically when a user opens our page he will be redirected to google where he must log in then the user will be redirected to our page again and the angular app will get an access token our angular app has access to the google user data such as name and email address and can access google apis on behalf of the user using the access token we will use the open source library angular of2 oidc which implements the standard oauth2 and open id connect protocol first let's clarify what actually is or2 and open id connect oauth2 is an industry standard for authentication with tokens there is a client and an auth provider the client wants to access restricted apis roughly there are two use cases for oauth2 when a human user is a resource owner and is using a client which wants to access the user's data the client redirects the user to an auth provider the user enters his credentials and gives his content so the client can access the restricted data that way the client is working on behalf of the user the other use case is a server-to-server communication when a client is also the resource owner this way the client has his own credentials and is also getting an access token from the auth provider and can use it on an api with our angular app we are in the first case opemid connect is like an extension to oauth2 for example the client can get the discovery document from the auth provider the discovery document is a configuration info for the client so he knows what is the actual login url what is the endpoint to get the user info data and so on this reduces the manual configuration on the client side also we can get user info data from an user info point the angular library which we are going to use here will handle all steps of the openid connect protocol forwarding the user to google getting the user info refreshing the access token and so on before we can start implementing we must configure the client in the google cloud console make sure that you have created and selected a project here then here in the section menu select the section apis and services then you can go to credentials and in here you have a list of oauth2 client ids right now we don't have any but we can create one and click on create and create an oauth client id and right now google tells me that i have to configure a conson screen so before i can create a client id i must configure the content screen here i must decide which user types i want to use my app only internal users which are assigned to my organization within the project or external users that means all google users so i decide to allow all google users to use my app and google tells me that my application will be in a test phase where i will decide a list of test users until my application is ready for production and will be published to all users so here i must put some general information like my application name support email and so on at this step i must specify the scopes that is the permissions which my application requires from the user the scopes define which data my application is allowed to access this will be also displayed in the user conson screen so i want to have the user email address the user profile then i can go to the next step and here i can add a list of test users and save and that's it and then i can go back to credentials and i can now finally create an oauth client id like the application type this is a web application give it a proper name here i must define authorized origins since i'm developing locally that will be localhost and authorized redirect urls is also localhost then click on create and then i get a client id and a client secret we need only the client id so copy paste it and let's go my application also wants to access the emails of the google user for that i must enable the gmail api for that i can go to enable apis and services and then i can click on enable apis and services and then search here for gmail select gmail api and click on enable because i have enabled the gmail api i can go to the console screen configuration and end the scope for gmail read only to my conson screen click on edit app save on continue then add or remove scopes and here i can search for gmail and what i need is i need gmail api read only and click on update and now the gmail read-only scope is also added to this content screen save now we have created an oauth client id and we have enabled a gmail api now we can start to implement it so now i have prepared an empty angular project and i'm going to use this library to implement google login as you can see this library supports oauth2 and open id connect so i'm just going to execute this npm install command and then we need to import some modules at first the http client module and then the oauth module so having that oauth module we can finally configure and use the oauth service the or server should be configured right at the beginning of the application so probably the best practice in angular is to use the app initializer pattern of angular for the sake of this tutorial i'm going to create a regular angular service and do everything google related inside that service so here i am injecting the oauth service in the constructor here we're gonna configure the or service and initialize the login process the first thing we gonna configure is the issuer the issuer is the authorization provider in that case it should be google according to google this should be the issuer url so we gonna copy and paste it the library is going to contact that url to get the openid connect discovery document the next thing i'm gonna do is set this flag to false the strict discovery document validation the reason behind that is that the library does a validation on the discovery document it checks if all urls are starting with the issuer url for google this is unfortunately not the case therefore i turn the strict validation off the next thing i am going to configure is the redirect url this is the url where the user is being redirected after he is logged in at google in that case this is my application the next configuration parameter is the client id remember we created a client in the google cloud console we copied the client id and this is the place where we paste it we also must provide at least one scope these are the standard scopes this is nothing special we just get the user profile and the user email address later we will also add this code for gmail api to read the user's emails and now finally we can use that config object and configure the or service just call the configure method of the or service and provide this configuration object now we are going to call a sequence of other messes of the or service at first we must tell this service to load the discovery document the service will contact google and get the discovery documents after the discovery document has been loaded i call the method try login implicit flow on the oauth service this method does not initialize the login process it only tries to find a token in the url you notice i say login implicit flow there are actually two flows one is an implicit flow and the other is the code flow these flows differ in the way how the application acquires the access token in the implicit flow the access token is passed as a hash fragment in the url after that we can check if the user has logged in we can do that by using an if and use the or service and check whether he has a valid access token if he has not a valid access token we can initialize the login flow and we can do that by calling the init login flow method so in that case the user will be redirected to google the user will insert his credentials at google and google will redirect the user back to our application and our application will get an access token so in the other case when we have a valid access token we can load the user profile from google then we can put an else here and use the or service again and then we can call load user profile so when we get a user profile i simply print this in the console for debug purpose that's it for the configuration part i am injecting my google api service into a component so it is being instantiated and the service does the oauth service configuration and now we can try out our angular app so i will open my locally running angular app i open the debug console and also you see i am being redirected to google and here i must insert my my account insert the password and yeah the login was successful you see i am in my angular app i can add some text here to show that it is actually my angular app so what you can see is i am in my app i have the user info printed out in the console if you check out the network and refresh then you see that the application is trying to get the discovery document from google and you see how that discovery document looks like it has several informations like the issuer this is google some endpoints this is the user info endpoint where we get the user info some other things like supported flows and etc in the console we see our user profile printed out so i have extended my application for a bit to actually consume the user info data i have created an interface so i am able to pass the user info and access individual fields like i want to have the email address and the name and the picture also i need the sub the sub is like an identifier for the user and i need that identifier to access gmail from that user also the google service provides a subject where he puts the user info and this can be consumed by other components so instead of printing out the user info in the console i am putting the user info in the user profile subject i have also added some methods to check whether i am logged in and i have also added a method to sign out so to sign to log out at google on the component side i am subscribing to the user info and in the html template i am checking whether the user is logged in and then i am putting some text here to welcome the user displaying the name email and displaying the picture of the user and also providing a logout button so this is the result this is how the app looks like now i have all this information here the username the email there seems to be an issue with the picture if you go to the network you see the application is trying to load the picture the weird thing is if i open the picture url directly here then i am able to load the picture i have it here and then when i refresh my application i also have the picture i don't know the reason for that error but at least you know the picture url is provided in the user info there's also another issue if we try to log out it appears the logout has not worked if we refresh the page after the logout our user is still logged in it appears that the oo service does not know how to log out i don't see a logout url in the discovery document we can actually set the logout url manually we can go to the configuration of the service after we configure it with our configuration object we can use the oauth service and then we can manually set the logout url and after some research in the internet i found out that this is the logout url for google so after we have set the logout url by ourself the logout with the or service should work now i can try out the logout i just click on logout from google and you see i am redirected back to google and i am logged out so if i open my locally running application again then i am redirected back to google again and i need to sign in you also should know that the login at google is a single sign in so if i use my angular app to log in at google i am also automatically logged in in all other google applications i can demonstrate you that with youtube so i am here at youtube i refresh here and i'm not logged in if i click on sign in google asks me to sign in i go back to my local angular application then i'm logging in as google now i'm logged in via google in my angular app and go to youtube and refresh i'm still not logged in but if i click on sign in i am automatically logged in again you see and if i go back to my application i log out at google i go to youtube again then refresh and now i'm not logged in as youtube anymore the last thing i want to demonstrate is we can use the access token of the user and access any google api on behalf of that user and i want to do that with the gmail api i want to get a list of all emails of that user in gmail and display them in my angular application so this is the gmail api documentation we have a method to get a list of emails this is the url we need to have the user id the user id is this sub attribute in the user info with this list url we get a list of email ids we don't get the actual content of the emails for that we have the get method so we can get each email by id we need to have the email id and the user id again for each call of these urls we need to provide the access token as a bearer token in the authorization header so again i have extended my application for a bit i have the gmail base url this is the base url and i have also included a http client i've also created two methods one method is to get the list of email ids by a user id so i create this url and provide the user id then i have a method to get an email by user id and email id and as you can see for each of the http calls i am providing the authorization header the authorization header is structured as following it's the authorization header key then it has the bearer prefix and then we have the access token from google i think the best practice in angular is to do this via an http interceptor for the sake of this tutorial i just did it the simple way in the http interceptor approach you must make sure that you add the access token only in the google api urls in my base component i am providing a button to get the emails from that user and displaying the the snippets of the emails as a list remember that we can use the gmail api only if we have enabled it in the google cloud console for our project we must make sure that our application actually has the rights to access the gmail api for that we must provide our app a specific scope so it can read the emails from gmail there are several scopes for the gmail api the one that is good enough for us is this gmail read-only scope so we copy that whole scope code and then in our our service configuration in this oauth config object we have the section for scopes and we simply add the gmail read-only scope code what that means is our application tries to acquire the scope the user must give his contents so the application is able to use the scope on behalf of the user and now we can actually try that out so we open our local angular application again and then we log in again and then you see some constant text google tells me that this application is currently in the test stage so i click ok and the content screen tells me that this application tries or wants to access emails i as a user must give the permission to that application and then i say yes i trust that application and then i am in my angular app again and then i can try to read the emails and as you see i have gotten the email snippets from gmail so i can go to the real gmail application and you see these are the emails and i see them all in my in my angular app so that works i can even try to send an email to me so i'm sending an email to myself that's me and then i list emails and i see my test mail here okay so that concludes the video now you have a baseline to create a google login using open id connect with angular and i hope you liked the video and see you in the next one

Channel: Genka

Views: 33,716

Keywords: angular, google-login, oauth2, oidc, angular-oauth2-oidc, angular-auth-oidc-client

Id: QV5YtczsorY

Length: 23min 7sec (1387 seconds)

Published: Sat Apr 23 2022