Set Up Google OAuth Production Bằng Đúng 1 Prompt: Khi Tôi Để Cursor Tự Bấm Qua Google Cloud Console

“Phần chán nhất khi dựng Google OAuth từng ngốn của tôi nửa ngày làm việc. Cuối tuần rồi, một AI agent xử nó gọn ghẽ trong đúng một prompt — trong khi tôi nhâm nhi cà phê.”

Tôi trì hoãn việc tích hợp Google OAuth vào yellorn.com suốt mấy tuần — không phải vì code khó, mà vì cái phần bấm chuột: lò mò qua Google Cloud Console, đặt tên project, tick consent screen, chọn scope, copy‑paste redirect URI, nhét client secret vào Cloudflare qua wrangler mà không để lộ ra terminal history.

Thứ Bảy tuần rồi tôi quyết định để agent làm.

Một prompt. Một ly cà phê. Xong.

---

Cái Prompt

Đây là nguyên văn câu tôi gõ vào Cursor:

“let’s do it for me, use chrome-devtools MCP with my google account”

Hết. Agent đã viết xong code worker, route handler, PKCE state cookie, logic auto-link cho user đã tồn tại, cả drawer React với nút “Continue with Google” — rồi dừng lại ở câu “bạn cần tự setup Google Cloud Console và Cloudflare secrets nhé.” Tôi bảo: không, mày làm hộ tao.

Và nó làm thật.

---

Agent Đã Tự Làm Những Gì (Mà Không Có Tôi)

Đây là cái nửa-ngày-công nhàm chán mà nó tự nhai trọn, từng bước, trong khi tường thuật ngược lại trong chat:

1. Mở một cửa sổ Chrome thật qua server Chrome DevTools MCP.
2. Đăng nhập Google Cloud Console bằng tài khoản Google của tôi (tôi vốn đã sign-in sẵn — nó chỉ điều hướng).
3. Tạo project mới toanh tên yellorn-prod.
4. Đi từng bước trong wizard OAuth consent screen: app name yellorn, support email hoangyell@gmail.com, audience External, đồng ý User Data Policy của Google.
5. Bấm Publish lên “In production” — đúng cái nút huỷ-diệt đó. Nó bấm thật.
6. Tạo client OAuth 2.0 Web application tên yellorn.com web client.
7. Dán https://yellorn.com vào ô authorized JavaScript origin.
8. Dán https://yellorn.com/api/auth/google/callback vào ô authorized redirect URI.
9. Đọc thẳng Client ID và Client Secret trong cái modal mà Google bật ra.
10. Nhảy về terminal và chạy npx wrangler secret put GOOGLE_OAUTH_CLIENT_ID rồi GOOGLE_OAUTH_CLIENT_SECRET trỏ vào worker Cloudflare của tôi, pipe thẳng giá trị nó vừa đọc vào.
11. Chạy npm run typecheck, npm test, rồi npm run deploy.
12. Smoke test prod bằng curl -i https://yellorn.com/api/auth/google/start?returnTo=/, parse response 302, soi lại code_challenge, state, và cookie yl_oauth_g đã ký — tất cả đều ngon.
13. Mở tab mới vào https://yellorn.com/, bấm Sign in, chụp screenshot cái CTA “Continue with Google” mới toanh và paste lại vào chat để chứng minh đã xong.

---

Cơ Chế Hoạt Động: Chrome DevTools MCP

Thứ làm chuyện này khả thi không phải model thông minh hơn, mà là pipeline tốt hơn.

Google ra mắt Chrome DevTools for agents, cho AI Agent điều khiển browser như một QA engineer. Nó hỗ trợ chuẩn MCP của Anthropic, nhưng điểm mấu chốt: MCP chỉ là tầng transport. Cốt lõi là một CLI độc lập (chrome-devtools) chạy hoàn toàn tự thân.

Agent gõ npx chrome-devtools new_page ngay trong terminal — không cần server trung gian, chỉ là CLI commands điều khiển Chrome thật với cookie thật của tôi.

• AI cũ: “Đây là các bước để cấu hình GCP…”
• AI mới: “Xong rồi. Đây là screenshot.”

Đó là khác biệt giữa một quyển công thức và một đầu bếp.

---

Bằng Chứng

Smoke test mà agent chạy trên production sau khi deploy:

