ABP 使用者登入系統時，不需要使用者先選取所屬租戶(Tenant)，自動切換到所屬租戶(Tenant)

問題

ABP 啟用租戶功能時，所有資料都會依租戶來隔離。
而在登入系統時，使用者需要選擇所屬的租戶後，
再輸入 帳號 及 密碼 來登入，如下，

假如系統限制一個使用者只能所屬性一個租戶，
而且希望使用者不需要多去選擇它的租戶，
而是希望使用者登入後，依它所屬的租戶來自動切換。
這樣子的話，在 ABP 中要如何做呢?

解法

預設 ABP Account 的做法如下，

1.使用者選擇所屬的租戶
1.1.系統將該租戶資訊寫到 _tenant Cookie 之中
資訊在 Basic Theme/Account.cshtml

2.使用者輸入 帳號 及 密碼 登入
2.1.用 使用者帳號 及 租戶 找看看是否有該使用者，沒有則傳出錯誤訊息
2.2.用 使用者帳號 及 密碼 驗證密碼是否正確
2.3.Log 使用者登入事件
2.4.導回到首頁

資訊在 ABP Account/Login.cshtml.cs

  • 註: Theme 請依您使用的 Theme 來調整
  • 註: 預設使用者為 admin，新增 T1 租戶使用者 tenant1User1@gss.com.tw 及 T2 租戶使用者 tenant2User2@gss.com.tw，並新增他們所屬的產品資料

要解決以上的問題，可以將問題展開成以下的處理步驟，

