Как добавить вход через Google, GitHub, Slack и многое другое с помощью ASP.NET Core

  • Михаил
  • 12 мин. на прочтение
  • 149
  • 30 Nov 2022
  • 30 Nov 2022

Я уверен, что вы сталкивались с веб-приложениями и мобильными приложениями, которые предлагают вход в социальные сети, такие как Google, Facebook, Twitter и многие другие. Это здорово, так как вам нужно запомнить на одну регистрацию и логин меньше. Это также снижает трение при регистрации.

Особенно здорово, если вы можете включить их в свои собственные приложения. Основное преимущество этого заключается в том, что он снижает входной барьер для людей, регистрирующихся для использования вашего продукта или услуги. Если у потенциального клиента или пользователя есть учетная запись через социальную сеть, которую вы поддерживаете, вероятность того, что он попробует продукт или услугу, выше.

С введением ASP.NET Core 2.X он уже поставляется в комплекте с аутентификацией Google, Twiter и Facebook. С добавлением ASPNET Contrib можно включить другие различные социальные сети, такие как Slack, BitBucket и другие, с помощью нескольких строк кода.

Резюме

В этом посте я опишу, как использовать ASP.NET Core и с помощью очень полезной библиотеки, предоставленной ASPNET Contrib и многими людьми, которые внесли свой вклад в проект, чтобы обеспечить интеграцию с популярными социальными логинами.

Я не буду вдаваться в подробности того, что такое OAuth, который является базовым стандартом, делающим все это возможным. Но я расскажу, как интегрировать GitHub, Google и Slack в качестве примеров.

В демонстрационных целях я опустил общие рекомендации, такие как размещение настроек в конфиге и т. д., чтобы избежать путаницы и прояснить ситуацию.

Полный исходный код можно найти в моем репозитории GitHub .

Краткое введение в OAuth

Не стесняйтесь пропустить этот раздел, если вы знакомы с OAuth и просто хотите интегрироваться.

На очень высоком уровне OAuth — это открытый и согласованный стандарт или рабочий процесс, который позволяет делегировать авторизацию провайдеру. Популярными примерами являются такие провайдеры, как Google, Facebook, Twitter. После успешной авторизации провайдер перенаправит обратно в ваше приложение с токеном доступа, который будет заменен токеном авторизации. Преимущество этого заключается в том, что пользователь может использовать свое существующее имя пользователя и пароль, например, в Google, и вам не нужно обрабатывать или обрабатывать их пароль. Поток OAuth обрабатывает это.

Если вы хотите узнать больше об OAuth, в Digital Ocean есть хорошее введение в OAuth 2 . У StackOverflow также есть хорошее объяснение.

Подготовка и включение проверки подлинности в ASP.NET Core

Если у вас нет под рукой проекта ASP.NET Core, создайте его. В своих примерах я использую ASP.NET Core 2.1.

В Startup.csклассе добавьте базовую аутентификацию в ConfigureServicesметоде, как показано ниже.

public void ConfigureServices(IServiceCollection services)
{
    services.Configure(options =>
    {
        // This lambda determines whether user consent for non-essential cookies is needed for a given request.
        options.CheckConsentNeeded = context => true;
        options.MinimumSameSitePolicy = SameSiteMode.None;
    });

    // Add Cookie settings
    services.AddAuthentication(options =>
    {
        options.DefaultSignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
        options.DefaultAuthenticateScheme = CookieAuthenticationDefaults.AuthenticationScheme;
        options.DefaultChallengeScheme = CookieAuthenticationDefaults.AuthenticationScheme;
    });
}

Затем нам нужно указать ASP.NET Core использовать аутентификацию, а также политику файлов cookie. Для этого нам нужно добавить следующее в Configureметод Startup.csкласса.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
...

    // Enable authentication
    app.UseCookiePolicy();
    app.UseAuthentication();

...

    app.UseMvc();
}

Теперь, когда мы подготовили ASP.NET Core с аутентификацией, мы можем перейти к одной из следующих интеграций социального входа ниже. Смело переходите к соответствующему разделу. Они независимы в реализации.

Войти с помощью GitHub

В этом разделе я опишу шаги для интеграции «Войти» с GitHub.

Зарегистрируйте приложение OAuth на GitHub

Во-первых, нам нужно создать приложение OAuth на GitHub. На GitHub есть очень хорошо написанный документ по созданию приложения OAuth.

Параметры должны быть понятными, однако наиболее важным параметром является URL-адрес обратного вызова авторизации . Это нужно установить так, чтобы путь был /signin-github. Это сегмент URL-адреса обратного вызова по умолчанию, установленный поставщиком аутентификации GitHub, поставляемый в AspNet.Security.OAuth.GitHub nugetпакете, который мы будем использовать через мгновение. В моем примере это будет https://localhost:44342/signin-github.

