#Angular #SingleSignOn #SSO
This video tutorial explains in detail how to create a single sign-on application in Angular. Using OAuth2 and Open ID Connect (OIDC).

Source code: https://github.com/shaheershukur/Angular-Single-Sign-On-OAuth2-OIDC-

This application uses the configuration from the following GitHub repository. Thanks to the creator!
https://github.com/manfredsteyer/angular-oauth2-oidc

This video explains how to implement single sign-on in Angular with and without a sign-up form/button.

#angular #singlesignon #oauth2 #oidc

http://shaheershukur.com/

Subtitle:
We will open a folder to save the project.
Now open a new terminal from
Terminal menu, New Terminal.
Create an Angular app “sso-app” by running the command
“ng new SSO app”
Press “y” and then Enter to enable routing in Angular.
Select “CSS” as the stylesheet format and press Enter.
Setting up the new Angular project will take some time.
Now the Angular project is set up.
You can see the project structure in the Explore section.
from VS Code.
Let's install the OAuth2 OIDC package for Angular.
To do this, change the current working directory to the project folder.
Type “cd sso-app” in the terminal.
Now type “npm install angular-oauth2-oidc –save” in the terminal.
Once the installation is complete, type “ng serve –open”.
to run the Angular application.
After successful compilation, the application opens in the browser.
This is the default Angular application template.
Let's change it.
In the “App” folder of the Angular application,
You will find the file “app.component.html”.
Open it.
Delete everything except the “Router Outlet” tag.
Because the angle routing takes place in the “router outlet”.
Now we add a div tag with two buttons in it.
One for registration and one for deregistration.
Set click events.
When we click on these buttons, we access the login and logout functions.
We need to define these functions in the app.component.ts file.
Now let’s create an Angular component “Home”.
which should be displayed upon successful login.
To do this, open a new terminal.
Change current working directory,
and type “ng generate component home”.
You can see the created component in the app folder.
Now let's add URL routing for this component.
Open the file “app-routing.module.ts”.
In the “Routes” variable, add the path “Home”.
Set the component as “HomeComponent”.
We will also add the default route path,
which takes care of all invalid URL paths.
We will redirect it to the “Home” component.
For the Angular application to work properly,
we need to include the components and import the required modules into the “app.module.ts” file.
Import the required elements into the file above.
Add the “HomeComponent” inside the “Declarations” array.
Add “OAuthModule.forRoot()” inside the “Imports” array.
Now we need to create a configuration file for OAuth2.
Create a file named 'sso.config.ts'.
in the app folder.
Now add a constructor to the “app.component.ts” file.
and insert the “OAuthService”.
Create a function 'configureSingleSignOn',
to configure the variable “oauthService”.
Within the function we first call “configure”.
As a parameter we should pass the configuration previously defined in the file “sso.config.ts”.
Next, we define a token validator.
The integrated validator “JwksValidationHandler” can be used for this.
Finally, call the method “loadDiscoveryDocumentAndTryLogin()”.
These methods must be called while the component is being created.
So call the function “configureSingleSignOn” within the constructor.
Call the method “initImplicitFlow()” within the “login()” function.
And call the method “logout()” within the function “logout()”.
Open the browser and click the “Login” button.
You can use the username 'max',
And the password is “secret”.
Now let’s click on the “Logout” button.
Now we display the Home component,
only when the user logs in.
To do this, we create a get accessor function “Token”.
we create a variable 'claims' to store claims from the token,
using the function “getIdentityClaims()”.
If the registration was successful, we will refund the claims,
otherwise null is returned.
Now call this Get-Accessor function in the “ngIf” of “Router-Outlet”.
Therefore, the “Home” component is only loaded if the login is successful.
Now let's change the Home component.
Open the file “home.component.html”.
We will add a message here about the successful login.
Also, we can set the visibility of the buttons based on the login status.
Just set ngIf for the login and logout buttons as follows.
Sometimes we need the application to
automatically to the login page without you having to click a button.
First we delete the login and logout buttons,
and the associated functions.
All we have to do is
Replace the function call “loadDiscoveryDocumentAndTryLogin()”.
with the function “loadDiscoveryDocumentAndLogin()”.
We are automatically redirected to the login page.
without clicking a button.

Please take the opportunity to connect with your friends and family and share this video with them if you find it useful.