Trong bài viết này mình sẽ hướng dẫn các bạn cách sử dụng phần mềm Charles Proxy để tiến hành debug (gỡ lỗi) trên thiết bị Android.
Nếu các bạn chưa cài đặt và config setting Charles thì có thể xem ở bài viết trước.
Ở bài viết trước mình đã hướng dẫn cách cài đặt, config Charless trên máy ảo Android và IOS.
1. Setting Up Your Project
Nếu thiết bị test của bạn đang chạy Android 7.0 trở lên, thì sẽ có thêm một vài bước để đảm bảo rằng bạn hoàn toàn tin tưởng (trust) vào Chứng chỉ Charles CA. Để đảm bảo Android tin tưởng vào chứng chỉ, bạn sẽ cần chỉ định Cấu hình bảo mật mạng cho ứng dụng của mình. Có một số cách khác nhau để thêm chứng chỉ của bạn vào trusted configuration của ứng dụng, nhưng cách dễ nhất không phải là bao gồm chứng chỉ Charles trong mã code ứng dụng, mà chỉ cần trust vào chứng chỉ CA do người dùng cài đặt (như các phiên bản Android trước đây dùng để làm).
Thêm thuộc tính android: networkSecurityConfig vào thẻ application trong tệp AndroidManifest.xml của bạn:
1 2 3 4 5 6 7 8 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>application</span> <span class="token attr-name"><span class="token namespace">android:</span>allowBackup</span><span class="token attr-value"><span class="token punctuation">=</span>”true”</span> <span class="token attr-name"><span class="token namespace">android:</span>icon</span><span class="token attr-value"><span class="token punctuation">=</span>”@mipmap/ic_launcher”</span> <span class="token attr-name"><span class="token namespace">android:</span>label</span><span class="token attr-value"><span class="token punctuation">=</span>”@string/app_name”</span> <span class="token attr-name"><span class="token namespace">android:</span>roundIcon</span><span class="token attr-value"><span class="token punctuation">=</span>”@mipmap/ic_launcher_round”</span> <span class="token attr-name"><span class="token namespace">android:</span>supportsRtl</span><span class="token attr-value"><span class="token punctuation">=</span>”true”</span> <span class="token attr-name"><span class="token namespace">android:</span>theme</span><span class="token attr-value"><span class="token punctuation">=</span>”@style/AppTheme”</span> <span class="token attr-name"><span class="token namespace">android:</span>networkSecurityConfig</span><span class="token attr-value"><span class="token punctuation">=</span>”@xml/network_security_config”</span><span class="token punctuation">></span></span> |
Tạo file config networksecurityconfig.xml:
1 2 3 4 5 6 7 8 9 10 | <span class="token prolog"><?xml version="1.0" encoding="utf-8"?></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>network-security-config</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>debug-overrides</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>trust-anchors</span><span class="token punctuation">></span></span> <span class="token comment"><!-- Trust user added CAs while debuggable only --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>certificates</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>trust-anchors</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>debug-overrides</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>network-security-config</span><span class="token punctuation">></span></span> |
2. Setting Up Charles
Mở Charles và sau đó chọn* Proxy > Proxy Settings* từ thanh công cụ toolbar. Bạn sẽ cần lưu ý Cổng HTTP Proxy được chỉ định.
Sau đó mở Proxy > SSL Proxying Settings từ thanh công cụ và thêm địa chỉ Server/Port (máy chủ / cổng) thích hợp mà bạn muốn debug. Ví dụ:
3. Setting Up Your Android device
Trước tiên, hãy lưu ý địa chỉ IP local của bạn trong mạng cục bộ (local network). Bạn sẽ dùng nó trong bước tiếp theo.
Ngoài ra, hãy đảm bảo Charles đang mở và máy tính của bạn cùng kết nối một mạng wifi với thiết bị Android mà bạn sẽ cài đặt.
Đi đến thiết bị của bạn cài đặt và cấu hình wifi. (Các bạn có thể xem cụ thể hơn ở bài viết trước)
Nhấn và giữ vào mạng mà bạn sẽ sử dụng và chọn Modify network( Sửa đổi mạng ).
Sau đó chọn Advanced Options and scroll xuống dưới bạn sẽ thấy Proxy.
Chọn Manual trong menu Proxy.
Đối với tên máy chủ Proxy nhập địa chỉ IP của bạn mà bạn đã lưu ý ở trên.
Sau đó, đối với cổng Proxy, hãy sử dụng Cổng Proxy HTTP mà bạn đã lưu ý từ Cài đặt Proxy Charles ở trên.
Sau đó nhấn SAVE.
Sau khi lưu, bạn có thể nhận thấy một cửa sổ bật lên trên máy Mac của mình như thế này:
Nhấn Cho phép để cho phép thiết bị Android của bạn kết nối với Charles thông qua proxy mà nó đã thiết lập.
Nếu bạn không thấy thông báo trên, bạn có thể đảm bảo rằng thiết bị của bạn có thể sử dụng proxy từ bên trong Charles bằng cách truy cập Proxy > Access Control Settings và thêm địa chỉ IP của thiết bị Android trên mạng wifi.
Tiếp tục, trên thiết bị Android của bạn, hãy mở trình duyệt và truy cập URL sau chls.pro/ssl.
Bạn cũng có thể xem các hướng dẫn này từ trong ứng dụng Charles – chọn Help > SSL Proxying > Install Charles Root Certificate on a Mobile Device or Remote Browser trên thanh công cụ.
Trình duyệt tải xuống chứng chỉ và sau khi hoàn tất, chạm để mở tệp. Sau đó, Android sẽ thông báo để bạn tiến hành cài đặt tệp vừa download.
Sau khi bạn đặt tên cho chứng chỉ và nhấn OK, bạn sẽ được thông báo nhập mã pin / mật khẩu của thiết bị hoặc được thông báo thiết lập pin / mật khẩu thiết bị của bạn. Khi quá trình đó hoàn tất, bạn đã có thể tiến hành thực hiện 1 vài request debug.
Lưu ý Cho đến khi bạn xóa proxy thủ công khỏi thiết bị này Cấu hình wifi, bất cứ khi nào bạn sử dụng lại mạng này, bạn sẽ cần phải mở Charles và chạy trên cùng một địa chỉ IP. Bạn luôn có thể đặt cấu hình mạng trở lại Proxy. Bạn có thể đặt cấu hình mạng trở lại Proxy: None khi bạn đã debug xong.
4. Using An Emulator
Theo hướng dẫn từ trang chủ Charles, bạn có thể start trình giả lập bằng flag để sử dụng proxy.
In the Android emulator run configuration add an Additional Emulator Command Line Option:
-http-proxy http://LOCAL_IP:8888Where LOCAL_IP is the IP address of your computer, not 127.0.0.1 as that is the IP address of the emulated phone.
Có nghĩa là:
Trong cấu hình chạy trình giả lập Android, thêm tùy chọn dòng lệnh bổ sung:
-http-proxy http: // LOCAL_IP: 8888Trong đó LOCAL_IP là địa chỉ IP của máy tính của bạn, không phải 127.0.0.1 vì đó là địa chỉ IP của điện thoại được mô phỏng.
Command đầy đủ sẽ là:
1 2 | emulator -avd EMULATOR_NAME -http-proxy IP_ADDRESS:PORT |
Và bây giờ, Sau khi bạn đã hoàn tất thiết lập , bạn sẽ thấy Charles ghi lưu lượng truy cập từ thiết bị của mình. Miễn là bạn được cấu hình đúng cách, bạn sẽ thấy các chi tiết yêu cầu SSL đó từ các địa chỉ host bạn đã chỉ định trong *Charles’ SSL Proxying Settings*.
Thanks for reading!