Вот настройки, которые я использую для своего примера:
 

Когда вы будете довольны, нажмите « Зарегистрировать приложение » . Вы всегда можете изменить их позже.

Теперь вы должны увидеть что-то вроде этого:
 

Обязательно запишите Client ID и Client Secret .

Добавьте аутентификацию GitHub в класс Startup.

  1. Установите пакет nuget OAuth GitHub.
Install-Package AspNet.Security.OAuth.GitHub -Version 2.0.1
  1. Добавьте аутентификацию GitHub в ASP.NET Core.
    При Startup.csиспользовании AddGitHubметода расширения в ConfigureServicesметоде, как показано ниже:
using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Authentication.OAuth;

...

public void ConfigureServices(IServiceCollection services)
{
    ...
    
    // Add Cookie settings
    services.AddAuthentication(options =>
        {
            options.DefaultSignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
            options.DefaultAuthenticateScheme = CookieAuthenticationDefaults.AuthenticationScheme;
            options.DefaultChallengeScheme = CookieAuthenticationDefaults.AuthenticationScheme;
        })
        // Add Cookie settings
        .AddCookie(CookieAuthenticationDefaults.AuthenticationScheme, options =>
        {
            options.LoginPath = "/account/login";
            options.LogoutPath = "/account/logout";
            options.SlidingExpiration = true;
        })
        // Add GitHub authentication
        .AddGitHub("Github", options =>
        {
            options.ClientId = ""; // client id from registering github app
            options.ClientSecret = ""; // client secret from registering github app
            options.Scope.Add("user:email"); // add additional scope to obtain email address
            options.Events = new OAuthEvents
            {
                OnCreatingTicket = OnCreatingGitHubTicket()
            }; // Event to capture when the authentication ticket is being created
        });
        
    ...
}

Метод .AddGitHubextensions имеет несколько параметров, которые необходимо установить, например, ClientIdи ClientSecret.

Кроме того, чтобы продемонстрировать дополнительные возможности, я запросил адрес электронной почты пользователя. Дополнительные области, поддерживаемые GitHub, можно найти на GitHub.

  1. Добавление событий аутентификации (необязательно)
    Этот шаг на самом деле необязателен. Однако это полезно, если, например, вам нужно сохранить некоторые из этих деталей в вашей системе.
private static Func OnCreatingGitHubTicket()
{
    return async context =>
    {
        var fullName = context.Identity.FindFirst("urn:github:name").Value;
        var email = context.Identity.FindFirst(ClaimTypes.Email).Value;

        //Todo: Add logic here to save info into database

        // this Task.FromResult is purely to make the code compile as it requires a Task result
        await Task.FromResult(true);
    };
}

Добавьте кнопку «Войти с помощью GitHub».

Теперь немного разметки. Добавьте ссылку, которая будет триггером для входа в GitHub. Упрощенная ссылка показана ниже:

<li><a asp-action="GithubLogin" asp-controller="account" role="button">Sign in with GitHub</a></li>

Здесь ссылка просто указывает на действие контроллера MVC. Здесь нет ничего особенного.

Теперь создайте соответствующий контроллер и действие, как показано ниже:

using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Mvc;

...

public class OAuthController : Controller
{
    [HttpGet]
    [Route("/oauth/github")]
    public IActionResult GithubLogin()
    {
        return Challenge(new AuthenticationProperties{ RedirectUri = "/Account" }, "Github");
    }
}

Маршрут /oauth/githubна самом деле может быть чем угодно. Это не фиксировано. Кроме того, RedirectUriсвойство, для которого установлено значение /Account. Это URL-адрес в моем примере, где я хочу, чтобы приложение перенаправляло, когда аутентификация прошла успешно.

Тестирование «Войти через GitHub» работает

Чтобы убедиться, что это работает, при нажатии на кнопку она должна перенаправляться на GitHub, и вы должны увидеть что-то вроде этого:
 

Войти через Google

Google+ был основным методом реализации «Войти через Google». К сожалению, Google закрыл Google+, и API Google+ продолжают работать вместе с ним. Однако есть альтернативный метод, о котором я расскажу ниже. Вы можете найти более подробную информацию о закрытии Google+ в документах Google.

Зарегистрируйте приложение OAuth в Google

  • Перейдите к разделу Интеграция входа через Google в ваше веб-приложение , чтобы создать приложение OAuth.
  • Нажмите «Настроить проект» . Вас могут попросить войти в систему.
  • Когда появится диалоговое окно « Настройка проекта для входа в Google », либо создайте новый проект, либо выберите существующий.
  • В разделе Настройка клиента OAuth выберите Веб-сервер .
  • В URI авторизованного перенаправления обязательно укажите путь /signin-google. В моем примере это будет https://localhost:44342/signin-google. Вот как это выглядит:
  • Нажмите « Создать » , и вам должны быть предоставлены идентификатор клиента и секрет клиента , как показано ниже. Обязательно запишите это.

