Έλεγχος ταυτότητας με χρήση του Google στο ASP.NET Core 2.0

Εισαγωγή

Μερικές φορές, θέλουμε οι χρήστες μας να συνδεθούν χρησιμοποιώντας τα υπάρχοντα διαπιστευτήριά τους από εφαρμογές τρίτων, όπως το Facebook, το Twitter, το Google κ.ο.κ. Σε αυτό το άρθρο, θα εξετάσουμε τον έλεγχο ταυτότητας μιας εφαρμογής ASP.NET Core χρησιμοποιώντας έναν λογαριασμό Google.

Προαπαιτούμενα

  • Εγκαταστήστε το .NET Core 2.0.0 ή παραπάνω SDK από εδώ.
  • Εγκαταστήστε την τελευταία έκδοση του Visual Studio 2017 από εδώ.

Δημιουργία εφαρμογής Web MVC

Ανοίξτε το Visual Studio και επιλέξτε Αρχείο >> Νέο >> Έργο. Αφού επιλέξετε το έργο, θα ανοίξει ένα παράθυρο διαλόγου "Νέο έργο". Επιλέξτε .NET Core μέσα στο μενού Visual C # από ​​τον αριστερό πίνακα. Στη συνέχεια, επιλέξτε "ASP.NET Core Web Application" από τους διαθέσιμους τύπους έργου. Βάλτε το όνομα του έργου ενός s GoogleAuth και πατήστε OK. Ανατρέξτε σε αυτήν την εικόνα.

Αφού κάνετε κλικ στο OK, θα ανοίξει ένας νέος διάλογος που θα σας ζητά να επιλέξετε το πρότυπο έργου. Μπορείτε να παρατηρήσετε δύο αναπτυσσόμενα μενού πάνω αριστερά στο παράθυρο προτύπου. Επιλέξτε ".NET Core" και "ASP.NET Core 2.0" από αυτά τα αναπτυσσόμενα μενού. Στη συνέχεια, επιλέξτε το πρότυπο "Εφαρμογή Web (Μοντέλο-Προβολή-Ελεγκτής)". Κάντε κλικ στο κουμπί Αλλαγή ελέγχου ταυτότητας και θα ανοίξει ένα παράθυρο διαλόγου "Αλλαγή ελέγχου ταυτότητας". Επιλέξτε "Ατομικός λογαριασμός χρήστη" και κάντε κλικ στο OK. Τώρα, κάντε κλικ ξανά στο OK για να δημιουργήσετε την εφαρμογή ιστού μας.

Πριν από την εκτέλεση της εφαρμογής, πρέπει να εφαρμόσουμε μετεγκαταστάσεις στην εφαρμογή μας.

Μεταβείτε στα Εργαλεία >> Nuget Package Manager >> Package Manager Console.

Θα ανοίξει την Κονσόλα διαχείρισης πακέτων. Βάλτε την εντολή Update-Database και πατήστε enter. Αυτό θα ενημερώσει τη βάση δεδομένων χρησιμοποιώντας το Entity Framework Code First Migrations.

Πατήστε F5 για να εκτελέσετε την εφαρμογή. Θα δείτε μια αρχική σελίδα, όπως φαίνεται παρακάτω.

Σημειώστε τη διεύθυνση URL από τη γραμμή διευθύνσεων του προγράμματος περιήγησης. Σε αυτήν την περίπτωση, η διεύθυνση URL είναι // localhost: 51792 /. Χρειαζόμαστε αυτήν τη διεύθυνση URL για να διαμορφώσουμε την εφαρμογή Google, την οποία θα κάνουμε στην επόμενη ενότητα.

Δημιουργήστε την εφαρμογή Google

Πρέπει να δημιουργήσουμε μια νέα εφαρμογή Google στην κονσόλα API Google. Μεταβείτε στη διεύθυνση //console.developers.google.com/projectselector/apis/library και συνδεθείτε χρησιμοποιώντας τον λογαριασμό σας Google. Εάν δεν έχετε λογαριασμό Google, πρέπει να δημιουργήσετε έναν. Δεν μπορείτε να προχωρήσετε χωρίς λογαριασμό Google. Μόλις συνδεθείτε, θα μεταφερθείτε στη σελίδα Βιβλιοθήκη διαχειριστή API, παρόμοια με αυτήν που φαίνεται παρακάτω.

