OAuth 2.0 Single Sign On Authentication in Chrome Extension
In this Story we will learn how to Authenticate a user from third part login as in Office 365 or Google using chrome extension.
first we will create Angular application using it’s cli
update your component as below
and here is the html file for the same
now let’s build your angular app with “ng build”.
once you are done with that command, it will create “dist” folder now create new file called “manifest.json” inside dist folder as below
remember here, “identity” helps you to open new window for SSO purpose.
for more inside depth check this URL https://developer.chrome.com/apps/app_identity
now goto extension page in chrome and drag and drop dist folder in it.
now, you should see your extension in list, open it and click on login button.
TIP: After successful SSO authentication, you will be redirected to redectURI as mentioned in your component.
When any URL matches with your chrome extension ID which we extracted using chrome.runtime.id browser will give control to your extension which is pretty sweet.
now let’s see server part.
we will be using https://github.com/lelylan/simple-oauth2 for creating URL to Authenticate user using third parties such as Office 365 or Google.
your code looks like below
for more information about it refer https://docs.microsoft.com/en-us/office/dev/add-ins/develop/create-sso-office-add-ins-nodejs
sample code here https://github.com/saiumesh535/Angular-extension-SSO-login
Please let me know if you have any doubts.
Happy coding.