Добавьте аутентификацию Google в класс Startup

  1. Добавьте аутентификацию Google в ASP.NET Core.
    В Startup.csклассе используйте AddGoogleметод расширения в ConfigureServicesметоде, как показано ниже. Обязательно добавьте идентификатор клиента и секрет клиента на предыдущем шаге.
    Как упоминалось ранее, поскольку Google закрыл API Google+, который ранее использовался для включения возможности «Войти с помощью Google», для ASP.NET Core 2.X существует несколько дополнительных требований. Более подробную информацию можно найти в этом выпуске Github.

Вы также можете заметить, что я установил расширение options.Events. Это необязательно.

public void ConfigureServices(IServiceCollection services)
{
    services.Configure(options =>
    {
        // This lambda determines whether user consent for non-essential cookies is needed for a given request.
        options.CheckConsentNeeded = context => true;
        options.MinimumSameSitePolicy = SameSiteMode.None;
    });

    // Add Cookie settings
    services.AddAuthentication(options =>
        {
            options.DefaultSignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
            options.DefaultAuthenticateScheme = CookieAuthenticationDefaults.AuthenticationScheme;
            options.DefaultChallengeScheme = CookieAuthenticationDefaults.AuthenticationScheme;
        })
        // Add Cookie settings
        .AddCookie(CookieAuthenticationDefaults.AuthenticationScheme, options =>
        {
            options.LoginPath = "/account/login";
            options.LogoutPath = "/account/logout";
            options.SlidingExpiration = true;
        })
        // Add Google Authentication
        .AddGoogle("Google", options =>
            {
                options.ClientId = "";
                options.ClientSecret = "";
                options.UserInformationEndpoint = "https://www.googleapis.com/oauth2/v2/userinfo";
                options.ClaimActions.Clear();
                options.ClaimActions.MapJsonKey(ClaimTypes.NameIdentifier, "id");
                options.ClaimActions.MapJsonKey(ClaimTypes.Name, "name");
                options.ClaimActions.MapJsonKey(ClaimTypes.GivenName, "given_name");
                options.ClaimActions.MapJsonKey(ClaimTypes.Surname, "family_name");
                options.ClaimActions.MapJsonKey("urn:google:profile", "link");
                options.ClaimActions.MapJsonKey(ClaimTypes.Email, "email");
                options.Events = new OAuthEvents
                {
                    OnCreatingTicket = OnCreatingGoogleTicket()
                }; // Event to capture when the authentication ticket is being created
            });

}
  1. Добавление событий аутентификации (необязательно)
    Как показано выше, я добавил файл OAuthEvents. Это полезно, если вам нужно переопределить или захватить некоторую информацию о пользователе.
    В приведенном ниже коде показан пример того, как можно получить эту информацию.
private static Func OnCreatingGoogleTicket()
{
    return async context =>
    {
        var firstName = context.Identity.FindFirst(ClaimTypes.GivenName).Value;
        var lastName = context.Identity.FindFirst(ClaimTypes.Surname)?.Value;
        var email = context.Identity.FindFirst(ClaimTypes.Email).Value;


        //Todo: Add logic here to save info into database

        // this Task.FromResult is purely to make the code compile as it requires a Task result
        await Task.FromResult(true);
    };
}

Добавьте кнопку «Войти через Google».

Теперь мы можем добавить немного разметки. У меня есть простое GoogleLoginдействие вOAuthController

<li><a asp-action="GoogleLogin" asp-controller="account" role="button">Sign in with Google</a></li>

Вот код действия контроллера. Маршрут /oauth/googleможет быть любым по вашему желанию, и RedirectUriздесь используется значение Account. Это означает, что при успешной аутентификации от Google он будет перенаправлен на /Account.

using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Mvc;

...

public class OAuthController : Controller
{

    [HttpGet]
    [Route("/oauth/google")]
    public IActionResult GoogleLogin()
    {
        return Challenge(new AuthenticationProperties{ RedirectUri = "Account" }, "Google");
    }

}

Тестирование «Войти через Google» работает

Со всем вышеперечисленным, если все пойдет хорошо, вы должны увидеть что-то вроде этого.

Подписать с помощью Slack

Со Slack нам нужно создать приложение Slack . У Slack также есть отличная документация о том, как интегрировать вход со Slack , и ее стоит прочитать.

Зарегистрируйте приложение OAuth в Slack