Κάντε κλικ στο κουμπί Δημιουργία για να μεταβείτε στη σελίδα "Νέο έργο" όπου πρέπει να δημιουργήσετε ένα νέο έργο. Το πεδίο "Όνομα έργου" θα συμπληρωθεί αυτόματα με ένα προεπιλεγμένο όνομα που παρέχεται από την Google. Εάν θέλετε, μπορείτε να το παρακάμψετε με το δικό σας προσαρμοσμένο όνομα. Για αυτό το σεμινάριο, θα χρησιμοποιήσουμε το προεπιλεγμένο όνομα. Αποδεχτείτε τους όρους παροχής υπηρεσιών και, στη συνέχεια, κάντε κλικ στο Δημιουργίακουμπί .

Το έργο σας θα δημιουργηθεί με επιτυχία και θα ανακατευθυνθείτε στη σελίδα Βιβλιοθήκη API παρόμοια με αυτήν που φαίνεται παρακάτω.

Αναζητήστε το API Google+ στη γραμμή αναζήτησης και επιλέξτε το API Google+ από τα αποτελέσματα αναζήτησης. Ανατρέξτε στην παρακάτω εικόνα.

Αφού ορίσετε την επιλογή API Google+, θα μεταφερθείτε σε μια σελίδα όπως φαίνεται παρακάτω, όπου πρέπει να κάνετε κλικ στο κουμπί Ενεργοποίηση .

Μετά από αυτό, το Google+ API θα ενεργοποιηθεί και θα ανακατευθυνθείτε στην αρχική σελίδα του API. Κάντε κλικ στο Δημιουργία διαπιστευτηρίωνκουμπί στη δεξιά πλευρά της σελίδας για να διαμορφώσετε τα μυστικά για το API σας.

Θα δείτε τη φόρμα "Προσθήκη διαπιστευτηρίων στο έργο σας".

Αυτή η φόρμα έχει τρεις ενότητες.

Συμπληρώστε τις λεπτομέρειες των ενοτήτων όπως περιγράφεται παρακάτω.

Ενότητα 1 - Μάθετε τι είδους διαπιστευτήρια χρειάζεστε

  • Ποιο API χρησιμοποιείτε; - API Google+
  • Από πού θα καλέσετε το API; - Διακομιστής Ιστού (για παράδειγμα, Node.js, Tomcat)
  • Σε ποια δεδομένα θα έχετε πρόσβαση; - Δεδομένα χρήστη

Και κάντε κλικ στο κουμπί Τι διαπιστευτήρια χρειάζομαι . Θα ανακατευθυνθείτε στην ενότητα 2

Ενότητα 2 - Δημιουργήστε ένα αναγνωριστικό πελάτη OAuth 2.0

  • Όνομα - Η προεπιλεγμένη τιμή που παρέχεται από την Google.
  • Εξουσιοδοτημένη προέλευση JavaScript - Αφήστε το κενό.
  • Εξουσιοδοτημένα URI ανακατεύθυνσης - Δώστε τη βασική διεύθυνση URL της εφαρμογής σας με το / signin-google προσαρτημένο σε αυτήν. Για αυτό το σεμινάριο, η διεύθυνση URL θα είναι // localhost: 51792 / signin-google. Αφού εισαγάγετε τη διεύθυνση URL, πατήστε TAB για να προσθέσετε την τιμή.

Μετά από αυτό, κάντε κλικ στο κουμπί Δημιουργία αναγνωριστικού πελάτη . Θα ανακατευθυνθείτε στην ενότητα 3.

Ενότητα 3 - Ρυθμίστε την οθόνη συναίνεσης OAuth 2.0

  • Διεύθυνση email - Επιλέξτε τη διεύθυνση email σας από το αναπτυσσόμενο μενού. Αυτή η τιμή κρύβεται στην παραπάνω εικόνα για απόρρητο.
  • Όνομα προϊόντος που εμφανίζεται στους χρήστες - Εισαγάγετε οποιοδήποτε όνομα προϊόντος. Εδώ χρησιμοποιούμε το "AuthDemo" ως όνομα προϊόντος.

Σημείωση : Μην χρησιμοποιείτε τη λέξη "Google" στο όνομα του προϊόντος σας. Θα σας ζητηθεί σφάλμα και δεν θα σας επιτραπεί να δημιουργήσετε την εφαρμογή. Αυτό σημαίνει ότι το "GoogleAuthDemo" είναι μη έγκυρο όνομα.

Κάντε κλικ στο συνέχεια.

Τα διαπιστευτήριά σας δημιουργήθηκαν με επιτυχία. Κάντε κλικ στην επιλογή Λήψη για λήψη ενός αρχείου JSON στον τοπικό υπολογιστή σας με όλα τα μυστικά της εφαρμογής σας και, στη συνέχεια, κάντε κλικ στην επιλογή Τέλος για να ολοκληρώσετε τη διαδικασία.

