You are currently viewing Tạo login form cho Cloudpage

Tạo login form cho Cloudpage

Trong bài trước Gâu Đần đã hướng dẫn bạn cách để giới hạn truy cập Cloudpage thông qua địa chỉ IP.  Hôm nay thì mình sẽ hướng dẫn cách bảo mật Cloudpage bằng cách thiết lập một trang đăng nhập.

Chỉ một vài thao tác đơn giản trên SFMC Cloudpage, bạn đã có thể yêu cầu người dùng nhập tên đăng nhập/mật khẩu để truy cập Cloudpage. Đây là cách bảo vệ thông tin của trang Cloudpage mà không quá phức tạp. Vậy hãy cùng mình khám phá cách thức trong bài viết này nhé!

Tạo biểu mẫu đăng nhập

Đây là một login form mình lấy từ w3school có chỉnh sửa lại một chút.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <style>
        /* Bordered form */
form {
    border: 3px solid #f1f1f1;
  }
  
  /* Full-width inputs */
  input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  
  /* Set a style for all buttons */
  button {
    background-color: #04AA6D;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
  }
  
  /* Add a hover effect for buttons */
  button:hover {
    opacity: 0.8;
  }
  
  /* Extra style for the cancel button (red) */
  .cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
  }
  
  /* Center the avatar image inside this container */
  .imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
  }
  
  /* Avatar image */
  img.avatar {
    width: 40%;
    border-radius: 50%;
  }
  
  /* Add padding to containers */
  .container {
    padding: 16px;
  }
  
  /* The "Forgot password" text */
  span.psw {
    float: right;
    padding-top: 16px;
  }
  
  /* Change styles for span and cancel button on extra small screens */
  @media screen and (max-width: 300px) {
    span.psw {
      display: block;
      float: none;
    }
    .cancelbtn {
      width: 100%;
    }
  }
    </style>
</head>
<body>
<div max-width="600px" align="center" margin="auto" width="600px">
    <form action="Your Cloudpage URL" method="post" style="max-width: 600px;">
        <div class="imgcontainer">
          <img src="https://gaudan.net/wp-content/uploads/2024/06/img_avatar2.png" alt="Avatar" class="avatar">
        </div>
      
        <div class="container">
          <label for="userName"><b>Username</b></label>
          <input type="text" placeholder="Enter Username" name="userName" required>
      
          <label for="password"><b>Password</b></label>
          <input type="password" placeholder="Enter Password" name="password" required>
      
          <button type="submit" name="submit" value="true" >Login</button>
        </div>
      </form>
</div>          
</body>
</html>

Trông nó sẽ như thế này:

Lên ý tưởng

Khi một người truy cập vào trang Cloudpage của ta sẽ có 03 trường hợp xảy ra sau đây:

  • Nếu chưa từng đăng nhập: hiện ra login form để đăng nhập.
  • Đăng nhập đúng Username và Password: hiện trang thông tin chính (E.g. Authenticated)
  • Đăng nhập sai Username và Password: hiện trang từ chối (E.g. Unauthenticated)

Vậy sẽ 03 giá trị ta cần thu thập được đó là:

  • Giá trị submit
  • Giá trị Username
  • Giá trị Password

Username và Password khi nhập vào login form

Username: admin

Password: admin

Coding

Như ở trên Gâu Đần đã đề cập. Ta cần thu thập được 03 giá trị submit, Username, Password.

3 giá trị này có được khi người dùng đăng nhập và submit ở login form. Vì thế ta có thể dùng function GetQueryStringParameter để lấy 3 giá trị này

<script runat="server">
Platform.Load("Core", "1");
var userName = Request.GetQueryStringParameter("userName");
var password = Request.GetQueryStringParameter("password");
var submit = Request.GetQueryStringParameter("submit");
</script>

Đến đây thì ta áp dụng 3 trường hợp có thể xảy ra như trên:

<script runat="server">
Platform.Load("Core", "1");
var userName = Request.GetQueryStringParameter("userName");
var password = Request.GetQueryStringParameter("password");
var submit = Request.GetQueryStringParameter("submit");

if (submit != "true") {
</script>

<!-- Your login form -->

<script runat="server">
Platform.Load("Core", "1");   
} else if (submit == "true" && userName == "admin" && password == "admin") {
</script>

<!-- Login and match username and password  -->
<h1>Authenticated</h1>

<script runat="server">
Platform.Load("Core", "1");
} else {
</script>

<!-- Login but NOT match username and password  -->
<h1>Unauthenticated</h1>

<script runat="server">
Platform.Load("Core", "1");
}
</script>

Full script

<script runat="server">
Platform.Load("Core", "1");
var userName = Request.GetQueryStringParameter("userName");
var password = Request.GetQueryStringParameter("password");
var submit = Request.GetQueryStringParameter("submit");

if (submit != "true") {
</script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <style>
        /* Bordered form */
form {
    border: 3px solid #f1f1f1;
  }
  
  /* Full-width inputs */
  input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  
  /* Set a style for all buttons */
  button {
    background-color: #04AA6D;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
  }
  
  /* Add a hover effect for buttons */
  button:hover {
    opacity: 0.8;
  }
  
  /* Extra style for the cancel button (red) */
  .cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
  }
  
  /* Center the avatar image inside this container */
  .imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
  }
  
  /* Avatar image */
  img.avatar {
    width: 40%;
    border-radius: 50%;
  }
  
  /* Add padding to containers */
  .container {
    padding: 16px;
  }
  
  /* The "Forgot password" text */
  span.psw {
    float: right;
    padding-top: 16px;
  }
  
  /* Change styles for span and cancel button on extra small screens */
  @media screen and (max-width: 300px) {
    span.psw {
      display: block;
      float: none;
    }
    .cancelbtn {
      width: 100%;
    }
  }
    </style>
</head>
<body>
<div max-width="600px" align="center" margin="auto" width="600px">
    <form action="Your Cloudpage URL" method="post" style="max-width: 600px;">
        <div class="imgcontainer">
          <img src="https://gaudan.net/wp-content/uploads/2024/06/img_avatar2.png" alt="Avatar" class="avatar">
        </div>
      
        <div class="container">
          <label for="userName"><b>Username</b></label>
          <input type="text" placeholder="Enter Username" name="userName" required>
      
          <label for="password"><b>Password</b></label>
          <input type="password" placeholder="Enter Password" name="password" required>
      
          <button type="submit" name="submit" value="true" >Login</button>
        </div>
      </form>
</div>          
</body>
</html>
<script runat="server">
Platform.Load("Core", "1");   
} else if (submit == "true" && userName == "admin" && password == "admin") {
</script>
<h1>Authenticated</h1>
<script runat="server">
Platform.Load("Core", "1");
} else {
</script>
<h1>Unauthenticated</h1>
<script runat="server">
Platform.Load("Core", "1");
}
</script>

Conclusion

Như vậy các bạn đã biết cách bảo vệ Cloudpage của mình bằng cách thiết lập một biểu mẫu đăng nhập đơn giản rồi đúng không?! Hy vọng bài viết này hữu ích cho việc quản lý truy cập Cloudpage. Nếu cần mình hỗ trợ gì nữa đừng ngần ngại hỏi lại nhé. Tiếp tục theo dõi các bài viết hữu ích về Salesforce Marketing Cloud từ mình. Hẹn gặp lại các bạn trong những chia sẻ tới!

#MarketingCloud #Salesforce #MarketingChampions

Leave a Reply