Hướng dẫn

Customize the Azure AD B2C user interface (UI)

Azure Active Directory B2C là 1 giải pháp quản lý xác thực cho các ứng dụng web và điện thoại bằng cách sử dụng email hoặc các tài khoản socials (facebook, twitter,…). Nói sơ vậy hoy, khái niệm về Azure AD B2C là gì thì các bạn tự tìm hiểu thêm nha. Trong bài này mình sẽ hướng dẫn các bạn từng bước để custom cho giao diện các trang login, signup,… của nó. Tại nó hữu dụng mà giao diện nó xấu òm hà. Vầy nè vầy nè…

Screen Shot 2017-06-04 at 9.36.23 PM

Vậy làm sao để có được hình nền, logo hay bố cục giống ý mình muốn đây?

Screen Shot 2017-06-04 at 11.11.02 PM.png

Đó, nó khác hơn đồ gốc rồi đó thấy hơm? Tuy là có hơi í ẹ tí nhưng mà mình tin bạn sẽ làm được đẹp hơn mình mà há ^^

Bước 1: Làm đẹp UI

Tạo 1 trang html trong đó có element là <div id=”api”>< /div> đặt ở đâu đó trong thẻ body. Phần này khi hiển thị lên web thì nội dung của Azure AD B2C sẽ được tự động thêm vào.  Rồi sau đó cứ style cho nó như 1 trang web thông thuờng.

Chẳng hạn như ở đây mình tạo file unified.html có nội dung như sau:

Screen Shot 2017-06-04 at 11.32.33 PM.png

Còn css thì mình style kiểu kiểu vầy

Screen Shot 2017-06-04 at 11.32.54 PMScreen Shot 2017-06-04 at 11.37.28 PM.png

(Bạn có thể tham khảo thêm ở đây: https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-ui-customization)

Bước 2: Host files

