這次想要練練登入，這篇主要是前端登入畫面使用 Reactive Form ，後端則是用 JWT ，到最後使用 Storage 把 token 存起來。 Route Guards 跟 Interceptor 的部分會留在下一篇。

後端 & JWT

我後端 Web API 的加入 JWT 部分在參考下面連結跟他的 github repo:
Authentication and Authorization with JWS (JSON Web Tokens) .NET Web API
https://github.com/matvi/JWT

我準備了 LoginModel ，用來接使用者輸入的帳號密碼
另外一個類別 User 是存一些基本的使用者資訊到 Token ，讓前端可以使用。

    public class LoginModel
    {
        [Required]
        public string UserName { get; set; }

        [Required]
        [DataType(DataType.Password)]
        public string Password { get; set; }
    }

    public class User
    {
        public string UserName { get; set; }

        public string Name { get; set; }

        public string Role { get; set; }
    }

主要的 Login API 輸入帳號密碼，最後回傳帶著 User 資料的 Token，如果帳號密碼錯誤的話，回傳 401。
[AllowAnonymous] 允許所有人存取 Login API
[JwtAuthentication] 則是用來驗證 API

    [EnableCors(origins: "*", headers: "*", methods: "*")]
    [RoutePrefix("api/Demo3")]
    [JwtAuthentication]
    public class Demo3Controller : ApiController
    {
        [HttpPost]
        [AllowAnonymous]
        [Route("Login")]
        public IHttpActionResult Login(LoginModel model)
        {
            if(!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            if (CheckUser(model))
            {
                string info = JsonConvert.SerializeObject(new User() { 
                     Name = "小明",
                     UserName = "pzeroeighttwo0@gmail.com",
                     Role = "Admin"
                });
                return Ok(JwtManager.GenerateToken(info));
            }
            return Unauthorized();
        }

        private static bool CheckUser(LoginModel model)
        {
            // 寫一些驗證帳號密碼的邏輯
            return model.UserName == "pzeroeighttwo0@gmail.com" && model.Password == "P@ssW0rd";
        }
    }

使用 Postman 做測試
打 api/Demo3/Login 登入取得 Token

測試隨便一隻 API 測試 Token 得到 200 OK 去得到資料

如果沒有帶 Token 的話得到 401

Login 畫面

新增一個 login page

ionic generate page login

建立 login-model.ts

在 login.module.ts 加入 ReactiveFormsModule

login.page.html

login.page.ts

結果

擦汗!! 登入比我想像中難。
下一篇會實作 Route Guards 跟 Interceptor 的部分。