Posted by Today we are going to extend our website authentication to use Google, Twitter and Facebook. In our last post, we successfully added the required infrastructure and code to our ASP.NET core website to use our Microsoft Account
First, we will setup our authentication with Twitter’s services. We browse to https://developer.twitter.com, and after logging in, click the “Create an app” button.
After acknowledging Twitter’s rules, we create a Twitter developer account.
Twitter asks a lot of questions about how we will use the developer account. We are using it to help educate people – you, the reader.
With our developer account created and approved, we create a Twitter app, naming it “SamLearnsAzureTwitter”, and add a description, website URL, and callback URLs. As with the Microsoft callback URLS, we add URL’s for our local development server and the three DNS’s we have, appending “signin-twitter” to the end of each URL.
- https://localhost:44389/signin-twitter
- https://dev.samlearnsazure.com/signin-twitter
- https://qa.samlearnsazure.com/signin-twitter
- https://samlearnsazure.com/signin-twitter
We can now retrieve the API key and secret, adding them to our key vault.
Back in our website startup.cs file, we add the lines we need to add Twitter to our application and read in the secrets we added from our key vault.
Now when we log into our website, we see a new Twitter button
Clicking it, allows us to log in with our Twitter login and password.
As a final step for Twitter, our app asks us to register our Twitter account with an email address, which associates the login with our website. We have successfully added Twitter authentication to our website.
Moving on with Google, we browse to https://developers.google.com/identity and create a new project
We name this new project “SamLearnsAzureGoogle”.
We then retrieve the client ID and secret, which we copy and put into our Key Vault.
In the OAuth section, we add in our redirect URLs for our 3 sites and internal local host, appending the “signin-google” suffix to each URL.
In our startup.cs, we add our Google authentication code, reading in our client id and secret for Google from our Key Vault.
With that, we are done, and can see the new Google button and can log in.
Finally, in Facebook, we log into https://developers.facebook.com/apps, and create our final app, “SamLearnsAzureFB”. We put in the redirect URL’s,appending the suffix “signin-facebook” to each URL.
We take a note of the App ID and App Secret, loading them into our Key Vault.
In our startup.cs, we add our Facebook authentication code, reading in our key vault app id and secret for Facebook.
Privacy
As we signed up for each of these external authentication services, many of them required a privacy page URL. Unfortunately, our privacy page was still the ASP.NET Core default, we needed to add content, quickly. Fortunately there are existing websites and services that can assist us in generating the this text. We have created our own, this is by no means is this a recommended legal page, but sums up our policies pretty well.
Bringing it all together
As we bring it all together, our completed startup.cs file is shown below. Note that each of the external connections is built off the parent “services.AddAuthentication” on line 51 – it is not repeated for each external connection. This is in line with the recommended implementation.
Our final login page is shown below with the 4 external logins.
Wrapup
We have added external authentication for Twitter, Google, and Facebook. We also added a privacy page, a requirement for most of our external authentication sites.
References
- Generating legal text for our privacy page: https://app.freeprivacypolicy.com
- Adding Twitter authentication: https://docs.microsoft.com/en-us/aspnet/core/security/authentication/social/twitter-logins?view=aspnetcore-2.2
- Adding Google authentication: https://docs.microsoft.com/en-us/aspnet/core/security/authentication/social/google-logins?view=aspnetcore-2.2
- Adding Facebook authentication: https://docs.microsoft.com/en-us/aspnet/core/security/authentication/social/facebook-logins?view=aspnetcore-2.2
- Privacy generator: https://app.freeprivacypolicy.com
- Featured image credit: https://chriseggleston.com/wp-content/uploads/2017/06/sucuri-website-security.jpg
Sam Learns Azure 