$ curl -sSI 'https://yellorn.com/api/auth/google/start?returnTo=/'
HTTP/2 302
location: https://accounts.google.com/o/oauth2/v2/auth?client_id=...&response_type=code&scope=openid+email+profile&redirect_uri=https%3A%2F%2Fyellorn.com%2Fapi%2Fauth%2Fgoogle%2Fcallback&state=...&code_challenge=...&code_challenge_method=S256&access_type=online&prompt=select_account
set-cookie: yl_oauth_g=...; Path=/api/auth/google/; Secure; HttpOnly; SameSite=Lax; Max-Age=600
cache-control: no-store

Tất cả đúng: PKCE (S256), state chống CSRF, cookie HttpOnly đã ký giới hạn theo path OAuth, TTL ngắn, no-store. Agent đã nội hoá RFC 6749 và RFC 7636 từ training. Thứ duy nhất nó cần ở tôi là quyền được hành động.

---

Đúng Một Chỗ Nó Không Tự Làm Được

Nó húc đầu vào đúng một bức tường: luồng bảo mật của Google bắt tôi phải bật xác thực 2 bước (2-Step Verification) trên tài khoản trước khi cho phép tạo OAuth credentials. Agent chụp screenshot, dừng thi hành, và lịch sự nhắn: “Bước này yêu cầu thao tác thủ công của user. Vui lòng bật 2SV ở https://myaccount.google.com/security rồi bảo tôi tiếp tục.”

Tôi bật. Tôi quay lại. Nó tiếp tục đúng chỗ vừa dừng.

Đó là hành vi đúng. Một agent đủ “thông minh” để đánh xuyên qua một prompt 2FA là một agent bạn nên sa thải, dù nó viết worker code có hay đến đâu.

---

Điều Này Thực Sự Thay Đổi Gì?

Đây không phải “dấu chấm hết của DevOps” — mà là dấu chấm hết của một loại toil cụ thể: đọc setup wizard của vendor, bấm từng bước, copy-paste mấy cái ID rối rắm giữa các tab.

• Liên tục, không phải tốc độ. Tôi không phải rời khỏi chat. Chi phí context-switch từ “đang nghĩ về auth flow” sang “đang đánh nhau với Google Cloud Console UI” biến mất hoàn toàn.
• Cổ chai dịch lên tầng cao hơn. Phần khó không còn là “tôi có biết cách bấm qua GCP không?”. Mà là “tôi có biết tôi đang yêu cầu gì, và tôi có tin agent này hành động nhân danh tôi không?”.
• Bạn vẫn phải review diff. Đọc từng file agent đã đụng vào trước khi duyệt deploy. Agent có tốc độ gõ phím vô hạn; bạn vẫn là staff engineer.

---

Một Đoạn Về Bảo Mật (Vì Đương Nhiên)

Vài thứ mà tôi vẫn sẽ không làm, kể cả bây giờ:

1. Đừng bao giờ paste secret dài hạn vào trong chat. Tôi để agent shell ra ngoài và pipe thẳng secret vào wrangler secret put; secret không bao giờ xuất hiện trong transcript chat. Nếu agent của bạn từng echo lại một secret production ở dạng cleartext, hãy coi như nó đã rò rỉ và rotate ngay.
2. Rotate sau lần publish đầu tiên. Khi OAuth client đã tồn tại, hãy quay vòng (rotate) client secret và wrangler secret put lại từ máy của chính bạn. Mô hình rủi ro là “lỡ môi trường host của model có log thì sao?” — hoang tưởng kiểu này đỡ tốn tiền.
3. Khoá redirect URI chỉ dành cho prod. Tôi cố ý không thêm http://localhost vào danh sách redirect được phép trên OAuth client production. Local dev có client riêng. Một secret leaked trên laptop của đồng đội không nên mở khoá được production.
4. Audit lại consent screen. Đọc nó như một end-user sẽ đọc. Nếu agent đã tick một scope mà bạn không yêu cầu (lần này nó không, nhưng nó có thể), un-tick nó.

---

Debug: Dùng Đúng Chrome Profile Của Bạn

Mặc định, chrome-devtools-mcp khởi động một Chrome instance hoàn toàn độc lập, sử dụng profile folder riêng của nó (ví dụ: ~/.cache/chrome-devtools-mcp/chrome-profile-stable). Đây là lựa chọn cố ý về bảo mật và quyền riêng tư — agent không tự động thừa hưởng lịch sử duyệt web, cookie, và mật khẩu đã lưu của bạn trừ khi bạn cho phép.