Ανοίξτε το κατεβάσει μόνο client_id.json αρχείο και σημειώστε τις ClientId και ClientSecret πεδία. Θα χρειαστούμε αυτές τις τιμές για να διαμορφώσουμε τον έλεγχο ταυτότητας Google στην εφαρμογή ιστού μας.

Διαμορφώστε την εφαρμογή Web για να χρησιμοποιήσετε τον έλεγχο ταυτότητας Google

We need to store the ClientId and ClientSecret field values in our application. We will use the Secret Manager tool for this purpose. The Secret Manager tool is a project tool that can be used to store secrets such as password, API Key, etc. for a .NET Core project during the development process. With the Secret Manager tool, we can associate app secrets with a specific project and can share them across multiple projects.

Open your web application once again and Right-click the project in Solution Explorer. Select Manage User Secrets from the context menu.

A secrets.json file will open. Put the following code in it:

{ "Authentication:Google:ClientId": "Your Google ClientId here", "Authentication:Google:ClientSecret": "Your Google ClientSecret here" }

Now open the Startup.cs file and put the following code into the ConfigureServices method:

services.AddAuthentication().AddGoogle(googleOptions => { googleOptions.ClientId = Configuration["Authentication:Google:ClientId"]; googleOptions.ClientSecret = Configuration["Authentication:Google:ClientSecret"]; });

In this code section, we are reading ClientId and ClientSecret for authentication purposes. So finally, Startup.cswill look like this:

using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Identity; using Microsoft.EntityFrameworkCore; using Microsoft.AspNetCore.Hosting; using Microsoft.Extensions.Configuration; using Microsoft.Extensions.DependencyInjection; using GoogleAuth.Data; using GoogleAuth.Models; using GoogleAuth.Services; namespace GoogleAuth { public class Startup { public Startup(IConfiguration configuration) { Configuration = configuration; } public IConfiguration Configuration { get; } // This method gets called by the runtime. Use this method to add services to the container. public void ConfigureServices(IServiceCollection services) { services.AddDbContext(options => options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection"))); services.AddIdentity() .AddEntityFrameworkStores() .AddDefaultTokenProviders(); services.AddAuthentication().AddGoogle(googleOptions => { googleOptions.ClientId = Configuration["Authentication:Google:ClientId"]; googleOptions.ClientSecret = Configuration["Authentication:Google:ClientSecret"]; }); // Add application services. services.AddTransient(); services.AddMvc(); } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopment()) { app.UseBrowserLink(); app.UseDeveloperExceptionPage(); app.UseDatabaseErrorPage(); } else { app.UseExceptionHandler("/Home/Error"); } app.UseStaticFiles(); app.UseAuthentication(); app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); }); } } }

And with this, our application is ready.

Execution Demo

Launch the application and click Login on the top right corner of the home page.

You will be redirected to //localhost:51792/Account/Login page, where you can see the option to login using Google on the right side of the page.

Clicking on the Google button will take you to the Google login page. There, you will be asked to fill in your Google credentials and authorize the Google app to use your Google account.

After successful authentication from Google, you will be redirected to a registration page inside your application where you need to fill in an email id to tag with your account. The Gmail id that you have used to login will already be populated in the Email id field. If you want to use another mail id, you can change it here.

Click register, you will be redirected to the home page again. But this time you can also see that your registered email is on the top right corner.

Conclusion

We have successfully created and configured a Google+ app and used it to authenticate our ASP.NET Core application.

You can get the source code from GitHub.

Please note that the secrets.json file contains dummy values. You’ll need to replace the values with the keys of your Google app before executing it.

Μπορείτε επίσης να βρείτε αυτό το άρθρο στο C # Corner.

Μπορείτε να δείτε τα άλλα άρθρα μου στο ASP .NET Core εδώ

Δείτε επίσης

  • Έλεγχος ταυτότητας με χρήση LinkedIn στο ASP.NET Core 2.0
  • Έλεγχος ταυτότητας με χρήση του Twitter στο ASP.NET Core 2.0
  • Έλεγχος ταυτότητας μέσω Facebook στο ASP.NET Core 2.0
  • Έλεγχος ταυτότητας cookie με ASP.NET Core 2.0
  • ASP.NET Core - Έλεγχος ταυτότητας δύο παραγόντων με χρήση του Google Authenticator

Αρχικά δημοσιεύθηκε στο ankitsharmablogs.com