Bạn có thể up các file html, css, hình,… ở đâu đó. Ở đây, mình sử dụng Azure Blob Storage

  • New -> Storage -> Storage account – blob, file, table, queue
  • Điền thông tin
  • Tạo container với access type là blob
  • Up hết các files vào đây. Có thể sử dụng Microsoft Azure Storage Explorer (http://storageexplorer.com/) để quản lý files cho dễ dàng.

Bước 3: Configure CORS

Trong phần setting của storage, bạn chọn CORS.

  • Click vào Add.
  • Đặt giá trị cho Allowed origins là *.
  • Chọn GET và OPTIONS cho phần Allowed verbs.
  • Đặt giá trị cho Allowed headers là *.
  • Đặt giá trị cho Exposed headers là *.
  • Maximum age (seconds) là 200.

Screen Shot 2017-06-04 at 10.34.29 PM.png

Bước 4: Tạo policy và trỏ tới Custom page URI

Trong Azure AD B2C Settings. Bạn sẽ tạo các policy mà mình muốn. Chẳng hạn như ở đây mình tạo Sign-up or sign-in policy. Ở phần điền thông tin bạn chọn vào “Page UI customization” ở dưới cùng. Xong nó sẽ có phần “Unified sign-up or sign-in page”. Trong phần này bạn sẽ thiết lập để trỏ tới đường dẫn chứa các file của mình:

Screen Shot 2017-06-04 at 10.08.53 PM.png

Ok, done. Bạn có thể vào trang này https://aadb2cplayground.azurewebsites.net/ để test thử các policies của mình cũng được nè.

Blog

Chuyện ở OSD

Cho dù giữa cuộc đời khô cằn, mình vẫn muốn bày tỏ sự chân thành của mình đối với những người mà mình đáng quý. Bài blog này xem như là món quà chia tay mình dành cho OSD. Thật ra thì cũng không định viết blog đâu. Chỉ là chia tay một cty mới làm đây chưa được 1 năm cơ mà. Nhưng mà ko biết ở đâu những kỷ niệm về khoảng thời gian vừa qua tự nhiên nó lại ùn ùn ùa về.

Có một anh lead cực kỳ tận tuỵ, cứ đi sớm về trễ. Việc bù đầu bù cổ nhưng chưa bao giờ một lần lớn tiếng với ai trong team. Mỗi lần vướng cái gì khó, ảnh ngồi kế bên vừa làm vừa chỉ mình. Lúc đó mới thấy nể ảnh gì đâu. Giỏi gì giỏi dữ. Rồi mỗi lần muốn hỏi gì cái mình tung ta tung tăng chạy lại hỏi, ảnh ngước lên cười hiền hoà rồi hỏi “Sao em?”. Phái phái, nhỏ này mê trai bây…. Thật ra thì hỏng phải vậy đâu, giữa những giây phút làm việc căng thẳng áp lực mà thấy ai cười rồi nói chuyện nhẹ nhàng với mình là thấy lòng ấm hẳn lại (Nói hồi sao vẫn thấy còn hơi lộ mê trai quá. Thôi mình xin dừng ở đây và ko nói gì thêm *mặt ngại* )

Có anh, task chưa xong mà cứ nhiệt tình bỏ thời gian ra để ngồi chỉ cho mình. Xong rồi việc của ảnh chưa xong nên tối tối lại phải về muộn.

Có chị, tuy là lời nói hơi lạnh lùng cũng chút bạo lực. Chẳng hạn như “ta vặn đầu mi bây giờ”. Vậy đó mà lại cực kỳ quan tâm mình.

Có anh, chắc cũng bận lắm mà tự nhiên mình muốn hỏi gì cái ảnh lại nói “Hỏi đi. Đang ngồi buồn mong có người hỏi gì đó nè”.

Thôi, có cơ hội để thổ lộ ra với những người mình đáng quý nhiêu đây là đủ rồi. Giờ nói về mình học được gì ở OSD ha.

Nhiều khi vô tình hỏi mình học được những gì trong thời gian qua rồi cái cũng ko biết nói sao. Theo cảm nhận của mình thì thấy nó cứ ngang ngang nhau, chả nổi trội gì cả. Nhưng rồi trong đêm tâm trạng như hôm nay, ngồi ngẫm lại thời gian qua mình học được cũng bộn thứ:

Về kỹ thuật:

  • Biết rành hơn về HTML, CSS
  • Từ 1 đứa ko biết gì về angular, giờ biết chắc cũng được 40-50% gì đó. Mà rành về angular 2 hơn.
  • .NET chắc cũng tăng level lên được hơn.
  • Biết thêm được về Elasticsearch.
  • Có cơ hội vọc vạch và biết sâu hơn về Azure

Ngoài ra thì về mặt để tạo nên 1 lập trình viên giỏi, mình cũng học được về nguyên lý SOLID (hông sure là mình nắm rõ nó nhưng ít ra cũng biết sự có mặt của nó và biết được sơ sơ để chém gió tỏ vẻ nguy hiểm. hí hí hí) vận dụng vào để code cho chuyên nghiệp hơn (cốt là cũng muốn tỏ vẻ nguy hiểm tiếp) mà cũng để dễ dàng quản lý và bảo trì.

Rồi được biết về clean code nè. Rồi về scrum nè. Biết nhiều hơn và hiểu sâu hơn về git và tfs. Rồi sơ sơ về deploy trên jenkins nữa. Pla pla pla…

Ồ, kể ra mình học cũng được nhiều dữ ta. Có đôi lúc thấy nó chả là gì nhưng có đôi lúc nói chuyện với bạn, có thể về mặt kiến thức thì mình thua người ta nhưng về cách làm việc đồ này nọ thì mình sẵn sàng chém gió. Huý huý…

À mà mình cũng hờn OSD về chuyện ăn sáng nữa. Sáng sáng đi làm vô ăn đồ ăn sáng của OSD xong là no bể bụng. Mỗi lần tới giờ cơm là cứ ngao ngán nói “no quá sao ăn cơm giờ” 😦

Hơizz… Chợt thấy, tình cảm là thứ gì đó thiệt ghê gớm… Hừm, thiệt khó để chấm dứt… Hừm, lời chia tay thiệt khó để nói ra 😥 Đêm nay và cả những ngày tiếp theo chắc sẽ là những đêm dài đầy tâm trạng…

Hướng dẫn

Bảo mật file trên Azure Blob Storage với Shared Access Signatures (SAS)

Trong cả đống chức năng của Azure thì em này ẻm có tính năng lưu trữ file như document, hình, video, pla pla pla…. gọi là blob storage. Cụ thể về blob storage là gì thì mình sẽ ko nói trong bài viết này, các bạn có thể google để biết rõ hơn về nó. Mình xin phép đi thẳng vào vấn đề chính là bảo mật file trên Azure Blob Storage.


Vấn Đề

Chúng ta lưu file trên Azure Blob Storage, nếu có đường dẫn của file là ai cũng có thể truy cập vào cái file đó được. Vậy rồi làm sao bảo mật cho file đó được đây?

Giải Pháp

Hừmmm…. Để bảo mật cho một file nào đó của mình trên Azure Blob Storage thì giải pháp của mình là sẽ sử dụng Shared Access Signatures (SAS). Với SAS, chúng ta có thể gán quyền truy cập vào file cho client mà ko cần chia sẻ account keys của blob storage. SAS sẽ thiết lập các quyền đọc ghi file. Mà nếu set quyền chung chung như vậy thì ai cũng có quyền truy cập vào file đó được mà? Vậy nên mình sẽ làm theo kiểu là đầu tiên mình sẽ tạo ra 1 cái SAS với cái quyền là đọc file đó trong 1 khoảng thời gian. Sau đó mình sẽ đọc nội dung file bằng cách truy cập vào link có chứa 1 đoạn token do SAS tạo ra rồi lưu ra binary. Khi hoàn tất, mình sẽ xóa cái SAS đó.

Khi chúng ta thiết lập quyền ko cho truy cập file, nếu bạn truy cập đến đường dẫn đó thì sẽ nhận được thông báo:

Còn khi bạn truy cập vào đường dẫn có token mà trong thời gian hết hiệu lực của SAS thì sẽ nhận được thông báo:


Thực Hiện

Bước 1: Đặt access type của container thành “Private”

Bạn có thể thiết lập access type của container thành “Private” bằng 2 cách:

  • Thiết lập bằng tay trên Azure Portal


  • Thiết lập bằng code


Bước 2: Tạo quyền cho file

Đầu tiên chúng ta sẽ khai báo access policy name và gọi tới hàm CreateSharedAccessPolicy


Chúng ta có thể tạo quyền truy cập mới mỗi khi chúng ta muốn truy cập đến file. Ở đây có một vấn đề là nếu tên của access policy mà ko đổi thì link truy cập file sẽ ko thay đổi nên mình nghĩ chúng ta có thể đặt tên cho cái access policy là dạng username + ngày giờ hiện tại để mỗi lần tạo ra nó sẽ tạo ra các đường link khác nhau.

Hàm CreateSharedAccessPolicy sẽ như sau:


Bước 3: Lấy blob uri có policy


Bước 4: Đọc file


Bước 5: Xóa quyền truy cập


Bước 6: Lưu binary data ra file vật lý hoặc hiển thị popup download cho user down về

VD như mình viết 1 cái API làm mấy chuyện ở trên, giờ qua client mình sẽ call API để lấy về được binary data sau đó sẽ hiển thị popup cho người dùng download file về:

Hướng dẫn

Tạo project Angular 2 dễ dàng với Angular CLI

Để tạo 1 project Angular 2 chúng ta phải thiết lập nhiều thứ khá phức tạp. Tại sự kiện ng-conf 2016, đội ngũ Angular đã giới thiệu 1 công cụ giúp chúng ta tạo 1 ứng dụng Angular 2 với cái khung có sẵn một cách nhanh chóng và dễ dàng. Thiết lập thư mục git rồi unit test rồi e2e test đồ cho mình luôn. Ghê chưa ghê chưa?!??!!


Các bạn có thể vào trang https://cli.angular.io/ để xem thêm thông tin chi tiết. Còn bây giờ mình xin bước vào vấn đề chính là hướng dẫn các bạn từng bước để tạo ra được một ứng dụng Angular 2.

Cài đặt Angular CLI

Để cài đặt CLI, chúng ta sẽ dùng câu lệnh

     npm install -g angular-cli

Khởi tạo ứng dụng

Để tạo một ứng dụng Angular 2 mới, chúng ta chỉ cần gõ

     ng new project-name

VD: ng new sampleApp

Run, Build, Test các kiểu

Giờ chúng ta bắt đầu chạy thử ứng dụng bằng lệnh

     ng serve

Để build ứng dụng thì chúng ta sẽ dùng lệnh

     ng build

Roài, để chạy unit test thì chúng ta sử dụng lệnh

     ng test

Còn test e2e thì dùng lệnh

     ng e2e

Mới có 2 câu lệnh mà đã chạy được cả đống như vậy. Kinh chưa?!??

Tạo Component

Hồi trước tạo component là phải ngồi tạo từng file, nào là html rồi css rồi ts các kiểu. Lại còn phải khai báo định nghĩa này nọ để liên kết các file lại với nhau.

Giờ một đống này sẽ tự động phát sinh khi bạn dùng lệnh

          ng g component my-new-component

VD: ng g component hello


Tương tự, để tạo một cái gì đó thì bạn cứ thẳng tay gõ:

Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module
Route ng g route my-route
Hướng dẫn

Unit Test trong Angular 2


Trước khi bắt đầu thì mình xin nói sơ qua 1 chút về unit test là gì.

Viết unit test là cái quái gì nhờ?

Hừm… Unit test là một đoạn code dùng để giả lập tự động kiểm thử cho một chức năng nào đó. Trong mỗi unit test chúng ta sẽ đưa ra mong muốn trả về cho đoạn test đó. Unit test hoạt động liên tục hoặc định kỳ để thăm dò và phát hiện những thay đổi nên chúng ta cũng có thể gọi nó là kiểm thử tự động.

Hoy nói nhiêu đó được rồi he, giờ mình bắt tay vào làm nè… Đầu tiên thì phải setup 1 cái app cái đã.

Setup project angular cơ bản và môi trường

  1. Cài đặt NodeJS
  2. Tạo file package.json


  3. Tạo file tsconfig.json


  4. Tạo file typings.json


  5. Tạo file systemjs.config.js



3. Cài các modules bằng lệnh npm install

Tạo ứng dụng cơ bản

  1. Tạo thư mục app
  2. Tạo file app.module.ts trong thư mục app


  3. Tạo file app.component.ts trong thư mục app


  4. Tạo file main.ts trong thư mục app


  5. Tạo file index.html trong thư mục gốc


Đến đây thì đã thiết lập xong cái project cơ bản rồi. Mình tiếp vào các thiết lập cho unit test

Thiết lập môi trường cho unit test

  1. Tạo file karma-test-shim.js


  2. Tạo file karma.conf.js





  3. Cài karma: npm install karma
  4. Cài plugin: npm install karma-jasmine karma-chrome-launcher
  5. Tạo file simple test simple.spec.ts


  6. Ok, bây giờ thì mình sẽ test thử bằng lệnh npm test

Vậy là xong 😀

Hướng dẫn

Facebook Authentication with Windows 10 (UWP App)

Ngày nay việc đăng nhập tài khoản bằng tài khoản facebook trong các ứng dụng ngày càng phổ biến. Hôm nay mình sẽ hướng dẫn các bạn các bước để xác thực tài khoản bằng tài khoản facebook.

040816_0958_FacebookAut1.png1. Get SID

– Đăng nhập Windows Dev Center –> Dashboard sau đó tạo app mới.

– Vào phần “App identify” trong đó bạn sẽ thấy “Package Family Name” rồi “Package SID”

Rồi, tạm thời để đó, lát xài :3

2. Tạo App trên Facebook

– Vào trang Facebook for Developers

– Bên góc phải chỗ avatar có chữ “My App” bấm mũi tên sổ chỗ đó chọn “Add a new app” –> “Basic setup”.

– Nhập thông tin app vào –> “Create App ID”

3. Add Platform

– Vào Settings –> Add Platform –> Windows App.

– Tới đây copy cái SID nãy trong phần “App identify” bên Dev Center vô. Store ID sẽ có dạng “s-1-15-2…..”

– Còn App ID là cái chuỗi số chữ từa lưa trong link của app trong Dev Center. Dưới phần Package SID, nó có URL for Windows: https://www.microsoft.com/store/apps/9nblggh4nq6m chẳng hạn thì App ID là cái đoạn “9nblggh4nq6m” phía sau.

4. Enable OAuth Login

Vẫn trong phần Settings của Facebook for Developers. Bạn sang tab “Advance”. Kéo xuống… Ở chỗ “Client OAuth Settings” kéo thành Yes cho mục “Embedded Browser OAuth Login

040816_0958_FacebookAut2.png

5. Download Facebook SDK: tại https://github.com/Microsoft/winsdkfb.

6. Import vào project

– Giải nén file zip mới down ra

– Click phải vào Solution –> Add existing project –> “winsdkfb_uwp.vcxproj” trong đường dẫn tới thư mục mới giải nén …\winsdkfb-master\winsdkfb\winsdkfb_uwp\winsdkfb_uwp

– Click phải vào “References” của project của mình, chọn “Add Reference…” rồi chọn project winsdkfb trong Solution của mục Projects như hình bên dưới:


7. Build solution

8. Tạo giao diện

– Mở trang MainPage.xaml thêm đoạn

xmlns:fbsdk=”using:Facebook”

– Add button login

<Button x:Name=”FBLoginButton” Click=”FBLoginButton_Click” Content=”Login” />

– Add TextBlock để hiển thị câu chào

<TextBlock Name=”UserName” />

9. Code code code

– Sử dụng namespace winsdkfbwinsdkfb.Graph

using winsdkfb;
using winsdkfb.Graph;

– Tạo facebook session

FBSession sess = FBSession.ActiveSession;
sess.FBAppId = “{INSERT YOUR FB ID HERE}”;
sess.WinAppId = “{INSERT YOUR WINDOWS SID HERE}”;

– Thêm permission. Xem các loại permission tại: https://developers.facebook.com/docs/facebook-login/permissions

permissionList.Add(“public_profile”);

– Lấy kết quả đăng nhập

FBResult result = await sess.LoginAsync();

– Thêm một số điều kiện để kiểm tra để chắc chắn đăng nhập thành công và người sử dụng đã đăng nhập vào

if (result.Succeeded)
{
<span “>     
if (sess.LoggedIn)
     {
FBUser user = sess.User;
          
FBLoginButton.Visibility = Visibility.Collapse
          
UserName.Text = “Welcome “ + user.Name;
     }
else
{
//TODO: Add error 
}
}
else
{
//TODO: Add error 
}

– Túm váy lại, cả đoạn code full của mình là:

full code.PNG

Vậy là xong rồi đóa. Hí hí hí. Hị hị hị.