Đó cũng là lý do tôi đã sẵn đăng nhập: agent được cấp quyền truy cập phiên đang hoạt động của tôi. Nếu agent của bạn đang mở Chrome trắng và bắt bạn đăng nhập thủ công, đây là cách sửa.

Cách 1: Flag --autoConnect (Khuyến nghị)

Chrome có workflow tích hợp sẵn để cho phép MCP server gắn vào browser đang chạy một cách an toàn.

1. Mở Chrome và điều hướng đến chrome://inspect/#remote-debugging.
2. Tick vào ô Enable remote debugging.
3. Cập nhật config MCP của bạn để thêm --autoConnect:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--autoConnect"]
    }
  }
}

Lần tiếp theo agent chạy một tác vụ liên quan đến browser, Chrome sẽ hiện một thông báo xác nhận ngay trong cửa sổ đang mở, hỏi bạn có cho phép agent gắn vào phiên này không. Bạn vẫn nắm quyền kiểm soát; agent hỏi trước.

Cách 2: Remote Debugging Port

Phương pháp cổ điển — mở một cổng debug nội bộ và trỏ config MCP vào đó.

1. Đóng Chrome hoàn toàn.

2. Khởi động Chrome từ terminal với cổng debug được chỉ định:

   macOS:

   /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

   Windows:

   start chrome --remote-debugging-port=9222

3. Cập nhật config MCP để kết nối vào cổng đó thay vì tạo profile mới:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222"]
    }
  }
}

Cả hai cách đều cho phép agent bỏ qua chế độ guest và làm việc trực tiếp với trạng thái đã đăng nhập của bạn. --autoConnect gọn hơn; remote debugging port cho bạn kiểm soát thủ công nhiều hơn. Chọn cái nào phù hợp với mức độ tin tưởng bạn dành cho agent.

---

Pro-Tips

Một vài chi tiết kỹ thuật đáng biết:

1. Cơ chế Snapshot -> UID: Khi bạn thấy Agent chạy take_snapshot, nó đang đọc Accessibility Tree (cây hỗ trợ tiếp cận) của web. Nó gán cho mỗi element một UID duy nhất. Đây là lý do nó click chuẩn 100%, không bị “ảo giác” bởi các div trùng lặp hay text bị che khuất.
2. “Piping” Secrets: Đừng bao giờ bảo Agent gõ thẳng secret vào lệnh (ví dụ: put KEY VALUE). Hãy bảo nó dùng pipe: echo -n $SECRET | npx wrangler secret put.... Cách này giúp secret không bao giờ xuất hiện trong terminal history của máy bạn.
3. Zero-Config: Chỉ cần máy có Node.js, bạn có thể bảo Agent dùng npx chrome-devtools mà không cần cài đặt gì trước. Một bộ Senior QA “mì ăn liền” đúng nghĩa.
4. Hơn cả Automation: Bạn hoàn toàn có thể bảo nó: “Code xong rồi thì chạy lighthouse_audit xem trang này có chuẩn SEO/Accessibility không”. Nó trích xuất báo cáo ngay tại cửa sổ chat.

Prompt mẫu để Agent “tự múa”

Copy câu này vào chat để Agent của bạn bắt đầu hành động:

“Hãy dùng chrome-devtools CLI (gói chrome-devtools-mcp) để mở [URL], check list_pages, chụp take_snapshot để lấy UID, sau đó thực hiện [Hành động] và cuối cùng là take_screenshot lưu vào static/proof.png để báo cáo.”

---

Thử Ngay (CLI First)

Đừng đợi đến khi các IDE cập nhật chuẩn MCP. Nếu agent của bạn có quyền truy cập Terminal (như Claude Code, Gemini CLI, hay chính Cursor ở chế độ terminal), hãy bắt nó sử dụng sức mạnh của Chrome DevTools trực tiếp qua npx:

npx -y --package chrome-devtools-mcp chrome-devtools --help

Đưa cho nó một yêu cầu đơn giản rồi đi uống cà phê. Việc của bạn đã chuyển từ bấm setup wizard sang giám sát kết quả.

---

Đọc bản tiếng Anh: Production Google OAuth In One Prompt.