Включение аутентификации с помощью Facebook, Google и других внешних провайдеров

Pranav Rastogi и Rick Anderson

В этой статье я расскажу вам, как создать веб приложение ASP.NET Core, где пользовательский логин активируется с помощью OAuth 2.0 с данными от внешнего провайдера, например, Facebook, Twitter, LinkedIn, Microsoft или Google. Здесь мы будем работать с данными из Facebook и Google.

В данном случае вы получаете огромное преимущество, ведь у миллионов пользователей уже есть аккаунты на этих ресурсах.

Создание нового ASP.NET Core проекта

Примечание

Нам потребуется Visual Studio 2015 2 и ASP.NET Core RC2 или выше.

  • В Visual Studio создайте New Project (со Start Page или через File > New > Project)
../../_images/new-project2.png
  • Нажмите Web Application, и в Authentication должно стоять Individual User Accounts
../../_images/select-project1.png
  • Включите SSL

    • В solution explorer кликните правой клавишей по проекту и выберите Properties
    • Слева нажмите Debug
    • Выберите Enable SSL
    • Скопируйте SSL URL и вставьте его в App URL
services.Configure<MvcOptions>(options =>
{
    options.Filters.Add(new RequireHttpsAttribute ());
});
  • Протестируйте приложение

Запуск приложения

Каждый из провайдеров OAuth2 требует специфические провайдерские ключи, чтобы включить OAuth2.

  • Перейдите к https://developers.facebook.com/apps и залогиньтесь.
  • Если вы не зарегистрированы на Facebook как разработчик, нажмите Register as a Developer и следуйте дальнейшим инструкциям.
  • Нажмите Add a New App
  • Выберите Website.
  • Нажмите Skip and Create App ID
../../_images/FBApp03.png
  • Введите display name, category, contact email и нажмите Create App ID.
../../_images/FBApp04.png
  • Выберите Settings из левого меню.
../../_images/FBApp05.png
  • В разделе Basic выберите Add Platform, чтобы указать, что вы добавляете приложение.
../../_images/FBApp06.png
  • Выберите Website.
../../_images/FBApp07.png
  • Добавьте URL сайта (https://localhost:44320/)
  • Укажите AppID и AppSecret. Также добавьте URL сайта (https://localhost:44300/), чтобы протестировать приложение.
../../_images/FBApp08.png

Использование SecretManager для хранения Facebook AppId и AppSecret

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

Добавьте Facebook AppId и AppSecret в Secret Manager:

  • Установите Secret Manager tool

  • Установите Facebook AppId:

    dotnet user-secrets set Authentication:Facebook:AppId <app-Id>
    
  • Установите Facebook AppSecret:

    dotnet user-secrets set Authentication:Facebook:AppSecret <app-secret>
    

Теперь мы считываем конфигурационные значения, хранящиеся Secret Manager.

public Startup(IHostingEnvironment env)
{
    var builder = new ConfigurationBuilder()
        .SetBasePath(env.ContentRootPath)
        .AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
        .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true);

    if (env.IsDevelopment())
    {
        // For more details on using the user secret store see http://go.microsoft.com/fwlink/?LinkID=532709
        builder.AddUserSecrets();
    }

    builder.AddEnvironmentVariables();
    Configuration = builder.Build();
}

Включение связующего ПО Facebook

Note: Вам потребуется использовать NuGet, чтобы установить пакет Microsoft.AspNetCore.Authentication.Facebook, если он еще не установлен.

Добавьте связующее ПО Facebook в метод Configure в Startup:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    loggerFactory.AddConsole(Configuration.GetSection("Logging"));
    loggerFactory.AddDebug();

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
        app.UseDatabaseErrorPage();
        app.UseBrowserLink();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
    }

    app.UseStaticFiles();

    app.UseIdentity();

    app.UseFacebookAuthentication(new FacebookOptions()
    {
        AppId = Configuration["Authentication:Facebook:AppId"],
        AppSecret = Configuration["Authentication:Facebook:AppSecret"]
    });

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });
}

Логин с помощью Facebook

Запустите приложение и нажмите Login. Вы увидите опцию для Facebook.

../../_images/FBLogin1.PNG

Если вы нажмете на Facebook, то будете перенаправлены на Facebook для аутентификации.

../../_images/FBLogin2.PNG

После введения Facebook данных вы будете перенаправлены на веб сайт.

Больше вам не нужны Facebook данные.

../../_images/FBLogin3.PNG

Опциональная настройка пароля

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

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

  • Нажмите на ссылку Hello <email alias> в правом верхнем углу, чтобы перейти в Manage.
../../_images/pass1.PNG
  • Нажмите Create.
../../_images/pass2.PNG
  • Установите пароль.

Дальнейшие шаги

  • В этой статье рассказано, как провести аутентификацию с помощью Facebook. Похожий подход работает также для Microsoft Account, Twitter, Google и тд.
  • После публикации на вам нужно сбросить AppSecret в разделе для разработки на Facebook.
  • Установите Facebook AppId и AppSecret на Azure. Конфигурационная система будет считывать ключи из переменных среды.
Поделись хорошей новостью с друзьями!
Следи за новостями!