1.將 選擇租戶的區塊 隱藏 起來
1.1.將 Basic Theme/Account.cshtml 複製到 系統 Web 專案中的 Themes\Basic\Layouts 目錄之中
1.2.將 選擇租戶的區塊 的程式碼，如果 URL 不是登入((!Context.Request.Path.Equals("/Account/Login", StringComparison.OrdinalIgnoreCase) ) )才顯示 (@if (MultiTenancyOptions.Value.IsEnabled那段程式碼)，如下，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
@using Microsoft.Extensions.Localization
@using Microsoft.Extensions.Options
@using Volo.Abp.AspNetCore.MultiTenancy
@using Volo.Abp.AspNetCore.Mvc.UI.Components.LayoutHook
@using Volo.Abp.AspNetCore.Mvc.UI.MultiTenancy.Localization
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Bundling
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Themes.Basic.Components.MainNavbar
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Themes.Basic.Components.PageAlerts
@using Volo.Abp.AspNetCore.Mvc.UI.Theming
@using Volo.Abp.AspNetCore.Mvc.UI.Widgets.Components.WidgetScripts
@using Volo.Abp.AspNetCore.Mvc.UI.Widgets.Components.WidgetStyles
@using Volo.Abp.MultiTenancy
@using Volo.Abp.Localization
@using Volo.Abp.Ui.Branding
@inject IBrandingProvider BrandingProvider
@inject IOptions<AbpMultiTenancyOptions> MultiTenancyOptions
@inject ICurrentTenant CurrentTenant
@inject IStringLocalizer<AbpUiMultiTenancyResource> MultiTenancyStringLocalizer
@inject ITenantResolveResultAccessor TenantResolveResultAccessor

@{
    Layout = null;
    var containerClass = ViewBag.FluidLayout == true ? "container-fluid" : "container"; //TODO: Better and type-safe options
    var rtl = CultureHelper.IsRtl ? "rtl" : string.Empty;
}

<!DOCTYPE html>

<html lang="@CultureInfo.CurrentCulture.Name" dir="@rtl">
<head>
    @await Component.InvokeLayoutHookAsync(LayoutHooks.Head.First, StandardLayouts.Account)

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>@(ViewBag.Title == null ? BrandingProvider.AppName : ViewBag.Title)</title>

    @if (ViewBag.Description != null)
    {
        <meta name="description" content="@(ViewBag.Description as string)" />
    }
    <abp-style-bundle name="@BasicThemeBundles.Styles.Global" />

    @await RenderSectionAsync("styles", false)

    @await Component.InvokeAsync(typeof(WidgetStylesViewComponent))

    @await Component.InvokeLayoutHookAsync(LayoutHooks.Head.Last, StandardLayouts.Account)
</head>
<body class="abp-account-layout @rtl">
    @await Component.InvokeLayoutHookAsync(LayoutHooks.Body.First, StandardLayouts.Account)

    @(await Component.InvokeAsync<MainNavbarViewComponent>())

    <div class="@containerClass">
        <abp-row>
            <abp-column class="col mx-auto" style="max-width: 440px">
                @if ((!Context.Request.Path.Equals("/Account/Login", StringComparison.OrdinalIgnoreCase) ) &&
                MultiTenancyOptions.Value.IsEnabled &&
                (TenantResolveResultAccessor.Result?.AppliedResolvers?.Contains(CookieTenantResolveContributor.ContributorName) == true ||
                TenantResolveResultAccessor.Result?.AppliedResolvers?.Contains(QueryStringTenantResolveContributor.ContributorName) == true))
                {
                    <div class="card shadow-sm rounded mb-3">
                        <div class="card-body px-5">
                            <div class="row">
                                <div class="col">
                                    <span style="font-size: .8em;" class="text-uppercase text-muted">@MultiTenancyStringLocalizer["Tenant"]</span><br />
                                    <h6 class="m-0 d-inline-block">
                                        @if (CurrentTenant.Id == null)
                                        {
                                            <span>
                                                @MultiTenancyStringLocalizer["NotSelected"]
                                            </span>
                                        }
                                        else
                                        {
                                            <strong>@(CurrentTenant.Name ?? CurrentTenant.Id.Value.ToString())</strong>
                                        }
                                    </h6>
                                </div>
                                <div class="col-auto">
                                    <a id="AbpTenantSwitchLink" href="javascript:;" class="btn btn-sm mt-3 btn-outline-primary">@MultiTenancyStringLocalizer["Switch"]</a>
                                </div>
                            </div>
                        </div>
                    </div>
                }
                @(await Component.InvokeAsync<PageAlertsViewComponent>())
                @await Component.InvokeLayoutHookAsync(LayoutHooks.PageContent.First, StandardLayouts.Account)
                @RenderBody()
                @await Component.InvokeLayoutHookAsync(LayoutHooks.PageContent.Last, StandardLayouts.Account)
            </abp-column>
        </abp-row>
    </div>

    <abp-script-bundle name="@BasicThemeBundles.Scripts.Global" />

    <script src="~/Abp/ApplicationConfigurationScript"></script>
    <script src="~/Abp/ServiceProxyScript"></script>

    @await RenderSectionAsync("scripts", false)

    @await Component.InvokeAsync(typeof(WidgetScriptsViewComponent))

    @await Component.InvokeLayoutHookAsync(LayoutHooks.Body.Last, StandardLayouts.Account)
</body>
</html>

1.2.將 Basic Theme/_ViewImports.cshtml 複製到 系統 Web 專案中的 Themes\Basic 目錄之中

2.客製 使用者登入頁 ，改變登入 Logic
2.1.在 Pages/Account 目錄下，新增 Login.cshtml Razor Page
2.2.修改 Login.cshtml.cs 改繼承自 Volo.Abp.Account.Web.Pages.Account.LoginModel
2.3.類別名稱從 LoginModel 改成 CustomLoginModel
2.4.調整查詢使用者的方式(FindUserAsync)
2.5.使用 CurrentTenant.Change using 區塊中呼叫 Volo.Abp.Account.Web.Pages.Account.LoginModel 的 OnPostAsync Method

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Options;
using System.Threading.Tasks;
using Volo.Abp.Account.Web;
using Volo.Abp.Account.Web.Pages.Account;
using Volo.Abp.AspNetCore.MultiTenancy;
using Volo.Abp.Data;
using Volo.Abp.MultiTenancy;
using IdentityUser = Volo.Abp.Identity.IdentityUser;

namespace 你的專案.Web.Pages.Account
{
    public class CustomLoginModel : LoginModel
    {
        private readonly IDataFilter _dataFilter;
        public CustomLoginModel(
            IAuthenticationSchemeProvider schemeProvider,
            IOptions<AbpAccountOptions> accountOptions,
            IOptions<IdentityOptions> identityOptions,
            IDataFilter dataFilter)
            : base(schemeProvider, accountOptions, identityOptions)
        {
            _dataFilter = dataFilter;
        }

        protected virtual async Task<IdentityUser> FindUserAsync(string uniqueUserNameOrEmailAddress)
        {
            IdentityUser user = null;
            using (_dataFilter.Disable<IMultiTenant>())
            {
                //不卡租戶尋找使用者資訊
                user = await UserManager.FindByNameAsync(LoginInput.UserNameOrEmailAddress) ??
                       await UserManager.FindByEmailAsync(LoginInput.UserNameOrEmailAddress);
                if (user != null)
                {
                    return user;
                }
            }
            return user;
        }

        public async override Task<IActionResult> OnPostAsync(string action)
        {
            //登入時，找使用者資訊(不卡租戶)
            var user = await FindUserAsync(LoginInput.UserNameOrEmailAddress);
            if (user !=null
                && CurrentTenant.Id?.CompareTo(user.TenantId) != 0)
            {
                //設定租戶資訊到 Cookie 之中
                AbpMultiTenancyCookieHelper.SetTenantCookie(HttpContext, user.TenantId, TenantResolverConsts.DefaultTenantKey);
            }
            using (CurrentTenant.Change(user?.TenantId))
            {
                //切換到正確的租戶
                var result =  await base.OnPostAsync(action);
                return result;
            }
        }
    }
}

2.6.將 Account/Login.cshtml 內容覆蓋到 Pages/Account/Login.cshtml 之中
2.7.將 @model 改成 @model 你的專案.Web.Pages.Account.CustomLoginModel，如下，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
@page
@model 你的專案.Web.Pages.Account.CustomLoginModel
@using Microsoft.AspNetCore.Mvc.Localization
@using Volo.Abp.Account.Localization
@using Volo.Abp.Account.Settings
@using Volo.Abp.Settings
@inject IHtmlLocalizer<AccountResource> L
@inject Volo.Abp.Settings.ISettingProvider SettingProvider
<div class="card mt-3 shadow-sm rounded">
    <div class="card-body p-5">
        <h4>@L["Login"]</h4>
        @if (await SettingProvider.IsTrueAsync(AccountSettingNames.IsSelfRegistrationEnabled))
        {
            <strong>
                @L["AreYouANewUser"]
                <a href="@Url.Page("./Register", new {returnUrl = Model.ReturnUrl, returnUrlHash = Model.ReturnUrlHash})" class="text-decoration-none">@L["Register"]</a>
            </strong>
        }
        @if (Model.EnableLocalLogin)
        {
            <form method="post" class="mt-4">
                <div class="mb-3">
                    <label asp-for="LoginInput.UserNameOrEmailAddress" class="form-label"></label>
                    <input asp-for="LoginInput.UserNameOrEmailAddress" class="form-control"/>
                    <span asp-validation-for="LoginInput.UserNameOrEmailAddress" class="text-danger"></span>
                </div>
                <div class="mb-3">
                    <label asp-for="LoginInput.Password" class="form-label"></label>
                    <input asp-for="LoginInput.Password" class="form-control"/>
                    <span asp-validation-for="LoginInput.Password" class="text-danger"></span>
                </div>
                <abp-row>
                    <abp-column>
                        <abp-input asp-for="LoginInput.RememberMe" class="mb-4"/>
                    </abp-column>
                    <abp-column class="text-end">
                        <a href="@Url.Page("./ForgotPassword", new {returnUrl = Model.ReturnUrl, returnUrlHash = Model.ReturnUrlHash})">@L["ForgotPassword"]</a>
                    </abp-column>
                </abp-row>
                <div class="d-grid gap-2">
                    <abp-button type="submit" button-type="Primary" name="Action" value="Login" class="btn-lg mt-3">@L["Login"]</abp-button>
                    @if (Model.ShowCancelButton)
                    {
                        <abp-button type="submit" button-type="Secondary" formnovalidate="formnovalidate" name="Action" value="Cancel" class="btn-lg mt-3">@L["Cancel"]</abp-button>
                    }
                </div>
            </form>
        }
    </div>
</div>

要 Override 的檔案如下所示，

測試

1.使用 tenant1User1@gss.com.tw 登入後，可以發現已自動切到所屬的 T1 租戶，並會將該 T1 租戶 Id 寫到 _tenant Cookie

2.使用 tenant2User2@gss.com.tw 登入後，可以發現已自動切到所屬的 T2 租戶，並會將該 T2 租戶 Id 寫到 _tenant Cookie

結論

從上面我們可以學習到以下幾點，

  1. 如何客製 ABP Module
  2. 透過 IDataFilter.Disable<IMultiTenant>() 來讓 using 區塊中的查詢不會依租戶來篩選資料
  3. 透過 CurrentTenant.Change(tenantId) 來切換到不同的租戶
  4. 要將 租戶資訊寫到 Cookie ，可以使用 AbpMultiTenancyCookieHelper.SetTenantCookie

參考資源

Hide Tenant Switch from an ABP Framework Login page
ABP ASP.NET Core (MVC / Razor Pages) User Interface Customization Guide
ABP Get tenant ID from user table.

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

大家好，我是亂馬客 Rainmaker，目前任職於叡揚資訊，大家也都叫我 RM 。 平常負責開發公司各產品線的加值、共用的軟體，例如 Azure, OpenAI, Chatbot, Database ... 同時 Support 公司各種技術及資安修改問題。 Blog中的內容也是個人的看法， 如果有需要討論的地方， 可以留言，或是 mail 給我 :) rainmaker_ho@gss.com.tw