Cần sự trợ giúp về lỗi sveltia cms với sveltekit

#1

Chào anh em

Mình có một vài thắc mắc cần anh em giúp. Mình đang build một website viết bằng sveltekit và tích hợp sveltia cms. Tuy nhiên, khi truy cập vào phần admin theo đường dẫn url của website là zsr.vercel.app/admin hay ở localhost:5173/admin/index.html và chọn vào phần login to github thì nó báo là lỗi 404. Khi mình kiểm tra console thì nó báo là

Erroroauth:1 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: https://zsr.vercel.app/_app/immutable/entry/start.DtRM1Y6A.jsErroroauth:1 Request unavailable in the network panel, try reloading the inspected page Failed to load resource: the server responded with a status of 404 ()

, khi mình đóng lại thì nó hiện ra thông báo là Authentication aborted. Please try again. Mình rất mong anh em có thể giúp mình, cảm ơn.

Đây là repo của dự án anh em có thể click vào đây, vị trí lưu trữ Website nằm trong thu mục /site/htdocs

#2
  1. You are running a server on localhost, port 5173. Can you show us the index.html file in the admin directory?
  2. The error message is so clear that all you have to do is google the number 404 and you will know what to do.
#3

It could be due to an oauth configuration error or something else. The index file is in the static/admin/ directory. I checked and found it is due to oauth error but I don’t know how to fix it and make sure it is compatible with sveltekit and sveltia cms.

#4

Vấn đề có vẻ như từ file site/htdocs/static/admin/config.yml của bạn.

Bỏ 2 cái base_url + auth_endpoint đi xem sao.

backend:
  base_url: https://zsr.vercel.app
  auth_endpoint: oauth
2 Likes
#5

Em đã bỏ đi rồi nhưng nó không đăng nhập được vào github của em mà nó lại nhảy ra netlify. Trong khi đó, em sử dụng vercel nên không thể login vào netllify được, em có đọc tài liệu của sveltia cms thì nó có một tập lệnh oauth nhưng nó chỉ hoạt động được với netlify và Cloudflare. LIệu anh có cách nào để nó hoạt động với vercel không ạ? Em cảm ơn.

#6

If you are working with exotic package like sveltia and vercel, you should know how to do research with GOOGLE. Click HERE to learn more if your English is sufficient enough.

#7

There are two issues to consider:

  1. IT is not a frontend error but a backend error, specifically sveltia cms, not sveltekit. When deployed to vercel, the main page still works normally without syntax errors, but when accessing admin in sveltia cms, it cannot log in but shows api.netllify.com while it should redirect to github.
  2. The error here may be due to lack of oauth but I did not find anything related when searching google and sveltia cms is used as a substitute for netlify cms and decap cms.

I think we need to review this issue.

#8

Sorry…there’s nothing to consider. I’m starting to think that you’re a casual programmer who has neither studied computer science nor knows the basics. Reason: The 404 error means that something is missing - more precisely: 404 Not Found - and the error text is clear:

TypeError: Failed to fetch dynamically imported module: https://zsr.vercel.app/_app/immutable/entry/start.DtRM1Y6A.jsErroroauth:1…
Failed to load resource: the server responded with a status of 404 ()

“Failed to fetch” or “Failed to load” here simply means: NOT FOUND. You have to find out where and how to get the file mentioned. I don’t think anyone in this forum is looking for this file for you.

#9

The important thing is that what I need is to be able to log in to login and sveltia cms has nothing to do with sveltekit because it is configured in a separate folder. While the website content is in the src folder, sveltia cms is in the static folder. What I need is a file to display oauth and login to github with sveltia cms. Netlify has oauth support while vercel probably doesn’t or if it does, it needs a separate file. I know 404 means file not found, but what file is it specifically? On this forum, someone helped me remove two lines in the config.yml file and it fixed the 404 but it showed up as api.netlify.com, not login to github. While decap cms and sveltia cms or netlify cms also have the same login mechanism when configured with vercel, using oauth on github. Maybe you don’t understand what I said. In short, the 404 was fixed by support from a member on this forum but it caused another bug. You should see my code to understand the problem.

#10

I removed two lines in the config.yml file and it fixed the 404 but gave me the error that it’s not github’s oauth

backend:
base_url: https://zsr.vercel.app
auth_endpoint: oauth

#11

Mình vừa mới xem lại code github của bạn, có vẻ như bạn còn thiếu bước triển khai máy chủ backend để thực hiện việc xác thực.

Bạn xem kỹ lại hướng dẫn ở file: site/htdocs/oauth/README.md nhé.

Luồng của việc xác thực sau khi triển khai hoàn tất nó sẽ như này:

  • người dùng truy cập vào https://zsr.vercel.app/admin, và nhấn đăng nhập bằng github
  • trình duyệt sẽ chuyển hướng hoặc mở một cửa sổ mới đến trang xác thực của github
  • sau khi xác thực thành công, github sẽ gọi đến Authorization callback URL mà bạn đã đăng ký trước đó ở github app, thông tin mà github gọi đến callback url sẽ có mã ủy quyền tạm thời
  • phía máy chủ xác thực sẽ lấy mã ủy quyền tạm thời, cộng thêm thông tin về github app id và github app secret đăng ký trước đó, rồi gửi đến api https://github.com/login/oauth/access_token của github để lấy mã truy cập (access token)
  • từ access token đó, máy chủ xác thực có thể gọi các api khác của github để lấy thông tin của người dùng như user id, username, email, …
  • với nhưng thông tin người dùng trên, máy chủ xác thực tiến hành đăng nhập/đăng ký và kết thúc luồng
2 Likes
#12

Cảm ơn anh, em đã đọc phần readme của nó và em đã hiểu nguyên lý hoạt động mà anh mô tả nhưng em không thấy nó có cấu hình cho vercel và em cũng không biết làm thế nào để kết hợp với nó trong một repo anh ạ vì nó chỉ hỗ trợ netlify và Cloudflare.

Trên Cloudflare thì chỉ cần deploy lên là được nhưng trong netlify thì không cần vì nó đã hỗ trợ oauth rồi.

Còn trên vercel thì em không tìm thấy cách cấu hình oauth cho nó.

Em tạo oauth apps và thiết lập biến môi trường trên vercel rồi ạ. Nhưng em không biết thay đổi nó để chạy với vercel.

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?