Чтобы включить «Войти с помощью Slack», необходимо создать приложение Slack.

После создания приложения Slack обязательно запишите идентификатор клиента и секрет клиента .

Вы сможете найти его « Основная информация » в разделе « Настройки », и он должен выглядеть примерно так:

Затем в разделе OAuth и разрешения добавьте URL-адрес перенаправления, который должен быть примерно такимhttps://localhost:44342/signin-slack

Прямо под разделом « URL-адреса перенаправления » находится раздел « Область действия ». Минимальная область, которую необходимо добавить, составляет identity.basic. Обязательно добавьте это, как показано ниже:

Добавьте Slack Authentication в класс Startup

  1. Установите пакет nuget OAuth Slack.
Install-Package AspNet.Security.OAuth.Slack -Version 2.0.1
  1. Добавьте проверку подлинности Slack в ASP.NET Core
    . Используйте AddSlackметод расширения в ConfigureServicesметоде Startup.csкласса. Опять же, я использую OAuthEventsдля включения дополнительного сбора данных при успешной аутентификации. Это, конечно, необязательно.
public void ConfigureServices(IServiceCollection services)
{
    services.Configure(options =>
    {
        // This lambda determines whether user consent for non-essential cookies is needed for a given request.
        options.CheckConsentNeeded = context => true;
        options.MinimumSameSitePolicy = SameSiteMode.None;
    });

    // Add Cookie settings
    services.AddAuthentication(options =>
        {
            options.DefaultSignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
            options.DefaultAuthenticateScheme = CookieAuthenticationDefaults.AuthenticationScheme;
            options.DefaultChallengeScheme = CookieAuthenticationDefaults.AuthenticationScheme;
        })
        // Add Cookie settings
        .AddCookie(CookieAuthenticationDefaults.AuthenticationScheme, options =>
        {
            options.LoginPath = "/account/login";
            options.LogoutPath = "/account/logout";
            options.SlidingExpiration = true;
        })
        // Add Slack Authentication
        .AddSlack("Slack", options => { 

            options.ClientId = "";
            options.ClientSecret = "";
            options.Events = new OAuthEvents {OnCreatingTicket = OnCreatingSlackTicket()};
        });


}
  1. Добавление событий проверки подлинности (необязательно) .
    Чтобы получить информацию из области или утверждений, нам нужно добавить, OAuthEventкак показано ниже. Преимущество этого заключается в том, что вы можете сохранить эту информацию в базе данных для имитации учетных записей пользователей.
private static Func OnCreatingSlackTicket()
{
    return async context =>
    {
        var fullName = context.Identity.FindFirst(ClaimTypes.Name).Value;

        //Todo: Add logic here to save info into database

        // this Task.FromResult is purely to make the code compile as it requires a Task result
        await Task.FromResult(true);
    };
}

Добавьте кнопку «Войти с помощью Slack».

У Slack есть генератор кнопок, который можно найти при входе в систему с документацией Slack . Однако, поскольку мы используем пакет OAuth Nuget, нам придется настроить его следующим образом.

Все, что требуется, — это простая ссылка, которая ведет к действию контроллера.

<li><a asp-action="SlackLogin" asp-controller="account" role="button">Sign in with Slack</a></li>

Ниже приведено соответствующее действие контроллера. Маршрут /oauth/slackне фиксированный и может быть любым. Параметр RedirectUri, который Accountуказывает ASP.NET Core на перенаправление Accountпри успешной аутентификации с помощью Slack.

using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Mvc;

...
    public class OAuthController : Controller
    {
        [HttpGet]
        [Route("/oauth/slack")]
        public IActionResult SlackLogin()
        {
            return Challenge(new AuthenticationProperties{ RedirectUri = "Account" }, "Slack");
        }
}

Тестирование «Войти с помощью Slack» работает

Резюме

Я продемонстрировал, как внедрить социальные входы, такие как GitHub, Google и Slack, с помощью ASP.NET Core 2.1 и поставщиков OAuth из ASPNET Contrib без лишнего кода.

Вы можете просмотреть полную реализацию исходного кода из моего репозитория GitHub — OAuthSample.

Если вы хотите узнать, какие провайдеры поддерживаются, просто ознакомьтесь с доступными провайдерами в исходном коде от aspnet-contrib на GitHub .

Следует учитывать, что вам может потребоваться создать несколько приложений OAuth для каждого поставщика. Почему? Что ж, поскольку приложения OAuth работают над объявлением URL-адреса перенаправления, как https://localhost:44342/signin-githubв большинстве случаев в производственной среде, имя хоста будет другим, например https://mydomain.com/signin-github. Это может добавить дополнительных трудозатрат, но оно того стоит, чтобы убедиться, что оно работает в различных средах.